/* ============================================================
   SUPER_IA — zoom-fix.css  (v2 — Mobile-First Responsive Master)
   Funciona en: móvil 320px → 4K, zoom 50%→200%, cualquier pantalla.
   Incluir DESPUÉS de cualquier otro CSS de la página.
   ============================================================ */

/* ── 1. RESET DE OVERFLOW (lo más crítico) ───────────────────*/
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;   /* evita que iOS agrande texto */
    text-size-adjust: 100%;
}
body {
    overflow-x: hidden  !important;
    overflow-y: auto    !important;
    height: auto        !important;
    min-height: 100vh;
    min-height: 100dvh; /* dvh = sin barra de dirección en móvil */
    -webkit-overflow-scrolling: touch;
}

/* ── 2. BOX-MODEL Y MEDIA FLUIDOS ────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe, picture {
    max-width: 100%;
    height: auto;
    display: block;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ── 3. CONTENEDORES FLUIDOS ─────────────────────────────────*/
.page,
.login-card,
.login-wrapper,
.container-fluid,
.auth-container {
    width: 100%        !important;
    max-width: 100%    !important;
    padding-left:  clamp(12px, 4vw, 40px) !important;
    padding-right: clamp(12px, 4vw, 40px) !important;
}
/* page-wrap: NO sobreescribir — cada página define su propio ancho */

/* Inner max-width: removed — supervisor panel pages need full width */

/* ── 4. FLEX LAYOUTS — SIEMPRE WRAPPEAN ─────────────────────*/
.login-card,
.login-wrapper {
    flex-wrap: wrap    !important;
    height: auto       !important;
    min-height: 0      !important;
    border-radius: clamp(0px, 2vw, 28px) !important;
}

/* Paneles izquierdo/derecho en login */
.left-panel,
.login-left,
.right-panel,
.login-right {
    flex: 1 1 min(300px, 100%) !important;
    min-width: min(300px, 100%) !important;
    width: 100%                 !important;
    height: auto                !important;
    padding: clamp(28px, 5vw, 54px) clamp(20px, 4vw, 48px) !important;
}

/* ── 5. GRIDS ADAPTABLES ─────────────────────────────────────*/
.features-grid,
.feat-cards,
.acronym-wrap {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)) !important;
    gap: clamp(10px, 2vw, 20px) !important;
}
/* role-grid: siempre 4 columnas en desktop */
.role-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(12px, 2vw, 24px) !important;
}

/* ── 6. TIPOGRAFÍA FLUIDA ────────────────────────────────────*/
h1 { font-size: clamp(1.5rem,  5vw, 3.5rem)  !important; line-height: 1.15 !important; }
h2 { font-size: clamp(1.2rem,  3.5vw, 2.2rem) !important; line-height: 1.2  !important; }
h3 { font-size: clamp(1rem,    2.5vw, 1.5rem) !important; }
h4 { font-size: clamp(.9rem,   2vw,   1.2rem) !important; }
p  { font-size: clamp(.85rem,  1.8vw, 1.05rem) !important; line-height: 1.7  !important; }

/* ── 7. BOTONES — TÁCTILES (mín 44×44px) ────────────────────*/
.btn, .btn-login, .btn-yellow, .btn-outline,
.btn-primary, .btn-secondary, .btn-enter,
button[type="submit"] {
    min-height: 44px !important;
    padding: clamp(10px, 2vw, 16px) clamp(16px, 3vw, 28px) !important;
    font-size: clamp(.8rem, 1.8vw, .95rem) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ── 8. SIDEBAR — STICKY, NUNCA FIXED ───────────────────────*/
.sidebar {
    position: sticky  !important;
    top: 0            !important;
    height: 100vh     !important;
    overflow-y: auto  !important;
    flex-shrink: 0    !important;
    align-self: flex-start !important;
    transition: width .25s ease !important;
    z-index: 100      !important;
}
/* Corregir margin-left residual de fixed sidebar */
.main-content,
.content-area,
[class*="main-wrapper"] {
    margin-left: 0 !important;
    flex: 1 1 0    !important;
    min-width: 0   !important;
    overflow-x: hidden !important;
    overflow-y: auto   !important;
}

/* ── 9. TABLAS — SCROLL HORIZONTAL ──────────────────────────*/
.table-wrap,
.table-responsive,
[class*="table-container"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
table { min-width: 0 !important; }

/* ── 10. MAPAS ───────────────────────────────────────────────*/
.leaflet-container,
[id*="map"],
[class*="map-wrap"],
[class*="map-container"] {
    max-width: 100% !important;
    width:     100% !important;
    height: clamp(250px, 50vh, 700px) !important;
}

/* ── 11. TOAST / ALERTAS FLOTANTES ──────────────────────────*/
.toast-container,
[class*="notification-wrap"],
[class*="alert-float"] {
    position: fixed   !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
    right: clamp(8px, 2vw, 24px) !important;
    top:   clamp(8px, 2vh, 24px) !important;
    z-index: 9999 !important;
}

/* ── 12. INPUTS — TÁCTILES ───────────────────────────────────*/
input, select, textarea {
    min-height: 44px  !important;
    font-size: max(16px, 1rem) !important; /* evita zoom automático en iOS */
    border-radius: 10px !important;
    width: 100% !important;
}

/* ── 13. SCROLLBAR ELEGANTE ──────────────────────────────────*/
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,200,0,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,200,0,.55); }

/* ══════════════════════════════════════════════════════════════
   BREAKPOINTS MOBILE-FIRST
   ══════════════════════════════════════════════════════════════

   XS  < 480px   Teléfonos pequeños (iPhone SE, Galaxy A)
   SM  < 640px   Teléfonos grandes
   MD  < 768px   Tablet portrait
   LG  < 1024px  Tablet landscape / laptop pequeño
   XL  < 1280px  Desktop normal
   2XL > 1280px  Desktop grande / zoom out
   ═════════════════════════════════════════════════════════════*/

/* ── MD: Tablet portrait ────────────────────────────────────*/
@media (max-width: 768px) {
    /* Ocultar panel izquierdo decorativo en login */
    .left-panel, .login-left { display: none !important; }
    .right-panel, .login-right {
        border-radius: clamp(12px, 3vw, 22px) !important;
        box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
    }
    .login-card, .login-wrapper {
        border-radius: clamp(12px, 3vw, 22px) !important;
        box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
        border: 1px solid rgba(255,200,0,.15)   !important;
    }

    /* Sidebar: modo icono */
    .sidebar { width: 64px !important; }
    .sidebar .brand-text,
    .sidebar [class*="nav-text"],
    .sidebar [class*="link-text"],
    .sidebar .sidebar-section-title,
    .sidebar small,
    .sidebar span:not(.badge):not(.badge-nav) { display: none !important; }
    .sidebar .sidebar-link,
    .sidebar .nav-link { justify-content: center !important; padding: 12px 8px !important; }
    .sidebar .sidebar-brand,
    .sidebar .brand { justify-content: center !important; padding: 14px 0 !important; }

    /* Grids */
    .role-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hero       { grid-template-columns: 1fr !important; }
    .hero-right { display: none !important; }
    .acronym-wrap { grid-template-columns: 1fr !important; }
}

/* ── SM: Teléfonos grandes ───────────────────────────────────*/
@media (max-width: 640px) {
    /* Body con padding mínimo para tarjetas */
    body { padding: 0 !important; }
    .login-card, .login-wrapper { min-height: 100dvh !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }
    .right-panel, .login-right { padding: 28px 20px !important; border-radius: 0 !important; min-height: 100dvh !important; }

    /* Sidebar oculto — usar hamburger */
    .sidebar { display: none !important; }
    .sidebar.open {
        display: flex !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        height: 100dvh !important;
        width: 260px !important;
        z-index: 9999 !important;
        flex-direction: column !important;
    }
    .main-content, .content-area { padding: 12px !important; }

    /* Botones fullwidth en grupos */
    .btn-group, .cta-group { flex-direction: column !important; gap: 10px !important; }
    .btn, .btn-yellow, .btn-outline { width: 100% !important; justify-content: center !important; }

    /* Rol cards 1 columna */
    .role-grid, .role-grid-bottom { grid-template-columns: 1fr !important; max-width: 100% !important; }
    .features-grid { grid-template-columns: 1fr !important; }
    .cta-box { padding: clamp(24px, 6vw, 48px) clamp(16px, 5vw, 40px) !important; }

    /* Tablas Bootstrap grids */
    .row { --bs-gutter-x: 0.5rem !important; }
    [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Excepciones: métricas que van de 2 en 2 */
    .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* ── XS: Teléfonos pequeños (≤ 400px) ───────────────────────*/
@media (max-width: 400px) {
    .col-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .role-card h2 { font-size: 1rem !important; }
    .hero h1 { font-size: 1.6rem !important; }
    .section-title { font-size: 1.1rem !important; }
    .navbar { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ── Overlay para sidebar móvil abierto ─────────────────────*/
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9998;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ── Botón hamburger (se agrega por JS si no existe) ─────────*/
.hamburger-btn {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    z-index: 10000;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,200,0,.15);
    border: 1px solid rgba(255,200,0,.3);
    color: #FFC800;
    font-size: 18px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}
.hamburger-btn:hover { background: rgba(255,200,0,.28); }
@media (max-width: 640px) { .hamburger-btn { display: flex !important; } }