/* ==========================================================================
   Cestia · hoja de estilo única.

   Tres reglas que no se negocian:
     1. Tipografía Outfit para TODO, incluidas las cifras. Nada de monoespaciada.
     2. border-radius: 0 en todo. Se declara una vez en el reset y no vuelve a
        aparecer en este fichero. Si ves un border-radius más, está de más.
     3. Nada de sombras difusas ni degradados de relleno. La profundidad se hace
        con contraste de superficie: hueso el fondo, blanco la tarjeta, tinta la
        cabecera.

   Cómo está montada la página, de fuera adentro:
     · el fondo de todo es hueso (--papel-alt), no blanco;
     · la cabecera y el pie son tinta, y muerden la pantalla por arriba y abajo;
     · lo que se lee vive en tarjetas blancas con un filo de color arriba;
     · el color solo aparece donde significa algo: verde cumple, ámbar al
       límite, rojo no cumple. Nunca de adorno.

   Los colores son los de app/config.py · COLORES. base.html los vuelve a
   escribir en línea desde la configuración, que es la fuente de verdad.
   ========================================================================== */

:root {
  --tinta: #141917;
  --tinta-suave: #5c6360;
  --papel: #ffffff;
  --papel-alt: #f2f1ec;
  --linea: #dcdad2;
  --senal: #166c48;
  --aviso: #9a5b0a;
  --alarma: #a8241c;
  --acento: #0d4f3c;

  /* Derivados: se calculan aquí una vez y no se repiten por el fichero. */
  --tinta-borde: rgba(20, 25, 23, 0.14);
  --sobre-tinta: rgba(255, 255, 255, 0.62);
  --sobre-tinta-linea: rgba(255, 255, 255, 0.16);

  --paso: 8px;
  --ancho: 1180px;
  --fuente: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--tinta);
  background: var(--papel-alt);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

input,
select,
textarea,
button {
  font-family: var(--fuente);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--acento);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

/* --- Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); margin-bottom: calc(var(--paso) * 2); }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

p { max-width: 68ch; }

/* La etiqueta que va encima de un dato o de un bloque. Mayúsculas pequeñas y
   muy espaciadas: se lee como rótulo, no como texto. */
.etiqueta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tinta-suave);
  font-weight: 600;
}

.dato {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.dato-grande { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 800; letter-spacing: -0.04em; }
.dato-pequeno { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.apunte { color: var(--tinta-suave); font-size: 0.8125rem; line-height: 1.5; }

/* --- Estructura ---------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 calc(var(--paso) * 3);
}

main {
  flex: 1;
  padding: calc(var(--paso) * 5) 0 calc(var(--paso) * 10);
}

/* --- Cabecera: tinta, y muerde la pantalla ------------------------------- */

.cabecera {
  background: var(--tinta);
  color: var(--papel);
  position: sticky;
  top: 0;
  z-index: 30;
}

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--paso) * 3);
  padding: calc(var(--paso) * 2) 0;
  flex-wrap: wrap;
}

.marca {
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: var(--papel);
  text-decoration: none;
  line-height: 1.1;
}

.marca span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sobre-tinta);
  letter-spacing: 0;
  margin-top: 2px;
}

.nav {
  display: flex;
  gap: calc(var(--paso) * 2.5);
  flex-wrap: wrap;
}

.nav a {
  color: var(--sobre-tinta);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--papel); }
.nav a.activo { color: var(--papel); border-bottom-color: var(--papel); font-weight: 600; }

/* Los chips de la cabecera van sobre tinta: se dibujan al revés. */
.cabecera .chip {
  border-color: var(--sobre-tinta-linea);
  color: var(--sobre-tinta);
  background: transparent;
}

.cabecera .chip strong { color: var(--papel); }
.cabecera .chip-senal { border-color: rgba(120, 220, 170, 0.5); color: #7fdcaa; }
.cabecera .chip-alarma { border-color: rgba(255, 150, 140, 0.5); color: #ff968c; }

/* --- Pie ----------------------------------------------------------------- */

.pie {
  background: var(--tinta);
  color: var(--sobre-tinta);
  padding: calc(var(--paso) * 6) 0;
  font-size: 0.8125rem;
}

.pie p { max-width: 90ch; margin-bottom: calc(var(--paso) * 1.5); }
.pie strong { color: var(--papel); }
.pie a { color: var(--papel); }

/* --- Rejillas ------------------------------------------------------------ */

.rejilla { display: grid; gap: calc(var(--paso) * 2); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pila > * + * { margin-top: calc(var(--paso) * 2); }
.pila-ancha > * + * { margin-top: calc(var(--paso) * 4); }

/* --- Tarjetas: blancas sobre hueso, con filo de color --------------------- */

.card {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--tinta);
  padding: calc(var(--paso) * 4);
}

.card-alt { background: var(--papel-alt); border-top-color: var(--linea); }
.card-senal { border-top-color: var(--senal); }
.card-alarma { border-top-color: var(--alarma); }

.card h2, .card h3 { margin-bottom: calc(var(--paso) * 1.5); }

.card-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  margin-bottom: calc(var(--paso) * 3);
  padding-bottom: calc(var(--paso) * 1.5);
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}

.card-cabecera h2, .card-cabecera h3 { margin-bottom: 0; }

/* --- Botones ------------------------------------------------------------- */

.boton {
  display: inline-block;
  border: 2px solid var(--tinta);
  background: var(--papel);
  color: var(--tinta);
  padding: calc(var(--paso) * 1.25) calc(var(--paso) * 2.5);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.12s ease, color 0.12s ease;
}

.boton:hover { background: var(--tinta); color: var(--papel); }

.boton-primario {
  background: var(--acento);
  color: var(--papel);
  border-color: var(--acento);
}

.boton-primario:hover { background: var(--tinta); border-color: var(--tinta); }

.boton-grande {
  font-size: 1.0625rem;
  padding: calc(var(--paso) * 1.875) calc(var(--paso) * 4);
  font-weight: 700;
}

.boton-senal { background: var(--senal); border-color: var(--senal); color: var(--papel); }
.boton-senal:hover { background: var(--tinta); border-color: var(--tinta); }

.boton-suave {
  border-width: 1px;
  border-color: var(--linea);
  color: var(--tinta-suave);
  font-weight: 500;
}

.boton-suave:hover { background: var(--papel-alt); border-color: var(--tinta); color: var(--tinta); }

.boton[disabled], .boton:disabled { opacity: 0.4; cursor: not-allowed; }
.boton[disabled]:hover { background: var(--papel); color: var(--tinta); }

.acciones {
  display: flex;
  gap: calc(var(--paso) * 2);
  flex-wrap: wrap;
  align-items: center;
}

/* --- Formularios --------------------------------------------------------- */

.campo { display: block; margin-bottom: calc(var(--paso) * 2.5); }

.campo > span,
.campo > label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: calc(var(--paso) * 0.75);
}

.campo .ayuda-campo {
  display: block;
  font-weight: 400;
  color: var(--tinta-suave);
  font-size: 0.8125rem;
  margin-top: -2px;
  margin-bottom: calc(var(--paso) * 0.75);
}

input[type='text'],
input[type='number'],
input[type='password'],
select,
textarea {
  width: 100%;
  border: 1px solid var(--tinta-borde);
  background: var(--papel);
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 1.75);
  font-size: 1rem;
}

input::placeholder, textarea::placeholder { color: #9aa09d; }

input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--acento);
  outline-offset: -3px;
  border-color: var(--acento);
}

textarea { min-height: 200px; resize: vertical; line-height: 1.6; }
textarea.alto { min-height: 300px; }
textarea.bajo { min-height: 110px; }

fieldset { border: 1px solid var(--linea); padding: calc(var(--paso) * 3); background: var(--papel); }
legend { padding: 0 var(--paso); font-weight: 700; font-size: 0.9375rem; }

.casilla {
  display: flex;
  gap: calc(var(--paso) * 1.75);
  align-items: flex-start;
  padding: calc(var(--paso) * 1.75) 0;
  border-bottom: 1px solid var(--linea);
}

.casilla:last-child { border-bottom: 0; }

.casilla input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--acento);
}

.casilla .texto { flex: 1; }
.casilla .ayuda { display: block; color: var(--tinta-suave); font-size: 0.8125rem; margin-top: 2px; }

/* Elegir entre dos maneras de comprar: bloques que se marcan enteros. */
.modo {
  display: block;
  padding: calc(var(--paso) * 2.5);
  border: 1px solid var(--linea);
  background: var(--papel);
  cursor: pointer;
}

.modo + .modo { margin-top: calc(var(--paso) * 1.5); }
.modo:hover { border-color: var(--tinta-suave); }
.modo:has(input:checked) {
  border-color: var(--acento);
  box-shadow: inset 4px 0 0 var(--acento);
}
.modo input[type='radio'] {
  width: 20px;
  height: 20px;
  margin-right: calc(var(--paso) * 1.5);
  accent-color: var(--acento);
  vertical-align: middle;
}
.modo-titulo { font-weight: 700; }
.modo-texto {
  display: block;
  margin-top: var(--paso);
  color: var(--tinta-suave);
  font-size: 0.875rem;
}

/* --- Tablas -------------------------------------------------------------- */

.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--linea);
  background: var(--papel);
}

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

th, td {
  text-align: left;
  padding: calc(var(--paso) * 1.75);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

thead th {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--papel);
  font-weight: 600;
  background: var(--tinta);
  white-space: nowrap;
  border-bottom: 0;
}

tbody tr:hover { background: var(--papel-alt); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { background: var(--papel-alt); font-weight: 600; border-bottom: 0; border-top: 2px solid var(--tinta); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tabla-cumplimiento td { padding-top: calc(var(--paso) * 2); padding-bottom: calc(var(--paso) * 2); }
.tabla-cumplimiento tr.principal td { font-size: 1.25rem; font-weight: 700; }
.tabla-cumplimiento tr.principal .etiqueta-fila { font-weight: 700; }

/* --- Semáforo: cuadrado sólido + texto. Nunca solo color. ---------------- */

.semaforo {
  display: inline-flex;
  align-items: center;
  gap: var(--paso);
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.875rem;
}

.semaforo .marca-color {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  display: inline-block;
}

.semaforo-verde .marca-color { background: var(--senal); }
.semaforo-ambar .marca-color { background: var(--aviso); }
.semaforo-rojo  .marca-color { background: var(--alarma); }

.semaforo-verde { color: var(--senal); }
.semaforo-ambar { color: var(--aviso); }
.semaforo-rojo  { color: var(--alarma); }

/* --- Avisos -------------------------------------------------------------- */

.aviso {
  border: 1px solid var(--linea);
  border-left: 5px solid var(--tinta-suave);
  background: var(--papel);
  padding: calc(var(--paso) * 2.5) calc(var(--paso) * 3);
}

.aviso h3 { margin-bottom: calc(var(--paso) * 0.75); }
.aviso p { font-size: 0.9375rem; }
.aviso p + p { margin-top: var(--paso); }
.aviso ul { margin: var(--paso) 0 0 calc(var(--paso) * 2.5); font-size: 0.9375rem; }

.aviso-info { border-left-color: var(--acento); }
.aviso-aviso { border-left-color: var(--aviso); }
.aviso-bloqueo { border-left-color: var(--alarma); }
.aviso-senal { border-left-color: var(--senal); }
.aviso-error { border-left-color: var(--alarma); color: var(--alarma); }
.aviso-ok { border-left-color: var(--senal); }

/* --- Píldoras de estado -------------------------------------------------- */

.chips { display: flex; gap: var(--paso); flex-wrap: wrap; align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--linea);
  padding: 4px calc(var(--paso) * 1.5);
  font-size: 0.75rem;
  color: var(--tinta-suave);
  background: var(--papel);
  white-space: nowrap;
}

.chip strong { color: var(--tinta); font-weight: 600; }
.chip-alarma { border-color: var(--alarma); color: var(--alarma); }
.chip-senal { border-color: var(--senal); color: var(--senal); }

/* --- Barra de progreso / presupuesto ------------------------------------- */

.barra {
  height: 16px;
  border: 1px solid var(--tinta-borde);
  background: var(--papel-alt);
  overflow: hidden;
}

.barra .relleno { height: 100%; background: var(--senal); display: block; }
.barra .relleno.ambar { background: var(--aviso); }
.barra .relleno.rojo { background: var(--alarma); }

/* --- Líneas de la cesta -------------------------------------------------- */

.miniatura {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid var(--linea);
  background: var(--papel-alt);
}

.unidades {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--tinta);
}

.unidades button {
  border: 0;
  background: var(--papel);
  width: 32px;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--tinta);
  font-weight: 600;
}

.unidades button:hover { background: var(--tinta); color: var(--papel); }

.unidades .valor {
  min-width: 36px;
  text-align: center;
  padding: 6px 0;
  border-left: 1px solid var(--tinta);
  border-right: 1px solid var(--tinta);
  font-weight: 700;
}

.origen { font-size: 0.75rem; color: var(--tinta-suave); display: block; }

.linea-descartada td { opacity: 0.5; text-decoration: line-through; }
.linea-recortada .estado-linea { color: var(--aviso); }

/* --- Bloques de código y pasos numerados --------------------------------- */

.script {
  border: 1px solid var(--tinta-borde);
  background: var(--tinta);
  color: #d7f0e3;
  padding: calc(var(--paso) * 2.5);
  max-height: 300px;
  overflow: auto;
  white-space: pre;
  font-family: var(--fuente);
  font-size: 0.8125rem;
  line-height: 1.55;
  tab-size: 2;
}

.pasos { counter-reset: paso; list-style: none; }

.pasos li {
  counter-increment: paso;
  padding: calc(var(--paso) * 2) 0 calc(var(--paso) * 2) calc(var(--paso) * 5.5);
  position: relative;
  border-bottom: 1px solid var(--linea);
}

.pasos li:last-child { border-bottom: 0; }

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: calc(var(--paso) * 2);
  width: 28px;
  height: 28px;
  background: var(--tinta);
  color: var(--papel);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* --- Listas del resultado del carrito ------------------------------------ */

.resultado-listas { display: grid; gap: calc(var(--paso) * 2); }

.lista-resultado { border: 1px solid var(--linea); background: var(--papel); }

.lista-resultado > h3 {
  padding: calc(var(--paso) * 2);
  border-bottom: 1px solid var(--linea);
  background: var(--papel-alt);
  font-size: 0.9375rem;
}

.lista-resultado ul { list-style: none; }

.lista-resultado li {
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
  border-bottom: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  font-size: 0.9375rem;
}

.lista-resultado li:last-child { border-bottom: 0; }
.lista-resultado li .motivo { color: var(--tinta-suave); font-size: 0.8125rem; }

.lista-dentro > h3 { color: var(--senal); }
.lista-fuera > h3 { color: var(--alarma); }
.lista-recortada > h3 { color: var(--aviso); }

.lista-vacia { padding: calc(var(--paso) * 2.5); color: var(--tinta-suave); font-size: 0.875rem; }

/* --- Dieta --------------------------------------------------------------- */

.dia { border: 1px solid var(--linea); background: var(--papel); }

.dia > h3 {
  padding: calc(var(--paso) * 2) calc(var(--paso) * 2.5);
  background: var(--tinta);
  color: var(--papel);
  display: flex;
  justify-content: space-between;
  gap: var(--paso);
  flex-wrap: wrap;
  align-items: baseline;
}

.dia > h3 .semaforo, .dia > h3 .apunte { color: var(--sobre-tinta); }

.toma { padding: calc(var(--paso) * 2.5); border-bottom: 1px solid var(--linea); }
.toma:last-child { border-bottom: 0; }
.toma > .etiqueta { margin-bottom: var(--paso); display: block; }

.aprox {
  border: 1px solid var(--aviso);
  color: var(--aviso);
  font-size: 0.6875rem;
  padding: 0 5px;
  margin-left: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.plantilla { display: flex; flex-direction: column; gap: calc(var(--paso) * 2); height: 100%; }
.plantilla .cifras { display: flex; gap: calc(var(--paso) * 3); margin-top: auto; }

/* ==========================================================================
   Recorrido por pasos
   Cestia es un camino, no un menú: datos → números → dieta → cesta → carrito.
   La barra va pegada bajo la cabecera y dice dónde estás y qué queda.
   ========================================================================== */

.recorrido {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--papel);
  border: 1px solid var(--linea);
}

.recorrido-paso {
  display: flex;
  align-items: center;
  gap: calc(var(--paso) * 1.5);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 2.25);
  border-right: 1px solid var(--linea);
  color: var(--tinta-suave);
  text-decoration: none;
  min-width: 0;
  position: relative;
}

.recorrido-paso:last-child { border-right: 0; }

.recorrido-paso .num {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.recorrido-paso .texto { min-width: 0; }

.recorrido-paso .nombre {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recorrido-paso .detalle {
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.recorrido-paso:hover { background: var(--papel-alt); color: var(--tinta); }

.recorrido-paso.hecho { color: var(--senal); }
.recorrido-paso.hecho .num { background: var(--senal); border-color: var(--senal); color: var(--papel); }

.recorrido-paso.actual { color: var(--papel); background: var(--tinta); }
.recorrido-paso.actual .num { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.recorrido-paso.actual .detalle { color: var(--sobre-tinta); }

.recorrido-paso.pendiente { color: #9aa09d; }
.recorrido-paso.pendiente .num { border-color: var(--linea); }

/* --- Encabezado de paso: el titular manda -------------------------------- */

.encabezado-paso { max-width: 46rem; }
.encabezado-paso .etiqueta { display: block; margin-bottom: calc(var(--paso) * 1.5); }
.encabezado-paso h1 { margin-bottom: calc(var(--paso) * 2); }
.encabezado-paso p { color: var(--tinta-suave); font-size: 1.0625rem; }

/* ==========================================================================
   Paso 1 · objetivo y preferencias
   ========================================================================== */

/* Tres objetivos, tres bloques grandes que se marcan enteros. Es la decisión
   más importante del paso 1 y tiene que pesar más que el resto del formulario. */
.objetivos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--paso) * 2); }

.objetivo {
  display: block;
  border: 2px solid var(--linea);
  background: var(--papel);
  padding: calc(var(--paso) * 3);
  cursor: pointer;
  position: relative;
}

.objetivo:hover { border-color: var(--tinta-suave); }

.objetivo:has(input:checked) {
  border-color: var(--acento);
  background: var(--papel);
  box-shadow: inset 0 -5px 0 var(--acento);
}

.objetivo input[type='radio'] { position: absolute; opacity: 0; pointer-events: none; }
.objetivo .nombre-objetivo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; display: block; }
.objetivo .detalle-objetivo { color: var(--tinta-suave); font-size: 0.875rem; margin-top: var(--paso); display: block; }
.objetivo .ritmo { display: inline-block; margin-top: calc(var(--paso) * 1.5); font-size: 0.75rem; font-weight: 600; color: var(--acento); }
.objetivo:has(input:checked) .ritmo::before { content: '✓ '; }

/* Preferencias: casillas que se leen como etiquetas, no como un formulario. */
.preferencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }

.preferencia {
  display: flex;
  gap: calc(var(--paso) * 1.5);
  align-items: flex-start;
  padding: calc(var(--paso) * 2);
  background: var(--papel);
  cursor: pointer;
}

.preferencia:hover { background: var(--papel-alt); }
.preferencia:has(input:checked) { background: var(--papel-alt); box-shadow: inset 3px 0 0 var(--acento); }
.preferencia input[type='checkbox'] { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--acento); }
.preferencia .nombre-pref { font-weight: 600; font-size: 0.9375rem; display: block; }
.preferencia .detalle-pref { color: var(--tinta-suave); font-size: 0.8125rem; display: block; margin-top: 1px; }

/* La caja donde se escribe en cristiano, con su marca de que la lee la IA. */
.caja-ia { border: 2px solid var(--tinta); background: var(--papel); padding: calc(var(--paso) * 3); }
.caja-ia .cabecera-ia { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--paso) * 2); margin-bottom: calc(var(--paso) * 1.5); flex-wrap: wrap; }
.caja-ia h3 { margin: 0; }
.caja-ia textarea { border-color: var(--tinta-borde); }
.caja-ia .marca-ia {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--papel);
  background: var(--acento);
  padding: 3px calc(var(--paso) * 1.25);
}

/* Lo que la IA ha entendido, devuelto a la persona antes de seguir. */
.lectura { border: 1px solid var(--linea); border-left: 5px solid var(--acento); background: var(--papel-alt); padding: calc(var(--paso) * 2.5); }
.lectura h4 { font-size: 0.9375rem; margin-bottom: var(--paso); }
.lectura ul { list-style: none; }
.lectura li { padding: calc(var(--paso) * 1.25) 0; border-bottom: 1px solid var(--linea); font-size: 0.9375rem; }
.lectura li:last-child { border-bottom: 0; }
.lectura .leido { font-weight: 600; }
.lectura .traducido { color: var(--tinta-suave); font-size: 0.8125rem; display: block; }
.lectura .marca-riesgo { color: var(--alarma); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ==========================================================================
   Paso 2 · los números
   ========================================================================== */

.cifra-mayor { display: flex; align-items: flex-end; gap: calc(var(--paso) * 2); flex-wrap: wrap; }

.cifra-mayor .valor {
  font-size: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.cifra-mayor .unidad { font-size: 1.0625rem; color: var(--tinta-suave); padding-bottom: 6px; }

/* Reparto de macros: barra apilada con trama propia por macro, para no
   depender de distinguir tonos. */
.reparto { display: flex; height: 48px; border: 1px solid var(--tinta-borde); overflow: hidden; }
.reparto span { display: block; height: 100%; }
.reparto .m-proteina { background: var(--tinta); }
.reparto .m-grasa {
  background: repeating-linear-gradient(45deg, var(--senal), var(--senal) 6px, #cfe3d8 6px, #cfe3d8 12px);
}
.reparto .m-hidratos {
  background: repeating-linear-gradient(90deg, var(--linea), var(--linea) 7px, var(--papel-alt) 7px, var(--papel-alt) 14px);
}

.leyenda-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--paso) * 2); margin-top: calc(var(--paso) * 2.5); }
.leyenda-macros .macro { border-top: 4px solid var(--tinta); padding-top: calc(var(--paso) * 1.5); }
.leyenda-macros .macro.grasa { border-top-color: var(--senal); }
.leyenda-macros .macro.hidratos { border-top-color: var(--linea); }
.leyenda-macros .macro .nombre { font-size: 0.8125rem; color: var(--tinta-suave); display: block; }
.leyenda-macros .macro .gramos { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.leyenda-macros .macro .pct { font-size: 0.8125rem; color: var(--tinta-suave); }

/* Los dos minerales que justifican el programa. */
.limite { background: var(--papel); border: 1px solid var(--linea); padding: calc(var(--paso) * 3); }
.limite .etiqueta { display: block; margin-bottom: calc(var(--paso) * 1.5); }
.limite .valor { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.limite .regla { font-size: 0.875rem; color: var(--tinta-suave); margin-top: calc(var(--paso) * 1.5); }
.limite-techo { border-left: 5px solid var(--alarma); }
.limite-suelo { border-left: 5px solid var(--senal); }

/* Desglose del cálculo: de dónde sale cada kcal. */
.desglose { list-style: none; }

.desglose li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--paso) * 2);
  padding: calc(var(--paso) * 1.5) 0;
  border-bottom: 1px solid var(--linea);
  font-size: 0.9375rem;
}

.desglose li:last-child { border-bottom: 0; }
.desglose li.total { font-weight: 700; font-size: 1.0625rem; border-top: 2px solid var(--tinta); border-bottom: 0; }
.desglose .concepto { color: var(--tinta-suave); }
.desglose li.total .concepto { color: var(--tinta); }
.desglose .cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   Paso 3 · de dónde sale la dieta
   ========================================================================== */

.vias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linea); background: var(--papel); }

.via {
  border-right: 1px solid var(--linea);
  padding: calc(var(--paso) * 3);
  cursor: pointer;
  display: block;
  position: relative;
}

.via:last-child { border-right: 0; }
.via:hover { background: var(--papel-alt); }
.via:has(input:checked) { background: var(--tinta); color: var(--papel); }
.via:has(input:checked) p { color: var(--sobre-tinta); }
.via:has(input:checked) .num-via { color: var(--sobre-tinta); }

.via input[type='radio'] { position: absolute; opacity: 0; pointer-events: none; }
.via .num-via { font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--tinta-suave); text-transform: uppercase; font-weight: 600; }
.via h3 { margin: calc(var(--paso) * 1.25) 0; font-size: 1.1875rem; }
.via p { font-size: 0.875rem; color: var(--tinta-suave); margin: 0; }
.via:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.panel-via { border: 1px solid var(--linea); border-top: 0; padding: calc(var(--paso) * 4); background: var(--papel); }

/* ==========================================================================
   Paso 4 · sustituir productos de la cesta
   ========================================================================== */

.fila-producto { display: flex; gap: calc(var(--paso) * 1.5); align-items: flex-start; }
.precio-unitario { color: var(--tinta-suave); font-size: 0.75rem; display: block; font-weight: 400; }

.fila-alternativas > td { padding: 0; background: var(--papel-alt); border-bottom: 2px solid var(--tinta); }
.fila-alternativas:hover > td { background: var(--papel-alt); }

.alternativas { padding: calc(var(--paso) * 3); }

.alternativas-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--paso) * 2);
  margin-bottom: calc(var(--paso) * 2);
  flex-wrap: wrap;
}

.lista-alternativas { list-style: none; display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }

.alternativa {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: calc(var(--paso) * 2);
  align-items: center;
  padding: calc(var(--paso) * 2);
  background: var(--papel);
}

.alternativa.actual { background: var(--papel-alt); box-shadow: inset 4px 0 0 var(--senal); }
.alternativa .datos { min-width: 0; }
.alternativa .nombre { display: block; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.alternativa .meta { display: block; font-size: 0.8125rem; color: var(--tinta-suave); margin-top: 2px; }
.alternativa .precios { text-align: right; white-space: nowrap; }
.alternativa .precio { font-weight: 700; font-size: 1.0625rem; }
.alternativa .por-100 { font-size: 0.75rem; color: var(--tinta-suave); display: block; }

.alternativa .insignia {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--senal);
  color: var(--papel);
  padding: 3px calc(var(--paso) * 1.25);
  font-weight: 700;
}

.cargando { color: var(--tinta-suave); font-size: 0.875rem; padding: calc(var(--paso) * 2.5); }

/* --- Utilidades ---------------------------------------------------------- */

.oculto { display: none !important; }
.suave { color: var(--tinta-suave); }
.centrado { text-align: center; }
.derecha { text-align: right; }
.sin-margen { margin: 0; }
.separador { border: 0; border-top: 1px solid var(--linea); margin: calc(var(--paso) * 5) 0; }
.medida { max-width: 68ch; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .recorrido { grid-auto-flow: row; grid-auto-columns: auto; }
  .recorrido-paso { border-right: 0; border-bottom: 1px solid var(--linea); }
  .recorrido-paso:last-child { border-bottom: 0; }
  .recorrido-paso .detalle { white-space: normal; }
  .objetivos { grid-template-columns: minmax(0, 1fr); }
  .vias { grid-template-columns: minmax(0, 1fr); }
  .via { border-right: 0; border-bottom: 1px solid var(--linea); }
  .via:last-child { border-bottom: 0; }
}

@media (max-width: 900px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preferencias { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .contenedor { padding: 0 calc(var(--paso) * 2); }
  .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: minmax(0, 1fr); }
  .leyenda-macros { grid-template-columns: minmax(0, 1fr); }
  .card { padding: calc(var(--paso) * 2.5); }
  .cabecera { position: static; }
  .alternativa { grid-template-columns: 44px minmax(0, 1fr); }
  .alternativa .precios { text-align: left; grid-column: 2; }
  .alternativa .accion { grid-column: 2; justify-self: start; }
}

@media print {
  .cabecera, .pie, .acciones, .recorrido { display: none; }
  body { color: #000; background: #fff; }
  .card { border: 1px solid #999; }
}

/* ==========================================================================
   El menú: qué comes cada día
   Un menú de siete días son treinta y cinco comidas. Enseñarlas todas
   desplegadas es un muro de veinte mil píxeles que nadie baja, así que cada
   día se pliega y solo el primero viene abierto.
   ========================================================================== */

.resumen-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}

.dato-menu { background: var(--papel); padding: calc(var(--paso) * 2.5); }
.dato-menu .etiqueta { display: block; margin-bottom: var(--paso); }
.dato-menu .cifra {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.dato-menu .pie-dato {
  display: block;
  margin-top: calc(var(--paso) * 0.75);
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  line-height: 1.4;
}

.dia-menu { border: 1px solid var(--linea); background: var(--papel); }

.dia-menu > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--paso) * 2);
  padding: calc(var(--paso) * 2.25) calc(var(--paso) * 2.5);
  cursor: pointer;
  flex-wrap: wrap;
  list-style: none;
}

.dia-menu > summary::-webkit-details-marker { display: none; }

/* El triángulo se dibuja aquí para poder girarlo al abrir. */
.dia-menu > summary::before {
  content: '▸';
  color: var(--tinta-suave);
  font-size: 0.875rem;
  margin-right: calc(var(--paso) * 1.25);
}

.dia-menu[open] > summary { background: var(--tinta); color: var(--papel); }
.dia-menu[open] > summary::before { content: '▾'; color: var(--sobre-tinta); }
.dia-menu[open] > summary .dia-cifras { color: var(--sobre-tinta); }
.dia-menu:not([open]) > summary:hover { background: var(--papel-alt); }

.dia-nombre { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; }

.dia-cifras {
  display: flex;
  gap: calc(var(--paso) * 2);
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.dia-cifras .exceso { color: var(--alarma); font-weight: 600; }
.dia-menu[open] > summary .dia-cifras .exceso { color: #ff968c; }

.toma-menu { border-top: 1px solid var(--linea); padding: calc(var(--paso) * 2.5); }

.toma-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--paso) * 2);
  margin-bottom: calc(var(--paso) * 1.5);
  flex-wrap: wrap;
}

/* Las cuatro cifras de la comida. La energía va en tinta y los macros en gris:
   se leen de un vistazo sin competir con el nombre de la toma. */
.macros-toma { display: flex; gap: calc(var(--paso) * 2.5); flex-wrap: wrap; align-items: baseline; }
.macro-toma { display: inline-flex; align-items: baseline; gap: 4px; }
.macro-toma .valor {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta-suave);
}
.macro-toma .unidad { font-size: 0.75rem; color: var(--tinta-suave); }
.macro-toma.energia .valor { color: var(--tinta); font-size: 1.25rem; }
.macro-toma.energia .unidad { color: var(--tinta); }

.toma-cabecera h4 {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acento);
  font-weight: 700;
}

.alimentos { list-style: none; }

.alimentos li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: calc(var(--paso) * 2);
  align-items: baseline;
  padding: calc(var(--paso) * 1.25) 0;
  border-bottom: 1px solid var(--linea);
}

.alimentos li:last-child { border-bottom: 0; }
.alimentos .cantidad { font-weight: 700; font-variant-numeric: tabular-nums; }
.alimentos .alimento { font-size: 0.9375rem; }
.alimentos .cifras-item { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .alimentos .cifras-item { white-space: normal; text-align: right; }
}

.sin-resolver {
  border: 1px solid var(--tinta-suave);
  color: var(--tinta-suave);
  font-size: 0.6875rem;
  padding: 0 5px;
  margin-left: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 900px) {
  .resumen-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .resumen-menu { grid-template-columns: minmax(0, 1fr); }
  .alimentos li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .alimentos .cifras-item { grid-column: 2; white-space: normal; }
}

/* --- Por qué no cumple --------------------------------------------------- */

.explica-fallos {
  margin-top: calc(var(--paso) * 3);
  border-top: 2px solid var(--tinta);
  padding-top: calc(var(--paso) * 2.5);
}

.explica-fallos h3 { margin-bottom: calc(var(--paso) * 1.5); }
.explica-fallos ul { list-style: none; }

.explica-fallos li {
  padding: calc(var(--paso) * 1.5) 0 calc(var(--paso) * 1.5) calc(var(--paso) * 2.5);
  border-bottom: 1px solid var(--linea);
  border-left: 4px solid var(--aviso);
  padding-left: calc(var(--paso) * 2);
  font-size: 0.9375rem;
  max-width: 78ch;
}

.explica-fallos li:last-of-type { border-bottom: 0; }
.explica-fallos p { margin-top: calc(var(--paso) * 2); }

/* --- Recambios de cada alimento ------------------------------------------ */

/* «o bien 140 g de pavo · 200 g de dorada». Va debajo del alimento, en gris y
   pequeño: es una salida, no una decisión que haya que tomar ahora. */
.alimentos li { row-gap: 2px; }

.recambios {
  grid-column: 2 / -1;
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  padding-top: 2px;
}

.recambios .rotulo { margin-right: 4px; }

/* Un recambio es un botón, pero no tiene que gritar: se lee como texto y se
   descubre al pasar por encima. */
.recambios .recambio {
  border: 0;
  border-bottom: 1px dashed var(--tinta-suave);
  background: none;
  padding: 0 1px;
  margin-right: calc(var(--paso) * 1.5);
  font-size: 0.8125rem;
  color: var(--tinta-suave);
  cursor: pointer;
  font-family: var(--fuente);
}

.recambios .recambio:hover {
  color: var(--papel);
  background: var(--acento);
  border-bottom-color: var(--acento);
}

.recambios .recambio:disabled { opacity: 0.5; cursor: wait; }

/* La línea que se acaba de cambiar se marca: es el único cambio que la persona
   ha hecho a mano en una dieta de treinta y cinco comidas. */
.alimentos li.cambiado { box-shadow: inset 3px 0 0 var(--senal); padding-left: calc(var(--paso) * 1.5); }
.alimentos li.cambiado .alimento::after {
  content: 'cambiado';
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--senal);
  border: 1px solid var(--senal);
  padding: 0 5px;
  margin-left: 8px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .recambios { grid-column: 2; }
}