/* ============================================================
   XiQ v3 — Mobile Responsive CSS
   Full responsive para todos los dispositivos
   ============================================================ */

/* ─── Variables móvil ──────────────────────────────────────── */
:root {
  --nav-h: 60px;
}

/* ─── NAV MÓVIL ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav {
    padding: 0 16px;
    height: var(--nav-h);
    flex-wrap: nowrap;
  }
  .nav-links { display: none; }
  .nav-cta .btn-link { display: none; }
  .brand-name span { display: none; }

  /* ─── HERO ─────────────────────────────────────────────── */
  .hero {
    flex-direction: column !important;
    padding: 24px 20px 40px !important;
    gap: 32px !important;
    min-height: auto !important;
  }
  .hero-copy { order: 1; }
  .hero-copy h1 { font-size: clamp(28px, 8vw, 42px) !important; }
  .hero-copy p  { font-size: 15px !important; }
  .hero-tree {
    order: 2;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-meta { gap: 20px !important; flex-wrap: wrap; }

  /* ─── LANDING GRID ─────────────────────────────────────── */
  .landing-grid { padding: 32px 20px !important; }
  .three-col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sef-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ─── DIAGNOSTIC ───────────────────────────────────────── */
  .diag-wrap { padding: 0 !important; }
  .diag-inner {
    padding: 20px 20px 100px !important;
    max-width: 100% !important;
  }
  .diag-question { font-size: clamp(20px, 5.5vw, 28px) !important; }
  .scale {
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .scale-btn {
    min-width: 52px !important;
    padding: 14px 8px !important;
    flex: 1 !important;
  }
  .scale-btn .val { font-size: 22px !important; }
  .scale-btn .lbl { font-size: 9px !important; }
  .scale-labels { font-size: 11px !important; }
  .diag-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 12px 20px !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--line) !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 10px !important;
  }
  .diag-nav .btn { flex: 1; justify-content: center; }

  /* ─── ÁRBOL EN DIAGNÓSTICO (panel lateral) ─────────────── */
  .diag-tree-panel {
    display: none !important;
  }
  .diag-tree-panel.show-mobile {
    display: block !important;
    position: fixed !important;
    top: var(--nav-h) !important;
    left: 0 !important;
    right: 0 !important;
    height: 220px !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
    z-index: 50 !important;
    padding: 8px !important;
  }
  .diag-with-tree .diag-inner {
    padding-top: 236px !important;
  }

  /* ─── RESULT ──────────────────────────────────────────── */
  .result {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .result-left {
    padding: 20px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .result-tree { max-width: 280px !important; margin: 0 auto !important; }
  .result-right { padding: 20px !important; }
  .result-right h1 { font-size: clamp(24px, 6vw, 36px) !important; }
  .dom-card { padding: 20px !important; }
  .dom-card .he { font-size: 36px !important; }
  .result-actions {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  .result-actions .btn { width: 100%; justify-content: center; }

  /* ─── DASHBOARD ────────────────────────────────────────── */
  .dash { padding: 20px !important; }
  .dash-head {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }
  .dash-head h1 { font-size: clamp(24px, 6vw, 36px) !important; }
  .dash-head .btn { width: 100%; justify-content: center; }
  .dash > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .dash-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .stat { padding: 16px !important; }
  .stat .v { font-size: 36px !important; }

  /* ─── HISTORIAL ─────────────────────────────────────────── */
  .hist-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 14px 0 !important;
  }
  .hist-spark { display: none !important; }
  .hist-arrow { display: none !important; }

  /* ─── MODAL ─────────────────────────────────────────────── */
  .modal-back { align-items: flex-end !important; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ─── TABS ──────────────────────────────────────────────── */
  .dash-tabs { overflow-x: auto !important; }
  .dash-tabs button { white-space: nowrap !important; min-width: 80px !important; }

  /* ─── MOTOR DE EVOLUCIÓN ────────────────────────────────── */
  .evo-panel {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .evo-scores {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
  }
  .evo-score-item .val { font-size: 28px !important; }

  /* ─── UPGRADE BANNER ────────────────────────────────────── */
  .upgrade-banner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .upgrade-banner button { width: 100% !important; }

  /* ─── PRACTICES ─────────────────────────────────────────── */
  .practice-item { gap: 10px !important; }
  .practice-time { min-width: auto !important; }

  /* ─── GENERAL UTILS ─────────────────────────────────────── */
  .blockages .block-list { gap: 10px !important; }
  .correction .ph { font-size: 18px !important; }
  .sefirot-bar h2 { font-size: clamp(20px, 5vw, 28px) !important; }

  /* Tabla de evolución móvil */
  .evo-hist-row { flex-wrap: wrap !important; }

  /* ─── ANALIZANDO ────────────────────────────────────────── */
  .analyzing-wrap {
    padding: 20px !important;
    flex-direction: column !important;
  }
  .analyzing-tree { width: 280px !important; max-width: 90vw !important; }
}

/* ─── TABLET (768–1024px) ───────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero { gap: 32px !important; padding: 48px 32px !important; }
  .hero-tree { max-width: 380px !important; }
  .result { gap: 24px !important; }
  .result-left { min-width: 280px !important; }
  .dash > div[style*="1fr 1.4fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  .three-col { grid-template-columns: 1fr 1fr !important; }
}

/* ─── PEQUEÑOS (≤380px) ─────────────────────────────────────── */
@media (max-width: 380px) {
  .scale { gap: 5px !important; }
  .scale-btn { min-width: 44px !important; padding: 12px 4px !important; }
  .scale-btn .val { font-size: 18px !important; }
  .nav { padding: 0 12px !important; }
  .diag-inner { padding: 16px 16px 100px !important; }
  .sef-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── ÁRBOL INTERACTIVO DURANTE DIAGNÓSTICO ─────────────────── */
.diag-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--nav-h));
  gap: 0;
}
.diag-split .diag-tree-side {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(74,125,255,0.03), transparent);
  overflow: hidden;
}
.diag-split .diag-question-side {
  padding: 40px 48px 120px;
  overflow-y: auto;
}
.sefira-tooltip {
  text-align: center;
  margin-top: 20px;
  max-width: 260px;
}
.sefira-tooltip .he {
  font-family: var(--hebrew);
  font-size: 32px;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.sefira-tooltip .name { font-family: var(--serif); font-size: 20px; font-weight: 300; }
.sefira-tooltip .meaning { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-low); text-transform: uppercase; margin: 4px 0 8px; }
.sefira-tooltip .dsc { font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.sefira-tooltip .axis-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: rgba(74,125,255,0.1);
  border: 1px solid rgba(74,125,255,0.2);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .diag-split {
    grid-template-columns: 1fr !important;
  }
  .diag-split .diag-tree-side {
    position: relative !important;
    height: 200px !important;
    top: 0 !important;
    padding: 12px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .diag-split .diag-tree-side svg { max-height: 160px !important; }
  .sefira-tooltip { display: none !important; }
  .diag-split .diag-question-side {
    padding: 20px 20px 100px !important;
  }
}

/* ─── MOTOR DE EVOLUCIÓN ────────────────────────────────────── */
.evo-panel {
  background: linear-gradient(135deg, rgba(74,125,255,0.05), rgba(124,58,237,0.03));
  border: 1px solid var(--line-strong);
  padding: 24px;
  margin-bottom: 32px;
}
.evo-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.evo-score-item {
  text-align: center;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.evo-score-item .label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink-low);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.evo-score-item .val {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
}
.evo-score-item .bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  margin-top: 8px;
  position: relative;
}
.evo-score-item .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.8s ease;
}
.micro-accion-card {
  padding: 20px;
  border: 1px solid rgba(212,184,118,0.25);
  background: linear-gradient(135deg, rgba(212,184,118,0.06), transparent);
  margin-top: 16px;
}
.check-in-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.check-in-btn {
  flex: 1; min-width: 80px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.check-in-btn:hover, .check-in-btn.sel {
  border-color: var(--accent);
  background: rgba(74,125,255,0.1);
  color: var(--accent);
}
.check-in-btn.done {
  border-color: #5ad1a0;
  background: rgba(90,209,160,0.1);
  color: #5ad1a0;
}