/**
 * GX ONE - Navigation Styles
 * Estilos para navegación visual 2 ejes
 */

/* === BADGE DEL MÁSTER ACTUAL === */
/* Wrapper del logo para posicionar el badge debajo */
.logo-wrapper {
    position: relative;
    display: inline-block;
}

/* Badge debajo del logo - OCULTO: el placeholder del input ya indica sobre qué preguntar */
.master-badge,
#master-badge {
    display: none !important;
}

.master-badge {
    position: absolute;
    top: 100%; /* Debajo del logo */
    left: 0;
    right: 0;
    width: 100%; /* Mismo ancho que el logo */
    margin-top: 4px; /* Separación entre logo y badge */
    background-color: #2563eb;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: auto;
    box-sizing: border-box;
}

/* Asegurar que el logo tenga posición relativa para que el badge se posicione arriba */
#gx-logo {
    position: relative;
}

.master-badge:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.master-badge:active {
    transform: scale(0.98);
}

/* === LOGO ADAPTATIVO === */
.gx-logo-footer.logo-pulse {
    animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

.gx-logo-footer.logo-agent-active {
    animation: logoActivity 0.5s ease-in-out;
}

@keyframes logoActivity {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

        /* ✅ MenuModule: Bloque independiente - NO afecta InputModuleStable */
        /* El offset vertical se maneja en FooterStack con transform */
        /* PROHIBIDO: Cambiar cualquier estilo de #chatInputContainer desde aquí */

        /* === EXPANSIÓN DEL FOOTER EN MODO NAVEGACIÓN === */
        /* Cuando menu-visible: expandir input hacia arriba y mostrar menús debajo (como antes) */
        /* Solo forzar compacto cuando NO hay menú master visible:
           height: auto permite que #footerControls se apoye exactamente sobre el mismo
           padding-bottom de #chatInputContainer (1045px) que cuando está en footer-expanded,
           sin que el input baje un solo píxel al colapsar las sugerencias */
        #chatInputContainer.footer-collapsed:not(.menu-visible),
        #chatInputContainer.navigation-active:not(.footer-expanded):not(.menu-visible) {
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            padding-bottom: 14px !important;
        }
        #footerStack:not(.menu-visible) {
            padding-bottom: 8px !important;
        }
        /* ✅ Cuando menu-visible: solo añadir altura del menú, NO expandir el input de texto (mantener collapsed) */
        #chatInputContainer.navigation-active.menu-visible:not(.footer-expanded) {
            height: calc(var(--footer-h-collapsed) + var(--footer-pad-y) * 3 + var(--menu-height-reserved, 80px)) !important;
            min-height: calc(var(--footer-h-collapsed) + var(--footer-pad-y) * 3 + var(--menu-height-reserved, 80px)) !important;
        }
        
        /* ✅ CRÍTICO: Cuando navigation-active Y footer-expanded (diálogo visible), mantener altura limitada */
        /* El marco del diálogo debe tener el mismo límite que cuando el menú está oculto */
        #chatInputContainer.navigation-active.footer-expanded {
            height: auto !important;
            min-height: calc(var(--footer-h-collapsed) + var(--footer-pad-y) * 3 + var(--menu-height-reserved, 80px));
            max-height: min(92vh, calc((40vh - 100px) + 34vh + var(--menu-height-reserved, 80px) + (var(--footer-pad-y) * 6))) !important;
            overflow: visible !important;
        }

        /* footer-inner compacto solo cuando menú NO visible: height: auto + justify-content: flex-end
           Y cuando #attachBottomSheet está abierto adentro de un footer colapsado, posicionarlo en
           absolute encima del input con width: 240px fijo para que jamás empuje #footerControls hacia abajo */
        #chatInputContainer.footer-collapsed:not(.menu-visible) .footer-inner,
        #chatInputContainer.navigation-active:not(.footer-expanded):not(.menu-visible) .footer-inner {
            height: auto !important;
            min-height: 0 !important;
            justify-content: flex-end !important;
        }
        #chatInputContainer #attachBottomSheet.attach-popover-chatgpt {
            position: absolute !important;
            left: 16px !important;
            bottom: calc(100% - 8px) !important;
            top: auto !important;
            width: 240px !important;
            height: auto !important;
            overflow: visible !important;
            z-index: 200 !important;
        }
        #chatInputContainer #attachBottomSheet.attach-popover-chatgpt .attach-popover-content {
            position: relative !important;
            left: 0 !important;
            bottom: 0 !important;
            top: 0 !important;
            width: 240px !important;
            max-width: 240px !important;
            transform: none !important;
        }
        
        /* ✅ CRÍTICO: Cuando navigation-active Y footer-expanded, footer-inner debe mantener altura limitada */
        /* El marco del diálogo NO debe crecer más cuando el menú está visible */
        #chatInputContainer.navigation-active.footer-expanded .footer-inner {
            height: auto !important;
            min-height: 0;
            display: flex !important;
            flex-direction: column;
            justify-content: flex-start;
            gap: 8px;
            overflow: visible !important;
        }

        /* ✅ CRÍTICO: Asegurar que el input siempre esté visible cuando hay navegación activa */
        #chatInputContainer.navigation-active .input-row,
        #chatInputContainer.navigation-active #footerControls {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: auto !important;
            flex-shrink: 0 !important;
            position: relative !important;
            z-index: 100 !important; /* Por encima de todo */
        }

/* === BARRA DE NAVEGACIÓN ADAPTATIVA === */
/* VISION_UI_REDISENO: Masters ocultos por defecto. "Expandir menú master" (en el +) los muestra. */
/* ✅ Override: cuando menu-visible está en el contenedor, mostrar la barra (ambos verticales) */
#chatInputContainer.menu-visible #navigation-bar,
#chatInputContainer.navigation-active.menu-visible #navigation-bar {
    display: flex !important;
}

#navigation-bar,
#navigation-bar[style*="display: flex"],
#navigation-bar[style*="display:flex"],
.navigation-bar {
    display: none !important; /* Oculto por defecto - se muestra con "Expandir menú master" */
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    /* Sin recuadro propio: usar únicamente el fondo general del footer/input */
    background: transparent !important;
    backdrop-filter: none !important;
    border-top: none !important;
    margin-top: 4px;
    min-height: 50px;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 40;
    order: 2;
    position: relative; /* Asegurar que respete el flujo normal del documento */
    /* ✅ Variable CSS para altura del menú (usada por FooterStack para padding-bottom) */
    --menu-height: 80px; /* Altura aproximada del menú */
}

/* VISION_UI_REDISENO: No forzar flex - masters permanecen ocultos */

.navigation-bar[data-mode="masters"] {
    justify-content: center;
    flex-wrap: wrap;
    min-height: 70px;
    padding: 10px 12px;
    row-gap: 8px;
    background: transparent !important;
    backdrop-filter: none !important;
    border-top: none !important;
    /* ✅ Actualizar altura del menú para offset */
    --menu-height: 80px;
}

.navigation-bar[data-mode="depths"] {
    justify-content: flex-start;
    padding-left: calc(2.5% + 300px);
    padding-right: calc(2.5% + 20px);
    background: transparent !important;
    backdrop-filter: none !important;
    border-top: none !important;
    /* ✅ Actualizar altura del menú para offset */
    --menu-height: 60px;
}

/* Botones de máster */
.nav-master-btn {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.25);
    border: 2px solid #1f2937 !important; /* ✅ Todos los botones master usan gris como Company & Vision */
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    flex-shrink: 0;
    display: inline-block;
    visibility: visible;
    opacity: 1;
    max-width: 180px;
    text-align: center;
    line-height: 1.3;
}

.nav-master-btn:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: #1f2937 !important; /* ✅ Mantener borde gris en hover */
    transform: translateY(-2px);
}

.nav-master-btn:active {
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.45);
    border-color: #1f2937 !important; /* ✅ Mantener borde gris en active */
}

.nav-master-btn.nav-master-active {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 600;
}

/* Botones de profundidad */
.nav-depth-btn {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Permitir que texto largo (ej. "Características principales") haga wrap dentro del botón */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0; /* Permite que flex respete max-width */
    max-width: 180px;
    min-height: 36px;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.3;
}

/* Botón Menu: mismo ancho que el badge/logo (~250px) */
.nav-depth-btn-menu {
    min-width: 250px;
    width: 250px;
    max-width: 250px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}

.nav-depth-btn.nav-depth-visible {
    display: inline-block;
}

.nav-depth-btn:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
}

.nav-depth-btn.nav-depth-active {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.nav-depth-btn:active {
    transform: scale(0.95);
}

/* Scroll horizontal para barra de profundidad */
.navigation-bar[data-mode="depths"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.navigation-bar[data-mode="depths"]::-webkit-scrollbar {
    height: 4px;
}

.navigation-bar[data-mode="depths"]::-webkit-scrollbar-track {
    background: transparent;
}

.navigation-bar[data-mode="depths"]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.navigation-bar[data-mode="depths"]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* === FLECHAS LATERALES (DESKTOP) - Rectangulares verticales en los extremos === */
.nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 140px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    color: white;
    font-size: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.5;
    backdrop-filter: blur(10px);
}

.nav-arrow:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-50%) scale(1.05);
}

.nav-arrow:active {
    transform: translateY(-50%) scale(0.98);
}

.nav-arrow-left {
    left: 12px;
}

.nav-arrow-right {
    right: 12px;
}

/* Indicador vertical de assets debajo de flecha derecha.
   Estilo "líneas" (2026-07-10): rayitas horizontales apiladas, la activa más
   larga y sólida. --gx-line-gap la ajusta desktop_navigation.js según la
   cantidad de piezas para que la columna nunca supere una altura máxima. */
.nav-arrow-dots {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gx-line-gap, 7px);
    z-index: 998;
    pointer-events: none;
}

.nav-arrow-dots-right {
    right: 24px;
    top: calc(50% + 86px);
}

.nav-arrow-dot {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.25s ease, background 0.25s ease;
}

.nav-arrow-dot-active {
    width: 24px;
    background: rgba(255, 255, 255, 0.98);
}

/* Menú transitorio en profundidad (depth_nav_menu.js): reusa el layout del
   subnav de categorías y respira junto con el input de abajo (mismo idle). */
.gx-depth-nav {
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}
.gx-depth-nav.gx-depth-nav-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}
.gx-depth-nav .gx-landing-nav-links-scroll {
    max-width: 78vw;
}
@media (max-width: 680px) {
    .gx-depth-nav { display: none !important; }
}

/* === Menú superior: layout 3 zonas (logo home | menú | LIVE) ===
   El botón LIVE/CTA vive en .gx-landing-nav-right, FUERA del carril scrolleable
   (.gx-landing-nav-links-scroll), así queda siempre visible a la derecha.
   Markup en landing_screen.js y depth_nav_menu.js. Reglas aquí (archivo no
   congelado) que complementan/pisan las de index.html por orden de carga. */
.gx-landing-nav-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: 6px;
    pointer-events: auto;
}

/* Móvil vertical (≤680px) y teléfono horizontal (pantalla baja): 3 zonas reales.
   Grid: col 1 reserva el espacio del logo home fijo, col 2 centra el menú,
   col 3 ancla el LIVE a la derecha. El backdrop es absolute y no ocupa celda. */
@media (max-width: 680px), (max-height: 500px) and (orientation: landscape) {
    .gx-landing-nav,
    .gx-category-subnav {
        display: grid !important;
        grid-template-columns: minmax(96px, max-content) minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 6px;
        padding: 10px 12px;
    }
    /* Espaciador col 1: mismo ancho máximo que el logo home compacto */
    .gx-landing-nav .gx-landing-nav-spacer,
    .gx-category-subnav .gx-landing-nav-spacer {
        width: min(36vw, 170px);
    }
    .gx-landing-nav-links {
        justify-content: center;
        min-width: 0;
    }
    .gx-landing-nav-links-scroll {
        max-width: 100%;
        justify-content: center;
        /* "safe": si el contenido desborda, alinear al inicio para poder scrollear */
        justify-content: safe center;
    }
    /* Modo reel 621–680px: index.html oculta todos los links a ≤680 pero solo
       muestra los adyacentes a ≤620; cubrir el hueco intermedio. */
    .gx-reel-nav .gx-landing-nav-link.gx-nav-adj { display: inline-block; }
    /* LIVE compacto pero siempre visible */
    .gx-landing-nav-right .gx-landing-live-nav,
    .gx-landing-nav-right .gx-landing-cta-nav {
        padding: 6px 10px;
        font-size: 11px;
    }
    /* Logo home fijo: versión compacta para que no pise el menú central */
    #gx-home-logo {
        padding: 10px 10px;
        gap: 7px;
        max-width: 36vw;
    }
    #gx-home-logo-img { width: 26px; height: 26px; }
    #gx-home-logo-name {
        font-size: 11px;
        max-width: calc(36vw - 44px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #gx-home-logo-badge { font-size: 8px; padding: 2px 7px; }
}

/* Teléfono horizontal: mismo comportamiento que el móvil vertical del modo reel
   (index.html:1260 solo cubre ≤620px de ancho): el centro muestra solo
   anterior · actual · siguiente, y el resto de links se oculta. */
@media (max-height: 500px) and (orientation: landscape) {
    .gx-reel-nav .gx-landing-nav-link { display: none; }
    .gx-reel-nav .gx-landing-nav-link.gx-nav-adj { display: inline-block; }
    /* El menú de profundidad sí entra en horizontal: dejar que scrollee en su zona */
    .gx-depth-nav .gx-landing-nav-links-scroll {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Móvil VERTICAL (decisión usuario 2026-07-15): en el centro UN solo botón —
   la sección actual, que va cambiando con el scroll. En la portada (sin sección
   activa) el centro muestra el CTA "Talk to …". En horizontal no aplica: sigue
   anterior · actual · siguiente. Va DESPUÉS de las reglas de arriba para ganar
   la cascada a los display de .gx-nav-adj. */
@media (max-width: 680px) and (orientation: portrait) {
    .gx-reel-nav .gx-landing-nav-link.gx-nav-adj { display: none; }
    .gx-reel-nav .gx-landing-nav-link.gx-landing-nav-active { display: inline-block; }
    /* Con una sección activa, el CTA central se oculta (solo queda la sección) */
    .gx-reel-nav .gx-landing-nav-links-scroll:has(.gx-landing-nav-active) .gx-landing-talk-nav {
        display: none;
    }
    /* Menú de profundidad (dentro de una sección): mismo patrón — el centro
       muestra SOLO la sección actual. index.html:1888 oculta todos los links del
       subnav en móvil; esta regla (mayor especificidad) rescata el activo para
       que la barra lea "dónde estoy": Home | Sección | LIVE. */
    .gx-depth-nav .gx-landing-nav-links .gx-landing-nav-link.gx-landing-nav-active {
        display: inline-block;
    }
    /* Chip central más grande (pedido usuario 2026-07-16): tamaño de referencia =
       el de la sección con nombre entero más largo ("The Polo Room"). Solo en
       vertical; en horizontal sigue anterior · actual · siguiente como siempre.
       El ancho mínimo también lo mantiene estable al cambiar de sección corta a
       larga, siempre centrado entre el home y el LIVE (grilla de 3 zonas). */
    .gx-reel-nav .gx-landing-nav-link.gx-landing-nav-active,
    .gx-depth-nav .gx-landing-nav-links .gx-landing-nav-link.gx-landing-nav-active,
    .gx-category-subnav .gx-landing-nav-links .gx-landing-nav-link.gx-landing-nav-active {
        font-size: 15px;
        padding: 8px 18px;
        min-width: 124px;
        text-align: center;
        /* Píldora garantizada en cualquier estado (el link base trae radius 8px) */
        border-radius: 999px !important;
        border: none !important;
        outline: none !important;
    }
}

/* === Badge de rol bajo el logo del footer (decisión usuario 2026-07-15) ===
   "Fan" (el estado sin loguear) no aporta nada y hace más alta la fila del
   input: solo se muestra el badge cuando hay sesión con rol real (Admin /
   Creador). El JS que lo puebla vive en index.html congelado → se resuelve
   por CSS. "Invitado" (outreach) usa la misma clase y también se oculta. */
.agent-role-badge.role-fan { display: none !important; }

/* === Barra del Live: "estás acá" (decisión usuario 2026-07-15) ===
   Dentro del Live el indicador ● LIVE era texto suelto empujado a la derecha
   (index.html:1124-1134) — idéntico de posición al BOTÓN LIVE de las demás
   pantallas, así que parecía que todavía había que entrar. Ahora es un chip
   rojo sólido (versión "activa" del mismo botón) y va CENTRADO, como el nombre
   de sección en las otras barras: el centro siempre dice dónde estás. */
.gx-live-bar { position: relative; }
.gx-live-bar .gx-live-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
    padding: 7px 16px;
    border-radius: 999px;
    background: #dc2626;
    font-size: 13px;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
}
.gx-live-bar .gx-live-title .gx-live-dot {
    width: 7px;
    height: 7px;
    background: #fff;
}
/* El título ya no ocupa lugar en el flex: el botón de mosaico ancla a la derecha */
.gx-live-bar .gx-live-grid-btn { margin-left: auto; }
/* Móvil (FIX 2026-09-11, reporte dueño: «el cartel de Novedades queda encimado
   sobre Nacho Figueras en vertical»): el chip centrado absoluto pisaba el nombre
   con etiquetas anchas («Novedades» ~115px en 360-390px de viewport). En angosto
   el chip DEJA el centro y se distribuye en la fila flex entre el nombre del home
   y el botón de mosaico — el flex garantiza que nunca se pisen y el nombre corta
   con ellipsis. En pantallas anchas sigue el chip centrado de siempre. */
@media (max-width: 680px) {
    .gx-live-home { min-width: 0; }
    .gx-live-home-text { min-width: 0; }
    .gx-live-home-name {
        max-width: 34vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .gx-live-bar .gx-live-title {
        position: static;
        transform: none;
        margin-left: auto;
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 12px;
    }
    /* El gap del flex (10px) separa chip y mosaico; sin auto porque ahora ancla el chip. */
    .gx-live-bar .gx-live-grid-btn { margin-left: 0; }
}

/* Depth dots de subnav (sub-temas de categoría): mismo lenguaje de líneas.
   Reglas aquí (archivo no congelado) que pisan las de index.html por orden de carga. */
.gx-subnav-depth-dots {
    align-items: flex-end !important;
    gap: 7px !important;
}
.gx-subnav-dot {
    width: 14px !important;
    height: 2px !important;
    border-radius: 2px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.4);
    transition: width 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.gx-subnav-dot:hover {
    background: rgba(255, 255, 255, 0.75);
    transform: none !important;
    width: 20px !important;
}
.gx-subnav-dot-active {
    width: 24px !important;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none !important;
}

/* Ocultar flechas en mobile */
@media (max-width: 767px) {
    .nav-arrow {
        display: none !important;
    }
    .nav-arrow-dots {
        display: none !important;
    }
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .master-badge {
        font-size: 11px;
        padding: 5px 10px;
        top: 5px;
    }
    
    .nav-master-btn,
    .nav-depth-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .navigation-bar {
        padding: 6px 8px;
        gap: 6px;
    }
}

/* === TRANSICIONES DE MODO === */
#chatInputContainer.transitioning {
    transition: all 0.3s ease;
}

#userInput.hidden {
    display: none !important;
}

/* === NAVIGATION V3 - Rayitas + Flechas entre input y agente en vivo (desktop) === */
.nav-v3-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 8px; /* Espacio entre input y botón agente en vivo */
}

/* Input se achica un poco para dar lugar a los controles */
#footerControls:has(#nav-v3-controls) .gx-input-wrap {
    min-width: 0; /* Permite que el input se encoja */
    flex: 1 1 auto;
}

.nav-v3-depth-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

.nav-v3-depth-line {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background-color 180ms ease;
}

.nav-v3-depth-line-active {
    background: #22c55e;
}

.nav-v3-arrows {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-v3-arrow {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 6px;
    opacity: 0.25;
    transition: opacity 200ms ease;
}

.nav-v3-arrow:hover {
    opacity: 0.6;
}

.nav-v3-arrow:active {
    opacity: 0.8;
}

@media (max-width: 767px) {
    .nav-v3-controls {
        display: none !important;
    }
}

/* === FIX: la píldora del input no debe caer al expandirse SIN texto aún === */
/* El padding inferior REAL en reposo es 24px + safe-area (responsive_mobile.css,
   regla sin media query que le gana al index congelado). Al pasar a
   .footer-expanded.footer-dialog-empty (altura FIJA igual a colapsado, diálogo
   aún vacío — el primer instante del CTA "Hablá con Nacho") el padding bajaba a
   calc(--footer-pad-y*1.5)=11.25px con transition de padding → la fila del
   input caía ~10px animados hacia el fondo. Igualamos SOLO ese estado; el
   expandido con texto visible conserva su layout de siempre. */
#chatInputContainer.footer-expanded.footer-dialog-empty {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* === FIX: tooltips del micrófono y voz en vivo recortados por overflow:hidden === */
/* Los cartelitos usan [data-tooltip]::after/::before (index.html). El +, logo y
   mundito de idioma los muestran bien; el mic (dentro de .gx-input-wrap) y el
   botón de conversación en vivo no: ambos ancestros/contenedores tenían
   overflow:hidden y recortaban el pseudo-elemento que sale hacia arriba. */
.gx-input-wrap {
    overflow: visible !important;
}

/* Mantener el recorte de la píldora solo en el contenido editable, no en tooltips */
.gx-input-wrap #userInput {
    border-radius: inherit;
}

.voice-realtime-toggle {
    overflow: visible !important;
}

/* Micrófono de dictado: ancla de posicionamiento para el tooltip */
.btn-mic-dictate[data-tooltip] {
    position: relative;
}

/* === FIX 2026-07-13: título/tag de la bienvenida superpuesto a la flecha izquierda === */
/* El hero overlay del landing (index congelado) vive centrado verticalmente
   (top:50% + translateY) y a 1920x1080 el h1 "Hablá con Nacho" cae justo sobre
   .nav-arrow-left (flecha de navegación, también centrada). Las demás secciones
   anclan su texto abajo (.gx-landing-section-text: bottom 0 + padding 15vh).
   Igualamos la bienvenida a ese patrón. Scope :has(.gx-reel-nav) = solo clientes
   con landing reel (Nacho); Purpose y clientes sin reel conservan el centrado. */
.gx-landing:has(.gx-reel-nav) .gx-landing-hero-overlay {
    top: auto;
    bottom: 15vh;
    transform: none;
}
@media (max-width: 680px) {
    /* En mobile las secciones usan 18vh de padding inferior */
    .gx-landing:has(.gx-reel-nav) .gx-landing-hero-overlay {
        bottom: 18vh;
    }
}