/* ===================================================================
   MigraSense — Sistema de diseño (v3)

   Idea central: una interfaz tranquila para personas sensibles a la luz.
   - Superficies sin brillos ni degradados animados; el azul de la marca
     se usa solo para acciones y para marcar dónde estás.
   - Jerarquía con tipografía y espacio, no con sombras ni colores.
   - Movimiento solo como respuesta a lo que haces (abrir, elegir, guardar).
   - Celular primero; tablet y PC reutilizan los mismos componentes.

   Puntos de quiebre:  < 640 celular · 640–1023 tablet · ≥ 1024 PC
   Los nombres de las variables antiguas (--primary, --orange, --card…)
   se conservan porque el JavaScript los usa.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens: modo claro ---------- */
:root{
  --bg:#f2f4f7;
  --bg-grad-1:#f2f4f7; --bg-grad-2:#f2f4f7; --bg-grad-3:#f2f4f7;

  --card:#ffffff;
  --card-alt:#f6f7f9;
  --border:#e2e6ec;
  --border-strong:#cfd5de;

  --text:#18212f;
  --text-muted:#4f5b6c;
  --text-faint:#6e7889;

  --primary:#2f5bd3;          /* azul de la marca: acciones y lugar actual */
  --primary-dark:#1f3f99;
  --primary-light:#5b7fe0;
  --on-primary:#ffffff;
  --accent:#5b7fe0;
  --accent-soft:#eaf0fc;
  --accent-strong:#2f5bd3;

  --orange:#b8741a;  --orange-soft:#fbf1e1;    /* riesgo moderado / episodios */
  --success:#2d8562; --success-soft:#e4f2eb;   /* riesgo bajo */
  --danger:#be4335;  --danger-soft:#fbe9e6;    /* riesgo alto / borrar */

  --radius-xl:20px; --radius-lg:16px; --radius-md:12px; --radius-sm:10px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 8px 24px rgba(16,24,40,.08);
  --shadow-pop:0 16px 40px rgba(16,24,40,.16);
  --shadow-btn:none;

  --font-head:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --side-w:256px;
  --bar-h:60px;
  --nav-h:68px;
  --gutter:16px;
  color-scheme:light;
}

/* ---------- Tokens: modo oscuro (menos brillo, mismo contraste de lectura) ---------- */
html[data-theme="dark"]{
  --bg:#11151b;
  --bg-grad-1:#11151b; --bg-grad-2:#11151b; --bg-grad-3:#11151b;
  --card:#192029;
  --card-alt:#1f2733;
  --border:#2b3442;
  --border-strong:#3a4555;
  --text:#e6eaf0;
  --text-muted:#a7b0be;
  --text-faint:#8b95a5;
  --primary:#86a5f2;          /* texto, enlaces y bordes */
  --primary-dark:#a9c0f7;
  --primary-light:#9fb7f5;
  --on-primary:#0f1520;
  --fill:#3d5ec4;             /* botones llenos: azul profundo, sin deslumbrar */
  --fill-hover:#4a6bd0;
  --accent:#86a5f2;
  --accent-soft:#1e2a44;
  --accent-strong:#86a5f2;
  --orange:#e0a24a;  --orange-soft:rgba(224,162,74,.14);
  --success:#5bc195; --success-soft:rgba(91,193,149,.14);
  --danger:#ee7b6e;  --danger-soft:rgba(238,123,110,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.35);
  --shadow-pop:0 16px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* Botones llenos en modo oscuro: tono profundo con texto blanco */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .action-main,
html[data-theme="dark"] .nav-cta-dot{ background:var(--fill); border-color:var(--fill); color:#fff; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .action-main:hover{ background:var(--fill-hover); border-color:var(--fill-hover); }
html[data-theme="dark"] .action-main .action-ico{ background:rgba(255,255,255,.14); color:#fff; }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--bg); }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  font-family:var(--font-body); font-size:.9375rem; line-height:1.5;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--text); margin:0; line-height:1.25; font-weight:700; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
input,select,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
svg{ flex:none; }

/* Foco visible y consistente para teclado */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:6px;
}
.chip:has(input:focus-visible), .option-card:has(input:focus-visible){ outline:2px solid var(--primary); outline-offset:2px; }
.switch input:focus-visible + .slider{ outline:2px solid var(--primary); outline-offset:2px; }

/* Utilidades usadas en el HTML/JS */
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.center{ text-align:center; }
.muted{ color:var(--text-muted); }
.small{ font-size:.8125rem; }

/* =====================================================================
   ARMAZÓN DE LA APP
   ===================================================================== */
.app-shell{ min-height:100vh; min-height:100dvh; }
.screen{
  width:100%; max-width:1180px; margin:0 auto;
  padding:20px var(--gutter) calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
}

/* Logo */
.logo-sm{ display:flex; align-items:center; gap:10px; }
.logo-sm img{ width:32px; height:32px; }
.logo-sm strong{ font-family:var(--font-head); font-size:1.0625rem; font-weight:800; letter-spacing:-.01em; }
.logo-sm strong span{ color:var(--primary); }

/* ---------- Barra superior (celular y tablet) ---------- */
.app-bar{
  position:sticky; top:0; z-index:40;
  height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0;
  display:flex; align-items:center; justify-content:space-between;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
}
.account-wrap{ position:relative; }
.account-btn{
  width:40px; height:40px; padding:0; border-radius:50%;
  border:1px solid var(--border); background:var(--card); overflow:hidden;
}
.account-btn img{ width:100%; height:100%; object-fit:cover; }
.account-menu{
  position:absolute; right:0; top:calc(100% + 8px); width:min(280px, calc(100vw - 32px));
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); padding:6px; z-index:70;
}
.account-menu-head{ padding:12px 12px 10px; border-bottom:1px solid var(--border); margin-bottom:6px; min-width:0; }
.account-menu-head strong{ display:block; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-menu-head small{ display:block; color:var(--text-muted); font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-row{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:44px; padding:8px 12px; border:0; border-radius:var(--radius-sm);
  background:transparent; text-align:left; font-weight:500; cursor:pointer;
}
.menu-row svg{ width:20px; height:20px; color:var(--text-muted); }
.menu-row span:not(.switch):not(.slider){ flex:1; }
.menu-row:hover{ background:var(--card-alt); }
.menu-logout{ color:var(--danger); border-top:1px solid var(--border); border-radius:0 0 var(--radius-sm) var(--radius-sm); margin-top:6px; }
.menu-logout svg{ color:var(--danger); }

/* ---------- Barra inferior (celular y tablet) ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(5,1fr);
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding:6px 4px env(safe-area-inset-bottom);
  background:var(--card); border-top:1px solid var(--border);
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-width:0; border-radius:var(--radius-sm);
  color:var(--text-faint); font-size:.6875rem; font-weight:600;
  transition:color .15s ease, background .15s ease;
}
.nav-item svg{ width:22px; height:22px; }
.nav-item.active{ color:var(--primary); }
.nav-item:hover{ color:var(--text); }
.nav-item.active:hover{ color:var(--primary); }
.nav-cta{ color:var(--text-muted); }
.nav-cta-dot{
  width:40px; height:30px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:var(--on-primary);
}
.nav-cta-dot svg{ width:20px; height:20px; }
.nav-cta.active .nav-cta-dot{ box-shadow:0 0 0 3px var(--accent-soft); }

/* ---------- Barra lateral (PC) ---------- */
.side-nav{ display:none; }

/* ---------- Cabecera de cada página ---------- */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:4px 0 20px; flex-wrap:wrap; }
.page-head > div{ min-width:0; flex:1 1 260px; }
.page-title{ font-size:1.5rem; font-weight:800; letter-spacing:-.015em; }
.page-sub{ color:var(--text-muted); margin-top:4px; max-width:60ch; }
.page-head .back-btn + div{ flex:1; }
.page-head:has(.back-btn){ flex-wrap:nowrap; align-items:center; }

.section-title{ font-size:1.0625rem; font-weight:700; margin:28px 0 4px; }
.section-sub{ color:var(--text-muted); font-size:.875rem; margin-bottom:12px; }
.card-title{ font-size:.9375rem; font-weight:700; margin-bottom:8px; }

.back-btn{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border); color:var(--text);
}
.back-btn svg{ width:20px; height:20px; }
.back-btn:hover{ background:var(--card-alt); }

/* =====================================================================
   COMPONENTES
   ===================================================================== */

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; padding:12px 20px;
  border-radius:var(--radius-md); border:1px solid transparent;
  font-family:var(--font-head); font-weight:700; font-size:.9375rem; line-height:1.2;
  text-align:center; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn svg{ width:18px; height:18px; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:var(--on-primary); }
.btn-primary:hover{ background:var(--primary-dark); }
.btn-outline{ background:var(--card); color:var(--text); border-color:var(--border-strong); }
.btn-outline:hover{ background:var(--card-alt); }
.btn-ghost{ background:transparent; color:var(--primary); }
.btn-ghost:hover{ background:var(--accent-soft); }
.btn-danger{ background:var(--danger); color:#fff; }
html[data-theme="dark"] .btn-danger{ color:#1a0f0d; }
.btn-danger:hover{ filter:brightness(.94); }
.btn-sm{ width:auto; min-height:40px; padding:8px 16px; font-size:.875rem; border-radius:var(--radius-sm); }
.btn:disabled, .btn[aria-busy="true"]{ opacity:.6; cursor:not-allowed; pointer-events:none; }
.btn-row{ display:flex; gap:12px; }
.btn-row .btn{ flex:1; }
.link-btn{ background:none; border:0; padding:0; color:var(--primary); font-weight:600; font-size:.875rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* ---------- Tarjetas ---------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; min-width:0; }
.card-soft{ background:var(--card-alt); }

/* ---------- Campos de formulario ---------- */
.field{ margin-bottom:16px; min-width:0; }
.field label, .switch-line label{ display:block; font-weight:600; font-size:.875rem; color:var(--text); margin-bottom:6px; }
.input-wrap{
  display:flex; align-items:center; gap:10px; width:100%; min-height:48px;
  background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:0 14px; transition:border-color .15s ease, box-shadow .15s ease;
}
.input-wrap:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--accent-soft); }
.input-wrap svg{ width:18px; height:18px; color:var(--text-faint); }
.input-wrap input{ flex:1 1 auto; min-width:0; width:100%; border:0; outline:none; background:transparent; padding:12px 0; font-size:1rem; }
.input-wrap input::placeholder, textarea::placeholder{ color:var(--text-faint); }
.input-wrap input:focus-visible{ outline:none; }
.toggle-eye{ display:flex; padding:6px; margin-right:-6px; background:none; border:0; color:var(--text-faint); border-radius:8px; }
.toggle-eye:hover{ color:var(--text); }
.field-error{ color:var(--danger); font-size:.8125rem; margin-top:6px; display:none; }
.field.has-error .input-wrap{ border-color:var(--danger); }
.field.has-error .field-error{ display:block; }
.field-hint{ color:var(--text-muted); font-size:.8125rem; margin-top:6px; }
.f-label{ display:block; margin:14px 0 6px; font-size:.875rem; font-weight:600; }
.f-input{ width:100%; min-height:44px; padding:10px 12px; border-radius:var(--radius-md); border:1px solid var(--border-strong); background:var(--card); color:var(--text); }
.textarea-wrap{ background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
.textarea-wrap:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--accent-soft); }
.textarea-wrap textarea{ width:100%; min-height:88px; border:0; outline:none; background:transparent; resize:vertical; font-size:1rem; }
.textarea-wrap textarea:focus-visible{ outline:none; }

.pw-strength{ margin-top:8px; display:none; }
.field.show-strength .pw-strength{ display:block; }
.pw-strength-bar{ display:flex; gap:4px; height:4px; }
.pw-strength-bar span{ flex:1; border-radius:var(--radius-pill); background:var(--border); }
.pw-strength-label{ font-size:.8125rem; margin-top:6px; font-weight:600; color:var(--text-muted); }
.pw-strength.weak .pw-strength-bar span:nth-child(1){ background:var(--danger); }
.pw-strength.weak .pw-strength-label{ color:var(--danger); }
.pw-strength.medium .pw-strength-bar span:nth-child(-n+2){ background:var(--orange); }
.pw-strength.medium .pw-strength-label{ color:var(--orange); }
.pw-strength.strong .pw-strength-bar span{ background:var(--success); }
.pw-strength.strong .pw-strength-label{ color:var(--success); }

.checkbox-row{ display:flex; align-items:center; gap:10px; margin:4px 0 20px; flex-wrap:wrap; }
.checkbox-row input{ width:18px; height:18px; accent-color:var(--primary); }
.checkbox-row label{ font-size:.875rem; color:var(--text-muted); }
.checkbox-row a{ color:var(--primary); font-weight:600; }
.foot-link{ text-align:center; margin-top:20px; font-size:.9375rem; color:var(--text-muted); }
.foot-link a{ color:var(--primary); font-weight:700; }
.divider-text{ display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:.8125rem; margin:18px 0; }
.divider-text::before,.divider-text::after{ content:""; flex:1; height:1px; background:var(--border); }

/* ---------- Interruptor ---------- */
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex:none; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch .slider{ position:absolute; inset:0; background:var(--border-strong); border-radius:var(--radius-pill); transition:background .2s ease; }
.switch .slider::before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + .slider{ background:var(--primary); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
html[data-theme="dark"] .switch input:checked + .slider::before{ background:#0f1520; }

/* ---------- Chips y tarjetas de opción ---------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--card); border:1px solid var(--border-strong);
  font-weight:600; font-size:.875rem; color:var(--text); cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.chip input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.chip:hover{ border-color:var(--primary); }
.chip.selected{ background:var(--accent-soft); border-color:var(--primary); color:var(--primary-dark); }
html[data-theme="dark"] .chip.selected{ color:var(--text); }
.chip.selected::before{
  content:""; width:14px; height:14px; margin-left:-2px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>') center/contain no-repeat;
}

.option-list{ display:flex; flex-direction:column; gap:10px; }
.option-card{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:56px; padding:12px 14px;
  background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.option-card input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.option-card:hover{ border-color:var(--primary); }
.option-card .oc-icon{ width:36px; height:36px; border-radius:var(--radius-sm); flex:none; background:var(--accent-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.option-card .oc-text{ flex:1; font-weight:600; font-size:.9375rem; min-width:0; }
.option-card .oc-check{ width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); flex:none; display:flex; align-items:center; justify-content:center; }
.option-card.multi .oc-check{ border-radius:6px; }
.option-card .oc-check svg{ display:none; width:12px; height:12px; color:var(--on-primary); }
.option-card.selected{ border-color:var(--primary); background:var(--accent-soft); }
.option-card.selected .oc-check{ background:var(--primary); border-color:var(--primary); }
.option-card.selected .oc-check svg{ display:block; }

/* ---------- Escala (slider) ---------- */
.scale-wrap{ margin:8px 0; }
.scale-value{ text-align:center; font-family:var(--font-head); font-weight:800; font-size:2.25rem; line-height:1.1; color:var(--text); }
.scale-caption{ text-align:center; color:var(--text-muted); font-size:.875rem; margin-bottom:14px; }
input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--success), var(--orange) 55%, var(--danger)); outline:none;
}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--card); border:3px solid var(--text); cursor:pointer; box-shadow:var(--shadow-md); }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--card); border:3px solid var(--text); cursor:pointer; }
.scale-labels{ display:flex; justify-content:space-between; font-size:.8125rem; color:var(--text-muted); margin-top:8px; }

/* ---------- Pestañas / segmentos ---------- */
.tabs{ display:flex; gap:4px; padding:4px; background:var(--card-alt); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:20px; max-width:560px; }
.tab-btn{ flex:1; min-height:42px; padding:8px 12px; border:0; border-radius:var(--radius-sm); background:transparent; font-weight:700; font-size:.875rem; color:var(--text-muted); }
.tab-btn:hover{ color:var(--text); }
.tab-btn.active{ background:var(--card); color:var(--text); box-shadow:var(--shadow-sm), 0 0 0 1px var(--border); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.seg{ display:inline-flex; gap:2px; padding:3px; background:var(--card-alt); border:1px solid var(--border); border-radius:var(--radius-sm); }
.seg-btn{ border:0; background:transparent; min-height:32px; padding:4px 12px; border-radius:8px; font-weight:600; font-size:.8125rem; color:var(--text-muted); }
.seg-btn.active{ background:var(--card); color:var(--text); box-shadow:0 0 0 1px var(--border); }

.filters-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-bottom:16px; }
.filter-row{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.filter-row::-webkit-scrollbar{ display:none; }
.filter-chip{ flex:none; min-height:36px; padding:6px 14px; border-radius:var(--radius-pill); background:var(--card); border:1px solid var(--border-strong); font-size:.8125rem; font-weight:600; color:var(--text-muted); }
.filter-chip:hover{ color:var(--text); }
.filter-chip.active{ background:var(--text); border-color:var(--text); color:var(--card); }

/* ---------- Avisos, toasts y ventanas ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform:translate(-50%, 12px);
  max-width:calc(100vw - 32px); display:flex; align-items:center; gap:8px;
  background:var(--text); color:var(--card); padding:12px 18px; border-radius:var(--radius-md);
  font-size:.875rem; font-weight:600; box-shadow:var(--shadow-pop);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:999;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.app-shell.no-nav ~ .toast, body:not(:has(.bottom-nav)) .toast{ bottom:24px; }

.modal-overlay{
  position:fixed; inset:0; z-index:998; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(15,21,32,.45); opacity:0; pointer-events:none; transition:opacity .2s ease;
}
html[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,.6); }
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-sheet{
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:12px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(24px); transition:transform .25s ease;
}
.modal-overlay.show .modal-sheet{ transform:translateY(0); }
.modal-handle{ width:40px; height:4px; background:var(--border-strong); border-radius:var(--radius-pill); margin:0 auto 16px; }
.modal-sheet h3{ font-size:1.125rem; }

.rem-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 20px; padding:14px 16px; border-radius:var(--radius-lg);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.rem-banner-icon{ font-size:1.25rem; line-height:1; }
.rem-banner-body{ flex:1 1 200px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.rem-banner-body strong{ font-size:.9375rem; }
.rem-banner-body span{ font-size:.875rem; color:var(--text-muted); }
.rem-banner-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rem-x{ border:0; background:transparent; color:var(--text-muted); font-size:1.4rem; line-height:1; width:36px; height:36px; border-radius:var(--radius-sm); }
.rem-x:hover{ background:var(--card); }
.rem-banner.rem-alerta{ background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.rem-banner.rem-alerta .rem-banner-body span{ color:var(--text); }

.g-note{ border-radius:var(--radius-md); padding:12px 14px; font-size:.875rem; line-height:1.5; margin:12px 0; }
.g-info{ background:var(--accent-soft); }
.g-ok{ background:var(--success-soft); }
.g-warn{ background:var(--orange-soft); }
.g-bad{ background:var(--danger-soft); }
.g-note .g-list{ margin-bottom:0; }

.tag{ display:inline-flex; align-items:center; gap:4px; font-size:.75rem; font-weight:700; padding:2px 10px; border-radius:var(--radius-pill); margin-top:8px; }
.tag-low{ background:var(--success-soft); color:var(--success); }
.tag-mid{ background:var(--orange-soft); color:var(--orange); }
.tag-high{ background:var(--danger-soft); color:var(--danger); }

.empty-state{ text-align:center; padding:40px 20px; color:var(--text-muted); background:var(--card); border:1px dashed var(--border-strong); border-radius:var(--radius-lg); }
.empty-state strong{ color:var(--text); }
.empty-state svg:not(.empty-illustration){ width:56px; height:56px; margin:0 auto 12px; color:var(--text-faint); }
.empty-state .empty-illustration{ width:110px; height:110px; margin:0 auto 12px; }

.ms-cargando{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--bg); color:var(--text-muted); font-weight:600; }
.ms-spinner{ width:36px; height:36px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--primary); animation:ms-girar .9s linear infinite; }
@keyframes ms-girar{ to{ transform:rotate(360deg); } }

/* ---------- Ajustes (filas con texto + control) ---------- */
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); min-width:0; }
.settings-row:last-child{ border-bottom:0; }
.settings-label{ flex:1 1 auto; display:flex; align-items:center; gap:12px; font-weight:600; font-size:.9375rem; min-width:0; }
.settings-label > div{ min-width:0; overflow-wrap:anywhere; }
.settings-label svg{ color:var(--text-muted); }
.settings-sub{ font-size:.8125rem; color:var(--text-muted); font-weight:400; margin-top:2px; }
.alert-row{ background:var(--danger-soft); border-radius:var(--radius-md); padding:14px; border-bottom:0; margin-bottom:6px; }
.rem-controls{ display:flex; align-items:center; gap:8px; flex:none; }
.rem-time{ min-height:40px; padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--card); color:var(--text); font-size:.875rem; }
.rem-when{ display:block; font-size:.75rem; color:var(--text-muted); margin-top:1px; font-weight:400; }
.rem-link{ display:inline-block; margin-top:10px; font-size:.875rem; font-weight:600; color:var(--primary); }
.rem-link:hover{ text-decoration:underline; }
.rem-status{ margin:14px 0 6px; padding:10px 12px; border-radius:var(--radius-md); font-size:.8125rem; line-height:1.45; background:var(--card-alt); color:var(--text-muted); border:1px solid var(--border); }
.rem-status:empty{ display:none; }
.rem-status[data-estado="ok"]{ background:var(--success-soft); color:var(--text); border-color:transparent; }
.rem-status[data-estado="bad"]{ background:var(--danger-soft); color:var(--text); border-color:transparent; }
.rem-status[data-estado="warn"]{ background:var(--orange-soft); color:var(--text); border-color:transparent; }
.rem-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.rem-note{ margin-top:12px; }
@media (max-width:520px){
  .settings-row:has(.rem-time){ flex-wrap:wrap; }
  .settings-row:has(.rem-time) .settings-label{ flex:1 1 100%; }
  .settings-row:has(.rem-time) .rem-controls{ flex:1 1 100%; justify-content:flex-end; }
}

/* =====================================================================
   INICIO
   ===================================================================== */
.dash-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.dash-main, .dash-side{ min-width:0; display:flex; flex-direction:column; gap:16px; }

.predict-card{
  position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:20px; overflow:hidden;
  border-top:4px solid var(--border-strong);
}
.predict-card:has(.risk-bar-fill[data-level="bajo"]){ border-top-color:var(--success); }
.predict-card:has(.risk-bar-fill[data-level="moderado"]){ border-top-color:var(--orange); }
.predict-card:has(.risk-bar-fill[data-level="alto"]){ border-top-color:var(--danger); }
.predict-badge{ display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:600; color:var(--text-muted); margin-bottom:10px; }
.predict-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--primary); }
.predict-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.predict-title{ font-family:var(--font-head); font-size:1.375rem; font-weight:800; line-height:1.25; letter-spacing:-.01em; }
.predict-desc{ color:var(--text-muted); margin-top:6px; max-width:62ch; }
img.predict-icon, .predict-icon{ width:64px; height:64px; flex:none; object-fit:contain; border-radius:16px; opacity:.95; }
.risk-bar{ height:8px; border-radius:var(--radius-pill); background:var(--card-alt); border:1px solid var(--border); margin-top:18px; overflow:hidden; }
.risk-bar-fill{ height:100%; border-radius:var(--radius-pill); background:var(--orange); transition:width .6s ease; }
.risk-bar-fill[data-level="bajo"]{ background:var(--success); }
.risk-bar-fill[data-level="moderado"]{ background:var(--orange); }
.risk-bar-fill[data-level="alto"]{ background:var(--danger); }
.risk-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.risk-meta #riskPct{ font-family:var(--font-head); font-weight:800; font-size:1.125rem; }
.episode-alert{ display:flex; gap:12px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:var(--radius-md); background:var(--danger-soft); }
.episode-alert-icon{ font-size:1.2rem; line-height:1.3; }
.episode-alert strong{ display:block; font-size:.9375rem; }
.episode-alert span span{ font-size:.875rem; color:var(--text); }

.action-pair{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.action-tile{
  display:flex; align-items:center; gap:14px; min-height:72px; padding:14px 16px;
  background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  transition:border-color .15s ease, background .15s ease;
}
.action-tile:hover{ border-color:var(--primary); }
.action-ico{ width:44px; height:44px; border-radius:var(--radius-md); flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--primary); }
.action-ico svg{ width:22px; height:22px; }
.action-txt{ display:flex; flex-direction:column; min-width:0; }
.action-txt strong{ font-family:var(--font-head); font-size:1rem; }
.action-txt small{ color:var(--text-muted); font-size:.8125rem; }
.action-main{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.action-main:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
.action-main .action-ico{ background:rgba(255,255,255,.16); color:var(--on-primary); }
.action-main .action-txt small{ color:inherit; opacity:.85; }

.banner-detect{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:border-color .15s ease;
}
.banner-detect:hover{ border-color:var(--primary); }
.banner-ico{ width:44px; height:44px; border-radius:var(--radius-md); flex:none; display:flex; align-items:center; justify-content:center; background:var(--card-alt); color:var(--text); }
.banner-ico svg{ width:22px; height:22px; }
.banner-detect .txt{ flex:1; min-width:0; }
.banner-detect .txt b{ display:block; font-family:var(--font-head); font-size:1rem; }
.banner-detect .txt span{ font-size:.875rem; color:var(--text-muted); }
.banner-detect .go{ width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.banner-detect .go svg{ width:18px; height:18px; }

.two-col{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.mini-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; min-width:0; }
.mini-card h4{ font-size:.9375rem; margin-bottom:8px; }
.mini-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.875rem; padding:10px 0; border-bottom:1px solid var(--border); }
.mini-list li:last-child{ border-bottom:0; }
.mini-list li > span:last-child:not(.switch){ color:var(--text-muted); white-space:nowrap; font-size:.8125rem; }
.mini-list li > span:first-child{ min-width:0; }
.mini-dot{ width:8px; height:8px; border-radius:50%; margin-right:8px; display:inline-block; }

/* Análisis (ventana) */
.risk-summary{ display:flex; align-items:baseline; gap:10px; margin:4px 0; flex-wrap:wrap; }
.risk-summary strong{ font-family:var(--font-head); font-weight:800; font-size:2rem; }
.risk-summary[data-level="bajo"] strong{ color:var(--success); }
.risk-summary[data-level="moderado"] strong{ color:var(--orange); }
.risk-summary[data-level="alto"] strong{ color:var(--danger); }
.dm-h{ font-size:.9375rem; margin:20px 0 8px; }
.factor-list, .hallazgos{ list-style:none; margin:0; padding:0; font-size:.875rem; line-height:1.45; }
.factor-list li{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.factor-list .pts{ flex:none; min-width:38px; height:fit-content; text-align:center; font-weight:700; font-size:.75rem; color:var(--orange); background:var(--orange-soft); border-radius:var(--radius-pill); padding:2px 6px; }
.hallazgos{ margin-top:12px; }
.hallazgos li{ padding:8px 12px; margin-bottom:6px; background:var(--card-alt); border-radius:var(--radius-sm); }
.pat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pat-grid div{ background:var(--card-alt); border-radius:var(--radius-md); padding:10px 12px; }
.pat-grid strong{ display:block; font-family:var(--font-head); font-size:1.125rem; }
.pat-grid span{ font-size:.75rem; color:var(--text-muted); font-weight:600; }
.dow-bars{ display:flex; gap:8px; align-items:flex-end; height:90px; }
.dow{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:100%; }
.dow i{ display:block; width:100%; max-width:28px; border-radius:6px; background:var(--border-strong); }
.dow i.top{ background:var(--orange); }
.dow b{ font-size:.75rem; min-height:14px; }
.dow span{ font-size:.75rem; color:var(--text-muted); font-weight:600; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.mini-chip{ background:var(--orange-soft); color:var(--orange); font-size:.8125rem; font-weight:600; padding:4px 10px; border-radius:var(--radius-pill); }

/* =====================================================================
   REGISTRAR
   ===================================================================== */
.form-cols{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.form-col{ min-width:0; }
.form-group-title{ display:flex; align-items:center; gap:8px; font-size:1rem; font-weight:700; margin:24px 0 10px; }
.form-col > .form-group-title:first-child{ margin-top:0; }
.form-group-title svg{ width:18px; height:18px; color:var(--text-muted); }
.check-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sym-list{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-items:start; }
.sym-item{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border-strong); border-radius:var(--radius-md); transition:border-color .15s ease, background .15s ease; }
.sym-item .option-card{ border:0; background:transparent; min-height:52px; }
.sym-item:hover{ border-color:var(--primary); }
.sym-item:has(.option-card.selected){ border-color:var(--primary); background:var(--accent-soft); }
.sym-item .oc-icon{ display:none; }
.sym-more{ align-self:flex-start; margin:-6px 14px 10px; padding:4px 0; background:none; border:0; color:var(--primary); font-weight:600; font-size:.8125rem; display:inline-flex; align-items:center; gap:4px; }
.sym-more:hover{ text-decoration:underline; }
.sym-more svg{ transition:transform .2s ease; }
.sym-item.open .sym-more svg{ transform:rotate(180deg); }
.sym-info{ margin:0 14px 12px; font-size:.875rem; line-height:1.5; color:var(--text-muted); }
#panel-prodromico .form-col + .form-col, #panel-episodio .form-col + .form-col{ margin-top:8px; }
.form-col > .btn{ margin-top:24px; }

/* =====================================================================
   HISTORIAL
   ===================================================================== */
.report-btn{ width:auto; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.stat{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 10px; text-align:center; min-width:0; }
.stat strong{ display:block; font-family:var(--font-head); font-weight:800; font-size:1.5rem; line-height:1.2; }
.stat span{ font-size:.75rem; color:var(--text-muted); font-weight:600; }
.records-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.record-item{ display:flex; gap:14px; width:100%; text-align:left; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; transition:border-color .15s ease; }
.record-btn{ font:inherit; color:inherit; cursor:pointer; }
.record-item:hover{ border-color:var(--border-strong); }
.record-icon{ width:42px; height:42px; border-radius:var(--radius-md); flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--primary); }
.record-icon.is-episodio{ background:var(--orange-soft); color:var(--orange); }
.record-body{ flex:1; min-width:0; }
.record-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.record-title{ font-family:var(--font-head); font-weight:700; font-size:.9375rem; }
.record-date{ font-size:.8125rem; color:var(--text-muted); white-space:nowrap; }
.record-desc{ font-size:.875rem; color:var(--text-muted); margin-top:2px; overflow-wrap:anywhere; }
.charts-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:24px; }
.chart-card{ padding:16px; }
.chart-card h4{ font-size:.9375rem; margin:0 0 8px; }
.chart-card svg{ width:100%; height:auto; max-height:280px; display:block; }
.chart-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.chart-head h4{ margin:0; }
.chart-empty{ padding:16px 0; text-align:center; }
.legend{ display:flex; gap:16px; justify-content:center; font-size:.8125rem; color:var(--text-muted); font-weight:600; margin-top:10px; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-nav{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border-strong); background:var(--card); font-size:1.2rem; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal-dow span{ text-align:center; font-size:.75rem; font-weight:700; color:var(--text-muted); padding-bottom:4px; }
.cal-day{ aspect-ratio:1; border-radius:10px; border:0; background:transparent; color:var(--text-faint); font-weight:600; font-size:.875rem; }
.cal-day.empty{ visibility:hidden; }
.cal-day.today{ outline:2px solid var(--primary); outline-offset:-2px; }
.cal-day.has-ep{ background:var(--orange); color:#fff; cursor:pointer; }
.cal-day.has-pro{ background:var(--primary); color:var(--on-primary); cursor:pointer; }
.cal-day.selected{ box-shadow:0 0 0 3px var(--text); }
.day-pill{ display:flex; align-items:center; gap:8px; width:fit-content; background:var(--accent-soft); color:var(--text); border-radius:var(--radius-pill); padding:6px 8px 6px 14px; font-size:.8125rem; font-weight:600; margin-bottom:12px; }
.day-pill button{ border:0; background:var(--text); color:var(--card); width:22px; height:22px; border-radius:50%; line-height:1; }
.d-list{ margin-top:12px; }
.d-row{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-top:1px solid var(--border); font-size:.9375rem; }
.d-row span{ color:var(--text-muted); font-size:.8125rem; font-weight:600; }
.report-summary{ margin-top:12px; padding:12px 14px; border-radius:var(--radius-md); background:var(--card-alt); font-size:.875rem; line-height:1.5; }
.report-extra{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; justify-content:center; }

/* =====================================================================
   CONSEJOS
   ===================================================================== */
.tips-hero{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--radius-lg); background:var(--accent-soft); margin-bottom:8px; }
.tips-hero img, .tips-hero svg{ width:52px; height:52px; flex:none; object-fit:contain; border-radius:14px; }
.tips-hero-text{ font-family:var(--font-head); font-weight:700; font-size:1rem; line-height:1.4; color:var(--text); }
#guias{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.acc{ padding:0; overflow:hidden; }
.acc-btn{ width:100%; display:flex; align-items:center; gap:14px; min-height:64px; padding:14px 16px; background:none; border:0; text-align:left; }
.acc-btn:hover{ background:var(--card-alt); }
.acc-title{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.acc-title strong{ font-family:var(--font-head); font-size:1rem; }
.acc-title small{ color:var(--text-muted); font-size:.8125rem; }
.acc-chev{ flex:none; color:var(--text-muted); transition:transform .25s ease; }
.acc.open .acc-chev{ transform:rotate(180deg); }
.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.acc.open .acc-panel{ grid-template-rows:1fr; }
.acc-inner{ overflow:hidden; padding:0 16px; }
.acc.open .acc-inner{ padding-bottom:18px; }
.acc-inner p{ margin:4px 0 8px; line-height:1.55; max-width:72ch; }
.g-h{ font-family:var(--font-head); font-size:.9375rem; margin:20px 0 6px; }
.g-list{ margin:6px 0 8px; padding-left:20px; font-size:.9375rem; line-height:1.6; list-style:disc; }
.food-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; margin:10px 0 12px; }
.food{ margin:0; border-radius:var(--radius-md); overflow:hidden; background:var(--card-alt); border:1px solid var(--border); }
.food img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.food figcaption{ padding:6px 4px; text-align:center; font-size:.8125rem; font-weight:600; line-height:1.25; }
.food-grid.warn .food{ border-color:var(--danger); }
.food-grid.aero img{ aspect-ratio:3/4; }
.prec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-top:8px; }
.prec{ background:var(--card-alt); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px 14px; font-size:.875rem; }
.ex-item{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--border); }
.ex-item img{ width:88px; height:88px; object-fit:cover; border-radius:var(--radius-md); flex:none; }
.ex-num{ width:88px; height:88px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--primary); font-family:var(--font-head); font-weight:800; font-size:1.6rem; }
@media (max-width:480px){ .ex-item img,.ex-num{ width:68px; height:68px; } }
.tip-icon{ width:40px; height:40px; border-radius:var(--radius-md); flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--primary); }
.tip-icon svg{ width:20px; height:20px; }
.tip-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.tip-title{ font-size:1rem; }
.tips-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:12px; align-items:stretch; }
.tips-grid > .card{ margin-top:0; }
.tips-grid .card p{ line-height:1.55; }
.tip-blue .tip-icon{ background:var(--accent-soft); color:var(--primary); }
.tip-orange .tip-icon{ background:var(--orange-soft); color:var(--orange); }
.tip-green .tip-icon{ background:var(--success-soft); color:var(--success); }

/* =====================================================================
   PERFIL
   ===================================================================== */
.profile-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.profile-aside, .profile-main{ min-width:0; display:flex; flex-direction:column; gap:16px; }

.identity-card{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 16px; }
.profile-avatar{ grid-row:span 2; width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--accent-soft); border:1px solid var(--border); }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.identity-text{ min-width:0; }
.identity-text h2{ font-size:1.125rem; overflow-wrap:anywhere; }
.identity-text p{ color:var(--text-muted); font-size:.875rem; overflow-wrap:anywhere; }
.avatar-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.avatar-actions .btn{ min-height:36px; padding:6px 12px; }

.profile-toc{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter); }
.profile-toc::-webkit-scrollbar{ display:none; }
.profile-toc a{ flex:none; min-height:36px; display:inline-flex; align-items:center; padding:6px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--card); font-size:.8125rem; font-weight:600; color:var(--text-muted); }
.profile-toc a:hover{ color:var(--text); border-color:var(--text-faint); }

.report-cta{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius-lg); background:var(--card); border:1px solid var(--border); transition:border-color .15s ease; }
.report-cta:hover{ border-color:var(--primary); }
.report-cta-icon{ width:44px; height:44px; border-radius:var(--radius-md); flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--primary); }
.report-cta-text{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.report-cta-text strong{ font-family:var(--font-head); font-size:1rem; }
.report-cta-text span{ font-size:.8125rem; color:var(--text-muted); }
.report-cta-go{ color:var(--text-muted); }

.prof-section{ scroll-margin-top:calc(var(--bar-h) + 16px); }
.prof-head{ margin-bottom:16px; }
.prof-head h2{ font-size:1.125rem; }
.prof-head p{ color:var(--text-muted); font-size:.875rem; margin-top:2px; max-width:60ch; }
.prof-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.prof-head-row > div{ flex:1 1 240px; }
.form-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 16px; }
.form-actions{ display:flex; justify-content:flex-end; gap:8px; }
.info-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.info-grid .settings-row{ padding:10px 0; border-bottom:1px solid var(--border); }
.info-grid .settings-label{ font-weight:400; font-size:.8125rem; color:var(--text-muted); }
.info-grid .settings-sub{ font-size:.9375rem; color:var(--text); font-weight:600; margin-top:2px; }

.session-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.session-text{ flex:1 1 220px; min-width:0; }
.session-text h2{ font-size:1.125rem; }
.session-text p{ color:var(--text-muted); font-size:.875rem; overflow-wrap:anywhere; }
.session-text strong{ color:var(--text); font-weight:600; }

.danger-zone{ padding:0; border-color:color-mix(in srgb, var(--danger) 30%, var(--border)); }
.danger-zone summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; cursor:pointer; color:var(--danger); }
.danger-zone summary::-webkit-details-marker{ display:none; }
.danger-zone summary span{ display:flex; flex-direction:column; }
.danger-zone summary small{ color:var(--text-muted); font-size:.8125rem; }
.danger-zone summary svg{ transition:transform .2s ease; }
.danger-zone[open] summary svg{ transform:rotate(180deg); }
.danger-body{ padding:0 20px 20px; }
.danger-body p{ font-size:.875rem; color:var(--text-muted); margin-bottom:14px; max-width:60ch; }

/* =====================================================================
   ACCESO: login / crear cuenta / recuperar / inicio
   ===================================================================== */
.app-shell.no-nav{ min-height:100vh; min-height:100dvh; }
.auth-visual{ display:none; }
.app-shell.auth-split .screen{
  max-width:440px; padding:calc(72px + env(safe-area-inset-top)) var(--gutter) 40px;
}
.brand{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.brand img{ width:88px; height:auto; }
.brand-name{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; letter-spacing:-.015em; }
.brand-name span{ color:var(--primary); }
.brand-tag{ color:var(--text-muted); font-size:.875rem; }
.app-shell.auth-split .screen > h2{ font-size:1.5rem !important; font-weight:800; letter-spacing:-.01em; }
.app-shell.auth-split .screen > h2 + p{ font-size:.9375rem !important; }

.theme-fab{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; z-index:50;
  min-height:40px; padding:0 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--card); color:var(--text);
  display:flex; align-items:center; font-weight:600; font-size:.8125rem;
}
.theme-fab:hover{ background:var(--card-alt); }
.theme-fab-opt{ display:flex; align-items:center; gap:8px; }
.theme-fab-opt svg{ width:16px; height:16px; }
.theme-fab .opt-light{ display:none; }
html[data-theme="dark"] .theme-fab .opt-dark{ display:none; }
html[data-theme="dark"] .theme-fab .opt-light{ display:flex; }

/* Pantalla de bienvenida (index) */
.app-shell:has(.screen-splash){ display:flex; flex-direction:column; }
.screen-splash{ flex:1; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px; max-width:none; }
.screen-splash .brand img{ width:clamp(120px, 36vw, 180px); }
.screen-splash .brand-name{ font-size:clamp(1.75rem, 7vw, 2.25rem); }

/* =====================================================================
   CUESTIONARIO (onboarding)
   ===================================================================== */
.app-shell.onb-page .screen, .app-shell.wide-form .screen{ max-width:720px; padding:calc(20px + env(safe-area-inset-top)) var(--gutter) 40px; }
body:not(.edit-mode) .app-shell.onb-page .screen{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body:not(.edit-mode) .app-shell.onb-page .onb-body{ flex:1; justify-content:center; padding-bottom:6vh; }
.onb-header{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.onb-progress-label{ font-size:.875rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.progress-track{ flex:1; height:6px; background:var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:var(--primary); transition:width .35s ease; }
.skip-link{ font-size:.875rem; color:var(--text-muted); font-weight:600; flex:none; }
.onb-body{ display:flex; flex-direction:column; align-items:center; }
.onb-illustration{ display:flex; justify-content:center; margin:4px 0 16px; }
.onb-illustration svg{ width:140px; height:140px; }
.onb-content{ width:100%; max-width:600px; }
.onb-question{ font-family:var(--font-head); font-weight:800; font-size:1.375rem; line-height:1.3; letter-spacing:-.01em; margin-bottom:6px; text-align:center; }
.onb-help{ color:var(--text-muted); font-size:.9375rem; margin-bottom:20px; text-align:center; }
.onb-page .chip-grid{ justify-content:center; }
.onb-footer{ display:flex; gap:12px; margin-top:28px; max-width:480px; margin-left:auto; margin-right:auto; }
.onb-footer .btn-outline{ flex:0 0 56px; padding:12px; }
.dots{ display:flex; justify-content:center; gap:6px; margin-top:18px; }
.dots span{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
.dots span.on{ background:var(--primary); width:18px; border-radius:var(--radius-pill); }
.edit-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.edit-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-items:start; }
.edit-q h4{ font-size:.9375rem; margin-bottom:4px; }
.edit-q .chip-grid{ margin-top:12px; justify-content:flex-start; }
.edit-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
.edit-actions .btn{ width:auto; min-width:160px; }
body.edit-mode .onb-page .screen{ max-width:1080px; }
body.edit-mode .onb-page .edit-q{ text-align:left; }
@media (prefers-reduced-motion:no-preference){
  .onb-step-enter{ animation:msStepIn .3s ease both; }
  .tab-panel.active{ animation:msFade .2s ease both; }
}
@keyframes msStepIn{ from{ opacity:0; transform:translateX(10px); } to{ opacity:1; transform:none; } }
@keyframes msFade{ from{ opacity:0; } to{ opacity:1; } }

/* =====================================================================
   TABLET  (≥ 640px)
   ===================================================================== */
@media (min-width:640px){
  :root{ --gutter:28px; }
  .screen{ padding-top:24px; }
  .page-title{ font-size:1.75rem; }
  .action-pair{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .two-col{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats-grid{ gap:12px; }
  .stat{ padding:18px 12px; }
  .stat strong{ font-size:1.75rem; }
  .records-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tips-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sym-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .field-span{ grid-column:1 / -1; }
  .edit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .predict-card{ padding:24px; }
  .predict-title{ font-size:1.5rem; }
  img.predict-icon, .predict-icon{ width:80px; height:80px; }
  .modal-overlay{ align-items:center; padding:24px; }
  .modal-sheet{ border-radius:var(--radius-xl); max-height:86vh; padding:12px 24px 24px; }
  .identity-card{ grid-template-columns:auto minmax(0,1fr) auto; }
  .profile-avatar{ grid-row:auto; }
  .avatar-actions{ justify-content:flex-end; }
  .app-shell.auth-split .screen{ padding-top:96px; }
  .onb-question{ font-size:1.625rem; }
  .onb-illustration svg{ width:180px; height:180px; }
}

/* =====================================================================
   PC  (≥ 1024px): barra lateral fija, sin barras de celular
   ===================================================================== */
@media (min-width:1024px){
  :root{ --gutter:40px; }
  .app-bar, .bottom-nav{ display:none; }
  .toast{ bottom:24px; }

  .app-shell:not(.no-nav){ padding-left:var(--side-w); }
  .side-nav{
    display:flex; flex-direction:column; gap:20px;
    position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:40;
    padding:24px 16px 16px; overflow-y:auto;
    background:var(--card); border-right:1px solid var(--border);
  }
  .side-nav .logo-sm{ padding:0 8px; }
  .side-cta{ justify-content:flex-start; padding:10px 14px; min-height:44px; }
  .side-links{ display:flex; flex-direction:column; gap:2px; }
  .side-nav .nav-item{
    flex-direction:row; justify-content:flex-start; gap:12px;
    min-height:44px; padding:8px 12px; font-size:.9375rem; font-weight:600; color:var(--text-muted);
  }
  .side-nav .nav-item svg{ width:20px; height:20px; }
  .side-nav .nav-item:hover{ background:var(--card-alt); color:var(--text); }
  .side-nav .nav-item.active{ background:var(--accent-soft); color:var(--primary-dark); }
  html[data-theme="dark"] .side-nav .nav-item.active{ color:var(--text); }
  .side-nav .side-cta.active{ box-shadow:0 0 0 3px var(--accent-soft); }

  .side-nav-footer{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:12px; border-top:1px solid var(--border); }
  .account-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:var(--radius-md); margin-bottom:4px; min-width:0; }
  .account-chip:hover{ background:var(--card-alt); }
  .account-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border); background:var(--accent-soft); }
  .account-text{ display:flex; flex-direction:column; min-width:0; }
  .account-text strong{ font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .account-text small{ font-size:.75rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .side-row{
    display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:6px 12px;
    border:0; border-radius:var(--radius-sm); background:transparent; text-align:left;
    font-size:.875rem; font-weight:500; color:var(--text-muted); cursor:pointer;
  }
  .side-row svg{ width:18px; height:18px; }
  .side-row > span:not(.switch){ flex:1; }
  .side-row:hover{ background:var(--card-alt); color:var(--text); }
  .side-logout:hover{ color:var(--danger); background:var(--danger-soft); }

  .screen{ padding:36px var(--gutter) 56px; }
  .page-head{ margin-bottom:24px; }
  .page-title{ font-size:2rem; }
  .page-head .back-btn{ display:none; }

  /* Inicio: contenido + columna lateral */
  .dash-grid{ grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:24px; align-items:start; }
  .dash-side .two-col{ grid-template-columns:minmax(0,1fr); }
  .predict-card{ padding:28px; }
  .predict-title{ font-size:1.75rem; }

  /* Registrar: dos columnas */
  .form-cols{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:40px; align-items:start; }
  #panel-episodio .form-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #panel-prodromico .form-col + .form-col, #panel-episodio .form-col + .form-col{ margin-top:0; }
  .form-cols > .form-col:last-child{ position:sticky; top:24px; }

  /* Historial y consejos */
  .records-grid{ grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); }
  .charts-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #guias{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .tips-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* Perfil: columna fija con índice + secciones */
  .profile-layout{ grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
  .profile-aside{ position:sticky; top:24px; }
  .identity-card{ grid-template-columns:auto minmax(0,1fr); }
  .avatar-actions{ grid-column:1 / -1; justify-content:flex-start; }
  .profile-toc{ flex-direction:column; gap:2px; margin:0; padding:8px; overflow:visible; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); }
  .profile-toc a{ border:0; background:transparent; border-radius:var(--radius-sm); min-height:38px; font-size:.875rem; }
  .profile-toc a:hover{ background:var(--card-alt); }
  .prof-section{ scroll-margin-top:24px; }
  .info-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* Acceso: pantalla dividida */
  .app-shell.auth-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .app-shell.auth-split .auth-visual{
    display:flex; flex-direction:column; justify-content:center; gap:16px;
    padding:64px clamp(48px,6vw,112px);
    background:var(--primary-dark); color:#fff; position:relative; overflow:hidden;
  }
  html[data-theme="dark"] .app-shell.auth-split .auth-visual{ background:#18233d; }
  .auth-blob{ position:absolute; border-radius:50%; background:rgba(255,255,255,.05); pointer-events:none; }
  .auth-blob.b1{ width:420px; height:420px; top:-140px; right:-140px; }
  .auth-blob.b2{ width:260px; height:260px; bottom:-90px; left:-80px; }
  .auth-illustration img{ width:112px; height:112px; border-radius:24px; }
  .auth-visual h2{ color:#fff; font-size:2rem; font-weight:800; letter-spacing:-.015em; max-width:16ch; }
  .auth-visual p{ color:rgba(255,255,255,.82); font-size:1.0625rem; line-height:1.6; max-width:42ch; }
  .app-shell.auth-split .screen{ align-self:center; width:100%; max-width:480px; padding:64px 40px; }
  .app-shell.auth-split .screen .brand{ display:none; }
  .theme-fab{ position:fixed; top:20px; right:20px; }

  /* Cuestionario */
  .app-shell.onb-page .screen{ max-width:960px; padding-top:40px; }
  .onb-body{ flex-direction:row; justify-content:center; align-items:center; gap:56px; }
  .onb-illustration{ flex:0 0 240px; margin:0; }
  .onb-illustration svg{ width:220px; height:220px; }
  .onb-content{ flex:0 1 600px; }
  .onb-question, .onb-help{ text-align:left; }
  .onb-page .chip-grid{ justify-content:flex-start; }
  .onb-footer{ margin-left:0; }
  body.edit-mode .onb-page .screen{ max-width:1180px; }
}

@media (min-width:1440px){
  .tips-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .info-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Celulares muy angostos */
@media (max-width:360px){
  :root{ --gutter:12px; }
  .nav-item{ font-size:.625rem; }
  .stats-grid{ gap:6px; }
  .stat strong{ font-size:1.25rem; }
}

/* Movimiento reducido: se apagan todas las transiciones */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ---------- Migraña en curso (Correcciones 4) ---------- */
.en-curso-card{
  background:var(--card); border:1px solid var(--border); border-left:4px solid var(--orange);
  border-radius:var(--radius-xl); padding:18px 20px; margin-bottom:16px;
}
.en-curso-card .ec-top{ display:flex; gap:12px; align-items:flex-start; }
.en-curso-card .ec-dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); margin-top:7px; flex:none; }
.en-curso-card strong{ font-family:var(--font-head); font-size:1.0625rem; }
.en-curso-card p{ color:var(--text-muted); font-size:.9375rem; margin-top:2px; }
.en-curso-card.es-larga{ border-left-color:var(--danger); }
.en-curso-card.es-larga .ec-dot{ background:var(--danger); }
.ec-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:14px; }
.ec-acciones .btn{ width:auto; padding-inline:22px; }
.ec-hora{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin-top:14px; }
.ec-hora .field{ flex:1 1 220px; }
.ec-hora .btn{ width:auto; }
.en-curso-aviso{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; margin-bottom:8px;
  border-radius:var(--radius-md); background:var(--orange-soft); font-size:.9375rem; }
.en-curso-aviso .link-btn{ align-self:flex-start; }
.chip.is-disabled{ opacity:.45; pointer-events:none; }
.input-wrap input:disabled{ opacity:.7; cursor:not-allowed; }
.record-badge{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:var(--radius-pill);
  background:var(--orange-soft); color:var(--orange); font-size:.75rem; font-weight:700; vertical-align:middle; }