/* Componentes de NORTE. Construidos sobre los tokens, nunca con valores sueltos. */

/* ============================================================
   Estructura
   ============================================================ */

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.app-header .brand {
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-label);
  font-size: var(--text-sm);
  text-transform: uppercase;
  color: var(--text-primary);
  text-decoration: none;
}
.app-header nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.app-header nav a:hover { color: var(--text-primary); }

.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.row     { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.between { justify-content: space-between; }
.muted   { color: var(--text-secondary); }
.center  { text-align: center; }
.flush   { margin: 0; }
.gap-2   { gap: var(--space-2); }
.clickable { cursor: pointer; }

.pad-page { padding-block: var(--space-8) var(--space-9); }
.pad-app  { padding-block: var(--space-6) var(--space-9); }
.narrow   { max-width: 460px; }
.auth-shell { max-width: 430px; margin-inline: auto; }

/* Fondo a sangre: sustituye a la fotografía que no podemos servir. */
.hero-bg { background: var(--hero-gradient); }

/* ============================================================
   Tipografía de producto
   ============================================================ */

/* La etiqueta pequeña en mayúscula es la firma del sistema: aparece encima de
   cada bloque y da ritmo sin necesitar decoración. */
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
}
.eyebrow-accent { color: var(--accent); }

.hero-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  margin: 0;
  max-width: 12ch;
}

/* El número gigante es el protagonista de la pantalla: día, XP, cronómetro. */
.mega {
  font-size: var(--text-mega);
  font-weight: var(--weight-black);
  line-height: 0.85;
  letter-spacing: var(--tracking-mega);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.mega-accent {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { font-size: var(--text-lg); color: var(--text-secondary); max-width: 46ch; }
.hint { font-size: var(--text-sm); color: var(--text-secondary); }
.brandmark {
  letter-spacing: var(--tracking-label); color: var(--text-secondary);
  text-transform: uppercase; font-size: var(--text-sm); font-weight: var(--weight-bold);
}

/* ============================================================
   Superficies
   ============================================================ */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card-link { display: block; text-decoration: none; color: inherit; transition: all var(--duration-base) var(--ease-out); }
.card-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* La tarjeta principal del día: campo de color a sangre con acento arriba. */
.card-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
}
.card-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent-gradient);
}

/* ============================================================
   Datos
   ============================================================ */

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--space-4);
}
.meta-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.meta-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-bold);
  margin-top: var(--space-1);
}

.progress-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--accent-gradient);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-full);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}
[data-theme="mom"] .streak { color: var(--accent-strong); }

.badge {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
[data-theme="mom"] .badge { color: var(--accent-strong); }

.mission-copy {
  font-size: var(--text-lg);
  line-height: 1.45;
  border-left: 3px solid var(--accent);
  padding-left: var(--space-4);
  color: var(--text-primary);
}

/* ============================================================
   Botones
   ============================================================ */

.btn-lg {
  min-height: 48px;
  font-size: var(--text-base);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-raised); border-color: var(--accent); box-shadow: none; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-google { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-strong); width: 100%; }
.btn-google:hover { background: var(--surface-raised); border-color: var(--accent); }

/* ============================================================
   Calendario
   ============================================================ */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: var(--space-2);
}
.day-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  text-decoration: none;
  color: var(--text-primary);
  min-height: var(--touch-min);
  transition: all var(--duration-fast) var(--ease-out);
}
.day-cell small {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.day-cell[data-state="COMPLETED"],
.day-cell[data-state="RECOVERED"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.day-cell[data-state="COMPLETED"] small,
.day-cell[data-state="RECOVERED"] small { color: inherit; opacity: 0.7; }
.day-cell[data-state="RECOVERED"] { opacity: 0.72; }
.day-cell[data-state="CURRENT"] {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow-glow);
}
.day-cell[data-state="MISSED"] { border-style: dashed; color: var(--text-secondary); }
.day-cell[data-state="COMPLETED"]::after { content: "✓"; font-size: 10px; opacity: 0.8; }
.day-cell[data-state="LOCKED"] { opacity: 0.35; }
a.day-cell:hover { transform: scale(1.06); border-color: var(--accent); }

/* ============================================================
   Ejecución del entrenamiento
   ============================================================ */

.runner {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  background: var(--hero-gradient);
}
.runner-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
}
.runner-timer {
  font-size: var(--text-mega);
  font-weight: var(--weight-black);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mega);
}
.runner-exercise {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  max-width: 16ch;
}
.runner-instructions { color: var(--text-secondary); max-width: 32ch; margin: 0; }
.runner-next {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-bold);
  margin: 0;
}
.runner-controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* En descanso cambia el color del cronómetro: el estado se lee de reojo, sin
   tener que enfocar la vista a mitad de una serie. */
.runner[data-mode="rest"] .runner-timer { color: var(--accent); }
.runner[data-mode="rest"] .runner-exercise { color: var(--text-secondary); }

/* --- Salida ---
   Una pantalla a pantalla completa sin salida atrapa al usuario. El control
   está siempre visible, pero discreto para no invitar a pulsarlo sin querer. */
.btn-exit {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  margin-left: calc(var(--space-3) * -1);
  background: none; border: 0; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
}
.btn-exit:hover { color: var(--text-primary); background: var(--surface-raised); }

.exit-sheet {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  padding: var(--space-4);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(4px);
}
.exit-sheet .card { width: 100%; max-width: 420px; }
@media (min-width: 640px) { .exit-sheet { align-items: center; } }

.rpe-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.rpe-scale input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rpe-scale label {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--touch-min);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; font-weight: var(--weight-bold);
  transition: all var(--duration-fast) var(--ease-out);
}
.rpe-scale input:checked + label {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}
.rpe-scale input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   Formularios
   ============================================================ */

.form-grid { display: grid; gap: var(--space-4); }
.form-grid > .btn { margin-top: var(--space-2); }
/* Media aplicación usa `<div><label><input class="field">` dentro de un
   `.stack`, no de un `.form-grid`, y ahí la etiqueta se quedaba en línea y
   pegada al campo. `:has(+ .field)` la reconoce por lo que acompaña y no por
   dónde vive, sin tocar las etiquetas que sí van en línea (casillas, RPE). */
.form-grid label,
label:has(+ .field) {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  display: block;
  margin-bottom: var(--space-1);
}
.field, .form-grid select, .form-grid textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--surface-sunken);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out);
}
/* El borde de acento se suma al outline del sistema; no lo sustituye. Quitarlo
   dejaría ciega la navegación por teclado. */
.field:focus, .form-grid select:focus, .form-grid textarea:focus {
  border-color: var(--accent);
}
.form-grid textarea { min-height: 84px; resize: vertical; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }

.fieldset-plain { border: 0; padding: 0; margin: 0; }

.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  border-left: 3px solid var(--accent);
  font-weight: var(--weight-medium);
}
[data-theme="mom"] .flash { color: var(--accent-strong); }
.flash[data-level="error"] {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--text-secondary); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}

.session-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-3); padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.danger-zone { border-color: var(--color-danger); }

/* ============================================================
   Seguimiento del embarazo
   ============================================================ */

.week-badge {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}
.week-badge strong { font-size: var(--text-xl); font-weight: var(--weight-black); }

.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tab {
  padding: var(--space-1) var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); text-decoration: none;
  color: var(--text-secondary); font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  min-height: 34px; display: inline-flex; align-items: center;
  transition: all var(--duration-fast) var(--ease-out);
}
.tab:hover { border-color: var(--accent); color: var(--text-primary); }
.tab[aria-current="page"] {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
  font-weight: var(--weight-bold);
}

.timeline { display: flex; flex-direction: column; gap: var(--space-3); }
.timeline-item {
  display: grid; grid-template-columns: 60px 1fr; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); background: var(--surface-card);
}
.timeline-when { text-align: center; }
.timeline-day { font-size: var(--text-2xl); font-weight: var(--weight-black); line-height: 1; }
.timeline-month {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-secondary);
  font-weight: var(--weight-bold);
}

/* La altura de cada barra la fija un <style nonce> por página: es dato, no
   estilo fijo, y un atributo style inline lo bloquearía la CSP.
   La barra NO lleva escala ni banda de referencia: mostrar una franja de
   normalidad sería interpretación clínica (ADR 0007). */
.sparkline { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.sparkline span {
  flex: 1; background: var(--accent-gradient); border-radius: 3px 3px 0 0;
  min-height: 4px; height: var(--h, 10%);
}

.disclaimer {
  border-left: 3px solid var(--accent);
  padding: var(--space-4);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.report-header {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.report-meta { display: grid; gap: var(--space-3); }
.report-meta div { display: flex; justify-content: space-between; gap: var(--space-4); }
.report-meta .k {
  color: var(--text-secondary); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  font-weight: var(--weight-bold);
}
.report-section { break-inside: avoid; }
.report-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.report-table th, .report-table td {
  text-align: left; padding: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.report-table th {
  color: var(--text-secondary); font-weight: var(--weight-bold);
  text-transform: uppercase; font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}
.report-table td:last-child, .report-table th:last-child {
  text-align: right; font-variant-numeric: tabular-nums;
}
.table-scroll { overflow-x: auto; }
.note-entry { padding-left: var(--space-4); border-left: 2px solid var(--border-subtle); }

/* ============================================================
   PWA
   ============================================================ */

.update-banner {
  position: fixed;
  left: var(--space-4); right: var(--space-4);
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.update-banner span { flex: 1; min-width: 12ch; }

/* ============================================================
   Impresión — el informe se lleva en papel a la consulta
   ============================================================ */

@media print {
  .app-header, .tabs, .no-print, .update-banner { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .report-header { border: 1px solid #ccc; box-shadow: none; background: #fff; }
  .report-section { page-break-inside: avoid; }
  a[href]::after { content: ""; }  /* sin URLs impresas: son enlaces firmados */
  .disclaimer { border-left: 3px solid #666; color: #333; background: #fff; }
}

/* ============================================================
   Navegación principal
   ============================================================ */

/* Barra inferior en móvil: es donde llega el pulgar. Un menú de enlaces de
   texto en la cabecera obliga a estirar la mano y no dice dónde estás. */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2);
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-card) 92%, transparent);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-subtle);
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out);
}
.tabbar-item svg { width: 22px; height: 22px; }
.tabbar-item:hover { color: var(--text-primary); }

/* La sección activa se marca con color Y con una barra: depender solo del
   color deja fuera a quien no lo percibe. */
.tabbar-item[aria-current="page"] { color: var(--accent); position: relative; }
.tabbar-item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

/* Deja sitio para que la barra no tape el final del contenido. */
.has-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* En escritorio la barra pasa a lateral: abajo desperdiciaría todo el ancho. */
@media (min-width: 900px) {
  .tabbar {
    top: 0; bottom: 0; right: auto;
    width: 96px;
    grid-auto-flow: row;
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-3);
    border-top: 0;
    border-right: 1px solid var(--border-subtle);
  }
  .tabbar-item { font-size: 11px; padding: var(--space-3) var(--space-1); }
  .tabbar-item[aria-current="page"]::before {
    top: 50%; left: 0; transform: translateY(-50%);
    width: 3px; height: 26px;
  }
  .has-tabbar { padding-bottom: var(--space-8); padding-left: 96px; }
  .app-header { padding-left: calc(96px + var(--space-5)); }
}

/* ============================================================
   Logros
   ============================================================ */

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.achievement {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-align: center;
  align-items: center;
}
.achievement-icon { font-size: 2rem; line-height: 1; }

/* Los pendientes se ven, pero apagados: saber qué falta es la mitad del
   incentivo. Ocultarlos convertiría la lista en una sorpresa sin dirección. */
.achievement.is-locked { opacity: 0.42; filter: grayscale(1); }
.achievement.is-locked .achievement-icon { filter: blur(1px); }

/* ============================================================
   Cabecera del día
   ============================================================ */

/* El número del día ocupa media pantalla a propósito: es la respuesta a
   «¿qué tengo que hacer hoy?» y debe leerse desde lejos, sin enfocar. */
.day-hero {
  position: relative;
  padding: var(--space-6) 0 var(--space-4);
}
.day-hero .mega { animation: subir var(--duration-slow) var(--ease-out) both; }
.day-hero-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

@keyframes subir {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Landing
   ============================================================ */

.landing-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--surface-page) 85%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

/* Sin `style=` en el marcado: la CSP prohíbe los estilos en línea, y el
   navegador los descarta en silencio salvo que se mire la consola. */
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.section-flush-top { padding-top: 0; }
.hero-microcopy { margin-top: var(--space-4); }

/* El hero en dos columnas: el texto vende, la maqueta enseña. Enseñar la
   pantalla real evita la promesa vaga —«todo en un sitio»— que cualquiera
   puede escribir. Debajo de 900 px se apila y la maqueta va primero. */
.hero-split {
  display: grid; gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}

/* Maqueta de teléfono en CSS. Sin imagen: una captura se queda vieja al primer
   cambio de interfaz y pesa más que todo este bloque. */
.phone {
  justify-self: center;
  width: min(300px, 82vw);
  padding: 12px;
  border-radius: 42px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  box-shadow: var(--shadow-lg);
}
.phone-screen {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: 32px;
  /* Un tono por debajo de la tarjeta: en el tema claro, pantalla y marco son
     casi el mismo blanco y la maqueta deja de leerse como un teléfono. */
  background: var(--surface-raised);
  min-height: 440px;
}
/* La muesca. Dos píxeles de detalle que evitan tener que rotular «esto es un
   móvil» debajo. */
.phone-screen::before {
  content: "";
  align-self: center;
  width: 84px; height: 5px;
  margin-bottom: var(--space-2);
  border-radius: 999px;
  background: var(--border-strong);
  opacity: 0.5;
}

/* En dos columnas el titular tiene la mitad de sitio: con el tamaño del hero a
   pantalla completa se parte en cuatro líneas y pierde el golpe. */
@media (min-width: 900px) {
  .hero-split .hero-title { font-size: clamp(2.75rem, 4.6vw, 4rem); max-width: 15ch; }
}
.phone-week { font-size: 2.75rem; font-weight: var(--weight-black); line-height: 1; }
.phone-card {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.phone-card[data-tono="acento"] { border-color: var(--accent); }
.phone-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }

/* Franja de confianza: lo que a nadie se le ocurre preguntar hasta que ya ha
   subido una ecografía. */
.trust-bar {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.trust-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.trust-item svg { flex: none; width: 22px; height: 22px; color: var(--accent-strong, var(--accent)); }

.feature-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.feature-item {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.feature-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* Seguridad: cada punto es una decisión concreta y verificable, no un sello. */
/* En pantalla ancha, a dos columnas: los párrafos tienen su propio ancho
   máximo de lectura y a una sola columna dejaban media tarjeta vacía. */
.sec-list { display: grid; gap: var(--space-3); }
@media (min-width: 900px) { .sec-list { grid-template-columns: 1fr 1fr; } }
.sec-item {
  display: grid; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  background: var(--surface-card);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.sec-item strong { font-size: var(--text-lg); }

.install-card {
  display: grid; gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
@media (min-width: 760px) { .install-card { grid-template-columns: 1.2fr 1fr; align-items: center; } }

.hero { padding: var(--space-9) 0 var(--space-8); }
.hero .lead { margin-top: var(--space-5); }
.hero-actions { margin-top: var(--space-6); gap: var(--space-3); }
.hero-actions .btn-lg { width: auto; min-width: 200px; }

/* Cifras grandes en fila: dicen de qué va el producto sin un párrafo. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.hero-stats > div { display: flex; flex-direction: column; gap: 2px; }
.stat-num {
  font-size: var(--text-2xl); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight); line-height: 1;
}
.stat-label {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--text-secondary);
  font-weight: var(--weight-bold);
}

.section { padding: var(--space-8) 0; }
.section-alt { background: var(--surface-sunken); }

/* --- Tarjetas de reto ---
   Cada una lleva su propio tema: el visitante ve la diferencia entre Military y
   Mom antes de leer una palabra. */
.challenge-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.challenge-card {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  transition: transform var(--duration-base) var(--ease-out);
}
.challenge-card:hover { transform: translateY(-4px); }
.challenge-card[data-variant="military"] {
  background: linear-gradient(160deg, #12161c 0%, #0a0c0f 100%);
  border-color: #262c35;
  --accent: #d8ff3e; --accent-strong: #c2ec14; --accent-contrast: #08090b;
  color: #f6f8fa;
}
.challenge-card[data-variant="mom"] {
  background: linear-gradient(160deg, #fdf3ee 0%, #f8e6dc 100%);
  border-color: #e8d3c6;
  --accent: #c25a3f; --accent-strong: #a34630; --accent-contrast: #fff;
  color: #2a1f1b;
}
.challenge-card[data-variant="mom"] .eyebrow,
.challenge-card[data-variant="mom"] .feature-list li { color: #7a625a; }
.challenge-title {
  font-size: var(--text-2xl); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-mega); line-height: 1.02;
  text-transform: uppercase; margin: var(--space-2) 0 0;
}
.challenge-card[data-variant="mom"] .challenge-title {
  text-transform: none; letter-spacing: var(--tracking-tight);
}

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.feature-list li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5;
}
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px; background: var(--accent);
}
.challenge-card .btn { margin-top: auto; }

/* --- Pasos --- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
.steps li { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-4); align-items: start; }
.step-num {
  font-size: var(--text-2xl); font-weight: var(--weight-black);
  letter-spacing: var(--tracking-mega); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
.steps strong { display: block; margin-bottom: var(--space-1); }

/* --- Valores --- */
.value-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.value-card {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.value-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }

/* --- FAQ --- */
.faq { display: grid; gap: var(--space-2); }
.faq details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
}
.faq summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer; font-weight: var(--weight-bold);
  min-height: var(--touch-min); display: flex; align-items: center;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--accent); font-size: var(--text-xl); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 var(--space-5) var(--space-5); margin: 0; }

/* --- Cierre --- */
.cta-final { padding: var(--space-9) 0; }
.cta-title { max-width: none; margin-inline: auto; }
.cta-lead { margin-inline: auto; }
.cta-actions { justify-content: center; gap: var(--space-3); }
.cta-actions .btn-lg { width: auto; min-width: 210px; }

.landing-footer {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
}

@media (min-width: 900px) {
  .hero { padding: var(--space-9) 0; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

/* La figura del ejercicio. Trazo grueso y un solo color: se lee desde el suelo,
   que es donde acaba el móvil durante una serie. */
.runner-figure {
  width: min(46vw, 190px);
  aspect-ratio: 1;
  background: var(--accent);
  -webkit-mask-image: var(--figura);
  mask-image: var(--figura);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  opacity: 0.92;
  animation: figura-entra var(--duration-base) var(--ease-out);
}
.runner[data-mode="rest"] .runner-figure { background: var(--text-secondary); opacity: 0.55; }

@keyframes figura-entra {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 0.9; transform: none; }
}

/* ============================================================
   Asistente de onboarding
   ============================================================ */

.wizard-head { margin-bottom: var(--space-6); display: grid; gap: var(--space-3); }

.choice-list { display: grid; gap: var(--space-3); }

/* La opción entera es el objetivo táctil, no solo el círculo del radio: un
   radio de 20px en un móvil es un ejercicio de puntería. */
.choice { display: block; cursor: pointer; }
/* Oculto pero enfocable. Con `width: 0` o `display: none` el control deja de
   recibir foco y la navegación por teclado se rompe. */
.choice input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.choice-body {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: all var(--duration-fast) var(--ease-out);
  min-height: 68px;
}
.choice-body strong { display: block; }
.choice-body .hint { display: block; margin-top: 2px; }
.choice-icon { font-size: 1.75rem; line-height: 1; }

.choice:hover .choice-body { border-color: var(--border-strong); }
.choice input:checked + .choice-body {
  border-color: var(--accent);
  border-width: 2px;
  background: var(--accent-soft);
  box-shadow: var(--shadow-glow);
}
.choice input:focus-visible + .choice-body { outline: 3px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Seguimiento compartido -------------------------------------------------
   La vista que abre un profesional con un enlace temporal. Deliberadamente
   sobria: ahí no hay nada que pulsar más que imprimir, y cualquier adorno
   invitaría a buscar acciones que no existen. */

.share-page {
  background: var(--surface-sunken);
}

.share-bar {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.share-foot {
  padding: var(--space-6) 0;
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

.unlock-card {
  max-width: 26rem;
  margin: var(--space-8) auto;
}

/* El código se teclea de un vistazo: grande, monoespaciado y separado, para que
   nadie confunda un 0 con una O al dictarlo en voz alta. */
.pin-input,
.pin-display {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.35rem;
  /* El espaciado se aplica solo por la izquierda de cada carácter, así que sin
     compensarlo el último deja un hueco a la derecha que descentra el texto. */
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: center;
}

.pin-input {
  /* Sin box-sizing el padding se suma al ancho y el campo se sale de la tarjeta. */
  box-sizing: border-box;
  /* Son cuatro dígitos: a ancho completo el campo se lee como una barra. El
     `display: block` no sobra —un `input` es inline, y sin él la etiqueta se le
     sube al lado— y es lo que hace efectivo el `margin-inline: auto`. */
  display: block;
  width: 100%;
  max-width: 9rem;
  margin-inline: auto;
}

.pin-display {
  font-weight: 700;
  color: var(--accent-strong, var(--accent));
}

.share-fresh {
  border: 2px solid var(--accent);
}

.share-url {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  width: 100%;
}

@media print {
  .share-bar,
  .share-foot {
    display: none;
  }
}

/* --- Cuándo llamar ----------------------------------------------------------
   Pantalla de urgencia. Los objetivos táctiles son grandes a propósito: se usa
   con prisa, con miedo y probablemente con una mano. */

.call-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--danger, #c0392b);
  color: #fff;
  text-decoration: none;
  /* Alto mínimo generoso: fallar el toque en este momento no es aceptable. */
  min-height: 4.5rem;
}

.call-label {
  font-size: 1.05rem;
  font-weight: 700;
}

.call-phone {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.call-note {
  font-size: 0.9rem;
  opacity: 0.85;
}

.warning-card {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  display: grid;
  gap: var(--space-1);
}

.warning-card[data-urgency='EMERGENCY'] {
  border-left-color: var(--danger, #c0392b);
}

.warning-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.warning-card[data-urgency='EMERGENCY'] .warning-tag {
  color: var(--danger, #c0392b);
}

.warning-title {
  font-weight: 700;
}

/* --- Contador de movimientos ------------------------------------------------
   Se usa tumbada de lado, a oscuras y con una mano. El botón ocupa lo que
   ocupa por eso: fallar el toque significa perder la cuenta. */

.kick-panel {
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.kick-count {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.kick-elapsed {
  font-size: 0.95rem;
}

.kick-button {
  /* Cabe entero por encima de la barra de navegación inferior en pantallas de
     móvil pequeñas: un botón cortado por la barra se falla al tocarlo. */
  width: min(13rem, 58vw);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  cursor: pointer;
  /* Sin esto, mantener el dedo apoyado selecciona el texto del botón y el
     siguiente toque no cuenta. */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}

.kick-button:active {
  /* Confirmación táctil: a oscuras es la única forma de saber que contó. */
  transform: scale(0.96);
}

.kick-panel[data-activo='si'] .kick-button {
  background: var(--accent-strong, var(--accent));
}

.question-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--space-2);
}

/* Casilla con explicación debajo: los permisos delicados necesitan decir qué
   se comparte exactamente, no solo su nombre. */
.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) 0;
}

.check-row span span {
  display: block;
  font-size: 0.9rem;
}

.pill-alert {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--danger, #c0392b);
  color: #fff;
}

/* Teléfono y correo como acciones: en móvil abren la llamada y el correo. */
.contact-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* --- Calendario prenatal ----------------------------------------------------
   La franja de semanas a la izquierda hace de línea de tiempo sin dibujar una:
   se lee en vertical de un vistazo y no cuesta nada en móvil. */

.milestone {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border-left: 3px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.milestone-week {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.milestone-title {
  font-weight: 700;
}

.milestone[data-estado='actual'] {
  border-left-color: var(--accent);
}

.milestone[data-estado='actual'] .milestone-week {
  color: var(--accent);
}

/* Ámbar y no rojo: "no hay nada apuntado" es una pregunta que hacer, no una
   alarma. El rojo está reservado para la pantalla de cuándo llamar. */
.milestone[data-estado='sin-registro'] {
  border-left-color: #c98a2b;
}

.milestone[data-estado='pasado'] {
  opacity: 0.75;
}

.milestone-note {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.pill-soft {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

@media (max-width: 30rem) {
  .milestone {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.milestone-left {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* --- Campos de fecha y hora -------------------------------------------------

   Safari en iOS les da un ancho intrínseco propio y lo antepone al `width:
   100%` heredado, así que el campo se salía de su tarjeta. Hacen falta las tres
   cosas juntas: quitar la apariencia nativa, contar el relleno dentro del
   ancho, y permitir que el elemento se encoja por debajo de su contenido —sin
   `min-width: 0` un elemento flex o grid nunca baja de su tamaño intrínseco. */

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'],
input[type='week'] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  /* Safari centra el valor verticalmente de forma distinta al resto de campos;
     esto los deja a la misma altura. */
  min-height: var(--touch-min);
}

/* El valor iba centrado dentro del campo mientras el resto de campos alinean a
   la izquierda: dos campos seguidos no cuadraban. */
input[type='date']::-webkit-date-and-time-value,
input[type='time']::-webkit-date-and-time-value,
input[type='datetime-local']::-webkit-date-and-time-value {
  text-align: left;
}

/* El icono del calendario hereda el color del texto en vez de quedarse azul de
   sistema, que era lo único que no seguía el tema. */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}

input[type='date']:hover::-webkit-calendar-picker-indicator,
input[type='time']:hover::-webkit-calendar-picker-indicator,
input[type='datetime-local']:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* --- Segundo nivel de navegación --------------------------------------------

   Antes eran las mismas pastillas del primer nivel en pequeño, y a un vistazo
   no se distinguía un nivel del otro: parecían once secciones planas repartidas
   en filas.

   Ahora es un control segmentado: un raíl hundido con las opciones dentro y la
   activa levantada sobre él. La forma dice sola que están "dentro de" algo,
   sin depender del tamaño ni del color, que es lo que fallaba antes. Y es un
   gesto conocido: lo lleva el sistema operativo del teléfono. */

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  /* Se desliza en vez de partirse en varias filas: dos filas de raíl volverían
     a parecer secciones sueltas. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-top: calc(var(--space-1) * -1);
}

.segmented::-webkit-scrollbar {
  display: none;
}

.segmented-item {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.segmented-item:hover {
  color: var(--text-primary);
}

/* La activa se levanta del raíl en vez de rellenarse de color: el relleno
   sólido de acento ya significa "sección principal", y repetirlo aquí era
   justo lo que hacía que los dos niveles se confundieran. */
.segmented-item[aria-current='page'] {
  background: var(--surface-card);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.06),
    0 2px 8px rgb(0 0 0 / 0.06);
}

/* Punto de acento bajo la activa: da el "estás aquí" sin gritar, y sobrevive
   a que alguien no distinga los grises del raíl. */
.segmented-item[aria-current='page']::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .segmented-item {
    transition: none;
  }
}

/* En móvil el raíl ocupa todo el ancho: repartir el espacio hace los objetivos
   más grandes, y ahí se toca con el pulgar. En pantallas anchas estirarlo mil
   píxeles solo separa las opciones entre sí, así que mide lo que necesita. */
@media (min-width: 40rem) {
  .segmented {
    align-self: start;
    width: fit-content;
    max-width: 100%;
  }

  .segmented-item {
    flex: 0 0 auto;
  }
}

/* --- Detalle del día antes de empezar ---------------------------------------
   Los tres datos que se miran para decidir si hay tiempo ahora o mejor luego. */

.preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.preview-stats > div {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.preview-exercise {
  display: grid;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.preview-exercise:last-child {
  border-bottom: 0;
}

.preview-exercise-name {
  font-weight: var(--weight-bold);
}

.preview-exercise-dose {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.preview-exercise-note {
  font-size: var(--text-sm);
  color: var(--accent);
}

.preview-actions {
  display: grid;
  gap: var(--space-3);
  justify-items: stretch;
}

@media (min-width: 30rem) {
  .preview-actions {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
  }
}

/* --- Detalle del día en diálogo ---------------------------------------------
   `<dialog>` nativo: trae el fondo modal, el foco atrapado dentro y el cierre
   con Escape sin una línea de JavaScript. */

/* Declarar `display` en un `<dialog>` anula la regla del navegador que oculta
   los cerrados (`dialog:not([open]) { display: none }`), y el diálogo quedaba
   dibujado siempre en medio del calendario. Misma trampa que `[hidden]` en
   `base.css`: hay que devolverle la regla al navegador. */
.day-dialog:not([open]) {
  display: none;
}

.day-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(80vh, 44rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  overflow: hidden;
  /* Grid con el cuerpo desplazable y el cierre fijo: si el cierre se fuera con
     el scroll, en una sesión larga habría que bajar hasta el final para salir. */
  display: grid;
  grid-template-rows: 1fr auto;
}

.day-dialog::backdrop {
  background: rgb(0 0 0 / 0.45);
}

.day-dialog-body {
  padding: var(--space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.day-dialog-foot {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  background: var(--surface-card);
}

/* Las casillas son enlaces —funcionan sin JavaScript— y el diálogo solo
   intercepta el clic. */
a.day-cell {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* --- Peso y rango de referencia ---------------------------------------------
   La banda es GRIS a propósito. En cuanto fuera verde estaría diciendo "vas
   bien", y eso es un veredicto clínico que la aplicación no da. */

.gain-number {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: 1;
}

.weight-chart {
  width: 100%;
  height: 150px;
  overflow: visible;
}

.weight-band {
  fill: var(--text-secondary);
  fill-opacity: 0.12;
}

.weight-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Sin esto, estirar el SVG al ancho disponible engorda la línea en
     horizontal y la adelgaza en vertical. */
  vector-effect: non-scaling-stroke;
}

.weight-dot {
  fill: var(--accent);
}

/* --- Resumen del embarazo ----------------------------------------------------
   Panel de mando: cifras que se leen sin entrar en nada y accesos a lo que se
   hace a diario. */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-3);
}

.metric-card {
  display: grid;
  gap: 2px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.metric-card:hover {
  border-color: var(--accent);
}

.metric-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  line-height: 1.1;
}

.metric-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-bold);
}

/* Cada aviso es un enlace entero, no un texto con un enlace dentro: se toca con
   el pulgar y sin apuntar. */
.attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  background: var(--surface-card);
  text-decoration: none;
  color: inherit;
}

.attention-row:hover {
  border-color: var(--accent);
}

.attention-go {
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
}

.quick-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.quick-action:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* «Cuándo llamar» lleva su color aquí, donde compite con otros cinco accesos.
   En la fila de pestañas se quitó porque ahí rompía la fila; aquí es lo que la
   hace encontrable con prisa. */
.quick-alert {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
  font-weight: var(--weight-bold);
}

.quick-alert:hover {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

/* --- Lo que toca en esta semana ---------------------------------------------
   Cada hito con su icono a la izquierda: la forma se reconoce antes que el
   nombre, y «Laboratorios del primer trimestre» leído a secas no dice nada. */

.milestone-now {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.milestone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}

.milestone-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.milestone-now-title {
  font-weight: var(--weight-bold);
}

/* Cuánto queda de ventana: es el dato accionable, y por eso lleva el acento. */
.milestone-when {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

/* Con algo apuntado, el hito baja de intensidad en vez de desaparecer: sigue
   siendo información, pero deja de pedir atención. No se marca en verde ni se
   llama "hecho" — solo sabemos que hay algo anotado en esas semanas, no que sea
   esa prueba. */
.milestone-now[data-hecho='si'] {
  opacity: 0.7;
}

.milestone-now[data-hecho='si'] .milestone-when {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}