/* css/app-modo.css — "MODO APP" del sitio IMPSR (21/10/2026)
 * Se activa SOLO cuando el sitio se abre desde la app instalada en el celular
 * (la clase html.modo-app la pone js/app-modo.js). En el navegador normal no cambia nada.
 * Esconde todo lo que es "de sitio web" (menú azul, buscador, redes, migas, footer)
 * y muestra una barra de arriba y una barra de pestañas abajo, como una app de Play Store.
 */

/* ---------- Lo que se esconde ---------- */
html.modo-app nav.navbar.fixed-top,
html.modo-app .sub-menu,
html.modo-app footer.footer-impsr,
html.modo-app .page-breadcrumb,
html.modo-app .app-ocultar,
html.modo-app #btnInstalarApp { display: none !important; }

html.modo-app body {
    background: #f4f6f9;
    padding-top: calc(56px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    -webkit-tap-highlight-color: transparent;
}
html.modo-app.app-sin-barra-sup body { padding-top: 0 !important; }

/* Páginas que dejaban lugar para el menú fijo del sitio: ya no hace falta */
html.modo-app #tramites,
html.modo-app #sala,
html.modo-app #contacto,
html.modo-app .body-nov,
html.modo-app #recibo-haberes { margin-top: 1rem !important; }
html.modo-app .limiter { margin-top: 1rem !important; }
html.modo-app .page-hero { margin-bottom: 18px; border-radius: 0 0 18px 18px; }

/* ---------- Barra de arriba ---------- */
.app-top { display: none; }
html.modo-app .app-top {
    display: flex; align-items: center; gap: 6px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0 4px;
    background: #143c5e; color: #fff;
    box-shadow: 0 2px 10px rgba(10, 25, 45, .25);
}
.app-top-volver {
    width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-top-volver:active { background: rgba(255, 255, 255, .15); }
.app-top-volver svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-top-titulo {
    flex: 1; min-width: 0; margin: 0 4px;
    font: 600 1.05rem/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff;
}
.app-top-logo { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.app-top.sin-volver { padding-left: 16px; }

/* ---------- Pestañas de abajo ---------- */
.app-tabs { display: none; }
html.modo-app .app-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2100;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #e3e8ee;
    box-shadow: 0 -4px 16px rgba(15, 35, 60, .06);
}
.app-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: #7b8ca0 !important; text-decoration: none !important;
    font: 600 .7rem/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .2px;
}
.app-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-tab .burbuja { padding: 3px 16px; border-radius: 999px; transition: background .15s; display: flex; }
.app-tab.activa { color: #1565A0 !important; }
.app-tab.activa .burbuja { background: #e3eefa; }
.app-tab:active .burbuja { background: #eef3f8; }