/* ==========================================================================
   ESTILOS EXCLUSIVOS: CATEGORIA.HTML Y DETALLE_PRODUCTO.HTML
   ========================================================================== */

body.pagina-categoria { background-color: var(--bg-secondary); }

/* Fotos en catálogo (Se ve perfecto en compu) */
.pagina-categoria .product-image-container {
    height: 250px; 
    aspect-ratio: auto; 
    overflow: hidden;
}

.pagina-categoria .product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* Llena la tarjeta prolijamente */
}

/* --- CONTENEDOR PRINCIPAL DE CATALOGO / DETALLE --- */
.main-content-catalogo {
    margin-top: var(--header-height, 105px);
    padding-top: 1rem;
    max-width: 1400px;
    width: 100%; 
    padding-left: 15px; 
    padding-right: 15px; 
    box-sizing: border-box;
}

/* --- MIGAS DE PAN (Breadcrumbs) --- */
.breadcrumbs {
    font-size: 0.85rem; color: #9ca3af; margin-bottom: 1.5rem;
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap; 
}
.breadcrumbs a { color: #d1d5db; text-decoration: none; font-weight: 600; transition: color 0.2s;}
.breadcrumbs a:hover { color: var(--bg-btn-primary); }
.breadcrumbs .current { color: var(--bg-btn-primary); font-weight: 700; }

/* ==========================================================================
   [FASE 10 - BREADCRUMB FIX] Mismo problema de fondo que ya vimos en el
   panel de detalle: un nombre de producto sin espacios es un solo "token"
   larguísimo. .breadcrumbs ya tiene flex-wrap:wrap (por eso el resto de
   los segmentos bajan de línea bien), pero sin overflow-wrap:anywhere ese
   token puntual no puede partirse DENTRO de su propia línea, y se sale
   del contenedor — en celular eso arrastra scroll horizontal a toda la
   página. Con nombres normales (99% de los casos) no cambia nada.
   ========================================================================== */
.breadcrumbs a,
.breadcrumbs .current {
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* --- TÍTULO PRINCIPAL DE LA CATEGORÍA --- */
.category-header-title { margin-bottom: 1.5rem; border-bottom: 2px solid #374151; padding-bottom: 15px;}
.category-header-title h1 { 
    font-size: clamp(1.5rem, 4vw, 1.8rem); 
    font-weight: 900; 
    color: #ffffff; 
    margin-bottom: 5px; 
    text-transform: uppercase;
    overflow-wrap: break-word; 
    hyphens: auto; 
    line-height: 1.1; 
}
.category-header-title p { color: #9ca3af; font-size: 0.95rem; }


/* =========================================
   ACORDEÓN DEL SIDEBAR Y CONTENEDOR
   ========================================= */

.category-sidebar {
    background-color: #1f2937; 
    border-radius: var(--border-radius-lg, 12px);
    padding: 1.5rem; 
    box-shadow: var(--box-shadow-md);
    border: 1px solid #374151; 
}

.category-sidebar::-webkit-scrollbar { width: 5px; }
.category-sidebar::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }

.accordion-item { border-bottom: 1px solid #374151; }
.accordion-item:last-child { border-bottom: none; }

.accordion-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 15px 0; background: none; border: none; cursor: pointer;
    font-size: 1rem; font-weight: 800; color: #e5e7eb; transition: color 0.2s; text-transform: uppercase;
}

.accordion-btn:hover { color: var(--bg-btn-primary); }
.accordion-btn .arrow { width: 22px; height: 22px; fill: currentColor; transition: transform 0.3s ease; }

.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-content ul { padding: 0 0 15px 15px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px;}
.accordion-content a { color: #9ca3af; font-size: 0.9rem; text-decoration: none; font-weight: 500; transition: color 0.2s;}
.accordion-content a:hover { color: var(--bg-surface); }
.accordion-content a.active { color: var(--bg-btn-primary); font-weight: 700; }

.accordion-item.active .accordion-btn-arrow { color: var(--bg-btn-primary); }
.accordion-item.active .accordion-btn .arrow { transform: rotate(180deg); }
.accordion-item.active .accordion-content { max-height: 300px; }

/* Categoría actual activa */
.btn-categoria-actual {
    color: var(--bg-btn-primary) !important;
}


/* ==========================================================================
   FICHA DE PRODUCTO INDIVIDUAL (detalle_producto.html) - ALTO CONTRASTE
   ========================================================================== */

.product-detail-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(37, 137, 237, 0.15);
    border: 1px solid #288aec;
    color: #288aec;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* Panel de descripción con contraste absoluto */
.product-detail-info {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: var(--border-radius-md, 12px);
    padding: 1.8rem; 
    overflow-wrap: anywhere;
    color: #e5e7eb !important;
}

.product-detail-info .product-detail-nombre {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 3.5vw, 1.6rem); 
    font-weight: 900;
    color: #ffffff !important;
    margin-bottom: 1rem;
    /* [FASE 8 - REFUERZO TITULO] overflow-wrap:anywhere (a diferencia de
       break-word, que ya trae por reset.css) SÍ reduce el ancho mínimo
       intrínseco del texto. Esto evita que el propio h1 vuelva a inflar
       el min-content de sus contenedores (grid/flex) en el futuro. Con
       nombres normales no cambia nada visualmente. */
    overflow-wrap: anywhere;
    max-width: 100%;
}

.product-detail-info .product-detail-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #288aec !important;
    margin-bottom: 0.75rem;
}

.product-detail-info .product-detail-texto {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.7;
    color: #d1d5db !important;
    overflow-wrap: anywhere;
}

.product-detail-info label {
    color: #e5e7eb !important;
    font-weight: 600;
}

/* ==========================================================================
   [FASE 7 - DETALLE PRODUCTO FIX] Protección contra nombres extremos
   (texto larguísimo sin espacios, ej: 60+ "a" seguidas). Sin esto, un caso
   así empuja .product-detail-info más ancho que su columna y genera scroll
   horizontal en TODA la página, porque un hijo flex/grid no respeta por
   defecto el overflow-wrap si no se le permite encoger. min-width: 0 le
   devuelve esa libertad. Con nombres normales (99% de los casos reales)
   esto no cambia absolutamente nada visualmente.
   ========================================================================== */
.product-detail-info {
    min-width: 0;
}

/* ==========================================================================
   [FASE 8 - GRID ITEM FIX] La Fase 7 arregló el ítem flex interno
   (.product-detail-info), pero el problema real estaba una capa más
   arriba: .category-products es el grid item de la columna "1fr" de
   .category-layout (grid, ≥992px), y por default un grid item sin
   min-width:0 usa el min-content de su contenido más ancho para calcular
   su ancho mínimo. overflow-wrap:break-word NO reduce ese min-content
   (solo overflow-wrap:anywhere lo hace) — entonces un nombre de producto
   sin espacios inflaba directamente la columna entera del grid (y con
   ella, toda la página), en vez de cortar el texto. Por eso el fix de
   Fase 7, puesto una capa más adentro, no alcanzaba.
   Se usa el combinador ">" para apuntar solo al <section> real (el grid
   item), no al <div class="category-products"> duplicado que hay
   anidado adentro en detalle_producto.html.
   ========================================================================== */
.category-layout > .category-products {
    min-width: 0;
}

/* Red de seguridad final: pase lo que pase con un texto extremo en
   cualquier parte de esta página, nunca debe aparecer scroll horizontal
   de TODO el sitio. No afecta el scroll vertical normal. */
.pagina-detalle {
    overflow-x: hidden;
}


/* =========================================================================
   SISTEMA RESPONSIVO INTEGRAL (MÓVIL, TABLETS Y ESCRITORIO)
   ========================================================================= */

.mobile-only { display: none; }

/* -----------------------------------------------------------
   A. REGLAS PARA EL CATÁLOGO (Breakpoints)
----------------------------------------------------------- */

/* Tablets y pantallas medianas (de 666px a 991px) */
@media (max-width: 991.98px) {
    .mobile-only { display: flex; }

    .main-content-catalogo {
        margin-top: calc(var(--header-height, 105px) - 10px);
        padding-left: 12px;
        padding-right: 12px;
    }

    .category-layout {
        display: flex;
        flex-direction: column;
    }

    .category-products {
        order: 1;
        width: 100%;
    }

    .category-sidebar {
        order: 2;
        width: 100%;
        margin-top: 2.5rem;
    }

    /* En tablets el área es ancha (hasta 991px): 3 columnas para evitar tarjetas gigantes */
    .category-products .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
}

/* Celulares (de 665px hacia abajo) */
@media (max-width: 665px) {
    /* En celulares volvemos a 2 columnas para mantener la fluidez en el catálogo */
    .category-products .grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* SOLO para la página de catálogo (excluye detalle_producto.html) */
    .pagina-categoria:not(.pagina-detalle) .product-image-container {
        height: 180px; 
    }
}

/* Catálogo en Escritorio (>= 992px) */
@media (min-width: 992px) {
    .category-layout {
        display: grid;
        grid-template-columns: 260px 1fr; 
        gap: 35px;
        align-items: start;
    }

    .category-sidebar {
        order: initial;
        position: sticky;
        top: calc(var(--header-height, 105px) + 20px); 
        max-height: calc(100vh - var(--header-height, 105px) - 20px);
        overflow-y: auto; 
    }

    .category-products {
        order: initial;
    }

    .category-products .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }
}

/* -----------------------------------------------------------
   B. REGLAS PARA EL DETALLE DE PRODUCTO (Breakpoints en 1200px)
----------------------------------------------------------- */

/* Detalle apilado en Móvil, Tablets y Notebooks chicas (< 1200px) */
@media (max-width: 1199.98px) {
    .product-detail-layout {
        display: flex;
        flex-direction: column !important;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }

    .product-detail-layout > .product-card {
        width: 100%;
        max-width: 380px; 
        flex: none;
    }

    .product-detail-info {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
}

/* Ajustes de foto de tarjeta de producto SOLO para detalle_producto en celulares */
@media (max-width: 665px) {
    .pagina-detalle .product-card .product-image-container {
        height: 260px !important; /* Mantiene la proporción perfecta de la foto individual en la vista de detalle */
    }
}

/* Detalle Lado a Lado en Monitores Amplios (>= 1200px) */
@media (min-width: 1200px) {
    .product-detail-layout {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 2rem;
        /* [FASE 9 - TARJETA FIX] Antes era "stretch": la tarjeta (.product-card)
           se estiraba para igualar la altura de .product-detail-info. Con
           nombres/descripciones normales eso da un lindo efecto de columnas
           parejas, pero con un panel que se infla mucho (texto extremo,
           varias líneas) estira la tarjeta con él y .product-controls
           (precio, selector, botón) queda pegado muy abajo, con un hueco
           enorme en el medio (viene de components.css: .product-content
           tiene flex-grow:1 y .product-controls tiene margin-top:auto).
           Con "flex-start" la tarjeta conserva su alto natural, sin
           depender de lo que ocupe el panel de al lado. */
        align-items: flex-start;
    }

    .product-detail-layout > .product-card {
        flex: 0 0 340px;
        max-width: 340px;
    }

    .product-detail-info {
        flex: 1;
    }
}


/* ==========================================================================
   BUSCADOR AVANZADO (DISEÑO MODERNO OSCURO)
   ========================================================================== */
.advanced-search-container {
    margin-bottom: 2.5rem;
    position: relative;
    width: 100%;
    z-index: 100;
}

.advanced-search-box {
    display: flex;
    align-items: center;
    background-color: #1f2937; 
    border: 1px solid #374151;
    border-radius: 12px;
    padding: 12px 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.advanced-search-box:focus-within {
    border-color: #288aec;
    box-shadow: 0 0 0 4px rgba(40, 138, 236, 0.15);
    background-color: #273344;
}

.advanced-search-icon {
    width: 22px;
    height: 22px;
    fill: #9ca3af;
    margin-right: 14px;
    transition: fill 0.3s ease;
}

.advanced-search-box:focus-within .advanced-search-icon {
    fill: #288aec;
}

/* --- Buscador con solución para textos largos en celulares --- */
.advanced-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    color: #f3f4f6;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.advanced-search-input::placeholder {
    color: #6b7280;
}

@media (max-width: 768px) {
    .advanced-search-input {
        font-size: 0.85rem;
    }
}

.advanced-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background-color: #1f2937;
    border-radius: 12px;
    border: 1px solid #374151;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    animation: fadeInDropdown 0.2s ease-out forwards;
}

.advanced-search-results::-webkit-scrollbar {
    width: 6px;
}
.advanced-search-results::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 4px;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-result-item {
    text-decoration: none;
    color: #f3f4f6;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #374151;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-img {
    width: 48px; 
    height: 48px; 
    object-fit: cover; 
    border-radius: 8px;
    margin-right: 16px; 
    background-color: #111827;
    border: 1px solid #374151;
    flex-shrink: 0;
}

.search-result-info { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
}

.search-result-name { 
    font-weight: 600; 
    font-size: 0.95rem; 
    margin-bottom: 4px;
    color: #f9fafb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-price { 
    color: #288aec; 
    font-size: 0.95rem; 
    font-weight: 700; 
}

.search-no-results { 
    padding: 20px; 
    color: #9ca3af; 
    text-align: center; 
    font-size: 0.95rem; 
}

/* ==========================================================================
   ANIMACIÓN SUAVE AL APARECER PRODUCTOS NUEVOS
   ========================================================================== */
.product-card-fade-in {
    animation: smoothCardReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

@keyframes smoothCardReveal {
    0% { opacity: 0; transform: translateY(20px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}