/* ============================================================================
   TANDA 89.2 PRO — MOBILE PREMIUM
   Bottom Nav + Header compacto + Sidebar drawer + Sheets + microanimaciones
   Reemplazo total de mobile.css v1
   Aplica solo en (max-width: 900px). Desktop intacto.
   ============================================================================ */

/* =========================  TOKENS MOBILE  ================================= */
:root {
    --mb-bg-base   : #0a0c10;
    --mb-bg-card   : #14171f;
    --mb-bg-elev   : #1a1e28;
    --mb-bg-glass  : rgba(20,23,31,0.72);
    --mb-line      : #252934;
    --mb-line-2    : #323845;
    --mb-fg        : #e9eef5;
    --mb-fg-dim    : #9aa5b4;
    --mb-fg-mute   : #6b7687;
    --mb-accent    : #f5a623;
    --mb-accent-2  : #ffc564;
    --mb-accent-on : #1a1305;
    --mb-glow      : 0 0 0 1px rgba(245,166,35,.35), 0 8px 24px rgba(245,166,35,.18);
    --mb-danger    : #ef5b5b;

    --mb-ease      : cubic-bezier(0.16, 1, 0.3, 1);   /* spring-out premium */
    --mb-ease-in   : cubic-bezier(0.4, 0, 0.2, 1);
    --mb-ease-bnc  : cubic-bezier(0.34, 1.56, 0.64, 1);

    --mb-h-top     : 56px;
    --mb-h-nav     : 64px;
    --mb-r-card    : 14px;
    --mb-r-pill    : 999px;
}

/* =========================  HELPERS  ======================================= */
.mb-only { display: none !important; }
@media (max-width: 900px) { .mb-only { display: revert !important; } .desktop-only { display: none !important; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ========================================================================== */
/* =====================  MOBILE (≤ 900px)  ================================= */
/* ========================================================================== */
@media (max-width: 900px) {

    /* --- evita lag 300ms y zoom-on-focus en iOS --- */
    html { touch-action: manipulation; }
    body { overscroll-behavior-y: contain; }

    /* ---------- SHELL: 1 columna ---------- */
    .app-shell:not(.app-shell-pos) {
        grid-template-columns: 1fr !important;
        background: var(--mb-bg-base);
    }

    /* ---------- LOGIN: ocultar adornos mobile ---------- */
    body:has(.login-shell) .mb-hamb,
    body:has(.login-shell) .mb-top,
    body:has(.login-shell) .mb-bottom-nav,
    body:has(.login-shell) .busc-flotante { display: none !important; }

    /* ============================================================
       1. SIDEBAR (drawer)
       ============================================================ */
    .app-shell:not(.app-shell-pos) > .app-side {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: min(86vw, 320px) !important;
        max-width: none !important;
        z-index: 1001;
        transform: translateX(-105%);
        transition: transform .36s var(--mb-ease);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--mb-bg-card) !important;
        border-right: 1px solid var(--mb-line) !important;
        box-shadow: 8px 0 40px rgba(0,0,0,.55);
        padding: 16px 12px 100px !important;
        gap: 14px !important;
        will-change: transform;
    }
    body.mb-side-open .app-shell:not(.app-shell-pos) > .app-side {
        transform: translateX(0);
    }

    /* Brand del sidebar más prominente */
    .app-side .brand {
        padding: 4px 6px 14px !important;
        border-bottom: 1px solid var(--mb-line) !important;
    }
    .app-side .brand-name {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }

    /* nav-user: avatar más grande, sucursal más visible */
    .app-side .nav-user {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 8px !important;
        background: linear-gradient(135deg, rgba(245,166,35,.08), transparent 60%);
        border: 1px solid var(--mb-line);
        border-radius: var(--mb-r-card);
        margin-bottom: 6px;
    }
    .app-side .nu-avatar {
        width: 44px !important; height: 44px !important;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--mb-accent), var(--mb-accent-2));
        color: var(--mb-accent-on);
        display: flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 16px;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(245,166,35,.25);
    }
    .app-side .nu-info { flex: 1; min-width: 0; }
    .app-side .nu-nombre { font-size: 14px !important; font-weight: 700; color: var(--mb-fg); }
    .app-side .nu-rol { font-size: 10px !important; color: var(--mb-accent); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-top: 1px; }
    .app-side .nu-suc { font-size: 11px !important; color: var(--mb-fg-dim); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
    .app-side .nu-suc .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mb-fg-mute); }

    /* nav-link: más densos, mejor tap target */
    .app-side .nav-link {
        padding: 11px 12px !important;
        font-size: 13px !important;
        letter-spacing: 1px !important;
        border-radius: 10px !important;
        min-height: 44px;
        display: flex; align-items: center; gap: 12px !important;
        transition: background .18s var(--mb-ease-in), transform .12s var(--mb-ease-in), color .18s ease;
    }
    .app-side .nav-link:active {
        transform: scale(0.97);
        background: var(--mb-bg-elev) !important;
    }
    .app-side .nav-link .nl-ico {
        width: 22px !important; font-size: 16px !important;
        text-align: center; flex-shrink: 0;
    }
    .app-side .nav-link.active {
        background: linear-gradient(90deg, rgba(245,166,35,.18), rgba(245,166,35,.04)) !important;
        color: var(--mb-accent) !important;
        border-left: 3px solid var(--mb-accent) !important;
        padding-left: 9px !important;
    }
    .app-side .nav-sec-head {
        font-size: 10px !important;
        letter-spacing: 2.5px !important;
        color: var(--mb-fg-mute) !important;
        text-transform: uppercase;
        padding: 12px 12px 4px !important;
        margin-top: 4px;
        border-top: 1px solid var(--mb-line);
    }
    .app-side .nav-sec-head:first-of-type { border-top: none; margin-top: 0; }

    /* Botón SALIR fijo al final del sidebar */
    .app-side::after {
        content: "";
        display: block; height: 12px;
    }
    .mb-side-logout {
        display: none;
    }
    body.mb-side-open .mb-side-logout {
        display: flex;
        position: fixed;
        bottom: 0; left: 0;
        width: min(86vw, 320px);
        z-index: 1003;
        align-items: center; justify-content: center; gap: 8px;
        padding: 14px;
        background: linear-gradient(180deg, transparent, rgba(10,12,16,.95) 30%);
        pointer-events: none;
    }
    .mb-side-logout > a {
        pointer-events: auto;
        flex: 1;
        background: var(--mb-danger);
        color: #fff;
        font-weight: 800; letter-spacing: 2px; font-size: 13px;
        padding: 13px 16px;
        border-radius: 12px;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 6px 18px rgba(239,91,91,.35);
        transition: transform .12s var(--mb-ease-in);
    }
    .mb-side-logout > a:active { transform: scale(0.97); }

    /* ============================================================
       2. BACKDROP (con blur)
       ============================================================ */
    .mb-backdrop {
        position: fixed; inset: 0;
        background: rgba(4,6,10,.55);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity .26s var(--mb-ease-in);
    }
    body.mb-side-open .mb-backdrop,
    body.mb-sheet-open .mb-backdrop,
    body.mb-search-open .mb-backdrop {
        opacity: 1; pointer-events: auto;
    }

    /* ============================================================
       3. HEADER MOBILE (compacto)
       ============================================================ */

    /* Ocultar el header desktop original casi entero */
    .app-shell:not(.app-shell-pos) > .app-main > .app-top {
        display: none !important;
    }
    /* Mantener solo BuscadorGlobal pero oculto, lo manejamos vía sheet */
    .app-shell:not(.app-shell-pos) > .app-main > .app-top > div:first-child {
        display: none !important;
    }

    /* Header mobile inyectado por JS */
    .mb-top {
        position: sticky; top: 0;
        height: var(--mb-h-top);
        z-index: 900;
        display: flex; align-items: center;
        gap: 4px;
        padding: 0 6px;
        background: var(--mb-bg-glass);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid var(--mb-line);
        transition: transform .3s var(--mb-ease);
        will-change: transform;
    }
    body.mb-top-hidden .mb-top { transform: translateY(-100%); }

    .mb-top-btn {
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        background: transparent;
        border: none;
        color: var(--mb-fg);
        font-size: 20px;
        border-radius: 10px;
        cursor: pointer;
        position: relative;
        transition: background .15s var(--mb-ease-in), transform .1s var(--mb-ease-in);
    }
    .mb-top-btn:active {
        background: var(--mb-bg-elev);
        transform: scale(0.92);
    }
    .mb-top-btn .mb-badge {
        position: absolute; top: 4px; right: 4px;
        min-width: 16px; height: 16px;
        padding: 0 4px;
        background: var(--mb-danger);
        color: #fff;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid var(--mb-bg-base);
    }
    .mb-top-btn.mb-top-policia {
        color: var(--mb-danger);
    }
    .mb-top-btn.mb-top-policia:active {
        background: rgba(239,91,91,.15);
    }

    .mb-top-brand {
        flex: 1;
        display: flex; align-items: center; justify-content: center;
        gap: 8px;
        font-size: 13px;
        letter-spacing: 4px;
        font-weight: 800;
        color: var(--mb-fg);
        text-align: center;
        min-width: 0;
        user-select: none;
    }
    .mb-top-brand b { color: var(--mb-accent); }
    .mb-top-brand-mark {
        width: 26px; height: 26px;
        border-radius: 7px;
        background: linear-gradient(135deg, var(--mb-accent), var(--mb-accent-2));
        color: var(--mb-accent-on);
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 800;
        flex-shrink: 0;
    }

    /* ============================================================
       4. BUSCADOR EXPANDIBLE (overlay)
       ============================================================ */
    .mb-search-shell {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1010;
        background: var(--mb-bg-base);
        padding: 10px 12px 16px;
        transform: translateY(-110%);
        transition: transform .32s var(--mb-ease);
        border-bottom: 1px solid var(--mb-line);
        box-shadow: 0 12px 32px rgba(0,0,0,.5);
        will-change: transform;
    }
    body.mb-search-open .mb-search-shell { transform: translateY(0); }
    .mb-search-row { display: flex; align-items: center; gap: 8px; }
    .mb-search-row .mb-top-btn { color: var(--mb-fg-dim); }

    /* Cuando el buscador está abierto, mostrar el BuscadorGlobal real adentro */
    .mb-search-shell .mb-search-host { flex: 1; min-width: 0; }
    .mb-search-shell .mb-search-host .buscador-global,
    .mb-search-shell .mb-search-host > * { width: 100% !important; }

    /* ============================================================
       5. SHEET MÁS ⋯  (turno, fecha, novedades, salir)
       ============================================================ */
    .mb-sheet {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 1010;
        background: var(--mb-bg-card);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-top: 1px solid var(--mb-line);
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
        transform: translateY(100%);
        transition: transform .36s var(--mb-ease);
        box-shadow: 0 -12px 40px rgba(0,0,0,.5);
        will-change: transform;
        max-height: 80vh; overflow-y: auto;
    }
    body.mb-sheet-open .mb-sheet { transform: translateY(0); }

    .mb-sheet-handle {
        width: 40px; height: 4px;
        background: var(--mb-line-2);
        border-radius: 999px;
        margin: 4px auto 14px;
    }
    .mb-sheet h4 {
        margin: 0 0 10px;
        font-size: 11px; letter-spacing: 2.5px;
        color: var(--mb-fg-mute); text-transform: uppercase;
    }
    .mb-sheet-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 10px; margin-bottom: 14px;
    }
    .mb-sheet-tile {
        background: var(--mb-bg-elev);
        border: 1px solid var(--mb-line);
        border-radius: 12px;
        padding: 10px 12px;
    }
    .mb-sheet-tile-lbl {
        font-size: 9px; letter-spacing: 2px;
        color: var(--mb-fg-mute);
        text-transform: uppercase; font-weight: 700;
    }
    .mb-sheet-tile-val {
        font-size: 14px; color: var(--mb-fg);
        font-weight: 700; margin-top: 2px;
    }
    .mb-sheet-tile-val.acc { color: var(--mb-accent); }

    .mb-sheet-actions {
        display: flex; flex-direction: column; gap: 8px;
    }
    .mb-sheet-action {
        display: flex; align-items: center; gap: 12px;
        background: var(--mb-bg-elev);
        border: 1px solid var(--mb-line);
        border-radius: 12px;
        padding: 13px 14px;
        font-size: 14px; color: var(--mb-fg);
        text-decoration: none;
        font-weight: 600;
        transition: transform .12s var(--mb-ease-in), background .15s ease;
        cursor: pointer;
    }
    .mb-sheet-action:active { transform: scale(0.98); background: var(--mb-bg-card); }
    .mb-sheet-action .mb-sa-ico { font-size: 20px; width: 24px; text-align: center; }
    .mb-sheet-action.danger { color: #ff8a8a; border-color: rgba(239,91,91,.3); }
    .mb-sheet-action.danger:active { background: rgba(239,91,91,.1); }
    .mb-sheet-action .mb-sa-badge {
        margin-left: auto;
        background: var(--mb-danger); color: #fff;
        font-size: 10px; font-weight: 800;
        padding: 2px 7px; border-radius: 999px;
    }

    /* ============================================================
       6. BOTTOM NAV
       ============================================================ */
    .mb-bottom-nav {
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 950;
        height: calc(var(--mb-h-nav) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--mb-bg-glass);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border-top: 1px solid var(--mb-line);
        display: flex; align-items: stretch;
        box-shadow: 0 -4px 20px rgba(0,0,0,.35);
    }
    .mb-bn-item {
        flex: 1;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        background: transparent;
        border: none;
        color: var(--mb-fg-mute);
        text-decoration: none;
        font-size: 9.5px;
        letter-spacing: 1.2px;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        position: relative;
        transition: color .18s var(--mb-ease-in), transform .12s var(--mb-ease-in);
        padding: 6px 4px;
    }
    .mb-bn-item .mb-bn-ico {
        font-size: 22px;
        line-height: 1;
        transition: transform .25s var(--mb-ease-bnc);
    }
    .mb-bn-item:active { transform: scale(0.94); }
    .mb-bn-item:active .mb-bn-ico { transform: scale(1.15); }
    .mb-bn-item.active {
        color: var(--mb-accent);
    }
    .mb-bn-item.active .mb-bn-ico {
        filter: drop-shadow(0 0 6px rgba(245,166,35,.5));
    }
    .mb-bn-item.active::before {
        content: "";
        position: absolute; top: 0; left: 50%;
        transform: translateX(-50%);
        width: 28px; height: 3px;
        background: var(--mb-accent);
        border-radius: 0 0 3px 3px;
        box-shadow: 0 0 10px rgba(245,166,35,.5);
    }
    .mb-bn-item .mb-bn-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 18px);
        min-width: 16px; height: 16px;
        padding: 0 4px;
        background: var(--mb-danger);
        color: #fff;
        border-radius: 8px;
        font-size: 9px;
        font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid var(--mb-bg-base);
    }

    /* ============================================================
       7. APP CONTENT padding (espacio para bottom nav)
       ============================================================ */
    .app-content {
        padding: 14px 12px calc(var(--mb-h-nav) + 24px) !important;
    }

    /* En POS no hay bottom nav */
    .app-shell-pos .app-content { padding-bottom: 14px !important; }
    .app-shell-pos .mb-bottom-nav,
    .app-shell-pos .mb-top { display: none !important; }

    /* ============================================================
       8. LEGACY: ocultar el ☰ flotante viejo y el buscador flotante en mobile (los reemplazamos)
       ============================================================ */
    .t89-hamb, .t89-backdrop { display: none !important; }
    .busc-flotante { display: none !important; }

    /* ============================================================
       9. FIX MANOLIN MOBILE (no tape contenido)
       ============================================================ */
    .manolin-shell {
        right: 12px !important;
        bottom: calc(var(--mb-h-nav) + env(safe-area-inset-bottom) + 12px) !important;
        left: auto !important;
        top: auto !important;
    }
    .manolin-pet {
        width: 52px !important;
        height: 52px !important;
        font-size: 26px !important;
    }
    .manolin-pet .pet-cuerpo {
        width: 48px !important; height: 48px !important;
    }
    .pet-burbuja {
        max-width: 200px !important;
        font-size: 12px !important;
        right: 60px !important;
        bottom: 8px !important;
        left: auto !important;
    }
    .manolin-egg {
        width: 44px !important; height: 44px !important;
        right: 12px !important;
        bottom: calc(var(--mb-h-nav) + env(safe-area-inset-bottom) + 12px) !important;
        left: auto !important;
    }
    /* Chat de Manolin: que se vea como sheet en mobile */
    .manolin-chat {
        position: fixed !important;
        bottom: calc(var(--mb-h-nav) + env(safe-area-inset-bottom) + 8px) !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-height: 70vh !important;
        border-radius: 16px !important;
    }

    /* ============================================================
       10. CONTENT POLISH: cards y banners
       ============================================================ */
    .module-card, .kpi, .card {
        border-radius: var(--mb-r-card) !important;
    }
    .banner-revisar, .banner-cierre {
        margin: 0 0 12px !important;
        border-radius: 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* ============================================================
       11. MODALES: bottom-sheet con drag handle
       ============================================================ */
    .modal-back {
        backdrop-filter: blur(8px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
        background: rgba(4,6,10,.5) !important;
    }
    .modal {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 12px 16px calc(20px + env(safe-area-inset-bottom)) !important;
        animation: mbSheetUp .36s var(--mb-ease);
        overflow-y: auto;
    }
    .modal::before {
        content: "";
        display: block;
        width: 40px; height: 4px;
        background: var(--mb-line-2);
        border-radius: 999px;
        margin: 0 auto 12px;
    }
    @keyframes mbSheetUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* ============================================================
       12. INPUTS / BUTTONS touch
       ============================================================ */
    .inp, input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="tel"], input[type="search"],
    input[type="date"], input[type="time"], select, textarea {
        font-size: 16px !important;
        min-height: 44px;
        padding: 11px 14px !important;
        border-radius: 10px !important;
    }
    .btn {
        min-height: 44px;
        padding: 11px 18px !important;
        border-radius: 10px !important;
        transition: transform .12s var(--mb-ease-in), filter .15s ease;
    }
    .btn:active { transform: scale(0.97); }
    .btn-xs, .btn-sm {
        min-height: 36px;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }

    /* Ripple */
    .mb-ripple {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .mb-ripple::after {
        content: "";
        position: absolute;
        top: var(--mb-ry, 50%); left: var(--mb-rx, 50%);
        width: 0; height: 0;
        background: rgba(255,255,255,.18);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        opacity: 0;
        z-index: 0;
    }
    .mb-ripple.mb-rip-go::after {
        animation: mbRipple .55s var(--mb-ease-in);
    }
    @keyframes mbRipple {
        0%   { width: 0; height: 0; opacity: .55; }
        100% { width: 280px; height: 280px; opacity: 0; }
    }

    /* ============================================================
       13. TABLAS responsivas (mantenemos lo que ya andaba)
       ============================================================ */
    .table-cards-mobile {
        display: block !important;
        background: transparent !important;
        border: none !important;
    }
    .table-cards-mobile thead { display: none !important; }
    .table-cards-mobile tbody { display: block !important; }
    .table-cards-mobile tbody tr {
        display: block !important;
        margin-bottom: 10px;
        background: var(--mb-bg-card) !important;
        border: 1px solid var(--mb-line) !important;
        border-radius: 12px;
        padding: 12px 14px !important;
    }
    .table-cards-mobile tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        padding: 5px 0 !important;
        border: none !important;
        font-size: 13px !important;
        gap: 12px;
    }
    .table-cards-mobile tbody td::before {
        content: attr(data-label);
        color: var(--mb-fg-mute);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 80px;
        flex-shrink: 0;
    }
    .table-cards-mobile tbody td:not([data-label])::before { display: none; }

    .table:not(.table-cards-mobile) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* ============================================================
       14. PWA standalone
       ============================================================ */
}

@media (display-mode: standalone) and (max-width: 900px) {
    .pwa-install-banner { display: none !important; }
    /* el header sticky en standalone necesita más altura para el notch */
    .mb-top { padding-top: env(safe-area-inset-top); height: calc(var(--mb-h-top) + env(safe-area-inset-top)); }
}

/* ============================================================
   15. MOBILE CHICO (≤ 480px) — ajustes finos
   ============================================================ */
@media (max-width: 480px) {
    .mb-top-brand { letter-spacing: 3px; font-size: 12px; }
    .mb-top-brand-mark { width: 24px; height: 24px; font-size: 13px; }
    .mb-bn-item { font-size: 9px; letter-spacing: 1px; }
    .mb-bn-item .mb-bn-ico { font-size: 21px; }
}