/* DiagnostiQ · Sistema de diseño. Tokens tomados del maquetado oficial. */
:root{
  --navy:#1B2A4A; --blue:#2E5B9A; --sky:#4A86C8;
  --gold:#B8953A; --gold-lt:#D4AF5A;
  --mist:#D6E4F5; --smoke:#EEF2F7;
  --slate:#2C3E50; --stone:#7F8C8D; --border:#C8D6E5;
  --green:#27AE60; --amber:#F1C40F; --orange:#E67E22; --red:#E74C3C;
  --r:12px; --sh:0 2px 12px rgba(27,42,74,0.10);
  --hdr-h:54px; --nav-h:62px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{overscroll-behavior-y:none;}
body{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  background:var(--smoke); color:var(--slate); min-height:100vh; font-size:14px; overflow-x:hidden;
}
.mono{font-family:'DM Mono','SFMono-Regular',ui-monospace,monospace;}

/* `hidden` tiene que ganar siempre. El navegador lo aplica con display:none sin
   !important, así que cualquier regla nuestra que fije display —.bn, .field, lo que
   sea— lo pisa por especificidad y deja a la vista algo que debía estar oculto. Así
   apareció el botón de Admin en cuentas que no son administradoras. */
[hidden]{display:none !important;}

/* ── HEADER ── */
#hdr{
  background:var(--navy); border-bottom:2px solid var(--gold);
  min-height:var(--hdr-h); padding-top:env(safe-area-inset-top,0px);
  display:flex; align-items:center; justify-content:space-between; padding-left:16px; padding-right:16px;
  position:sticky; top:0; z-index:200; box-shadow:0 2px 10px rgba(0,0,0,0.2);
}
#hdr img{height:36px; width:auto; display:block;}
/* El logotipo es el camino de vuelta a la portada, como en cualquier sitio. Va dentro de
   un <button> para que responda al teclado, pero no debe parecer un botón. */
.hdr-logo{background:none; border:0; padding:0; cursor:pointer; display:block; border-radius:4px;}
.hdr-logo:active{transform:translateY(1px);}
.hdr-acts{display:flex; gap:8px;}

/* ── BOTTOM NAV ── */
#bnav{
  position:fixed; bottom:0; left:0; right:0; z-index:200; background:#fff;
  border-top:1px solid var(--border); display:flex;
  box-shadow:0 -2px 10px rgba(27,42,74,0.08);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bn{
  flex:1; display:flex; flex-direction:column; align-items:center; padding:8px 4px 10px;
  cursor:pointer; font-size:9px; font-weight:600; color:var(--stone);
  text-transform:uppercase; letter-spacing:.3px; border:none; background:none;
}
.bn .ic{font-size:19px; margin-bottom:2px;}
.bn.on{color:var(--gold);}

/* ── SCREENS ── */
#app{padding-bottom:calc(var(--nav-h) + 12px);}
.scr{display:none;}
.scr.on{display:block;animation:scrIn .28s ease both;}
@keyframes scrIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.scr.on{animation:none;}}
.pad{padding:14px;}

/* ── TITULOS ── */
.h-ttl{font-size:18px; font-weight:700; color:var(--navy); margin-bottom:3px;}
.h-sub{font-size:12px; color:var(--stone);}
.sec-ttl{
  font-size:10px; font-weight:700; color:var(--navy); text-transform:uppercase;
  letter-spacing:1px; border-bottom:2px solid var(--gold); padding-bottom:7px; margin-bottom:11px;
}

/* ── CARD ── */
.card{
  background:#fff; border-radius:var(--r); box-shadow:var(--sh); border:1px solid var(--border);
  margin:0 14px 12px; overflow:hidden;
}
.card .pad{padding:14px;}

/* ── BOTONES ── */
.btn-p{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:linear-gradient(135deg,var(--navy),var(--blue)); color:#fff; border:none;
  border-radius:10px; padding:14px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.btn-g{background:linear-gradient(135deg,var(--gold),var(--gold-lt))!important;}
.btn-o{background:#fff!important; color:var(--navy)!important; border:1px solid var(--border)!important;}
.btn-p{transition:transform .08s, filter .08s;}
.btn-p:active{transform:translateY(1px); filter:brightness(.95);}
.bn{transition:color .15s;}
.bn:active{opacity:.55;}

/* ── FORM ── */
.field{margin-bottom:12px;}
.field > label{display:block; font-size:11px; font-weight:600; color:var(--navy); margin-bottom:4px;}
.field .hint{font-size:10px; color:var(--stone); margin-top:3px; line-height:1.4;}
.field input,.field select,.field textarea{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:11px 13px;
  font-family:inherit; font-size:14px; color:var(--slate); background:#fff; outline:none;
  -webkit-appearance:none; appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,149,58,.12);
}
/* ── SELECTOR DE FECHA (flatpickr) ── */
.fp-wrap{position:relative;}
.fp-wrap::after{
  content:"📅"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:15px; pointer-events:none; opacity:.75;
}
.field .fp-input{padding-right:40px; cursor:pointer; background:#fff;}
.field .fp-input.err{border-color:var(--red); box-shadow:0 0 0 3px rgba(231,76,60,.10);}
.fp-hint{font-size:10px; color:var(--stone); margin-top:4px; min-height:13px; line-height:1.4;}
.fp-hint b{color:var(--navy);}

/* Tema DiagnostiQ para el calendario */
.flatpickr-calendar{
  font-family:'DM Sans',system-ui,sans-serif; border-radius:var(--r); border:1px solid var(--border);
  box-shadow:0 10px 32px rgba(27,42,74,.20); max-width:calc(100vw - 24px);
}
.flatpickr-calendar.arrowTop::before,.flatpickr-calendar.arrowTop::after{border-bottom-color:var(--navy);}
.flatpickr-calendar.arrowBottom::before,.flatpickr-calendar.arrowBottom::after{border-top-color:var(--navy);}
.flatpickr-months{
  background:var(--navy); border-radius:var(--r) var(--r) 0 0;
  border-bottom:2px solid var(--gold); padding:6px 0;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months{color:#fff; fill:#fff;}
.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:700;}
.flatpickr-current-month .flatpickr-monthDropdown-months option{background:var(--navy); color:#fff;}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{fill:#fff; padding:8px 10px;}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--gold-lt);}
.flatpickr-weekdays{background:var(--navy); padding-bottom:4px;}
.flatpickr-weekdaycontainer span.flatpickr-weekday{
  background:var(--navy); color:var(--mist); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
}
.flatpickr-day{border-radius:8px; color:var(--slate); font-size:13px;}
.flatpickr-day:hover{background:var(--smoke); border-color:var(--smoke);}
.flatpickr-day.today{border-color:var(--gold); font-weight:700;}
.flatpickr-day.selected,.flatpickr-day.selected:hover{
  background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700;
}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--stone); opacity:.45;}
.numInputWrapper span.arrowUp:after{border-bottom-color:var(--gold-lt);}
.numInputWrapper span.arrowDown:after{border-top-color:var(--gold-lt);}

.switch{display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:10px;}
.switch label{font-size:13px; color:var(--slate); flex:1;}
.toggle{position:relative; width:44px; height:26px; flex-shrink:0;}
.toggle input{opacity:0; width:0; height:0;}
.toggle .track{position:absolute; inset:0; background:var(--border); border-radius:99px; transition:.2s;}
.toggle .track::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s;}
.toggle input:checked + .track{background:var(--green);}
.toggle input:checked + .track::before{transform:translateX(18px);}

/* ── CHIPS / ALERTAS ── */
.chip{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:20px; font-size:9px; font-weight:700;}
.a-verde{background:#E8F8EF; color:var(--green);}
.a-amarillo{background:#FEF9E7; color:#B9770E;}
.a-naranja{background:#FDF2E9; color:var(--orange);}
.a-rojo{background:#FDEDEC; color:var(--red);}
.a-nd{background:var(--smoke); color:var(--stone);}

/* ── TOAST ── */
/* ── Avisos ──
   El navy del aviso se perdía contra el navy de la interfaz. Ahora el color dice de qué
   se trata antes de leer el texto: rojo si algo falta o está mal, verde si salió bien,
   dorado si es solo informativo. Cada uno con su símbolo, para no depender del color
   solo —hay quien no distingue rojo de verde—. */
#toast{
  position:fixed; bottom:calc(var(--nav-h) + 16px); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  background:#C0392B; color:#fff; padding:11px 18px 11px 13px; border-radius:12px;
  font-size:12.5px; font-weight:600; line-height:1.4; text-align:left;
  opacity:0; transition:opacity .3s; pointer-events:none;
  z-index:999; width:max-content; max-width:min(92vw, 420px);
  box-shadow:0 12px 32px rgba(0,0,0,.34);
}
#toast::before{
  content:"!"; flex:0 0 auto; width:21px; height:21px; border-radius:50%;
  background:rgba(255,255,255,.24); display:grid; place-items:center;
  font-size:12px; font-weight:800; line-height:1;
}
#toast[data-tipo="ok"]{ background:#15784B; }
#toast[data-tipo="ok"]::before{ content:"✓"; }
#toast[data-tipo="info"]{ background:var(--gold); color:var(--navy); }
#toast[data-tipo="info"]::before{ content:"i"; background:rgba(27,42,74,.20); font-style:italic; }
#toast.on{opacity:1;}

/* ── EMPTY STATE ── */
.empty{text-align:center; padding:44px 20px; color:var(--stone);}
.empty .big{font-size:38px; margin-bottom:10px;}

/* ── Habeas data: aviso, casilla de autorización y política ── */
.aviso{
  font-size:10px;color:var(--stone);line-height:1.5;background:var(--smoke);
  border-radius:8px;padding:10px 11px;margin:4px 0 10px;
}
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;margin-bottom:14px;
  border:1.5px solid transparent;border-radius:9px;padding:6px;transition:.15s;}
.chk.err{border-color:var(--red);background:#FDEDEC;}
.chk input{position:absolute;opacity:0;width:0;height:0;}
.chk .bx{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;
  margin-top:1px;display:flex;align-items:center;justify-content:center;transition:.15s;background:#fff;
}
.chk .bx::after{content:"✓";font-size:13px;font-weight:700;color:#fff;opacity:0;transition:.15s;}
.chk input:checked + .bx{background:var(--gold);border-color:var(--gold);}
.chk input:checked + .bx::after{opacity:1;}
.chk input:focus-visible + .bx{box-shadow:0 0 0 3px rgba(184,149,58,.25);}
.chk .tx{font-size:10.5px;color:var(--slate);line-height:1.5;}
.lg-link{color:var(--gold);font-weight:700;text-decoration:underline;white-space:nowrap;}

/* Política */
.lg{font-size:12.5px;line-height:1.6;color:var(--slate);}
.lg .lg-sec + .lg-sec{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.lg h3{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:7px;}
.lg p{margin-bottom:8px;}
.lg ul,.lg ol{margin:0 0 8px 18px;}
.lg li{margin-bottom:5px;}
.lg b{color:var(--navy);}
.lg .lg-nota{font-size:11px;color:var(--stone);background:var(--smoke);border-radius:8px;padding:9px 11px;margin-top:4px;}
.lg-dl{margin:0 0 8px;}
.lg-dl > div{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--smoke);font-size:12px;}
.lg-dl > div:last-child{border-bottom:none;}
.lg-dl dt{flex:0 0 42%;color:var(--stone);}
.lg-dl dd{flex:1;color:var(--navy);font-weight:600;word-break:break-word;}
.chk-ver{text-align:center;margin:-6px 0 14px;font-size:10.5px;}

/* Arranque: el cascarón se mantiene invisible hasta que el JS decide qué pantalla
   corresponde (portada en escritorio, formulario en móvil, app si ya hay perfil).
   Sin esto se alcanza a ver un parpadeo del encabezado y del formulario antes de
   que entre la portada. */
.boot { visibility: hidden; }

/* ── Pantalla de registro ──
   En móvil se ve igual que siempre: logo, título y formulario, todo centrado. La
   estructura se partió en dos (aside + formulario) para que en escritorio pueda abrirse
   a dos paneles sin tocar el marcado del formulario. Las piezas que solo tienen sentido
   en pantalla grande quedan ocultas acá. */
.wel{padding:28px 18px;text-align:center;}
.wel-logo{width:96px;height:96px;margin-bottom:18px;}
.wel-h1{font-size:21px;font-weight:700;color:var(--navy);line-height:1.2;}
.wel-sub{font-size:13px;color:var(--stone);margin:8px 0 22px;line-height:1.5;}
.wel-legal{font-size:10px;color:var(--stone);}
.wel-eyebrow,.wel-puntos,.wel-pie,.wel-form-ttl{display:none;}

/* ── Política de datos ──
   En móvil manda la columna única: el botón de volver, el encabezado y el texto. El
   índice solo tiene sentido cuando hay un costado donde ponerlo. */
.lg-head{padding:4px 16px 0;}
.lg-idx{display:none;}
.lg-sec{scroll-margin-top:calc(var(--hdr-h) + 16px);}

/* ── Íconos ──
   SVG de línea que heredan el color y el tamaño del texto que los contiene (1em), así
   cada contexto los dimensiona con su propio font-size y no hay que mantener medidas en
   dos sitios. El trazo usa currentColor: el mismo ícono sirve sobre claro y sobre navy. */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:0 0 auto;}
.btn-p .ico{vertical-align:-.17em;margin-right:7px;font-size:16px;}

/* Acentos: donde el ícono es decorativo se tiñe de oro; donde va sobre un fondo de color
   hereda el blanco de su tarjeta. */
.cap-row .ic{color:var(--gold);}
.hub-ic{color:var(--gold);}
.dl-ic{color:var(--stone);}
.dl-row.on .dl-ic{color:var(--gold);}
.qz-ic,.qz-card-ic,.qz-chosen-ic{color:var(--blue);}
.qz-card.sel .qz-card-ic{color:var(--gold);}
.bn .ic{display:inline-flex;}