/* ============================================================
   1000XIQ EVOLUTIONS — RESPONSIVE GLOBAL v1.0
   Aplica a todos los dispositivos: iPhone, Samsung, tablets, desktop
   Mobile-first: 320px → 480px → 600px → 768px → 1024px → 1280px+
   ============================================================ */

/* ── VARIABLES GLOBALES ── */
:root {
  --sidebar-w: 260px;
  --topbar-h: 60px;
  --bottom-nav-h: 64px;
  --safe-bottom: max(8px, env(safe-area-inset-bottom));
  --safe-top: env(safe-area-inset-top);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

/* ── RESET BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── LAYOUT PRINCIPAL (sidebar + main) ── */
/* .main margin-left: solo para páginas con sidebar FIXED (dashboard).
   Páginas con .layout grid (módulos) usan margin-left:0 en su propio CSS */
.main    { min-height: 100vh; }
/* Sidebar fixed — solo cuando NO está dentro de .layout grid */
body:not(.has-layout-grid) .sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  z-index: 200; transform: translateX(0); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overflow-x: hidden;
}
/* Dashboard pattern: sidebar fixed → main needs margin-left */
body:not(.has-layout-grid) .main { margin-left: var(--sidebar-w); }

/* ── TOPBAR ── */
.topbar       { position: sticky; top: 0; z-index: 100; height: var(--topbar-h); padding: 0 32px; }
.tb-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; line-height: 1; font-size: 1.3rem; }

/* ── OVERLAY ── */
.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 199; }
.sb-overlay.show { display: block; }

/* ── CONTENT PADDING ── */
.content { padding: 36px 32px 60px; }

/* ── BOTTOM NAV (oculto por defecto en desktop) ── */
.bottom-nav,
.mob-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 300;
  padding: 6px 0 var(--safe-bottom);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; }
.bn-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; padding: 4px 8px;
  font-size: .55rem; font-weight: 700; letter-spacing: .02em;
  background: none; border: none; cursor: pointer;
  min-width: 48px; /* touch target */
  -webkit-tap-highlight-color: transparent;
}
.bn-item i { font-size: 1.2rem; }

/* ── GRIDS RESPONSIVE ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ── SCROLL MOMENTUM (iOS) ── */
.sidebar, .content, [data-scroll] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── INPUTS MÓVIL (evitar zoom en iOS) ── */
input, select, textarea {
  font-size: max(16px, 1rem) !important; /* iOS no hace zoom si font-size >= 16px */
}

/* ── TOUCH TARGETS MÍNIMOS ── */
button, a, .bn-item, .sb-link, .dmc-btn, .btn-diag {
  min-height: 44px; /* Apple HIG mínimo táctil */
}
.bn-item { min-height: 48px; } /* bottom nav más grande */

/* ============================================================
   BREAKPOINT: TABLET GRANDE / LAPTOP PEQUEÑO (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .main         { margin-left: 0; }
  .sidebar      { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open,
  .sidebar.mob-open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.6); }
  .tb-hamburger { display: block !important; }
  .topbar       { padding: 0 18px; }
  .content      { padding: 24px 20px calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px); }

  /* Layouts de 2 columnas (page grid con sidebar de contenido) */
  .layout       { grid-template-columns: 1fr !important; }
  .page-layout  { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BREAKPOINT: TABLET / MÓVIL GRANDE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --sidebar-w: 280px; }

  .content      { padding: 16px 14px calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px); }
  .topbar       { height: 52px; padding: 0 14px; }

  /* Mostrar bottom nav */
  .bottom-nav,
  .mob-bottom-nav { display: block; }

  /* Ocultar elementos sólo desktop */
  .hide-mobile  { display: none !important; }
  .show-mobile  { display: block !important; }

  /* Grids */
  .grid-4       { grid-template-columns: repeat(2, 1fr); }
  .grid-3       { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .diag-cards-grid { grid-template-columns: 1fr !important; }

  /* Tipografía */
  .cas-iq-big   { font-size: 2.8rem !important; }
  .greeting-name { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }

  /* Cards */
  .stat-card    { padding: 14px 16px; }
  .cas-hero     { padding: 18px 16px; }

  /* Tabla overflow */
  table         { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Formularios */
  .form-row     { grid-template-columns: 1fr !important; }
  .planes       { grid-template-columns: 1fr !important; }
}

/* ============================================================
   BREAKPOINT: MÓVIL ESTÁNDAR (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  .content      { padding: 12px 12px calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px); }

  .cas-iq-big   { font-size: 2.4rem !important; }

  /* Grids → 1 columna */
  .grid-3,
  .grid-2       { grid-template-columns: 1fr !important; gap: 10px; }

  /* Diag hero: stack vertical */
  .cas-hero-top { flex-direction: column; align-items: flex-start; }
  .dim-bars     { min-width: 100%; }

  /* Scores */
  .scores-grid  { grid-template-columns: repeat(2, 1fr) !important; }

  /* Módulos */
  .mod-card     { padding: 14px 14px; }
  .mod-icon     { width: 36px; height: 36px; min-width: 36px; font-size: .9rem; }

  /* Login split → 1 columna */
  .page         { grid-template-columns: 1fr !important; }
  .lp           { display: none !important; }
  .mob-logo     { display: flex !important; }
}

/* ============================================================
   BREAKPOINT: MÓVIL PEQUEÑO (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .content      { padding: 10px 10px calc(var(--bottom-nav-h) + var(--safe-bottom) + 10px); }
  .cas-iq-big   { font-size: 2rem !important; }
  .diag-mini-card { padding: 14px 14px; }
  .dmc-ring     { width: 56px; height: 56px; }
  .dmc-ring-val { font-size: 1.1rem; }
  .stat-card    { padding: 12px 13px; }
  .sc-value     { font-size: 1.6rem; }

  /* Certificado */
  .cert-wrap    { transform: scale(0.85) !important; transform-origin: top center !important; }

  /* Rol cards */
  .rol-cards    { grid-template-columns: 1fr !important; }
  .res-grid     { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   BREAKPOINT: MÓVIL MUY PEQUEÑO (≤ 360px — Galaxy S8 mini, etc.)
   ============================================================ */
@media (max-width: 360px) {
  .content      { padding: 8px 8px calc(var(--bottom-nav-h) + var(--safe-bottom) + 8px); }
  .cas-iq-big   { font-size: 1.7rem !important; }
  .sc-value     { font-size: 1.4rem; }
  .topbar       { height: 48px; }
  .bn-item      { padding: 3px 5px; min-width: 40px; }
  .bn-item i    { font-size: 1.05rem; }
  .bn-item span { font-size: .48rem; }
}

/* ============================================================
   SAFE AREA — iPhone X+ / Dynamic Island / notch
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .bottom-nav,
  .mob-bottom-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .content {
    padding-bottom: max(
      calc(var(--bottom-nav-h) + 16px),
      calc(var(--bottom-nav-h) + env(safe-area-inset-bottom))
    );
  }
  .topbar {
    padding-top: env(safe-area-inset-top);
  }
}

/* ============================================================
   ORIENTACIÓN LANDSCAPE EN MÓVIL
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .content      { padding-top: 10px; }
  .cas-iq-big   { font-size: 2rem !important; }
  .bottom-nav,
  .mob-bottom-nav { padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   TABLET (768px – 1024px) — iPad, Galaxy Tab, Surface
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-4       { grid-template-columns: repeat(2, 1fr); }
  .grid-3       { grid-template-columns: repeat(2, 1fr); }
  .content      { padding: 24px 24px calc(var(--bottom-nav-h) + 16px); }
  /* En tablet mostramos bottom nav también */
  .bottom-nav,
  .mob-bottom-nav { display: block; }
}

/* ============================================================
   DESKTOP GRANDE (≥ 1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .content      { padding: 40px 40px 60px; }
  .grid-4       { gap: 20px; }
  .grid-3       { gap: 20px; }
}

/* ============================================================
   AGENTE IQ FAB — posición en móvil
   ============================================================ */
@media (max-width: 768px) {
  .xiq-fab {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) !important;
    right: 14px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .xiq-panel {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 70px) !important;
    right: 10px !important;
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 160px) !important;
  }
}

/* ============================================================
   UTILIDADES
   ============================================================ */
.hide-mobile  { display: initial; }
.show-mobile  { display: none; }
.text-clamp   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll-x     { overflow-x: auto; -webkit-overflow-scrolling: touch; }

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

/* ══════════════════════════════════════════════════════════════════
   LANG SWITCHER — Platform Members (sidebar topbar)
   ══════════════════════════════════════════════════════════════════ */
.lang-switcher-nav {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px; padding: 3px;
}
.lang-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 28px; border-radius: 100px;
  background: transparent; border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: .68rem; font-weight: 800;
  color: rgba(255,255,255,.45); letter-spacing: .04em;
  transition: all .18s; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lang-btn:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); }
.lang-btn.active {
  background: var(--purple, #7C3AED);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,.45);
}
/* Topbar — posición */
.topbar .lang-switcher-nav,
.tb-lang { margin-right: 4px; }

/* Mobile bottom: ocultar si hay poco espacio */
@media (max-width: 380px) {
  .lang-btn { width: 28px; height: 24px; font-size: .6rem; }
}