/* ROAL LAB · styles.css
   Sistema visual: herramienta móvil oscura, editorial y sobria.
   Fondo casi negro, superficies grafito diferenciadas, blanco cálido y verde
   ROAL con moderación (progreso, estado activo y acción principal).
   Mobile-first desde 320 px. Áreas táctiles ≥44 px. Sin dependencias ni
   peticiones externas: todo el CSS y los iconos son locales o inline. */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
  /* Superficies: escalón claro entre fondo, tarjeta y control */
  --bg: #0a0c0d;
  --surface: #14181a;
  --surface-raised: #1b2124;
  --control: #212a2d;
  --control-hover: #273135;

  /* Líneas */
  --line: #293236;
  --line-soft: #1e2528;
  --line-strong: #3a464b;

  /* Texto: blanco cálido, no blanco puro */
  --text: #f3f0ea;
  --text-2: #c2beb6;
  --muted: #8f948f;

  /* Verde ROAL: reservado para progreso, activo y acción principal */
  --accent: #2fbf83;
  --accent-dim: #239666;
  --accent-ink: #04241a;
  --accent-wash: rgba(47, 191, 131, 0.10);
  --accent-line: rgba(47, 191, 131, 0.32);

  /* Señales: ámbar para avisos y diagnósticos (nunca rojo agresivo) */
  --warn: #d7a24a;
  --warn-wash: rgba(215, 162, 74, 0.09);
  --warn-line: rgba(215, 162, 74, 0.30);
  --danger: #dd6a62;

  /* Forma y ritmo */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --tap: 44px;
  --gap: 12px;
  --pad-page: 18px;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.35);

  /* Áreas seguras: env() se lee una sola vez y el resto del CSS usa estas
     variables. Permite simular un iPhone con muesca en las pruebas. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Alto de la barra inferior SIN su área segura: borde, rellenos y el botón
     (icono + hueco + etiqueta ≈ 54 px). El área segura se suma aparte, y la
     barra ya la lleva en su propio relleno: contarla dos veces sería el error
     fácil aquí. */
  --nav-h: 68px;

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur: 160ms;
  --dur-paso: 180ms;   /* cambio de paso y confirmaciones: 150–220 ms */
}

/* ============================================================
   2. Base
   ============================================================ */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding:
    calc(var(--pad-page) + var(--sat))
    calc(var(--pad-page) + var(--sar))
    calc(40px + var(--sab))
    calc(var(--pad-page) + var(--sal));
}

h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.015em; }
h2 { font-size: 1.5rem; font-weight: 800; }
h3 { font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* Texto secundario con más contraste que --muted: se lee al sol. */
.muted { color: var(--text-2); }
.small { font-size: 0.8125rem; }
.center { text-align: center; }

/* Foco visible y consistente en todo control interactivo */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-line); color: var(--text); }

/* ============================================================
   3. Marca y cabeceras
   ============================================================ */

.brand { padding: 4px 0 20px; }
.brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}
.brand-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.page-head { padding: 0 0 18px; }
.back-btn {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  margin-left: -4px; padding: 0 4px;
  background: none; border: none;
  color: var(--muted);
  font-size: 0.9375rem; font-weight: 600;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.back-btn:hover { color: var(--text); }

/* Antetítulo editorial de la misión: «Día 3» sobre el nombre */
.mission-kicker {
  margin: 2px 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.page-head-mission h2 { font-size: 1.65rem; }

/* ============================================================
   4. Tarjetas
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 var(--gap);
  box-shadow: var(--shadow);
}
.card > h3:first-child { margin-top: 0; }

/* Aviso sobrio: franja ámbar, sin fondo alarmante */
.warn-card {
  border-color: var(--warn-line);
  background: linear-gradient(var(--warn-wash), var(--warn-wash)), var(--surface);
}
.cierre-card {
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.locked-card { text-align: center; padding: 40px 20px; border-style: dashed; border-color: var(--line); }
.lock-icon { font-size: 1.75rem; margin-bottom: 6px; opacity: 0.7; }

/* ============================================================
   5. Botones
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--control);
  color: var(--text);
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { background: var(--control-hover); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); }
.btn-primary:disabled,
.btn:disabled {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}
.btn-secondary { background: var(--surface-raised); border-color: var(--line); }
.btn-secondary:hover { background: var(--control); }
.btn-block { width: 100%; }
.actions { margin-top: 24px; }

/* ============================================================
   6. Bienvenida
   ============================================================ */

.view-welcome h2 { font-size: 1.75rem; margin-bottom: 10px; }
.view-welcome > .muted { color: var(--text-2); margin-bottom: 20px; }

.avisos {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.avisos .aviso {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-2);
  font-size: 0.9375rem;
}
.avisos .aviso::before {
  content: "";
  position: absolute;
  left: 2px; top: 22px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}

/* ============================================================
   7. Panel y progreso
   ============================================================ */

.progress-wrap {
  margin: 0 0 22px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.progress-count {
  color: var(--text);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.progress {
  height: 6px;
  background: var(--control);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 420ms var(--ease);
}

.day-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.day-btn {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit; font-size: 1rem; text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.day-btn:hover { background: var(--surface-raised); }

/* Número del día: ancla editorial de la lista */
.day-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.day-text { display: flex; flex-direction: column; min-width: 0; }
/* «Día N» ya lo dice el número de la izquierda: se mantiene para lectores de
   pantalla, pero no se repite en pantalla. */
.day-kicker {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.day-label { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.day-reason {
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}
/* El candado viene del contenido; se desatura para no meter color de emoji
   en una paleta sobria. */
.day-state { font-size: 0.9rem; color: var(--muted); }
.day-state.locked { filter: grayscale(1); opacity: 0.45; }
.lock-icon { filter: grayscale(1); }

/* Abierta: el número toma el verde y el borde se marca */
.day-item:not(.is-locked):not(.is-done) .day-btn { border-color: var(--line); }
.day-item:not(.is-locked) .day-num { color: var(--text); }
.day-item:not(.is-locked):not(.is-done) .day-state { color: var(--accent); }

/* Completada: verde contenido, sin medallas ni celebraciones */
.day-item.is-done .day-btn {
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
}
.day-item.is-done .day-num { color: var(--accent); }
.day-item.is-done .day-state { color: var(--accent); }
.day-item.is-done .day-label { color: var(--text-2); }

/* Bloqueada: apagada y sin invitar al toque */
.day-item.is-locked .day-btn {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-soft);
  color: var(--muted);
  cursor: not-allowed;
}
.day-item.is-locked .day-num { color: var(--line); }
.day-item.is-locked .day-label { color: var(--muted); font-weight: 500; }

.quick-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.quick-nav .btn { font-size: 0.875rem; padding: 11px 12px; }
.quick-nav .btn:last-child { grid-column: 1 / -1; }

/* ============================================================
   8. Formularios
   ============================================================ */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-2);
}
.field-help {
  margin: 7px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--control);
  color: var(--text);
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder { color: var(--muted); opacity: 0.75; }
.input:hover { border-color: var(--line-strong); }
.input:focus {
  border-color: var(--accent);
  background: var(--control-hover);
  outline: 2px solid var(--accent-line);
  outline-offset: 0;
}
textarea.input { resize: vertical; min-height: 88px; }

/* Chevron dibujado en CSS: sin imágenes ni peticiones externas */
select.input {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Selector de archivo: el control nativo trunca su texto en móvil. El input
   se oculta a la vista pero SIGUE en el orden de tabulación (nada de display
   ni visibility), y la etiqueta asociada hace de botón. */
.file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  position: relative;
}
.file-btn { flex: 0 0 auto; cursor: pointer; }
.file-name {
  flex: 1 1 130px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* El foco del teclado cae en el input invisible: se dibuja sobre el botón. */
.file-input:focus-visible + .file-btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--control);
}

/* Casillas y radios: el estado elegido debe verse sin dudar */
.check-row {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--tap);
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.check-row:hover { background: var(--surface-raised); }
.check-row:has(.check:checked) { color: var(--text); }
.check-row:has(.check:checked) span { font-weight: 600; }
.check-row:focus-within { background: var(--surface-raised); }
.check {
  flex: 0 0 auto;
  width: 21px; height: 21px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.check-group {
  display: flex; flex-wrap: wrap;
  gap: 0 8px;
  margin: 2px 0 10px;
}
.check-inline {
  min-height: var(--tap);
  align-items: center;
  padding: 8px 11px;
  margin: 0;
  font-size: 0.875rem;
}
.check-inline .check { width: 18px; height: 18px; margin-top: 0; }
.check-inline:has(.check:checked) {
  background: var(--accent-wash);
  color: var(--accent);
}

/* ============================================================
   9. Misiones
   ============================================================ */

.view-mission > .muted { color: var(--text-2); margin-bottom: 18px; }

/* Objetivo del día: la línea que manda */
.objetivo {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  font-size: 1.0625rem; font-weight: 700;
  line-height: 1.45;
}

/* Mensajes copiables: bloque de cita, claramente «esto se copia» */
.copy-card {
  background: var(--surface-raised);
  border-color: var(--line);
  border-left: 3px solid var(--accent-line);
  padding: 14px 16px;
}
.copy-text {
  margin: 0 0 12px;
  white-space: pre-wrap;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.btn-copy {
  width: 100%;
  min-height: var(--tap);
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: 0.875rem;
}
.btn-copy:hover { background: var(--control); color: var(--text); }

/* La fórmula ya armada: es un resultado, no una alerta. Verde solo en el
   filete lateral; el texto va en blanco cálido. */
.formula-preview {
  margin: 12px 0 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.55;
}
.lectura {
  font-size: 1.0625rem; font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.rama-card { border-color: var(--line); }

.plain-list { margin: 0 0 14px; padding-left: 18px; color: var(--text-2); }
.plain-list li { margin-bottom: 7px; }
.plain-list li:last-child { margin-bottom: 0; }
.plain-list::marker { color: var(--muted); }

/* Chips de números */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  font-size: 0.8125rem;
  color: var(--muted);
}
.chip strong {
  color: var(--text);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Diagnóstico: informativo, nunca un error agresivo */
.complete-card { border-color: var(--line); }
.complete-card .field-label { color: var(--warn); }
.faltan-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.faltan-list li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.faltan-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 13px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warn);
}

.done-card {
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
  text-align: center;
}
.done-text {
  margin-bottom: 4px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
   11. Finanzas
   ============================================================ */

.utilidad-card {
  text-align: center;
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
}
.utilidad-card .field-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.utilidad-valor {
  display: block;
  margin: 2px 0 8px;
  font-size: 2.125rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.advanced {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.advanced summary {
  display: flex; align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before {
  content: "+";
  margin-right: 8px;
  font-size: 1rem;
  color: var(--line-strong);
}
.advanced[open] summary::before { content: "–"; }
.advanced[open] summary { color: var(--text-2); }

/* ============================================================
   12. Compartir
   ============================================================ */

.view-share > .muted { color: var(--text-2); margin-bottom: 16px; }
.share-text {
  min-height: 190px;
  margin-top: 6px;
  line-height: 1.7;
  font-size: 0.9375rem;
  background: var(--surface-raised);
}

/* ============================================================
   13. Resumen
   ============================================================ */

.view-summary .check-row { margin-bottom: 14px; }
.summary-title {
  margin-bottom: 6px;
  font-size: 1.1875rem; font-weight: 800;
  letter-spacing: -0.01em;
}
.summary-list { margin: 0; }
.summary-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.summary-row:last-child { border-bottom: none; }
.summary-row dt { color: var(--muted); font-size: 0.9375rem; }
.summary-row dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   14. Ajustes
   ============================================================ */

.sep { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0; }
.view-settings .card .btn { margin-top: 4px; }
.view-settings .card .btn + .field-help { margin-top: 8px; }

.btn-danger {
  margin-top: 10px;
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(221, 106, 98, 0.10); }
.btn-danger:disabled {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

.preview-zone:not(:empty) { margin-top: 14px; }
.preview-zone .card { margin-bottom: 0; }
.preview-zone .btn + .btn { margin-top: 8px; }
.preview-zone .plain-list { color: var(--text); }
.error-text {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 0.9375rem;
}
.ok-text {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   15. Aviso de almacenamiento
   ============================================================ */

.storage-banner {
  padding: calc(12px + var(--sat)) 16px 12px;
  background: var(--danger);
  color: #1a0705;
  font-size: 0.875rem; font-weight: 600;
  text-align: center;
}

/* ============================================================
   16. Ajustes finos por ancho
   ============================================================ */

/* iPhone SE y similares: se aprieta el ritmo sin perder áreas táctiles */
@media (max-width: 359px) {
  :root { --pad-page: 14px; --gap: 10px; }
  body { font-size: 15.5px; }
  h2 { font-size: 1.3rem; }
  .page-head-mission h2 { font-size: 1.4rem; }
  .day-btn { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 11px 12px; }
  .day-num { font-size: 1.25rem; }
  .quick-nav { grid-template-columns: 1fr; }
  .utilidad-valor { font-size: 1.75rem; }
  .objetivo { font-size: 1rem; padding: 12px 14px; }
  .check-group { gap: 0 4px; }
}

@media (min-width: 560px) {
  :root { --pad-page: 24px; }
}

/* ============================================================
   17. Accesibilidad del movimiento
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ============================================================
   18. Recorrido guiado — jerarquía, stepper y navegación
   ============================================================ */

/* Tamaño por defecto de todo icono. Sin esto, un SVG sin width/height dentro
   de un contenedor flex se estira hasta ocupar toda la caja. */
.icon { flex: 0 0 auto; width: 20px; height: 20px; }

/* Jerarquía: título > resultado > instrucción > ayuda. Cada nivel baja de
   tamaño y de contraste en el mismo orden, siempre. */
.step-h { font-size: 1.25rem; line-height: 1.25; margin: 0 0 6px; }
.step-instruccion { color: var(--text-2); margin: 0 0 16px; }
.destacado { font-size: 1.0625rem; line-height: 1.5; font-weight: 600; margin: 0 0 6px; }
.field-help { color: var(--muted); font-size: 0.8125rem; }
.field-help.warn { color: var(--warn); }
.field-help.ok { color: var(--accent); }
.field-help.tecnica { opacity: 0.75; }

/* --- Cabecera del stepper --- */
.step-head { padding: 4px 0 14px; }
.step-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.step-kicker {
  margin: 0;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.step-title { font-size: 1.5rem; line-height: 1.15; margin: 0 0 12px; }

.icon-btn {
  flex: 0 0 auto;
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -10px;
  background: none; border: none; border-radius: 50%;
  color: var(--text-2); cursor: pointer;
}
.icon-btn:active { background: var(--control); }

.progress-thin { height: 4px; }

/* --- Cuerpo y navegación --- */
.step-body { min-height: 40vh; }
.step-pane { animation: paso-entra var(--dur-paso) var(--ease); }
@keyframes paso-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.step-nav {
  display: flex; gap: 10px; align-items: stretch;
  margin: 22px 0 8px;
}
.step-nav .btn { margin: 0; }
.btn-grow { flex: 1 1 auto; }
.btn-lg { min-height: 52px; font-size: 1rem; }

/* --- Revisión --- */
.revision-list { list-style: none; margin: 0; padding: 0; }
.revision-row {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-2);
}
.revision-row:last-child { border-bottom: none; }
.revision-row.is-ok { color: var(--text); }
.revision-icon { flex: 0 0 auto; color: var(--warn); }
.revision-row.is-ok .revision-icon { color: var(--accent); }
.revision-texto { flex: 1 1 auto; min-width: 0; }
.faltan-caja:empty { display: none; }

.btn-link {
  min-height: var(--tap); padding: 0 4px;
  background: none; border: none;
  color: var(--accent); font: inherit; font-weight: 600;
  cursor: pointer; text-align: left;
}
.btn-link.btn-block { display: block; width: 100%; text-align: center; }

/* --- Desplegables: todo lo largo vive aquí --- */
.disclosure {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  background: var(--surface);
}
.disclosure > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 14px;
  cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 600; color: var(--text-2);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.disclosure[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.disclosure > *:not(summary) { padding: 0 14px; }
.disclosure > *:last-child { padding-bottom: 14px; }

/* ============================================================
   19. Inicio
   ============================================================ */

.view-home .brand-row { margin-bottom: 16px; }

/* La misión de hoy es lo único con brillo verde en toda la app. */
.hoy-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
}
.hoy-card.is-active {
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 90% at 50% -20%, var(--accent-wash), transparent 60%),
    var(--surface);
}
.hoy-kicker {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 6px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.hoy-tiempo {
  display: inline-flex; align-items: center; gap: 4px;
  letter-spacing: 0.02em; text-transform: none; font-weight: 600;
  color: var(--text-2);
}
.hoy-tiempo .icon { width: 15px; height: 15px; }
.hoy-titulo { font-size: 1.5rem; line-height: 1.15; margin: 0 0 14px; }
.hoy-resultado-label {
  margin: 0 0 2px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.hoy-resultado { margin: 0 0 16px; color: var(--text-2); }
.hoy-progreso { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hoy-progreso .progress { flex: 1 1 auto; }
.hoy-progreso-texto {
  flex: 0 0 auto; font-size: 0.75rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hoy-card.is-done, .hoy-card.is-waiting { text-align: center; }
.hoy-icon { width: 32px; height: 32px; color: var(--accent); margin-bottom: 8px; }

/* --- Tiras compactas --- */
.tiras {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.tira {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tira:last-of-type { border-bottom: none; }
.tira-label { flex: 0 0 auto; color: var(--muted); font-size: 0.875rem; }
.tira-valor {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-weight: 600; overflow-wrap: anywhere;
}
.tira-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); }
.tira-progreso { flex-wrap: wrap; cursor: default; }
.tira-progreso .progress { flex: 1 0 100%; margin-top: 8px; }
.tiras-pie { margin: 0; padding: 8px 14px 12px; font-size: 0.8125rem; }

/* --- Qué viene después --- */
.siguiente { padding: 2px 4px 10px; }
.siguiente-label {
  margin: 0 0 2px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.siguiente-titulo { margin: 0; color: var(--text-2); }
.siguiente-tiempo { margin: 2px 0 0; font-size: 0.8125rem; }

/* --- Plan completo, plegado --- */
.plan-disclosure { margin-top: 8px; }
.plan-bloque { padding-top: 4px; }
.plan-sprint {
  margin: 10px 0 6px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.plan-list { list-style: none; margin: 0 0 10px; padding: 0; }
.plan-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tap); padding: 4px 0;
  background: none; border: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.plan-btn:disabled { cursor: default; color: var(--muted); }
.plan-num {
  flex: 0 0 22px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted);
}
.plan-item.is-done .plan-num { color: var(--accent); }
.plan-texto { flex: 1 1 auto; min-width: 0; }
.plan-icon { flex: 0 0 auto; width: 18px; height: 18px; }
.plan-icon.is-done { color: var(--accent); }
.plan-icon.is-locked { color: var(--muted); opacity: 0.7; }
.plan-punto {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   20. Rutas, opciones y píldoras
   ============================================================ */

.opcion-group { display: flex; gap: 8px; margin: 10px 0; }
.opcion-btn {
  flex: 1 1 0; min-height: var(--tap); padding: 10px;
  background: var(--control); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.opcion-btn.is-active { border-color: var(--accent); color: var(--accent); }
.pista { margin: 6px 0 12px; color: var(--accent); font-weight: 600; }
.pista.is-hidden { display: none; }

.ruta-group { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.ruta-card {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 14px;
  background: var(--control); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ruta-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ruta-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ruta-titulo { font-weight: 700; }
.ruta-check { width: 18px; height: 18px; margin-left: auto; color: var(--accent); }
.ruta-resumen { color: var(--text-2); font-size: 0.875rem; }
.ruta-fuentes { margin: 2px 0 0; font-size: 0.8125rem; color: var(--text-2); }

/* Ruta C: fila compacta, informativa. No es un control. */
.ruta-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  opacity: 0.7;
}
.ruta-row-titulo { font-size: 0.9375rem; }

.pill {
  display: inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.04em;
}
.pill-accent { background: var(--accent-wash); color: var(--accent); }
.pill-muted { background: var(--control); color: var(--muted); }

.opcion-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.opcion-fila {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--tap); padding: 10px 12px;
  background: var(--control); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.opcion-fila.is-active { border-color: var(--accent); }
.opcion-fila-titulo { flex: 0 0 auto; font-weight: 600; }
.opcion-fila-desc { flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; }
.opcion-check { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); }

/* ============================================================
   21. Evidencias
   ============================================================ */

.objetivos-card { padding: 12px 14px; }
.objetivo-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; color: var(--text-2);
}
/* Neutro mientras no se cumple; verde sólo al cumplirse. */
.objetivo-row.is-met { color: var(--accent); font-weight: 600; }
.objetivo-icon { width: 18px; height: 18px; }
.objetivo-punto {
  width: 8px; height: 8px; margin: 0 5px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
}

.evidencia-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.evidencia-fila {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 10px 12px;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.evidencia-fila.is-usada { border-style: solid; }
.evidencia-num {
  flex: 0 0 auto; min-width: 20px;
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted);
}
.evidencia-head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.evidencia-tipo { font-weight: 600; font-size: 0.9375rem; }
.evidencia-nota {
  font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evidencia-falta { font-size: 0.75rem; color: var(--warn); }
.evidencia-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); }

.filtros > summary { justify-content: flex-start; }
.captura-baja { margin-top: 20px; }

.vacio-card { text-align: center; padding: 26px 18px; }
.vacio-icon { width: 30px; height: 30px; color: var(--muted); margin-bottom: 10px; }
.vacio-titulo { font-weight: 700; margin: 0 0 6px; }

/* ============================================================
   22. Cierre de misión
   ============================================================ */

.done-hero { text-align: center; padding: 26px 0 20px; }
.done-marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent-wash); color: var(--accent);
  border: 1px solid var(--accent-line);
  animation: marca-entra 220ms var(--ease);
}
.done-marca .icon { width: 30px; height: 30px; }
@keyframes marca-entra {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}
.done-titulo { font-size: 1.375rem; margin: 0 0 4px; }
.done-fecha { margin: 0; font-size: 0.8125rem; }
.done-acciones { margin-top: 18px; }
.done-acciones .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.done-icon { width: 26px; height: 26px; color: var(--accent); }

/* ============================================================
   23. Listas de navegación y «Más»
   ============================================================ */

.lista-nav { list-style: none; margin: 0; padding: 0; }
.lista-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 10px 4px;
  background: none; border: none; border-bottom: 1px solid var(--line-soft);
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.lista-icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-2); }
.lista-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lista-titulo { font-weight: 600; }
.lista-desc { font-size: 0.8125rem; }
.lista-chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); transform: rotate(-90deg); }

/* ============================================================
   24. Navegación inferior
   ============================================================ */

/* En navegador NO es fija: en iOS la barra inferior de Safari aparece y
   desaparece con el scroll y taparía los toques. Fluye al final del
   contenido. Sólo se fija cuando la app corre instalada, donde esa barra del
   navegador no existe. */
/* Vive en <body>, no dentro de #app: se estira a todo el ancho por sí sola.
   Nada de márgenes negativos aquí — sacarían la barra fuera del viewport y
   provocarían scroll horizontal en toda la app. */
.bottom-nav {
  display: flex;
  width: 100%;
  margin: 28px 0 0;
  padding:
    6px
    calc(4px + var(--sar))
    calc(6px + var(--sab))
    calc(4px + var(--sal));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.bottom-nav[hidden] { display: none; }
.nav-btn {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: var(--tap); padding: 6px 2px;
  background: none; border: none;
  color: var(--muted); font: inherit; cursor: pointer;
}
.nav-btn.is-active { color: var(--accent); }
.nav-icon { width: 22px; height: 22px; }
.nav-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; }

@media (display-mode: standalone) {
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    margin: 0;
    background: var(--bg);
  }

  /* Banda opaca sobre el área segura superior. Sin ella, el contenido pasa
     por debajo de la hora y de la Dynamic Island al desplazarse: el relleno
     de #app coloca bien la primera pantalla, pero no tapa lo que sube
     después. z-index por encima del contenido y por debajo de nada más. */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--sat);
    background: var(--bg);
    z-index: 30;
    pointer-events: none;
  }

  /* Hueco para que el contenido no quede debajo de la barra fija. Se reserva
     el alto real de la barra más su área segura, más un respiro para que el
     último botón quede completo y pulsable, no pegado al borde. */
  body {
    padding-bottom: calc(var(--nav-h) + var(--sab) + 16px);
  }
}

/* ============================================================
   25. Piezas, ganchos y dinero
   ============================================================ */

.gancho-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.gancho-row:last-child { border-bottom: none; }
.gancho-nombre { flex: 0 0 auto; font-weight: 600; }
.gancho-desc { flex: 1 1 auto; font-size: 0.875rem; }

.pieza-card .field-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.field-money {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center; gap: 10px; margin-bottom: 10px;
}
.field-money .field-label { margin: 0; }
.money-wrap { position: relative; display: block; }
.money-wrap .input { padding-right: 46px; text-align: right; }
.money-cur {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; font-weight: 700; color: var(--muted); pointer-events: none;
}

.hero-card { border-color: var(--accent-line); }
.share-text { min-height: 120px; resize: none; overflow: hidden; }

/* ============================================================
   26. Movimiento
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .step-pane, .done-marca { animation: none; }
  .disclosure > summary::after { transition: none; }
}

/* Compromiso de tiempo del Día 0: dato práctico, no adorno. Se separa del
   texto anterior con un filete para que se lea aunque se pase de largo. */
.compromiso-tiempo {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ============================================================
   26. Apertura y transiciones
   ============================================================ */

/* Pantalla de apertura. Oculta por defecto: sólo aparece en la app instalada,
   donde iOS muestra un lienzo vacío mientras carga. Usa --bg (no negro puro)
   para que al retirarse no haya escalón contra el fondo de la app. */
.splash { display: none; }

@media (display-mode: standalone) {
  .splash {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bg);
    animation: splash-entra 200ms var(--ease) both;
  }
  .splash.is-fuera {
    animation: splash-sale 200ms var(--ease) forwards;
    pointer-events: none;
  }
}

.splash-simbolo { display: block; }
.splash-marca {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}

@keyframes splash-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-sale  { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* Entrada de vista: desvanecimiento con un desplazamiento mínimo. Sólo se
   dispara al cambiar de ruta o de paso, nunca en los refrescos que provoca
   escribir en un campo: repetirla ahí produciría parpadeo y saltos. */
@keyframes vista-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.is-entrando { animation: vista-entra var(--dur-paso) var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash.is-fuera,
  .is-entrando { animation: none; }
  .splash.is-fuera { opacity: 0; visibility: hidden; }
}

/* Recuperación y estado del progreso */
.snap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.snap-row:last-child { border-bottom: none; }
.snap-datos { min-width: 0; }
.snap-fecha { margin: 0; font-weight: 600; }
.snap-row .btn { flex: 0 0 auto; }
.estado-ok { color: var(--accent); }
.estado-mal { color: var(--warn); }

/* Aviso persistente de fallo al guardar. Vive fuera de #app, así que navegar
   no lo retira: sólo lo hace un guardado confirmado. */
.save-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: calc(12px + var(--sat)) 16px 12px;
  background: var(--warn);
  color: #1a1204;
}
.save-alert-texto { margin: 0; flex: 1 1 220px; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.btn-alert {
  flex: 0 0 auto; min-height: var(--tap);
  background: #1a1204; border-color: #1a1204; color: #f3f0ea;
  font-size: 0.875rem;
}
.btn-alert:hover { background: #2a1e08; border-color: #2a1e08; }
/* Con el aviso arriba, la banda del área segura sobra: ya hay algo opaco. */
@media (display-mode: standalone) {
  body:has(.save-alert)::before { display: none; }
}