/* ── Barra inferior del móvil (Fase 43, pieza D; includes/bottom_nav.php) ──
   Solo por debajo de 768 px. Toda la convivencia con lo que ya se fija abajo
   cuelga de UNA variable, --gv-bnav-h: vale 0 fuera del móvil, así que estas
   reglas no mueven nada en escritorio, y tools/test_bottom_nav.php exige que
   cada elemento fijo abajo del inventario la use.

   Inventario de lo fijo abajo (position:fixed con bottom en css/, js/,
   header.php, footer.php, gaming-fx.php, los theme-fx.php de cada guía e index.php):
     #fx-toggle-btn (20, todas las páginas, y sus dos copias en theme-fx.php),
     #gv-spoiler-toggle (14, header.php), #gv-focus-toggle (74/70),
     #gv-save-nudge (74/130), #gv-install (128/124), #gv-pwa-update (180),
     #patreon-toast (20, index.php), .admin-toast (30, panel).
   Todos se SUBEN con `translate`, no con `bottom`: así no hay que repetir aquí
   sus medidas (que cambian por anchura y viven en tres sitios), y `translate`
   se suma a cualquier `transform` propio (la escala del mando al pasar por
   encima, el centrado del aviso de Patreon) en vez de pisarlo.
   No hay botón de volver arriba ni aviso de cookies (el sitio no usa cookies de
   seguimiento). Las barras de los rastreadores (.sk-tools) y la de capítulos
   se pegan ARRIBA; el panel de progreso de los hubs no es fijo. El modo dos
   pantallas (.gv-2p) y el constructor de rutas (.gv-rb) son capas a pantalla
   completa o de alto completo: con ellas abiertas la barra se oculta. */

:root { --gv-bnav-h:0px;}

.gv-bnav { display:none;}

@media (max-width:767.98px) {
    :root { --gv-bnav-h:calc(60px + env(safe-area-inset-bottom, 0px));}

    /* El hueco: lo último de la página (y un ancla o el foco) queda por encima
       de la barra. `html body` gana a un `body {}` de una página suelta. */
    html body { padding-bottom:var(--gv-bnav-h);}
    html { scroll-padding-bottom:var(--gv-bnav-h);}

    /* El modo lectura esconde la barra de arriba: también esta, y entonces no
       hay nada que esquivar. */
    body.gv-focus { --gv-bnav-h:0px;}

    .gv-bnav {
        display:block;position:fixed;left:0;right:0;bottom:0;z-index:8500;
        height:var(--gv-bnav-h);padding-bottom:env(safe-area-inset-bottom, 0px);
        background:var(--gv2-bg);border-top:1px solid var(--gv2-border);
        box-shadow:0 -6px 20px rgba(0, 0, 0, 0.45);
    }
    .gv-bnav-list { display:flex;height:100%;margin:0;padding:0;list-style:none;}
    .gv-bnav-list li { flex:1 1 0;min-width:0;display:flex;}
    .gv-bnav-item {
        flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
        min-height:44px;padding:6px 2px;margin:0;border:0;border-radius:0;background:transparent;
        color:var(--gv2-text-2);font:700 0.72rem/1 var(--font-ui);letter-spacing:0.06em;
        text-transform:uppercase;text-decoration:none;cursor:pointer;
        -webkit-tap-highlight-color:transparent;position:relative;
    }
    .gv-bnav-item:focus-visible { outline:2px solid var(--gold);outline-offset:-4px;border-radius:var(--gv2-radius-sm);}
    .gv-bnav-item[aria-current] { color:var(--gold);}
    .gv-bnav-item[aria-current]::before { content:'';position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--gold);}
    .gv-bnav-item:active { background:var(--gv2-gold-wash);}
    .gv-bnav-label { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .gv-bnav-ico { width:20px;height:20px;fill:currentColor;flex-shrink:0;}

    /* Lupa dibujada: no hay `magnifying-glass` en includes/icons/source.json. */
    .gv-bnav-lupa { position:relative;display:block;}
    .gv-bnav-lupa::before { content:'';position:absolute;left:1px;top:1px;width:12px;height:12px;border:2.5px solid currentColor;border-radius:50%;box-sizing:border-box;}
    .gv-bnav-lupa::after { content:'';position:absolute;left:12px;top:11px;width:7px;height:2.5px;border-radius:2px;background:currentColor;transform:rotate(45deg);transform-origin:0 50%;}

    /* Lo que ya vivía fijo abajo sube lo que mide la barra (ver el inventario). */
    :root #fx-toggle-btn, :root #gv-spoiler-toggle, :root #gv-focus-toggle, :root #gv-save-nudge, :root #gv-install, :root #gv-pwa-update, :root #patreon-toast, :root .admin-toast { translate:0 calc(-1 * var(--gv-bnav-h));}

    /* Oculta con un diálogo abierto: los que se abren con style.display (buscador,
       login, perfil, notas), con clase (avisos, dos pantallas, rutas), con `hidden`
       (informe del rastreador), o cualquiera que bloquee el desplazamiento. */
    body:has(#global-search-modal[style*="flex"], #auth-modal[style*="flex"], #profile-modal[style*="flex"], #gv-note-dlg[style*="flex"], #gv-modal-backdrop.show, .gv-2p.is-open, .gv-rb.is-open, .gv-tracker-report-modal:not([hidden]), dialog[open]) .gv-bnav { display:none;}
    /* Aparte: un navegador sin :has() tira la regla entera, y estas dos no lo usan. */
    body[style*="overflow: hidden"] .gv-bnav, body.gv-focus .gv-bnav { display:none;}

    /* Y con el teclado abierto: en Android la vista se encoge y la barra subiría
       pegada al teclado, tapando el campo. Una casilla con foco no saca teclado. */
    body:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"]), textarea, [contenteditable]:not([contenteditable="false"])):focus) .gv-bnav { display:none;}
}

@media print { .gv-bnav { display:none !important;} }