/* ============================================
   BREADCRUMB - STANDALONE STYLES
   ============================================
   
   Estilos específicos para el shortcode [breadcrumb]
   Diseño responsive con Poppins semi-bold 14px
   
   ============================================ */

/* ============================================
   1. CONTENEDOR PRINCIPAL
   ============================================ */

.solvet-breadcrumb {
    padding: 15px 0;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600; /* Semi-bold */
    line-height: 1.4;
    color: rgb(0, 0, 0);
    background: transparent;
    width: 100%;
    display: block;
}

/* ============================================
   2. ENLACES NAVEGABLES
   ============================================ */

.solvet-breadcrumb a {
    color: #666;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600; /* Semi-bold */
    transition: all 0.3s ease;
    position: relative;
    padding: 2px 4px;
    border-radius: 3px;
}

.solvet-breadcrumb a:hover {
    color: #62c608;
    text-decoration: none;
    background-color: rgba(98, 198, 8, 0.1);
    transform: translateY(-1px);
}

.solvet-breadcrumb a:focus {
    outline: 2px solid #62c608;
    outline-offset: 2px;
    color: #62c608;
}

/* ============================================
   3. SEPARADORES
   ============================================ */

.breadcrumb-separator {
    color: #ccc;
    margin: 0 8px;
    font-weight: 400;
    user-select: none;
}

/* ============================================
   4. ELEMENTO ACTUAL (NO CLICKEABLE)
   ============================================ */

.breadcrumb-current {
    color: rgb(0, 0, 0);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600; /* Semi-bold */
    background: none;
}

/* ============================================
   5. ENLACE DE INICIO ESPECIAL
   ============================================ */

.breadcrumb-home {
    color: #62c608 !important;
    font-weight: 600 !important;
}

.breadcrumb-home:hover {
    color: #4fa006 !important;
    background-color: rgba(98, 198, 8, 0.15) !important;
}

/* ============================================
   6. MICRODATA SCHEMA (SEO)
   ============================================ */

.solvet-breadcrumb[itemscope] {
    /* Schema.org structured data container */
}

.solvet-breadcrumb [itemprop="itemListElement"] {
    display: inline;
}

.solvet-breadcrumb [itemprop="name"] {
    /* Elemento de nombre para SEO */
}

.solvet-breadcrumb [itemprop="item"] {
    /* Elemento de item para SEO */
}

/* ============================================
   7. DISEÑO RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .solvet-breadcrumb {
        font-size: 12px;
        padding: 12px 0;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .solvet-breadcrumb a {
        font-size: 12px;
        padding: 1px 3px;
    }
    
    .breadcrumb-separator {
        margin: 0 6px;
        font-size: 12px;
    }
    
    .breadcrumb-current {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .solvet-breadcrumb {
        font-size: 12px;
        padding: 10px 0;
        margin-bottom: 12px;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    .solvet-breadcrumb::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .solvet-breadcrumb a {
        font-size: 12px;
        padding: 1px 2px;
    }
    
    .breadcrumb-separator {
        margin: 0 4px;
        font-size: 11px;
    }
    
    .breadcrumb-current {
        font-size: 12px;
    }
}

/* ============================================
   8. ACCESIBILIDAD
   ============================================ */

/* Focus mejorado para navegación por teclado */
.solvet-breadcrumb a:focus-visible {
    outline: 2px solid #62c608;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(98, 198, 8, 0.2);
    border-radius: 3px;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .solvet-breadcrumb a {
        transition: none;
    }
    
    .solvet-breadcrumb a:hover {
        transform: none;
    }
}

/* Modo de alto contraste */
@media (prefers-contrast: high) {
    .solvet-breadcrumb {
        border-bottom-color: #000;
    }
    
    .solvet-breadcrumb a {
        color: #000;
    }
    
    .solvet-breadcrumb a:hover {
        background-color: #000;
        color: #fff;
    }
    
    .breadcrumb-separator {
        color: #000;
    }
}

/* ============================================
   9. ESTADOS ESPECIALES
   ============================================ */

/* Loading state (opcional) */
.solvet-breadcrumb.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Error state (opcional) */
.solvet-breadcrumb.error {
    border-bottom-color: #e53e3e;
    color: #e53e3e;
}

/* ============================================
   FIN DEL ARCHIVO
   ============================================ */

/**
 * BREADCRUMB CSS - CARACTERÍSTICAS
 * =================================
 * 
 * ESPECIFICACIONES IMPLEMENTADAS:
 * - Fuente: Poppins semi-bold 14px
 * - Color: rgb(0,0,0) para texto actual
 * - Enlaces navegables con hover effects
 * - Diseño responsive (768px, 480px)
 * - SEO-friendly con microdata
 * - Accesibilidad completa
 * - Compatible con screen readers
 * 
 * BREAKPOINTS:
 * - Desktop: 14px
 * - Tablet (768px): 13px
 * - Mobile (480px): 12px + scroll horizontal
 * 
 * COMPATIBLE CON:
 * - WordPress 6.0+
 * - WooCommerce 8.0+
 * - Divi 4.0+
 * - WCAG 2.1 AA
 */