/* ═══════════════════════════════════════════════════════════════════
   SC-MOBILE — Capa móvil global de SisController
   Cargada en todas las páginas del panel. Todo lo específico de teléfono
   vive tras @media (max-width: 767px) para NO tocar la experiencia desktop.
   Complementa los tokens --sc-* definidos en AdminPanelProvider.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Altura del bottom nav + safe area (iPhone home indicator) */
    --sc-bottomnav-h: 62px;
    --sc-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sc-safe-top: env(safe-area-inset-top, 0px);
    /* Target táctil mínimo (Apple HIG: 44pt; Material: 48dp) */
    --sc-touch: 46px;
}

/* ═══════════ BOTTOM NAVIGATION (solo móvil) ═══════════ */

.sc-bottomnav {
    display: none; /* visible solo en móvil */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40; /* bajo modales Filament (z-50+) pero sobre el contenido */
    height: calc(var(--sc-bottomnav-h) + var(--sc-safe-bottom));
    padding-bottom: var(--sc-safe-bottom);
    background: color-mix(in srgb, var(--sc-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--sc-line);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, .06);
}
html.dark .sc-bottomnav {
    background: color-mix(in srgb, #0F1421 86%, transparent);
    border-top-color: var(--sc-line);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .45);
}
/* Fallback sin color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .sc-bottomnav { background: rgba(255, 255, 255, .92); }
    html.dark .sc-bottomnav { background: rgba(15, 20, 33, .94); }
}

.sc-bottomnav-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: var(--sc-bottomnav-h);
    max-width: 560px;
    margin: 0 auto;
}
.sc-bn-item {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    min-height: var(--sc-touch);
    text-decoration: none;
    color: var(--sc-text-secondary);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    background: none; border: none; cursor: pointer;
    font: inherit;
    transition: color .15s ease, transform .1s ease;
    position: relative;
}
.sc-bn-item:active { transform: scale(.94); }
.sc-bn-item svg { width: 23px; height: 23px; stroke-width: 1.8; flex-shrink: 0; }
.sc-bn-label {
    font-size: .625rem;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
}
.sc-bn-item.active { color: var(--sc-brand); }
.sc-bn-item.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 34px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sc-brand);
}

/* ═══════════ SHEET "MENÚ" (grid de módulos, estilo app nativa) ═══════════ */

.sc-sheet-backdrop {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(15, 23, 42, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.sc-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 46;
    max-height: 82dvh;
    display: flex; flex-direction: column;
    background: var(--sc-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 50px rgba(15, 23, 42, .25);
    padding-bottom: calc(var(--sc-safe-bottom) + 10px);
    overscroll-behavior: contain;
    /* Snap-back tras arrastrar (estilo iOS). Se desactiva inline mientras se arrastra. */
    transition: transform .3s cubic-bezier(.32, .72, .24, 1);
    will-change: transform;
}
html.dark .sc-sheet { box-shadow: 0 -18px 50px rgba(0, 0, 0, .6); }

.sc-sheet-grab {
    width: 40px; height: 4.5px;
    border-radius: 999px;
    background: var(--sc-line-strong);
    margin: 10px auto 4px;
    flex-shrink: 0;
}
.sc-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .5rem 1.1rem .65rem;
    flex-shrink: 0;
}
.sc-sheet-title {
    font-size: 1.05rem; font-weight: 800;
    color: var(--sc-text);
    letter-spacing: -.015em;
}
.sc-sheet-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    border: none; cursor: pointer;
    background: var(--sc-surface-hover);
    color: var(--sc-text-secondary);
    font-size: 1rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}
.sc-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 1rem .5rem;
}
.sc-sheet-group-label {
    display: flex; align-items: center; gap: .45rem;
    font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--sc-text-tertiary);
    margin: 1rem 2px .5rem;
}
.sc-sheet-group-label svg { width: .85rem; height: .85rem; }
.sc-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}
.sc-sheet-app {
    display: flex; align-items: center; gap: .65rem;
    min-height: 56px;
    padding: .6rem .75rem;
    border-radius: 14px;
    background: var(--sc-bg);
    border: 1px solid var(--sc-line-subtle);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .1s ease, background .15s ease;
}
.sc-sheet-app:active { transform: scale(.97); background: var(--sc-surface-active); }
html.dark .sc-sheet-app { background: var(--sc-surface-hover); border-color: #28312A; }
.sc-sheet-app-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--sc-brand-soft);
    color: var(--sc-brand);
}
.sc-sheet-app-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }
.sc-sheet-app-name {
    font-size: .78rem; font-weight: 650;
    color: var(--sc-text);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sc-sheet-app.active { border-color: var(--sc-brand); background: var(--sc-brand-soft); }

/* Animaciones del sheet */
@media (prefers-reduced-motion: no-preference) {
    .sc-sheet { animation: sc-sheet-up .26s cubic-bezier(.32, .72, .24, 1); }
    .sc-sheet-backdrop { animation: sc-fade .2s ease; }
    @keyframes sc-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ═══════════ CAPA MÓVIL/TABLET GLOBAL (≤1023.98px) ═══════════
   El shell app-nativo (bottom nav + densidad compacta) se extiende hasta
   1023.98px: Filament oculta su sidebar off-canvas por debajo de lg=1024, así
   que sin esto la banda 768–1023 (split-screen, tablet) quedaba sin navegación
   persistente y con densidad de escritorio. Sobre 1024px manda el sidebar
   (auto-colapsado a rail entre 1024–1300 vía JS en AdminPanelProvider). */

@media (max-width: 1023.98px) {

    /* Mostrar bottom nav y reservarle espacio al final del contenido */
    .sc-bottomnav { display: block; }
    .fi-main {
        padding-bottom: calc(var(--sc-bottomnav-h) + var(--sc-safe-bottom) + 14px) !important;
    }

    /* ── Densidad y jerarquía de página ── */
    .fi-main-ctn .fi-page { padding-left: 0 !important; padding-right: 0 !important; }
    .fi-page > section, .fi-page-header-main { padding-left: .8rem; padding-right: .8rem; }
    .fi-header { padding: .65rem .9rem !important; }
    .fi-page-heading, .fi-header-heading { font-size: 1.15rem !important; }
    .fi-breadcrumbs { display: none !important; } /* ruido en pantallas chicas */

    /* Topbar compacto */
    .fi-topbar { min-height: 3.2rem !important; }
    .fi-topbar nav { padding-left: .5rem !important; padding-right: .5rem !important; }

    /* ── Targets táctiles ≥46px en TODOS los controles Filament ── */
    .fi-btn { min-height: var(--sc-touch) !important; padding-top: .55rem !important; padding-bottom: .55rem !important; }
    .fi-icon-btn { min-width: var(--sc-touch) !important; min-height: var(--sc-touch) !important; }
    .fi-dropdown-list-item { min-height: var(--sc-touch) !important; padding-top: .6rem !important; padding-bottom: .6rem !important; }
    .fi-tabs-tab { min-height: var(--sc-touch) !important; }
    .fi-sidebar-item-button { min-height: var(--sc-touch) !important; }
    a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

    /* ── Formularios: sin zoom iOS (16px), campos cómodos ── */
    .fi-input, .fi-select-input, select, textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="date"], input[type="tel"] {
        font-size: 16px !important;
        min-height: var(--sc-touch) !important;
    }
    .fi-fo-field-wrp-label label { font-size: .875rem !important; }
    input[type="checkbox"], input[type="radio"] {
        width: 1.35rem !important; height: 1.35rem !important;
    }
    /* Grids de formularios a una sola columna */
    .fi-fo-grid, .fi-fo-component-ctn .grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* ── Tablas Filament: scroll con inercia + filas altas + header sticky ── */
    .fi-ta-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .fi-ta-content::-webkit-scrollbar { display: none; }
    /* max-content en vez de 560px fijo: las tablas de 2–3 columnas caben sin
       forzar scroll horizontal; las anchas piden ancho con .sc-wide-table. */
    .fi-ta-table { min-width: max-content; }
    .sc-wide-table .fi-ta-table, .fi-ta-table.sc-wide-table { min-width: 640px; }
    .fi-ta-row > .fi-ta-cell { padding-top: .8rem !important; padding-bottom: .8rem !important; }
    .fi-ta-header-cell {
        position: sticky; top: 0; z-index: 1;
        background: var(--sc-surface) !important;
    }
    /* Toolbar de la tabla apilado */
    .fi-ta-header-toolbar { flex-wrap: wrap !important; gap: .5rem !important; }
    .fi-ta-search-field { width: 100% !important; max-width: none !important; }

    /* ── Modales → bottom sheets nativos ── */
    .fi-modal:not(.fi-modal-slide-over) .fi-modal-window {
        position: fixed !important;
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        top: auto !important;
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important;
        max-height: 88dvh !important;
        border-radius: 20px 20px 0 0 !important;
        padding-bottom: calc(var(--sc-safe-bottom) + .5rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .fi-modal-window .fi-modal-footer {
        position: sticky; bottom: 0;
        background: inherit;
        padding-top: .6rem !important;
    }
    .fi-modal-footer-actions { flex-direction: column-reverse !important; width: 100%; }
    .fi-modal-footer-actions .fi-btn { width: 100% !important; justify-content: center !important; }

    /* ── Notificaciones arriba (no tapadas por el bottom nav) ── */
    .fi-no { bottom: auto !important; top: calc(var(--sc-safe-top) + .6rem) !important; }

    /* ── Dropdowns del topbar (temporada / agrícola / sync) ──
       En desktop se anclan al botón con position:absolute y min-width:240px;
       en el teléfono eso desborda la pantalla por la derecha. Acá pasan a
       panel FIJO a lo ancho, debajo del topbar, con scroll propio. */
    .tb-right > div > div[style*="position:absolute"] {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(var(--sc-safe-top) + 3.5rem) !important;
        min-width: 0 !important;
        width: auto !important;
        max-height: 62dvh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 50 !important;
        border-radius: 14px !important;
        box-shadow: 0 18px 50px rgba(15, 23, 42, .35) !important;
    }
    html.dark .tb-right > div > div[style*="position:absolute"] {
        background: #131826 !important;
        border-color: #1F2937 !important;
    }
    /* Ítems del panel: altura táctil y tipografía legible (los tamaños
       vienen inline en 10-12px; se suben por selector de atributo). */
    .tb-right > div > div[style*="position:absolute"] button,
    .tb-right > div > div[style*="position:absolute"] a {
        min-height: 48px;
        align-items: center !important;
    }
    .tb-right > div > div[style*="position:absolute"] [style*="font-size:12px"] { font-size: 15px !important; }
    .tb-right > div > div[style*="position:absolute"] [style*="font-size:11px"] { font-size: 14px !important; }
    .tb-right > div > div[style*="position:absolute"] [style*="font-size:10px"] { font-size: 12.5px !important; }
    .tb-right > div > div[style*="position:absolute"] [style*="font-size:9px"]  { font-size: 11px !important; }

    /* Botones del topbar (selectores): target táctil sin desbordar el topbar */
    .tb-right > div > button { min-height: 40px; }
    .tb-divider { display: none; }
    .tb-corporate { padding-left: .4rem !important; gap: 6px !important; }
    /* El nombre no debe empujar los selectores fuera de pantalla */
    .tb-corporate-welcome strong {
        max-width: 26vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    /* ── Widgets/estadísticas en columna ── */
    .fi-wi-stats-overview { grid-template-columns: minmax(0, 1fr) !important; }

    /* ── Scroll horizontal útil: chips/filtros en una línea deslizable ── */
    .sc-hscroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        gap: .45rem;
        padding-bottom: .3rem;
    }
    .sc-hscroll::-webkit-scrollbar { display: none; }
    .sc-hscroll > * { flex: 0 0 auto; scroll-snap-align: start; }

    /* ── Utilidades móviles para las vistas custom ── */
    .sc-m-hide { display: none !important; }          /* ocultar en móvil */
    .sc-m-stack { display: flex !important; flex-direction: column !important; }
    .sc-m-full { width: 100% !important; max-width: 100% !important; }
}

/* Desktop (≥1024px): ocultar lo que es solo-móvil/tablet */
@media (min-width: 1024px) {
    .sc-bottomnav, .sc-sheet, .sc-sheet-backdrop { display: none !important; }
    .sc-d-hide { display: initial; }
}

/* ═══════════ AJUSTES TABLET (768–1023.98px) ═══════════
   La banda tablet gana bottom-nav ancho y sheet de 3 columnas para no verse
   escaso en el ancho extra respecto al teléfono. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .sc-bottomnav-inner { max-width: 720px; }
    .sc-sheet { max-width: 640px; left: 50%; transform: translateX(-50%); border-radius: 20px 20px 0 0; }
    .sc-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* En tablet, los formularios pueden ir a 2 columnas (más aire que el phone).
       Solo el contenedor que en escritorio ya va en columnas toma las suyas:
       el selector anterior (`.fi-fo-component-ctn .grid`) partía en dos el
       INTERIOR de cada campo —etiqueta a un lado, campo al otro— y aplastaba
       las casillas de un CheckboxList hasta cortar las palabras letra a letra. */
    .fi-fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .fi-fo-component-ctn.lg\:grid-cols-\[--cols-lg\] { grid-template-columns: var(--cols-lg) !important; }
}

/* ═══════════ SENSACIÓN APP iOS + SAFE-AREA (≤1023.98px) ═══════════ */
:root { --sc-safe-left: env(safe-area-inset-left, 0px); --sc-safe-right: env(safe-area-inset-right, 0px); }

@media (max-width: 1023.98px) {
    /* Header sticky translúcido con blur (como el bottom nav) + notch */
    .fi-topbar {
        position: sticky !important; top: 0; z-index: 30;
        padding-top: var(--sc-safe-top) !important;
        padding-left: max(.5rem, var(--sc-safe-left)) !important;
        padding-right: max(.5rem, var(--sc-safe-right)) !important;
        min-height: calc(3.2rem + var(--sc-safe-top)) !important;
        background: color-mix(in srgb, var(--sc-surface) 82%, transparent) !important;
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
    }
    @supports not (background: color-mix(in srgb, red 50%, blue)) {
        .fi-topbar { background: var(--sc-surface) !important; }
    }
    /* Contenido: safe-area lateral (landscape con notch) */
    .fi-main {
        padding-left: max(0px, var(--sc-safe-left)) !important;
        padding-right: max(0px, var(--sc-safe-right)) !important;
    }
    /* Cabecera del drawer del sidebar bajo el notch */
    .fi-sidebar-header { padding-top: calc(.85rem + var(--sc-safe-top)) !important; }
    /* Bottom nav: safe-area lateral además del inferior */
    .sc-bottomnav { padding-left: var(--sc-safe-left); padding-right: var(--sc-safe-right); }

    /* Tap-states tipo iOS en los controles Filament */
    .fi-btn:active, .fi-icon-btn:active, .fi-sidebar-item-button:active, .fi-dropdown-list-item:active {
        transform: scale(.97); transition: transform .08s ease;
    }

    /* Popovers de rango de fechas (temperaturas/pluviometría/análisis) que viven
       dentro de un .sc-hscroll (overflow → recorte): pasan a bottom-sheet fijo. */
    .tp-dr-pop, .pl-dr-pop, .aft-dr-pop {
        position: fixed !important; left: 8px !important; right: 8px !important;
        top: auto !important; bottom: 0 !important; width: auto !important; min-width: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -14px 44px rgba(15,23,42,.32) !important;
        padding-bottom: calc(var(--sc-safe-bottom) + .6rem) !important;
        z-index: 60 !important;
    }
}

/* ═══════════ REFINAMIENTOS TÁCTILES GLOBALES (todas las resoluciones) ═══════════ */

/* Momentum scrolling en cualquier contenedor con overflow */
.fi-main, .fi-modal-window, .fi-dropdown-panel {
    -webkit-overflow-scrolling: touch;
}

/* Evitar seleccionar texto al tocar controles */
.fi-btn, .fi-icon-btn, .fi-tabs-tab { user-select: none; }

/* Respeto por reduced-motion en toda la app */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .sc-bottomnav, .sc-sheet, .sc-sheet-backdrop { display: none !important; }
}