#ti-tabbar { display: none; }

@media (max-width: 820px) {
    /* Aire para la tab bar (solo cuando está montada) */
    body.ti-premium.ti-has-tabbar .fi-main {
        padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    }

    /* ── La tab bar ── */
    body.ti-premium #ti-tabbar {
        display: flex;
        flex-direction: column;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 90000;
        padding: 4px 6px calc(9px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.86);
        -webkit-backdrop-filter: blur(20px) saturate(1.7);
        backdrop-filter: blur(20px) saturate(1.7);
        border-top: 1px solid rgba(20, 83, 45, 0.10);
        box-shadow: 0 -8px 28px rgba(15, 40, 25, 0.07);
    }
    /* Franja con el nombre del módulo (para saber siempre dónde estás) */
    #ti-tabbar .ti-tabbar-brand {
        text-align: center;
        font-size: 8.5px; font-weight: 800;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: #15803d;
        padding: 2px 0 4px;
        display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    #ti-tabbar .ti-tabbar-brand::before,
    #ti-tabbar .ti-tabbar-brand::after {
        content: ''; height: 1px; width: 26px;
        background: rgba(21, 128, 61, 0.25);
    }
    #ti-tabbar .ti-tabbar-row {
        display: flex; justify-content: space-around; align-items: stretch;
        width: 100%;
    }
    #ti-tabbar a, #ti-tabbar button {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 6px 2px 4px;
        border: 0; background: none; cursor: pointer;
        text-decoration: none;
        color: #7a8c80; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
        font-family: inherit;
        border-radius: 14px;
        transition: transform .08s ease, color .12s ease;
        -webkit-tap-highlight-color: transparent;
    }
    #ti-tabbar a:active, #ti-tabbar button:active { transform: scale(0.92); }
    #ti-tabbar svg { width: 24px; height: 24px; stroke-width: 1.8; }
    #ti-tabbar .on { color: #15803d; }
    #ti-tabbar .on svg { stroke-width: 2.5; }
    #ti-tabbar .on::after {
        content: ''; width: 4px; height: 4px; border-radius: 50%;
        background: #15803d; margin-top: 1px;
    }

    /* ── Toques iOS generales en el módulo ── */
    /* Inputs a 16px: iOS no hace zoom al enfocar */
    body.ti-premium input, body.ti-premium select, body.ti-premium textarea {
        font-size: 16px !important;
    }
    /* Botones y menús con target táctil cómodo */
    body.ti-premium .fi-btn { min-height: 44px; }
    body.ti-premium .fi-dropdown-trigger button { min-width: 44px; min-height: 44px; }
    /* Scroll horizontal con inercia (tablas anchas) */
    body.ti-premium .fi-ta-content { -webkit-overflow-scrolling: touch; }
    /* KPIs del dashboard en 2 columnas (no una tira infinita) */
    body.ti-premium .ti-kpis { grid-template-columns: repeat(2, 1fr) !important; }
    /* El hero respira menos en pantalla chica */
    body.ti-premium .ti-hero { padding: 18px 16px !important; }
}