/* ==========================================================================
   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. Bordes de 1px sólidos, mucho blanco, separación por rejilla. Sin sombras
        difusas, sin degradados, sin cajas flotantes.

   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: #111111;
  --tinta-suave: #5b5b5b;
  --papel: #ffffff;
  --papel-alt: #f6f6f4;
  --linea: #e2e2dd;
  --senal: #1f5c3d;
  --aviso: #a86a12;
  --alarma: #a51e1e;
  --acento: #1a3fd6;

  --paso: 8px;
  --ancho: 1120px;
  --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);
  line-height: 1.5;
}

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: 2px;
}

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

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; margin-bottom: calc(var(--paso) * 1.5); }
h3 { font-size: 1.0625rem; font-weight: 600; }

p { max-width: 68ch; }

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

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

.cabecera {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 20;
}

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

.marca {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
}

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

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

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

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

main { padding: calc(var(--paso) * 5) 0 calc(var(--paso) * 8); }

.pie {
  border-top: 1px solid var(--linea);
  padding: calc(var(--paso) * 4) 0;
  color: var(--tinta-suave);
  font-size: 0.8125rem;
  background: var(--papel-alt);
}

.pie p { max-width: 90ch; margin-bottom: var(--paso); }

/* --- 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) * 5); }

/* --- Tarjetas ------------------------------------------------------------ */

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

.card-alt { background: var(--papel-alt); }

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

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

.etiqueta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  font-weight: 500;
}

.dato {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dato-grande { font-size: 2.5rem; font-weight: 700; }
.dato-pequeno { font-size: 1.125rem; font-weight: 600; }
.apunte { color: var(--tinta-suave); font-size: 0.8125rem; }

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

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

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

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

.boton-primario:hover { background: #000; }

.boton-grande {
  font-size: 1.125rem;
  padding: calc(var(--paso) * 2) calc(var(--paso) * 4);
  font-weight: 600;
}

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

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

.boton[disabled], .boton:disabled { opacity: 0.45; cursor: not-allowed; }

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

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

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

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

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

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

textarea { min-height: 260px; resize: vertical; line-height: 1.6; }

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

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

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

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

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

/* Elegir entre dos maneras de comprar la dieta: dos bloques que se marcan
   enteros, no dos radios sueltos. Esquinas rectas, como todo lo demás. */
.modo {
  display: block;
  padding: calc(var(--paso) * 2);
  border: 1px solid var(--linea);
  cursor: pointer;
}
.modo + .modo { margin-top: calc(var(--paso) * 2); }
.modo:has(input:checked) { border-color: var(--tinta); background: var(--papel-alt); }
.modo input[type='radio'] {
  width: 18px;
  height: 18px;
  margin-right: calc(var(--paso) * 1.5);
  accent-color: var(--tinta);
  vertical-align: middle;
}
.modo-titulo { font-weight: 600; }
.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); }

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

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

thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  font-weight: 600;
  background: var(--papel-alt);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

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

.tabla-cumplimiento td { padding-top: calc(var(--paso) * 1.75); padding-bottom: calc(var(--paso) * 1.75); }
.tabla-cumplimiento tr.principal td { font-size: 1.25rem; font-weight: 600; }
.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: 500;
  font-size: 0.875rem;
}

.semaforo .marca-color {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.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: 4px solid var(--tinta-suave);
  background: var(--papel-alt);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 2.5);
}

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

.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);
  background: var(--papel);
  color: var(--alarma);
}

.aviso-ok { border-left-color: var(--senal); background: var(--papel); }

/* --- 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: 3px calc(var(--paso) * 1.25);
  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: 14px;
  border: 1px solid var(--linea);
  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: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid var(--linea);
  background: var(--papel-alt);
}

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

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

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

.unidades .valor {
  min-width: 34px;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  font-weight: 600;
}

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

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

/* --- Bloques de código y script ------------------------------------------ */

.script {
  border: 1px solid var(--linea);
  background: var(--papel-alt);
  padding: calc(var(--paso) * 2);
  max-height: 300px;
  overflow: auto;
  white-space: pre;
  font-family: var(--fuente);
  font-size: 0.8125rem;
  line-height: 1.5;
  tab-size: 2;
}

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

.pasos li {
  counter-increment: paso;
  padding: calc(var(--paso) * 1.5) 0 calc(var(--paso) * 1.5) calc(var(--paso) * 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) * 1.5);
  width: 26px;
  height: 26px;
  border: 1px solid var(--tinta);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
}

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

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

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

.lista-resultado > h3 {
  padding: calc(var(--paso) * 1.5) 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.25) 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); color: var(--tinta-suave); font-size: 0.875rem; }

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

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

.dia > h3 {
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
  background: var(--papel-alt);
  border-bottom: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  gap: var(--paso);
  flex-wrap: wrap;
  align-items: baseline;
}

.toma { padding: calc(var(--paso) * 2); 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 4px;
  margin-left: 6px;
  font-weight: 600;
}

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

/* --- 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) * 4) 0; }
.medida { max-width: 68ch; }

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

@media (max-width: 900px) {
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(2, 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); }
  h1 { font-size: 1.5rem; }
  .dato-grande { font-size: 2rem; }
  .cabecera { position: static; }
}

@media print {
  .cabecera, .pie, .acciones { display: none; }
  body { color: #000; }
}