/**
 * Barra de navegación inferior móvil (Fase 6, v2.5.0).
 *
 * Solo ≤768px. En escritorio no existe (display:none): la navegación sigue
 * siendo el navbar de Hada.
 *
 * @package Flavor_Starter
 * @since 2.5.0
 */

.flavor-tabbar {
    display: none;
}

@media (max-width: 768px) {

/* ==========================================================================
   1. La barra
   ========================================================================== */

.flavor-tabbar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Por encima de la UI corriente de Hada pero por DEBAJO de la barra de
       cookies (999998) y de los overlays modales: la tabbar es navegación de
       fondo, nunca debe taparle un diálogo al usuario. Las hojas de la Fase 5
       van en el top layer, así que la cubren sin depender de este número. */
    z-index: 9500;
    background: var(--bg-card, #111);
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    /* El área segura va aquí para que el fondo llegue al borde físico del
       dispositivo y solo el contenido se aparte del indicador de iOS. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Solo transform/opacity: nunca `bottom` ni `height`. */
    transform: translateY(0);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 160ms ease;
    will-change: transform;
}

.flavor-tabbar__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    max-width: 100%;
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
}

/* ==========================================================================
   2. Los ítems
   ========================================================================== */

.flavor-tabbar__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 56px de alto útil: por encima del objetivo táctil de 44. */
    min-height: 56px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease;
}

.flavor-tabbar__item svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
}

.flavor-tabbar__label {
    font-size: 11px;
    letter-spacing: .01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estado activo: el color de marca, no solo un gris más claro. */
.flavor-tabbar__item.is-current {
    color: var(--hik-primary, #e31937);
}

.flavor-tabbar__item:active {
    /* Respuesta táctil inmediata sin tocar layout. */
    transform: scale(0.94);
}

.flavor-tabbar__item:focus-visible {
    outline: 2px solid var(--hik-primary, #e31937);
    outline-offset: -3px;
    border-radius: 8px;
}

/* ==========================================================================
   3. Badge del carrito
   ========================================================================== */

.flavor-tabbar__badge {
    position: absolute;
    top: 4px;
    left: 50%;
    margin-left: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--hik-primary, #e31937);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-sizing: border-box;
}

.flavor-tabbar__badge[hidden] {
    display: none;
}

/* ==========================================================================
   4. Convivencia con la UI fija inferior de Hada
   --------------------------------------------------------------------------
   Decisión del usuario: cuando hay comparación activa la tabbar SE ESCONDE, en
   lugar de apilarse — dos barras de 87 y 56 px en el borde inferior dejarían
   media pantalla de cromo. Igual mientras la barra de cookies esté visible.
   Se anima con transform (nunca `bottom`), y `visibility` evita que los ítems
   sigan siendo enfocables con el teclado mientras está fuera de pantalla.
   Mejora progresiva: sin :has() la barra simplemente no se esconde.
   ========================================================================== */

body:has(.hik-compare-bar.visible) .flavor-tabbar,
body:has(.fenix-ckbar:not([hidden])) .flavor-tabbar,
/* Con el teclado virtual abierto la barra se monta sobre el campo (lo marca
   tabbar.js al enfocar un input de texto). */
.flavor-tabbar[data-typing] {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
}

/* El FAB del chat sube para no quedar tapado por la tabbar. Mismo idioma que
   fenix-chat §12 usa con la barra de comparación. */
body:has(.flavor-tabbar) .fchat-fab {
    bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom, 0px));
}

body:has(.flavor-tabbar) .fchat-panel {
    bottom: calc(1.5rem + 56px + 56px + .75rem + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   5. Espacio al final del documento
   --------------------------------------------------------------------------
   Sin esto la barra tapa el último elemento de cada página (el pie, el botón
   de "cargar más" del catálogo). Se aplica al body y no a cada plantilla para
   no depender de las 21 que traen su propio <head>.
   ========================================================================== */

body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   6. Modo claro
   --------------------------------------------------------------------------
   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 al respaldo (misma lección que la
   hoja inferior de la Fase 5).
   ========================================================================== */

html[data-color-mode="light"] .flavor-tabbar,
body[data-color-mode="light"] .flavor-tabbar {
    background: #fff;
    border-top-color: rgba(0, 0, 0, 0.1);
}

html[data-color-mode="light"] .flavor-tabbar__item,
body[data-color-mode="light"] .flavor-tabbar__item {
    color: rgba(0, 0, 0, 0.6);
}

html[data-color-mode="dark"] .flavor-tabbar,
body[data-color-mode="dark"] .flavor-tabbar {
    background: #111;
    border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-color-mode="dark"] .flavor-tabbar__item,
body[data-color-mode="dark"] .flavor-tabbar__item {
    color: rgba(255, 255, 255, 0.62);
}

@media (prefers-color-scheme: light) {
    html:not([data-color-mode="dark"]):not(:has(body[data-color-mode="dark"])) .flavor-tabbar {
        background: #fff;
        border-top-color: rgba(0, 0, 0, 0.1);
    }
    html:not([data-color-mode="dark"]):not(:has(body[data-color-mode="dark"])) .flavor-tabbar__item {
        color: rgba(0, 0, 0, 0.6);
    }
}

/* ==========================================================================
   7. Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .flavor-tabbar {
        transition: none;
    }
    .flavor-tabbar__item:active {
        transform: none;
    }
}

} /* fin @media (max-width: 768px) */