/**
 * Hoja inferior móvil (Fase 5, v2.4.0) — presentación del componente <dialog>.
 *
 * El comportamiento (foco, Escape, scroll-lock) lo aporta showModal() nativo;
 * aquí solo se pinta. Se carga DESPUÉS del CSS del plugin Hada (ver la cadena
 * de dependencias en inc/sheet.php) para poder neutralizar el posicionamiento
 * de los overlays del plugin sin usar !important.
 *
 * El tema no define tokens propios: todos los var() llevan respaldo duro.
 *
 * @package Flavor_Starter
 * @since 2.4.0
 */

/* ==========================================================================
   1. El diálogo: anclado abajo SIN usar bottom/top
   ========================================================================== */

dialog.flavor-sheet {
    /* Ocupa el viewport y empuja el panel al fondo con margen automático, en
       lugar de position:fixed + bottom:0 — así el top layer del navegador
       gestiona el apilamiento y no competimos con z-index de la página. */
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Cerrada NO ocupa sitio. El `display: flex` de arriba pisaba el
   `dialog:not([open]) { display: none }` del navegador: cada hoja cerrada
   quedaba al final del documento (844 px de alto en un teléfono) y, al tocar
   la lupa, el foco del campo arrastraba la página hasta allí. */
dialog.flavor-sheet:not([open]) {
    display: none;
}

dialog.flavor-sheet::backdrop {
    /* Sin backdrop-filter a propósito: desenfocar un DOM de ~1 MB (el catálogo
       tiene 2.085 productos) cuesta demasiado en Android de gama baja. */
    background: rgba(0, 0, 0, 0.6);
}

/* Scroll-lock del fondo.
   showModal() bloquea el scroll del documento de forma fiable en escritorio,
   pero en iOS Safari la página de detrás todavía hace rubber-band. Se usa
   :has() en lugar de una clase conmutada por JS para que no haya estado que
   limpiar: si el diálogo desaparece del DOM abierto, el bloqueo se va con él.
   El encadenamiento ya lo corta overscroll-behavior:none de app-shell.css §1.

   overflow:hidden y NO position:fixed en el body: fixed reinicia el scroll a 0
   y obligaría a guardar/restaurar scrollY — el clásico "cierro los filtros y
   aparezco arriba" en un catálogo de 2.085 productos. Aquí la hoja es solo
   móvil, donde las barras de scroll son superpuestas y no ocupan ancho, así
   que ocultarlas no reflowea nada (no hace falta scrollbar-gutter). */
html:has(dialog.flavor-sheet[open]) {
    overflow: hidden;
}

/* ==========================================================================
   2. El panel
   ========================================================================== */

.flavor-sheet__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* vh primero como respaldo; svh gana donde exista (en iOS, vh es el
       viewport grande y el panel quedaría bajo la barra de direcciones). */
    max-height: 88vh;
    max-height: 88svh;
    box-sizing: border-box;
    border-radius: 16px 16px 0 0;
    background: var(--bg-card, #16161f);
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    color: var(--text-primary, #fff);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    overflow: hidden;
}

/* Asa visual (afordancia de arrastre). No implementa gesto: es una señal de
   que la hoja se cierra hacia abajo; el cierre real es ✕ / Escape / backdrop. */
.flavor-sheet__grabber {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: var(--border-color, rgba(255, 255, 255, 0.25));
}

.flavor-sheet__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 1rem .75rem;
}

.flavor-sheet__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
}

.flavor-sheet__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px = objetivo táctil mínimo cómodo */
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.flavor-sheet__close:hover,
.flavor-sheet__close:focus-visible {
    background: var(--bg-hover, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #fff);
}

/* El único hijo que scrollea. `contain` (no `none`) para que el impulso pare
   en los bordes de la hoja sin propagarse a la página de detrás. */
.flavor-sheet__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   3. Convivencia con la UI fija inferior de Hada
   --------------------------------------------------------------------------
   showModal() sube la hoja al top layer, así que gana en pintura y deja lo
   demás inerte — pero la barra de cookies (z 999998, bottom:0, ~60-90 px) y la
   de comparación (z 9999) siguen ocupando físicamente la zona del pulgar justo
   bajo la fila de acciones. Se eleva esa fila con el mismo idioma que ya usa
   fenix-chat §12. Mejora progresiva: sin :has() queda como hoy.
   ========================================================================== */

.flavor-sheet__actions {
    flex: 0 0 auto;
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
    /* El área segura va SOLO aquí: el panel debe llegar al borde físico. */
    padding-bottom: calc(.75rem + var(--flavor-sheet-gap, 0px) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--bg-card, #16161f);
}

body:has(.fenix-ckbar:not([hidden])) {
    --flavor-sheet-gap: 5.5rem;
}

body:has(.hik-compare-bar.visible) {
    --flavor-sheet-gap: 6rem;
}

body:has(.fenix-ckbar:not([hidden])):has(.hik-compare-bar.visible) {
    --flavor-sheet-gap: 10rem;
}

/* ==========================================================================
   4. Adaptador B — buscador del navbar dentro de la hoja
   --------------------------------------------------------------------------
   El overlay del plugin es position:fixed; inset:0; z-index:9999 con
   padding-top:15vh. Dentro de la hoja debe ser contenido estático. Gana por
   orden de cascada (ver dependencias en inc/sheet.php), sin !important.
   ========================================================================== */

dialog.flavor-sheet .hada-search-overlay {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    width: 100%;
    height: auto;
    padding: 0 1rem 1rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

dialog.flavor-sheet .hada-search-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* El ✕ propio del overlay sobra: la hoja ya tiene el suyo en la cabecera. */
dialog.flavor-sheet .hada-search-close {
    display: none;
}

/* ==========================================================================
   4b. Hoja SUPERIOR (buscador)
   --------------------------------------------------------------------------
   Como hoja inferior, el campo quedaba pegado al borde de abajo y al abrirse
   el teclado el navegador empujaba la vista hasta el fondo para mostrarlo.
   Arriba el campo está donde se espera un buscador y el teclado no lo tapa.
   sheet.js pone .flavor-sheet--top con adopt(el, { position: 'top' }).
   ========================================================================== */

dialog.flavor-sheet.flavor-sheet--top {
    justify-content: flex-start;
}

dialog.flavor-sheet--top .flavor-sheet__panel {
    padding-top: env(safe-area-inset-top, 0px);
    border-top: 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* El asa pasa al borde inferior: esta hoja se cierra hacia arriba. */
dialog.flavor-sheet--top .flavor-sheet__grabber {
    order: 3;
    margin: 2px auto 10px;
}

dialog.flavor-sheet--top .flavor-sheet__head {
    padding-top: .75rem;
}

/* ==========================================================================
   5. Adaptador A — filtros del catálogo dentro de la hoja
   ========================================================================== */

dialog.flavor-sheet .hik-sidebar-content {
    /* El plugin le da caja de tarjeta (borde + radio + padding); dentro de la
       hoja el panel ya es la caja. */
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0 1rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

/* La cabecera "Filtros ✕" del plugin la sustituye la de la hoja. */
dialog.flavor-sheet .hik-sidebar-header {
    display: none;
}

/* Tipografía de los filtros DENTRO de la hoja (v2.4.1).
   El panel del plugin está dimensionado para la columna de escritorio: 14 px en
   las categorías, 12 px en los contadores y filas de 33 px, que en la mano se
   leen y se aciertan mal. Aquí se suben solo dentro del diálogo —el escritorio
   no se toca— y de paso las filas llegan al objetivo táctil de ~44 px.
   Todo en rem/px sobre el propio texto: no se altera ningún layout del plugin. */

dialog.flavor-sheet .hik-cat-toggle {
    font-size: 1.0625rem;
    /* El plugin lo pinta en gris tenue (#888) con peso 400: cumple AA por poco
       (5.33) pero al lado del título (18.88) se lee apagado, y un texto de bajo
       contraste se PERCIBE más pequeño de lo que es. En la hoja se sube el peso
       y se aclara al color de texto principal. */
    font-weight: 500;
    color: var(--text-primary, #fff);
    padding-top: .6875rem;
    padding-bottom: .6875rem;
    line-height: 1.35;
}

dialog.flavor-sheet .hik-cat-count {
    font-size: .9375rem;
    /* El contador es secundario: se mantiene atenuado pero legible. */
    color: rgba(255, 255, 255, 0.65);
}

dialog.flavor-sheet[data-color-mode="light"] .hik-cat-toggle {
    color: #1d1d1f;
}

dialog.flavor-sheet[data-color-mode="light"] .hik-cat-count {
    color: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: light) {
    dialog.flavor-sheet:not([data-color-mode]) .hik-cat-toggle {
        color: #1d1d1f;
    }
    dialog.flavor-sheet:not([data-color-mode]) .hik-cat-count {
        color: rgba(0, 0, 0, 0.6);
    }
}

dialog.flavor-sheet .hik-tech-pill {
    font-size: 1rem;
    padding: .625rem 1.0625rem;
}

dialog.flavor-sheet .hik-filter-group h3,
dialog.flavor-sheet .hik-filter-group h4,
dialog.flavor-sheet .hik-filter-title {
    font-size: 1.0625rem;
    font-weight: 700;
}

dialog.flavor-sheet .hik-filter-count {
    font-size: .875rem;
}

/* Casillas más grandes: 16 px es el mínimo de sistema y en el pulgar se falla. */
dialog.flavor-sheet .hik-sidebar-content input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

/* Subcategorías y cualquier texto de lista que herede tamaños de escritorio. */
dialog.flavor-sheet .hik-subcat-item,
dialog.flavor-sheet .hik-subcat-label,
dialog.flavor-sheet .hik-filter-availability label,
dialog.flavor-sheet .hik-filter-specials label {
    font-size: 1rem;
    line-height: 1.45;
}

/* ==========================================================================
   6. Adaptador C — confirmación de cotización dentro de la hoja
   ========================================================================== */

dialog.flavor-sheet .fenix-qm-overlay {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
}

dialog.flavor-sheet .fenix-qm-modal {
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

dialog.flavor-sheet .fenix-qm-close {
    display: none;
}

/* ==========================================================================
   7. Modo claro / oscuro
   --------------------------------------------------------------------------
   El estado se lee del atributo data-color-mode que sheet.js copia AL PROPIO
   <dialog>, no de html/body. Motivo: el diálogo se promueve al top layer y allí
   los selectores que cuelgan de un ancestro no aplican de forma fiable a su
   contenido — comprobado en producción, donde ni un !important con
   especificidad alta lograba cambiar el color desde una regla ancestral.

   Colores literales, NO var(--bg-card): el plugin fija --bg-card a #111111 y no
   lo varía por modo, así que el token ganaría siempre al respaldo.
   ========================================================================== */

dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__panel,
dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__actions {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #1d1d1f;
}

dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__title {
    color: #1d1d1f;
}

dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__close {
    color: rgba(0, 0, 0, 0.55);
}

dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__close:hover,
dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    color: #1d1d1f;
}

dialog.flavor-sheet[data-color-mode="light"] .flavor-sheet__grabber {
    background: rgba(0, 0, 0, 0.2);
}

dialog.flavor-sheet[data-color-mode="light"]::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

/* Modo automático: sin atributo explícito manda la preferencia del sistema. */
@media (prefers-color-scheme: light) {
    dialog.flavor-sheet:not([data-color-mode]) .flavor-sheet__panel,
    dialog.flavor-sheet:not([data-color-mode]) .flavor-sheet__actions {
        background: #fff;
        border-color: rgba(0, 0, 0, 0.1);
        color: #1d1d1f;
    }
    dialog.flavor-sheet:not([data-color-mode]) .flavor-sheet__title {
        color: #1d1d1f;
    }
    dialog.flavor-sheet:not([data-color-mode]) .flavor-sheet__close {
        color: rgba(0, 0, 0, 0.55);
    }
    dialog.flavor-sheet:not([data-color-mode]) .flavor-sheet__grabber {
        background: rgba(0, 0, 0, 0.2);
    }
    dialog.flavor-sheet:not([data-color-mode])::backdrop {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* El toggle manual a oscuro debe ganar también sobre prefers-color-scheme. */
dialog.flavor-sheet[data-color-mode="dark"] .flavor-sheet__panel,
dialog.flavor-sheet[data-color-mode="dark"] .flavor-sheet__actions {
    background: #111;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

dialog.flavor-sheet[data-color-mode="dark"] .flavor-sheet__title {
    color: #fff;
}

dialog.flavor-sheet[data-color-mode="dark"] .flavor-sheet__grabber {
    background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   8. Movimiento — solo transform y opacity
   ========================================================================== */

@supports (transform: translateY(0)) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes flavor-sheet-in {
            from { transform: translateY(100%); }
            to   { transform: translateY(0); }
        }
        @keyframes flavor-sheet-out {
            from { transform: translateY(0); }
            to   { transform: translateY(100%); }
        }
        @keyframes flavor-sheet-fade-in {
            from { opacity: 0; }
            to   { opacity: 1; }
        }
        @keyframes flavor-sheet-fade-out {
            from { opacity: 1; }
            to   { opacity: 0; }
        }

        dialog.flavor-sheet[open] .flavor-sheet__panel {
            animation: flavor-sheet-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }
        dialog.flavor-sheet[open]::backdrop {
            animation: flavor-sheet-fade-in 200ms ease-out both;
        }

        /* Una animación con scope [open] no puede reproducirse al salir: el JS
           marca .is-closing y espera animationend (con setTimeout de respaldo). */
        dialog.flavor-sheet.is-closing .flavor-sheet__panel {
            animation: flavor-sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
        }
        dialog.flavor-sheet.is-closing::backdrop {
            animation: flavor-sheet-fade-out 200ms ease-in both;
        }

        /* Hoja superior (§4b): mismas duraciones, entra y sale por arriba.
           Solo cambia el nombre; el resto lo heredan las reglas de arriba. */
        @keyframes flavor-sheet-in-top {
            from { transform: translateY(-100%); }
            to   { transform: translateY(0); }
        }
        @keyframes flavor-sheet-out-top {
            from { transform: translateY(0); }
            to   { transform: translateY(-100%); }
        }

        dialog.flavor-sheet.flavor-sheet--top[open] .flavor-sheet__panel {
            animation-name: flavor-sheet-in-top;
        }
        dialog.flavor-sheet.flavor-sheet--top.is-closing .flavor-sheet__panel {
            animation-name: flavor-sheet-out-top;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog.flavor-sheet .flavor-sheet__panel,
    dialog.flavor-sheet.is-closing .flavor-sheet__panel,
    dialog.flavor-sheet::backdrop,
    dialog.flavor-sheet.is-closing::backdrop {
        animation: none;
    }
}

/* ==========================================================================
   9. Escritorio: la hoja no existe
   --------------------------------------------------------------------------
   El JS solo adopta bajo 768px, pero esto es el cinturón de seguridad: si un
   redimensionado dejara un diálogo abierto, nunca podría pintar sobre la
   columna sticky del catálogo.
   ========================================================================== */

@media (min-width: 769px) {
    dialog.flavor-sheet {
        display: none;
    }
}

/* Neutraliza el drawer lateral del plugin mientras sus filtros viven en la
   hoja. El atributo lo pone el JS, así que esto es inerte si el JS no corre. */
@media (max-width: 768px) {
    .hik-sidebar[data-flavor-sheet-adopted] {
        display: none;
    }
}