/* ============================================================
   Taca A Comer — hoja de estilos
   Pensada para el móvil primero; en pantallas grandes el
   contenido se centra y la navegación pasa arriba.
   ============================================================ */

:root {
  /* Acento: naranja quemado. El naranja vivo de las webs de cocina
     deja el texto blanco en 3.3:1, por debajo del 4.5:1 que pide
     WCAG AA, así que el de los botones va un par de pasos más
     oscuro (4.71:1) y el vivo queda solo para decoración sin texto. */
  --acento: #be5408;
  --acento-oscuro: #9e4506;
  --acento-claro: #fbeade;
  --acento-vivo: #f07b18;

  /* Estados. Nunca van solos: siempre acompañados de palabra o icono. */
  --bien: #14804a;
  --bien-fondo: #e4f3ea;
  /* Medido: el ámbar anterior (#96650a) daba 4,41:1 sobre su propio
     fondo, por debajo del 4,5 que pide AA para texto pequeño. Este da
     4,78 y a ojo es el mismo color. */
  --ambar: #8f6009;
  --ambar-fondo: #f9efd8;
  --rojo: #c0341d;
  --rojo-claro: #fbeae6;
  --rojo-borde: #f2cfc7;

  --texto: #1f1a14;
  /* Sobre el blanco de las tarjetas cumplía de sobra, pero sobre la
     crema de las cabeceras de día se quedaba en 4,2:1. Dos pasos más
     oscuro lo sube a 4,76 en el peor de los fondos. */
  --texto-suave: #756a5b;

  --fondo: #fffbf0;      /* crema de página */
  --crema: #fdf3ce;      /* crema cálido de los bloques destacados */
  --crema-fin: #f7dda6;  /* el otro extremo del degradado del acceso */
  --tarjeta: #ffffff;
  --borde: #ede3ce;
  --neutro: #f1ece1;     /* chips y campos sin color propio */

  /* Texto que va encima del acento o del color de estado: en claro es
     blanco, pero en oscuro el acento se aclara y necesita texto negro. */
  --sobre-acento: #ffffff;

  /* Barras translúcidas y velo de los diálogos */
  --barra: rgba(255, 255, 255, .85);
  --velo: rgba(31, 26, 20, .45);

  /* Etiquetas del momento del día */
  --pas-desayuno-f: #fbefd0; --pas-desayuno-t: #8a5e00;
  --pas-comida-f:   #e3f2e8; --pas-comida-t:   #146b3f;
  --pas-cena-f:     #e4ecfb; --pas-cena-t:     #1e4fa0;
  --pas-snack-f:    #f8e6f4; --pas-snack-t:    #8a2c71;

  --sombra: 0 2px 14px rgba(94, 68, 30, .09);
  --sombra-alta: 0 10px 30px rgba(94, 68, 30, .13);
  --radio: 18px;

  /* Hace que los controles nativos (selects, casillas, barras de
     desplazamiento) se pinten acorde al tema. Sin esto salen blancos
     brillantes sobre la app oscura. Va fijo en `light` y lo cambia el
     bloque oscuro: con `light dark` el sistema mandaba también cuando
     habías elegido claro a mano. */
  color-scheme: light;

  /* ---- medidas de la página ----
     El contenido ya no vive en una columna de 640px: ocupa el ancho
     que haya, con un tope alto para que en un monitor grande las
     líneas de texto no se vuelvan ilegibles de tan largas. El gutter
     crece con la pantalla, y las barras fijas lo usan para alinear
     sus extremos con el contenido aunque su fondo sea a sangre. */
  --ancho-max: 1440px;
  --gutter: clamp(.85rem, 2.5vw, 2rem);
  --alto-cabecera: 3.5rem;
}

/* ============================================================
   Modo oscuro
   ------------------------------------------------------------
   Esta app se abre en la cocina a las nueve de la noche, así que
   no es un adorno. Solo se redefinen los tokens: ninguna regla de
   más abajo sabe que existe el modo oscuro, que es justo lo que
   permite que quepa en veinte líneas.

   Cuelga de `data-tema` y no de `@media (prefers-color-scheme)`
   porque el tema se puede forzar desde Ajustes: quien decide si
   toca oscuro es js/tema.js, y así esta paleta se escribe UNA vez.

   No es la paleta clara invertida. Se mantiene el marrón cálido de
   la marca (los grises azulados dejarían una app de cocina con
   pinta de panel de control) y el acento se ACLARA: el naranja
   quemado sobre fondo oscuro baja de 3:1 y deja de leerse.
   ============================================================ */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --acento: #f0954a;          /* aclarado: 7,4:1 sobre el fondo oscuro */
  --acento-oscuro: #f7b681;
  --acento-claro: #3a2517;
  --acento-vivo: #f07b18;

  --bien: #6cd39a;  --bien-fondo: #16331f;
  --ambar: #e8b45c; --ambar-fondo: #3a2f14;
  --rojo: #f08b78;  --rojo-claro: #3b1f1a; --rojo-borde: #6b3328;

  --texto: #f3ece0;
  --texto-suave: #a99b87;

  --fondo: #16130f;
  --crema: #251f17;
  --crema-fin: #33291a;
  --tarjeta: #1e1a15;
  --borde: #362f26;
  --neutro: #2b251d;

  /* Sobre el acento aclarado hay que poner texto oscuro, no blanco */
  --sobre-acento: #241304;

  --barra: rgba(22, 19, 15, .88);
  --velo: rgba(0, 0, 0, .62);

  --pas-desayuno-f: #3a2f14; --pas-desayuno-t: #e8c274;
  --pas-comida-f:   #16331f; --pas-comida-t:   #7fd6a4;
  --pas-cena-f:     #17243d; --pas-cena-t:     #93b9f0;
  --pas-snack-f:    #33172c; --pas-snack-t:    #e2a0d0;

  /* En oscuro una sombra suave no se ve: la profundidad la dan
     negros más densos, no marrones translúcidos. */
  --sombra: 0 2px 14px rgba(0, 0, 0, .45);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, .6);
}

/* Las ilustraciones son SVG claros pensados sobre crema: a pleno
   brillo sobre el fondo oscuro deslumbran. */
:root[data-tema="oscuro"] .arte { filter: brightness(.88) saturate(.92); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

/* Titulares gruesos y compactos: es de donde sale casi todo el
   carácter del diseño, sin necesidad de cargar ninguna tipografía. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.021em;
}
h1 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .92rem; }
p { margin: 0 0 .75em; }

/* ---------- estructura ---------- */

/* Cabecera y navegación son dos elementos hermanos, pero se leen como
   una sola pieza: mismo fondo translúcido, la nav pegada justo debajo
   de la cabecera y una única línea que las separa del contenido. */

.cabecera {
  position: sticky; top: 0; z-index: 21;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: calc(var(--alto-cabecera) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-inline: max(var(--gutter), (100% - var(--ancho-max)) / 2);
  background: var(--barra);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  color: var(--texto);
}
.cabecera h1 {
  margin: 0; font-size: 1.15rem; letter-spacing: -.032em;
  white-space: nowrap;
}

.estado-sync { font-size: .78rem; color: var(--texto-suave); }
.estado-sync.error { color: var(--rojo); }

main {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 3rem;
}

.vista[hidden] { display: none; }

/* ---------- navegación ----------
   En pantalla ancha, una fila de pastillas bajo la cabecera. En el
   móvil se convierte en barra inferior fija (más abajo). */

.nav {
  position: sticky; top: calc(var(--alto-cabecera) + env(safe-area-inset-top));
  z-index: 20;
  display: flex; gap: .2rem; align-items: center;
  /* Sin sitio para las seis pestañas la barra se partía en dos filas y
     dejaba de leerse como una barra. Mejor que deslice de lado. */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: .3rem 0 .45rem;
  padding-inline: max(var(--gutter), (100% - var(--ancho-max)) / 2);
  background: var(--barra);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.nav::-webkit-scrollbar { display: none; }
.nav-boton {
  position: relative;
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  border: 0; border-radius: 10px;
  background: none;
  font: inherit; font-size: .88rem; font-weight: 500;
  color: var(--texto-suave);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.nav-boton:hover { background: var(--acento-claro); color: var(--acento-oscuro); }
.nav-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Activo: el texto en el color de acento y un subrayado corto pegado al
   borde de la barra. Marca la pestaña sin meter un bloque de color
   saturado en una barra que además es translúcida. */
.nav-boton.activo { color: var(--acento-oscuro); font-weight: 700; }
.nav-boton.activo::after {
  content: "";
  position: absolute; left: .85rem; right: .85rem; bottom: -.45rem;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--acento);
}

/* Los SVG heredan el color del botón */
.icono { width: 18px; height: 18px; flex-shrink: 0; }

/* El botón «Más» solo existe en la barra inferior del móvil */
#nav-mas { display: none; }

/* Hoja inferior con las pestañas secundarias */
.nav-hoja-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: var(--velo);
  display: flex; align-items: flex-end;
}
.nav-hoja {
  width: 100%;
  background: var(--tarjeta);
  border-radius: var(--radio) var(--radio) 0 0;
  padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: .5rem;
}
.nav-hoja-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1rem;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--fondo);
  font: inherit; font-size: 1rem; color: var(--texto);
  text-align: left; cursor: pointer;
}
.nav-hoja-item:hover { background: var(--acento-claro); }

/* ---------- tarjetas y bloques ---------- */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}

/* ---------- rejilla que se llena sola ----------
   Antes eran dos columnas a partir de 900px y tres a partir de 1180.
   Con `auto-fill` la página se reparte en tantas columnas como quepan
   de 21rem, así que aprovecha cualquier ancho —móvil apaisado, tablet,
   monitor— sin necesidad de un breakpoint por cada caso. El `min()`
   deja una sola columna cuando no cabe ninguna de 21rem, que es lo que
   toca en el móvil de pie. */
.rejilla-doble {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
  align-items: start;
}
/* Sin esto, una celda con texto largo ensancha su columna y desborda */
.rejilla-doble > * { min-width: 0; }
.rejilla-doble > .tarjeta,
.rejilla-doble > .dia,
.rejilla-doble > .seccion-compra { margin-bottom: 0; }

/* Lo que no se repite cruza la rejilla entera: el resumen de la
   semana, el plan de batch, el recuento de la compra y los estados
   vacíos. Se resuelve por contenedor para no tener que marcar cada
   trozo de HTML generado desde JavaScript. */
.rejilla-doble > .vacio,
.rejilla-doble > .compra-resumen,
#menu-contenido > .tarjeta,
#menu-contenido > .brief,
#menu-contenido > .menu-rango,
#vista-ajustes > .acciones-principales {
  grid-column: 1 / -1;
}

.nota { font-size: .85rem; color: var(--texto-suave); }
.explicacion { font-size: .9rem; color: var(--texto-suave); text-align: center; }

.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--texto-suave); }
.vacio-emoji { font-size: 3rem; margin-bottom: .5rem; }
.vacio h3 { color: var(--texto); }

/* ---------- botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--tarjeta);
  font: inherit; font-size: .92rem; font-weight: 500;
  color: var(--texto);
  cursor: pointer;
  transition: transform .1s, background .15s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn-primario:hover:not(:disabled) { background: var(--acento-oscuro); }
.btn-peligro { color: var(--rojo); border-color: var(--rojo-borde); }
.btn.activo { background: var(--acento-claro); border-color: var(--acento); color: var(--acento-oscuro); }

.btn-icono {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; padding: .35rem; border-radius: 8px;
  opacity: .55;
}
.btn-icono:hover { opacity: 1; background: var(--acento-claro); }

.acciones-principales {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: 1rem;
}
.progreso { font-size: .85rem; color: var(--texto-suave); }

/* ---------- diana nutricional ---------- */

/* Fila de indicadores: la cifra manda y la etiqueta la acompaña.
   Los números van en tinta, no en el color de acento: el color de
   marca sobre texto se lee peor y aquí no codifica nada. */
.diana {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
  background: var(--crema);
  border-radius: 14px;
  padding: .9rem .5rem;
  text-align: center;
}
.diana div { display: flex; flex-direction: column; gap: .1rem; }
.diana strong {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--texto);
}
.diana span {
  font-size: .68rem; color: var(--texto-suave);
  text-transform: lowercase; letter-spacing: .01em;
}
.diana-pie { font-size: .8rem; color: var(--texto-suave); text-align: center; margin: .6rem 0 1rem; }

/* Columna de cifras: aquí sí conviene que los dígitos alineen */
.detalle-calculo { list-style: none; margin: .75rem 0 0; padding: 0; font-size: .88rem; }
.detalle-calculo li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--borde);
}
.detalle-calculo li:last-child { border: 0; }
.detalle-calculo span { color: var(--texto-suave); }
.detalle-calculo strong { font-variant-numeric: tabular-nums; }

/* Estado del desvío. El color va siempre con una palabra delante:
   quien no distingue verde de rojo tiene que poder leerlo igual. */
.desvio {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  text-align: center; font-size: .85rem; font-weight: 600; margin: .7rem 0 0;
}
.desvio-etiqueta {
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.desvio.bien .desvio-etiqueta { color: var(--bien); background: var(--bien-fondo); }
.desvio.regular .desvio-etiqueta { color: var(--ambar); background: var(--ambar-fondo); }
.desvio.mal .desvio-etiqueta { color: var(--rojo); background: var(--rojo-claro); }
.desvio-texto { color: var(--texto-suave); font-weight: 500; }

/* ---------- brief de la IA ---------- */

.brief {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .85rem 1rem; margin-bottom: 1rem;
  box-shadow: var(--sombra);
}
.brief summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
.brief p { font-size: .9rem; }
.brief-consejo { color: var(--acento-oscuro); background: var(--acento-claro); padding: .6rem .75rem; border-radius: 10px; }

.lista-batch { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.lista-batch li { margin-bottom: .35rem; }

/* ---------- días del menú ---------- */

.dia {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: .85rem;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.dia-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .35rem 1rem; flex-wrap: wrap;
  padding: .7rem 1rem;
  background: var(--crema);
}
.dia-cabecera h3 { margin: 0; color: var(--texto); font-size: 1.05rem; }
.dia-macros {
  font-size: .74rem; color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Texto que solo leen los lectores de pantalla. No vale `display:none`
   ni `visibility:hidden`: eso también se lo esconde a ellos. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- seguimiento ---------- */

.seg-cifra { margin: 0 0 .5rem; font-size: .92rem; color: var(--texto-suave); }
.seg-cifra strong {
  font-size: 1.5rem; font-weight: 800; color: var(--texto);
  letter-spacing: -.03em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.seg-pct {
  margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--acento-claro); color: var(--acento-oscuro);
  font-size: .72rem; font-weight: 700;
}

.seg-barra {
  height: 8px; border-radius: 999px;
  background: var(--crema); overflow: hidden;
}
.seg-barra span {
  display: block; height: 100%;
  background: var(--acento); border-radius: 999px;
  transition: width var(--mov-medio, .24s) var(--mov-curva, ease);
}

/* Un punto por día: de un vistazo se ve dónde se rompió la semana */
.seg-puntos { display: flex; gap: .3rem; margin-top: .6rem; }
.seg-punto {
  flex: 1 1 0; height: 6px; border-radius: 999px;
  background: var(--borde);
}
.seg-lleno { background: var(--bien); }
.seg-medio { background: var(--ambar); }
.seg-cero  { background: var(--rojo-claro); }
.seg-vacio { background: var(--borde); }
.seg-hoy { box-shadow: 0 0 0 2px var(--acento-claro), 0 0 0 3px var(--acento); }

/* La casilla de «ya me la he comido». Va la primera de la fila porque
   es lo que se busca al repasar el día, y es un objetivo táctil de
   verdad y no una casilla de 13 píxeles. */
.comida-hecha {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.9rem; height: 2.2rem; margin-left: -.3rem;
  cursor: pointer;
}
.comida-hecha input {
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--bien);
  cursor: pointer;
}

/* Hecha: se atenúa y se tacha el nombre. Sigue siendo pulsable, que a
   veces se marca sin querer. */
.comida.hecha { background: color-mix(in srgb, var(--bien) 6%, transparent); }
.comida.hecha .comida-nombre { text-decoration: line-through; opacity: .65; }
.comida.hecha .comida-arte { opacity: .5; }

/* ---------- comensales ---------- */

.dia-comensales {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .78rem; color: var(--texto-suave);
  cursor: pointer;
}
.dia-comensales select {
  padding: .1rem 1.1rem .1rem .35rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--tarjeta); color: var(--texto);
  font: inherit; font-size: .78rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* La flecha nativa se come el ancho en el móvil; se dibuja aquí */
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
                    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: right .55rem center, right .35rem center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.dia-comensales select:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.dia-hoy .dia-comensales select { border-color: var(--acento); }

.receta-ingredientes-cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem 1rem; flex-wrap: wrap;
}
.receta-ingredientes-cabecera h3 { margin: 0; }
/* `nowrap` no es cosmético: sin él «👥 Para» se parte en dos líneas y
   la etiqueta deja de leerse como una frase. */
.receta-comensales {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .85rem; color: var(--texto-suave);
  white-space: nowrap;
}
.receta-comensales select {
  padding: .25rem .5rem;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--tarjeta); color: var(--texto);
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}

/* ---------- fechas del menú ---------- */

.menu-rango {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--texto-suave);
  margin: 0 0 .7rem;
}
.menu-rango.caducado strong { color: var(--ambar); font-weight: 600; }

/* La fecha acompaña al nombre del día sin competir con él */
.dia-fecha {
  margin-left: .45rem;
  font-size: .78rem; font-weight: 500;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Hoy se distingue por el borde y la barra, no solo por el color de
   fondo: sobre la crema de la cabecera un tinte suave no se ve. */
.dia-hoy { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra); }
.dia-hoy .dia-cabecera { background: var(--acento-claro); }
.dia-hoy .dia-cabecera h3 { color: var(--acento-oscuro); }
.dia-hoy .dia-fecha { color: var(--acento-oscuro); opacity: .8; }

/* Lo que ya pasó se apaga, pero sigue siendo legible y pulsable: puede
   que quieras mirar qué cenaste ayer. */
.dia-pasado { opacity: .58; }
@media (hover: hover) {
  .dia-pasado:hover { opacity: 1; }
}

/* ---------- huecos vacíos y comidas fuera ---------- */

.comida-nota {
  flex: 1 1 auto; min-width: 0;
  padding: .3rem .4rem;
  font-size: .85rem; color: var(--texto-suave);
}
.comida.fuera { background: repeating-linear-gradient(
    -45deg, transparent, transparent 7px, var(--crema) 7px, var(--crema) 14px); }
.comida.fuera .comida-nota { font-style: normal; }

/* ---------- selector de receta para un hueco ---------- */

.sel-cabecera h2 { margin: 0 0 .15rem; font-size: 1.15rem; }
.sel-sub { margin: 0 0 .8rem; font-size: .85rem; color: var(--texto-suave); }

.sel-buscar {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--fondo);
  font: inherit; font-size: .95rem; color: var(--texto);
}
.sel-buscar:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

.sel-filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .6rem 0 .5rem;
}
.sel-chip {
  padding: .35rem .75rem;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--tarjeta);
  font: inherit; font-size: .78rem; color: var(--texto-suave);
  cursor: pointer;
}
.sel-chip.activo {
  background: var(--acento-claro); border-color: var(--acento);
  color: var(--acento-oscuro); font-weight: 600;
}
.sel-azar { margin-left: auto; }

.sel-cuenta { margin: 0 0 .4rem; font-size: .74rem; color: var(--texto-suave); }

/* La lista se desplaza dentro del modal: así los filtros y la búsqueda
   no se van de la pantalla al bajar por los resultados. */
.sel-lista {
  max-height: min(52vh, 30rem);
  overflow-y: auto;
  border-top: 1px solid var(--borde);
}
.sel-vacio { padding: 1.5rem .5rem; text-align: center; color: var(--texto-suave); font-size: .9rem; }

/* Mismo reparto que las filas del menú: el emoji ocupa las dos líneas
   y el nombre puede encogerse (min-width: 0) sin empujar nada fuera. */
.sel-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "emoji nombre" "emoji meta" "emoji marcas";
  align-items: center; column-gap: .6rem;
  padding: .55rem .5rem;
  border: 0; border-bottom: 1px solid var(--borde);
  background: none; font: inherit; text-align: left; color: inherit;
  cursor: pointer;
}
.sel-item:last-child { border-bottom: 0; }
.sel-item:hover { background: var(--acento-claro); }
.sel-item:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.sel-arte { grid-area: emoji; display: block; }
.sel-nombre { grid-area: nombre; min-width: 0; font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.sel-meta {
  grid-area: meta; min-width: 0;
  font-size: .72rem; color: var(--texto-suave);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sel-marcas { grid-area: marcas; display: flex; flex-wrap: wrap; gap: .3rem; }
.sel-marca {
  padding: .1rem .45rem; border-radius: 999px;
  font-size: .66rem; font-weight: 600;
}
.sel-marca:empty { display: none; }
.sel-gustada { background: var(--bien-fondo); color: var(--bien); }
.sel-descartada { background: var(--rojo-claro); color: var(--rojo); }
.sel-repetida { background: var(--ambar-fondo); color: var(--ambar); }

/* Nota bajo un campo del formulario: dice qué consecuencia tiene lo que
   acabas de elegir (cuántos platos deja el tope de tiempo, por ejemplo). */
.campo-nota { margin: -.2rem 0 .2rem; font-size: .78rem; color: var(--texto-suave); }
.campo-nota:empty { display: none; }
.campo-nota-aviso { color: var(--ambar); }

/* ---------- leer el ticket de la compra ---------- */

.tk-atajo {
  text-align: center;
  padding: .8rem 0 1rem;
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--borde);
}
.tk-nota { margin: .4rem 0 0; font-size: .78rem; color: var(--texto-suave); text-align: center; }
.tk-error { color: var(--rojo); }

.tk-cabecera { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }

/* La lista puede traer treinta líneas: se desplaza ella y deja los
   botones de guardar siempre a la vista. */
.tk-lista {
  max-height: 45vh;
  overflow-y: auto;
  margin: .6rem 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.tk-linea {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--borde);
  font-size: .85rem;
  cursor: pointer;
}
.tk-linea:last-child { border-bottom: none; }
.tk-linea input { margin: 0; }

.tk-texto { min-width: 0; overflow-wrap: anywhere; }
.tk-flecha { color: var(--texto-suave); margin: 0 .15rem; }
.tk-precio { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-precio small { display: block; font-size: .68rem; color: var(--texto-suave); }

/* El peso que escribes tú cuando el ticket no lo trae (huevos, pan). */
.tk-peso {
  width: 5rem; padding: .2rem .4rem;
  font-size: .8rem; text-align: right;
  border: 1px solid var(--borde); border-radius: var(--radio-pequeno, 6px);
  background: var(--fondo); color: var(--texto);
}

/* El motivo ocupa toda la fila de debajo: es una explicación, no una
   columna, y en el móvil no cabe al lado. */
.tk-motivo {
  grid-column: 2 / -1;
  font-size: .72rem;
  color: var(--ambar);
}
.tk-dudosa { background: var(--ambar-fondo); }
.tk-dudosa .tk-texto strong { font-weight: 600; }
/* Guarnición, salsa, postre… lo que el generador no pone solo en un
   hueco pero tú sí puedes elegir a mano. */
.sel-rol { background: var(--acento-claro); color: var(--acento-oscuro); }

/* ---------- «con lo que tengo» ---------- */

.nev-tengo {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .7rem;
}
.nev-chip {
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .78rem; line-height: 1.4;
  border: 1px solid var(--borde);
}
/* Lo de la despensa no se quita desde aquí: se edita en Compra, que es
   donde vive de verdad. Lo añadido hoy sí, y por eso es un botón. */
.nev-chip-fijo { background: var(--crema); color: var(--texto-suave); }
.nev-chip-extra {
  background: var(--acento-claro); border-color: var(--acento);
  color: var(--acento-oscuro); font: inherit; font-size: .78rem;
  cursor: pointer;
}

.nev-form { display: flex; gap: .5rem; margin-bottom: .3rem; }
.nev-form input {
  flex: 1 1 auto; min-width: 0;
  padding: .55rem .8rem;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--fondo); font: inherit; font-size: .9rem; color: var(--texto);
}
.nev-form .btn { flex: 0 0 auto; }

/* La fila lleva la receta (que es un botón grande) y el corazón al
   lado, así que el botón interior tiene que poder encogerse. */
.nev-item {
  display: flex; align-items: center; gap: .3rem;
  border-bottom: 1px solid var(--borde);
}
.nev-item:last-child { border-bottom: 0; }
.nev-item .sel-item { border-bottom: 0; min-width: 0; }
.nev-item .btn-icono {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%;
  font-size: 1rem;
}
.nev-item .btn-icono.activo { color: var(--rojo); }

.nev-falta { background: var(--ambar-fondo); color: var(--ambar); }
.nev-lista-ya { background: var(--bien-fondo); color: var(--bien); }

/* La pastilla del momento del día va dentro de la línea de datos, así
   que no puede empujar la línea a otra altura */
.nev-item .sel-meta { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.nev-item .sel-meta .pastilla { font-size: .62rem; padding: .05rem .4rem; }

/* ---------- mover platos por la parrilla ---------- */

/* El agarre es estrecho a propósito: roba poco ancho al nombre del
   plato, que es lo que hay que poder leer. `touch-action: none` es
   obligatorio, o el navegador se queda el gesto para hacer scroll y
   el arrastre no llega a empezar. */
.comida-agarre {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.5rem; height: 2.2rem; padding: 0; margin-left: -.35rem;
  border: 0; background: none; border-radius: 8px;
  color: var(--texto-suave); font-size: .95rem; line-height: 1;
  cursor: grab; touch-action: none;
}
.comida-agarre:active { cursor: grabbing; }
.comida-agarre:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
@media (hover: hover) {
  .comida-agarre:hover { background: var(--acento-claro); color: var(--acento-oscuro); }
}

/* Mientras hay un plato en la mano: el de origen se atenúa y los
   destinos válidos se marcan. Lo que no vale, se apaga; así no hay
   que leer nada para saber dónde se puede soltar. */
#menu-contenido.moviendo .comida:not(.objetivo):not(.origen) { opacity: .45; }
#menu-contenido.moviendo .comida-plato { cursor: default; }

/* El origen NO se apaga como lo que no vale: tiene que seguir viéndose
   de dónde sale el plato mientras buscas dónde ponerlo. Se marca como
   un hueco vacante —contorno de puntos y contenido a media tinta— en
   vez de con la misma opacidad que el resto, que los confundía. */
.comida.origen {
  outline: 2px dashed var(--acento);
  outline-offset: -3px;
  border-radius: 10px;
  background: var(--acento-claro);
}
.comida.origen > *:not(.comida-agarre) { opacity: .5; }
.comida.objetivo {
  cursor: pointer;
  background: var(--acento-claro);
  box-shadow: inset 3px 0 0 var(--acento);
}
.comida.objetivo:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.comida.encima {
  background: var(--acento);
  box-shadow: inset 3px 0 0 var(--acento-oscuro);
}
.comida.encima .comida-nombre,
.comida.encima .comida-tipo,
.comida.encima .comida-nota,
.comida.encima .comida-kcal { color: var(--sobre-acento); }

/* El plato que viaja con el dedo. Va en <body>, fijo respecto a la
   ventana, y no recibe eventos: si los recibiera se taparía a sí
   mismo y elementFromPoint nunca vería el hueco de debajo. */
.comida-fantasma {
  position: fixed; top: 0; left: 0; z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "emoji nombre" "emoji kcal";
  align-items: center; column-gap: .55rem;
  padding: .5rem .7rem;
  background: var(--tarjeta);
  border: 1px solid var(--acento);
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  pointer-events: none;
  transform: translate(-9999px, -9999px);
  rotate: -2deg;
}
.comida-fantasma.sin-gracia { rotate: none; }
.comida-fantasma .comida-nombre { font-size: .9rem; }

/* Barra de ayuda con el plato en la mano. Fija abajo porque el día de
   destino puede estar a varias pantallas de distancia, y por encima de
   la barra de navegación del móvil. */
.parrilla-aviso {
  position: fixed; z-index: 55;
  left: .75rem; right: .75rem; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .75rem .6rem 1rem;
  background: var(--texto); color: var(--tarjeta);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-size: .85rem;
}
.parrilla-aviso-texto { min-width: 0; overflow-wrap: anywhere; }
.parrilla-aviso strong { color: var(--tarjeta); }
.parrilla-aviso .btn {
  flex: 0 0 auto;
  background: transparent; color: var(--tarjeta);
  border-color: rgba(255, 255, 255, .45);
}

/* A partir de 601px la navegación deja de estar abajo (ver la regla de
   .nav): la barra ya no tiene que esquivarla, y centrada se lee mejor
   que estirada de lado a lado. */
@media (min-width: 601px) {
  .parrilla-aviso {
    left: 50%; right: auto; bottom: 1.25rem;
    transform: translateX(-50%);
    max-width: 32rem;
  }
}

/* Cada comida es una fila de tres piezas: la etiqueta del momento, el
   plato (que es un botón) y el botón de cambiar. La clave es que el
   plato pueda encogerse: un elemento flex no baja de su tamaño de
   contenido salvo que se le ponga `min-width: 0`, y sin eso los
   nombres largos empujaban el 🔄 fuera de la tarjeta, donde el
   `overflow: hidden` de `.dia` lo cortaba por la mitad. */
.comida {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .5rem .45rem .9rem;
  border-top: 1px solid var(--borde);
  min-width: 0;
}
.comida-tipo {
  flex: 0 0 auto; width: 4.1rem;
  font-size: .64rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave);
}

/* Nombre y kcal en dos líneas, con el emoji ocupando ambas. Antes iban
   los tres en fila y las kcal (que no parten) marcaban un ancho mínimo
   enorme para toda la fila. */
.comida-plato {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "emoji nombre" "emoji kcal";
  align-items: center; column-gap: .55rem;
  border: 0; background: none; padding: .3rem .4rem; margin: 0;
  border-radius: 10px;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
  transition: background .15s;
}
.comida-plato:hover { background: var(--acento-claro); }
.comida-plato:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.comida-arte { grid-area: emoji; display: block; }
.comida-nombre {
  grid-area: nombre; min-width: 0;
  font-size: .92rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.comida-kcal {
  grid-area: kcal; min-width: 0;
  font-size: .72rem; color: var(--texto-suave); line-height: 1.3;
}
.comida.vacia { color: var(--texto-suave); font-size: .85rem; font-style: italic; }

/* El botón de cambiar plato nunca se encoge, y es un objetivo táctil
   de verdad en lugar de un emoji suelto. */
.comida .btn-icono {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; padding: 0;
  border-radius: 50%;
}

/* ---------- mazo de cartas ---------- */

/* ---------- ajustes: filas de ajuste, no tarjetas ---------- */

/* Un panel de ajustes se lee en columna y de arriba abajo: qué es a la
   izquierda, qué hace debajo en pequeño y el mando a la derecha. Con
   tarjetas en rejilla había que ir en zigzag y todo pesaba igual. */
.ajustes-panel { max-width: 760px; margin-inline: auto; }

.aj-grupo {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: .2rem 1rem 1rem;
  margin-bottom: 1rem;
}
.aj-grupo-titulo {
  display: flex; align-items: center; gap: .5rem;
  margin: 1rem 0 .2rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-suave);
}
.aj-grupo-nota {
  margin: .5rem 0 .2rem;
  font-size: .82rem; color: var(--texto-suave); line-height: 1.5;
}
/* Borrar la cuenta no puede parecerse a cambiar el tema */
.aj-grupo-peligro { border-color: var(--rojo-borde); }
.aj-grupo-peligro .aj-grupo-titulo { color: var(--rojo); }

.aj-etiqueta {
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--acento-claro); color: var(--acento-oscuro);
  font-size: .62rem; letter-spacing: .02em; text-transform: none;
}

.aj-fila {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--borde);
}
.aj-grupo > .aj-fila:first-of-type { border-top: 0; }
/* Cuando el mando es ancho (el tema, la lista de datos) no cabe al lado */
.aj-fila-apilada { flex-direction: column; align-items: stretch; gap: .7rem; }

.aj-txt { flex: 1; min-width: 0; }
.aj-txt strong { display: block; font-size: .95rem; margin-bottom: .15rem; }
.aj-txt small {
  display: block; font-size: .78rem; color: var(--texto-suave); line-height: 1.45;
}
.aj-txt small b { font-weight: 600; color: var(--texto); }

.aj-valor { flex: 0 0 auto; font-size: .82rem; color: var(--texto-suave); }
.aj-botones { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.aj-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.aj-bloque { padding: .9rem 0; border-top: 1px solid var(--borde); }
.aj-grupo > .aj-bloque:first-of-type { border-top: 0; }
.aj-datos {
  margin: 0; padding: .6rem .75rem;
  background: var(--fondo); border-radius: 10px;
  font-size: .76rem; color: var(--texto-suave); line-height: 1.6;
}

/* El interruptor de verdad: una palanca, no una casilla perdida en una
   frase. Es el único control que se repite en un panel de ajustes. */
.interruptor-palanca {
  display: block; position: relative;
  width: 2.6rem; height: 1.5rem; border-radius: 999px;
  background: var(--borde);
  transition: background .18s ease;
}
.interruptor-palanca::after {
  content: ""; position: absolute; top: .18rem; left: .18rem;
  width: 1.14rem; height: 1.14rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s ease;
}
.interruptor input:checked + .interruptor-palanca { background: var(--acento); }
.interruptor input:checked + .interruptor-palanca::after { transform: translateX(1.1rem); }
.interruptor input:focus-visible + .interruptor-palanca { outline: 2px solid var(--acento); outline-offset: 2px; }
/* La casilla real se esconde pero sigue estando: es la que recibe el
   foco, el teclado y el lector de pantalla. */
.aj-fila .interruptor { flex: 0 0 auto; margin: 0; }
.aj-fila .interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

@media (max-width: 560px) {
  .aj-fila { flex-direction: column; align-items: stretch; gap: .6rem; }
  .aj-botones, .aj-valor { align-self: flex-start; }
}

/* ---------- mi cocina ---------- */

.cocina-barra { margin: .8rem 0 .4rem; }
.cocina-resumen { margin: .5rem 0 0; font-size: .76rem; color: var(--texto-suave); }

.cocina-grupo-cab {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.1rem 0 .5rem;
}
.cocina-grupo-cab h4 { margin: 0; font-size: .9rem; }
.cocina-cuenta {
  margin-right: auto;
  font-size: .72rem; color: var(--texto-suave);
}
.cocina-item[hidden], .cocina-grupo[hidden] { display: none; }
/* Lo marcado se ve de un vistazo: es una lista para repasar, no para leer */
.cocina-item.tengo { border-color: var(--acento); background: var(--acento-claro); }

/* ---------- proponer ideas con IA ---------- */

.ideas-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .8rem 0 1rem;
  padding: .7rem .8rem;
  background: var(--tarjeta);
  border: 1px dashed var(--borde);
  border-radius: 14px;
}
.ideas-titulo { font-size: .82rem; color: var(--texto-suave); margin-right: .2rem; }
.ideas-borrar { margin-left: auto; }

.prop-estado { min-height: 1.1rem; font-size: .78rem; color: var(--texto-suave); }
.prop-lista {
  max-height: min(56vh, 32rem); overflow-y: auto;
  margin: .2rem 0 .6rem;
}
.prop-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .2rem;
  border-top: 1px solid var(--borde);
}
.prop-item.marcada { background: var(--acento-claro); border-radius: 10px; }
.prop-marca { flex: 0 0 auto; padding-top: .15rem; }
.prop-txt { flex: 1; min-width: 0; }
.prop-nombre { margin: 0 0 .2rem; font-weight: 600; font-size: .95rem; }
.prop-meta { margin: 0; font-size: .74rem; color: var(--texto-suave); }
.prop-porque { margin: .25rem 0 0; font-size: .78rem; font-style: italic; color: var(--texto-suave); }
.prop-ing { margin: .25rem 0 0; font-size: .74rem; color: var(--texto-suave); }
.prop-poner { flex: 0 0 auto; align-self: center; }
.prop-pie { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }

/* Mientras Gemini piensa: el hueco de lo que va a llegar, latiendo */
.prop-fantasma {
  height: 3.6rem; margin: .5rem 0;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--fondo) 25%, var(--borde) 50%, var(--fondo) 75%);
  background-size: 300% 100%;
  animation: prop-latido 1.4s ease-in-out infinite;
}
@keyframes prop-latido { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- la bienvenida ---------- */

/* Misma puerta que el acceso, y por la misma razón: mientras está
   delante no hay nada más que hacer. Va por encima de todo (el modal
   está en 60) porque sale con la app ya montada por detrás. */
.bienvenida {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1.5rem 1rem 2.5rem;
  padding-top: calc(1.5rem + env(safe-area-inset-top));
  background: linear-gradient(168deg, var(--crema) 0%, var(--crema-fin) 100%);
  overflow-y: auto;
}
.bienvenida[hidden] { display: none; }
/* El fondo no se desplaza mientras el asistente está abierto */
body.con-bienvenida { overflow: hidden; }

.bienv-caja {
  width: min(100%, 460px);
  margin: auto;
  background: var(--tarjeta);
  border-radius: 24px;
  padding: 1.4rem 1.3rem 1.5rem;
  box-shadow: var(--sombra-alta);
  animation: entrar .3s ease;
}

/* Cuántos pasos quedan, sin números: un punto por paso, el hecho en
   plano y el de ahora alargado. */
.bienv-puntos {
  display: flex; justify-content: center; gap: .4rem;
  margin-bottom: 1.1rem;
}
.bienv-punto {
  width: .45rem; height: .45rem; border-radius: 999px;
  background: var(--borde);
  transition: width .2s ease, background .2s ease;
}
.bienv-punto.hecho { background: var(--acento-claro); }
.bienv-punto.activo { width: 1.4rem; background: var(--acento); }

.bienv-marca { font-size: 2.6rem; text-align: center; line-height: 1; }
.bienv-marca svg { width: 2.6rem; height: 2.6rem; }
.bienv-titulo {
  text-align: center; font-size: 1.4rem; letter-spacing: -.03em;
  margin: .5rem 0 .9rem;
}
.bienv-texto {
  font-size: .9rem; color: var(--texto-suave); line-height: 1.5;
  margin: 0 0 .8rem;
}
.bienv-nota { font-size: .74rem; color: var(--texto-suave); margin: .5rem 0 0; }
.bienv-lista {
  margin: 0 0 .9rem; padding-left: 1.1rem;
  font-size: .88rem; color: var(--texto-suave); line-height: 1.5;
}
.bienv-lista li { margin-bottom: .45rem; }

.bienv-cuerpo .casillas { margin-bottom: .8rem; }

/* «Saltar» a la izquierda y lo que empuja hacia delante a la derecha:
   el que se va y el que sigue no se pueden confundir de botón. */
.bienv-acciones {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.2rem;
}
.bienv-acciones .btn-primario { margin-left: auto; }
.bienv-saltar {
  border: 0; background: none; padding: .4rem .2rem;
  font: inherit; font-size: .82rem; color: var(--texto-suave);
  text-decoration: underline; cursor: pointer;
}
/* El último paso son dos caminos igual de válidos, así que van uno
   debajo del otro y a la misma anchura: elegir, no continuar. */
.bienv-final {
  display: grid; gap: .5rem;
  margin-top: 1.2rem;
}

.bienv-novedad {
  border-top: 1px solid var(--borde);
  padding-top: .8rem; margin-top: .8rem;
}
.bienv-fecha {
  margin: 0 0 .5rem;
  font-size: .72rem; color: var(--texto-suave); text-transform: lowercase;
}

/* ---------- el tope de tiempo, en la propia pestaña ---------- */

/* Es el mismo dato del perfil, no un ajuste nuevo, así que se pinta como
   una línea que se lee de pasada y no como un formulario. */
.descubrir-tope {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: .45rem;
  max-width: 1020px; margin: .5rem auto .3rem;
}
.descubrir-tope label { font-size: .8rem; color: var(--texto-suave); }
.descubrir-tope select {
  padding: .3rem .7rem;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--tarjeta);
  font: inherit; font-size: .8rem; color: var(--texto);
  cursor: pointer;
}
.descubrir-tope select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
/* La nota baja a su propia línea para que el mando no se parta en dos */
.descubrir-tope-nota {
  flex-basis: 100%; text-align: center;
  font-size: .72rem; color: var(--texto-suave);
}

/* ---------- descubrir: carta grande + panel de vídeo ----------
   La carta manda: ocupa como mínimo media pantalla de alto. En el
   móvil el panel de vídeo se apila debajo; a partir de 860px se
   ponen uno al lado del otro, mitad y mitad. */

.descubrir-split {
  display: grid; gap: 1rem;
  align-items: start;
  max-width: 1020px; margin-inline: auto;
}
@media (min-width: 860px) {
  .descubrir-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.mazo {
  position: relative;
  /* `dvh` mide la pantalla útil de verdad en el móvil, sin contar la
     barra del navegador que aparece y desaparece al hacer scroll.
     La línea de `vh` queda de respaldo para navegadores viejos. */
  height: clamp(22rem, 56vh, 34rem);
  height: clamp(22rem, 56dvh, 34rem);
  margin: 0 auto 1.1rem;
  max-width: 440px;
}

.carta {
  position: absolute; inset: 0;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(94, 68, 30, .16);
  overflow: hidden;
  /* Las de debajo asoman giradas un pelo, como cartas de verdad
     dejadas sobre la mesa. Sin el giro el mazo parece una sola carta
     con sombra. */
  transform:
    translateY(calc(var(--profundidad) * 10px))
    rotate(calc(var(--profundidad) * -1.2deg))
    scale(calc(1 - var(--profundidad) * .04));
  transition: transform .28s ease, opacity .28s ease;
  user-select: none;
}
.carta-activa { cursor: grab; touch-action: none; }
.carta.arrastrando { transition: none; cursor: grabbing; }
.carta.sale-derecha { transform: translate(140%, -40px) rotate(22deg); opacity: 0; }
.carta.sale-izquierda { transform: translate(-140%, -40px) rotate(-22deg); opacity: 0; }

/* La portada de la carta: es el hueco más grande de la app y el que
   más manda en si un plato apetece o no. Lleva la ilustración de su
   familia (js/arte.js) a sangre completa.

   El alto de la carta es fijo (el mazo apila cartas absolutas), así
   que alguien tiene que quedarse el espacio que sobre. Antes se lo
   quedaba el párrafo de ingredientes con un `flex: 1`, y dejaba un
   vacío enorme entre el texto y las etiquetas. Ahora crece la
   ilustración, que es lo que se quiere mirar; el texto se queda con
   su alto natural, abajo. */
/* La foto ocupa la carta entera y el texto va encima. Es un botón
   porque se toca para ampliarla; hay que quitarle todo lo de botón. */
.carta-portada {
  position: absolute; inset: 0;
  padding: 0; border: 0; margin: 0;
  background: var(--crema);
  display: block; width: 100%; height: 100%;
  cursor: zoom-in;
}
.carta-lupa {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #fff; font-size: .95rem;
  backdrop-filter: blur(4px);
}

/* El velo: sin él, el nombre del plato sobre una foto clara no se lee.
   Va de transparente arriba a casi negro abajo, que es donde está el
   texto. Los colores son fijos a propósito: mandan sobre el tema,
   porque lo que hay debajo es una foto y no el fondo de la app. */
.carta-velo {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .30) 0%,
    rgba(0, 0, 0, 0) 26%,
    rgba(0, 0, 0, .55) 58%,
    rgba(0, 0, 0, .88) 100%);
}

.arte-carta {
  width: 100%; height: 100%;
  border-radius: 0;
}
/* El texto, abajo y sobre el velo */
.carta-cuerpo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding: 1rem 1.1rem 1.15rem;
  color: #fff;
  pointer-events: none;      /* la carta se arrastra desde cualquier sitio */
}
/* …salvo lo que se puede tocar */
.carta-cuerpo button { pointer-events: auto; }

.carta-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.carta-chip {
  padding: .12rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .7rem; font-weight: 600; color: #fff;
  backdrop-filter: blur(4px);
}

/* El nombre es un botón, pero tiene que leerse como un titular */
.carta-titulo {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.carta-cuerpo h3 {
  font-size: 1.25rem; margin: 0 0 .15rem;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.carta-vermas {
  display: inline-block; margin-bottom: .55rem;
  font-size: .74rem; font-weight: 600;
  color: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.carta-titulo:hover .carta-vermas { color: #fff; border-bottom-color: #fff; }

/* En un flex en columna los hijos se estiran a lo ancho, así que el
   chip del momento salía como una barra de lado a lado en vez de como
   una etiqueta. `inline-block` no basta: manda el contenedor flex. */
.carta-chips > .pastilla { align-self: flex-start; }

.carta-macros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem;
  text-align: center; margin-bottom: .6rem;
}
.carta-macros div { display: flex; flex-direction: column; }
.carta-macros strong { font-size: 1rem; font-weight: 800; color: #fff; }
.carta-macros span { font-size: .64rem; color: rgba(255, 255, 255, .75); }

.carta-meta { font-size: .8rem; color: var(--texto-suave); margin: 0 0 .4rem; }
/* Dos líneas como mucho: los ingredientes orientan, no son la ficha
   completa, y con un alto previsible la portada sabe cuánto le queda. */
.carta-ing {
  font-size: .82rem; color: var(--texto-suave); margin: 0 0 .5rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.carta-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.carta-tags span {
  font-size: .68rem; padding: .18rem .5rem;
  background: var(--acento-claro); color: var(--acento-oscuro); border-radius: 999px;
}

.carta-sello {
  position: absolute; top: 1.4rem; z-index: 3;
  padding: .3rem .7rem;
  border: 3px solid; border-radius: 10px;
  font-weight: 800; font-size: 1rem; letter-spacing: .05em;
  opacity: 0; pointer-events: none;
}
/* El sello de "sí" va en verde, no en el naranja de acento: junto al
   rojo del "no", dos naranjas serían difíciles de distinguir. */
.carta-si { left: 1.2rem; color: var(--bien); border-color: var(--bien); transform: rotate(-14deg); }
.carta-no { right: 1.2rem; color: var(--rojo); border-color: var(--rojo); transform: rotate(14deg); }

/* Tipos de comida: cuatro tonos comprobados con el validador de
   paletas (separación bajo daltonismo protan/deutan en todos los
   pares, no solo los contiguos). El texto de cada pastilla va en el
   paso oscuro del mismo tono, por encima de 4.5:1 sobre su fondo. */
.pastilla {
  display: inline-block;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--neutro); color: var(--texto-suave);
}
.pastilla-desayuno { background: var(--pas-desayuno-f); color: var(--pas-desayuno-t); }
.pastilla-comida { background: var(--pas-comida-f); color: var(--pas-comida-t); }
.pastilla-cena { background: var(--pas-cena-f); color: var(--pas-cena-t); }
.pastilla-snack { background: var(--pas-snack-f); color: var(--pas-snack-t); }

.botonera-swipe { display: flex; justify-content: center; gap: 1.25rem; }
.btn-redondo {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--tarjeta);
  font-size: 1.5rem; cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .1s;
}
.btn-redondo:active { transform: scale(.92); }
.btn-redondo:disabled { opacity: .4; }
.btn-no { color: var(--rojo); }
.btn-si { color: var(--bien); }
.btn-deshacer { width: 46px; height: 46px; font-size: 1.15rem; align-self: center; color: var(--texto-suave); }

/* ---------- panel de vídeo ---------- */

.video-panel {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.video-panel[hidden] { display: none; }
.video-titulo { margin: 0; font-size: 1rem; }
.video-plato {
  margin: 0; font-size: .9rem; font-weight: 600;
  color: var(--acento-oscuro);
  overflow-wrap: anywhere;
}

/* Marco a 16:9 con el emoji del plato. No finge ser una miniatura de
   un vídeo real: no la hay, porque estos enlaces son búsquedas. */
.video-lienzo {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--crema);
  border-radius: 14px;
  overflow: hidden;
}
.arte-video { width: 100%; height: 100%; border-radius: 0; opacity: .8; }
.video-play {
  position: absolute;
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--barra);
  box-shadow: var(--sombra);
  font-size: 1.3rem; color: var(--texto);
  padding-left: 4px;   /* el triángulo pesa a la izquierda */
}

.btn-video { width: 100%; text-decoration: none; font-weight: 600; }
/* El rojo de marca de YouTube (#f00) deja el texto blanco en 4,0:1,
   por debajo del 4,5:1 de WCAG AA; este paso más oscuro da 5,25:1. */
.btn-youtube { background: #c00; border-color: #c00; color: #fff; }
.btn-youtube:hover { background: #a00; border-color: #a00; }
.btn-tiktok { background: #16151a; border-color: #16151a; color: #fff; }
.btn-tiktok:hover { background: #000; border-color: #000; }
.video-nota { margin: .1rem 0 0; }

/* ---------- lista de la compra ---------- */

.compra-resumen { font-size: .85rem; color: var(--texto-suave); text-align: center; }

.seccion-compra {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .85rem 1rem; margin-bottom: .85rem;
  box-shadow: var(--sombra);
}
.seccion-compra h3 { font-size: .95rem; color: var(--acento-oscuro); }
.seccion-compra ul { list-style: none; margin: 0; padding: 0; }
.seccion-compra li { border-bottom: 1px solid var(--borde); }
.seccion-compra li:last-child { border: 0; }
.seccion-compra label {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; cursor: pointer;
}
.seccion-compra input { width: 20px; height: 20px; accent-color: var(--acento); flex: none; }
.item-nombre { flex: 1; font-size: .92rem; }
.item-cantidad { font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.seccion-compra li.comprado .item-nombre { text-decoration: line-through; color: var(--texto-suave); }
.seccion-compra.basicos p { font-size: .85rem; color: var(--texto-suave); margin: 0 0 .6rem; }

/* ---------- despensa ---------- */

/* Lo que aporta la despensa se dice en la propia línea: si no, ves
   200 g donde la semana pide 700 y parece un error de la lista. */
.item-despensa {
  display: block;
  font-size: .7rem; color: var(--acento-oscuro);
  font-weight: 500;
}

/* Qué te llevas de verdad del lineal: «1 × 1 kg · Cebollas». Es lo que
   explica que la lista pida 583 g y la caja cobre una malla entera. */
.item-envase {
  display: block;
  font-size: .7rem; color: var(--texto-suave);
}

.desp-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: end; gap: .6rem;
  margin-bottom: .9rem;
}
.desp-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; min-width: 0; }
.desp-form input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font: inherit; font-size: .9rem; color: var(--texto);
}
.desp-form .btn { white-space: nowrap; }

/* En el móvil los tres campos en fila dejan el nombre en dos letras */
@media (max-width: 520px) {
  .desp-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .desp-form .btn { grid-column: 1 / -1; }
}

.desp-lista { display: flex; flex-direction: column; }
.desp-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0;
  border-top: 1px solid var(--borde);
}
.desp-nombre { flex: 1 1 auto; min-width: 0; font-size: .92rem; overflow-wrap: anywhere; }
.desp-cant {
  flex: 0 0 auto;
  font-size: .8rem; color: var(--texto);
  font-variant-numeric: tabular-nums;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.desp-siempre {
  flex: 0 0 auto;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--acento-claro); color: var(--acento-oscuro);
  font-size: .7rem; font-weight: 600;
}
.desp-item .btn-icono {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0; border-radius: 50%;
}

/* ---------- formularios ---------- */

/* Dos campos por fila cuando caben; en un móvil estrecho, uno. Igual
   que la rejilla de la página, se resuelve solo sin breakpoint. */
/* Dos columnas fijas, no `auto-fit`. Con auto-fit los campos caían
   donde les tocaba según el ancho disponible y las filas quedaban a
   medias; con dos columnas y `ancho` para lo largo, cada fila se
   compone a propósito. Por debajo de 22rem no caben dos campos
   legibles y pasa a una. */
.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem; margin-bottom: 1rem;
  /* Alineados por abajo: si una etiqueta ocupa dos líneas y la de al
     lado una, los campos de esa fila quedarían a distinta altura. */
  align-items: end;
}
@media (max-width: 360px) { .formulario { grid-template-columns: 1fr; } }
.formulario .ancho { grid-column: 1 / -1; }
.formulario label, .tarjeta > label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .8rem; color: var(--texto-suave);
}
input[type="text"], input[type="number"], input[type="password"], input[type="url"],
input[type="email"], select {
  padding: .6rem .7rem;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--tarjeta);
  font: inherit; font-size: .95rem; color: var(--texto);
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

.casillas { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: 1rem; }
.casillas label, .interruptor {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--texto); cursor: pointer;
}
.casillas input, .interruptor input { width: 18px; height: 18px; accent-color: var(--acento); }

.gustos-linea { font-size: .85rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.chip {
  font-size: .75rem; padding: .15rem .5rem; border-radius: 999px;
  background: var(--acento-claro); color: var(--acento-oscuro);
}
.chip-no { background: var(--rojo-claro); color: var(--rojo); }

/* ---------- modal de receta ---------- */

.modal {
  position: fixed; inset: 0; z-index: 40;
  background: var(--velo);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal[hidden] { display: none; }
.modal-caja {
  position: relative;
  background: var(--tarjeta);
  width: 100%; max-width: 560px; max-height: 88vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 1.25rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
  animation: subir .22s ease;
}
@keyframes subir { from { transform: translateY(30px); opacity: .5; } }
.modal-cerrar {
  position: absolute; top: .75rem; right: .85rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: var(--neutro); color: var(--texto-suave);
  font-size: 1rem; cursor: pointer;
}

.receta-cabecera { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 1rem; padding-right: 2rem; }
.receta-arte { display: block; flex-shrink: 0; }
.receta-cabecera h2 { font-size: 1.2rem; margin: .3rem 0 .25rem; }
.receta-meta { font-size: .82rem; color: var(--texto-suave); margin: 0; }

.lista-ingredientes { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.lista-ingredientes li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--borde);
  font-size: .9rem;
}
.lista-pasos { margin: 0 0 1.25rem; padding-left: 1.2rem; font-size: .9rem; }
.lista-pasos li { margin-bottom: .5rem; }
.receta-fuente { font-size: .78rem; color: var(--texto-suave); margin-bottom: 1rem; }
.receta-fuente a { color: var(--acento-oscuro); }
.modal-acciones { display: flex; gap: .5rem; }
.modal-acciones .btn { flex: 1; }

/* ---------- avisos ---------- */

.avisos {
  position: fixed; left: 50%; bottom: 5.5rem; z-index: 50;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: .5rem;
  width: min(92vw, 460px);
  pointer-events: none;
}
/* El aviso se pinta invertido respecto a la página: en claro es oscuro
   con texto claro, y en oscuro al revés. Por eso usa los dos tokens y
   no un blanco fijo, que en modo oscuro sería ilegible. */
.aviso {
  background: var(--texto); color: var(--fondo);
  padding: .7rem 1rem; border-radius: 12px;
  font-size: .88rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  animation: entrar .25s ease;
}
.aviso-error { background: var(--rojo); }
.aviso.saliendo { opacity: 0; transition: opacity .4s; }
@keyframes entrar { from { transform: translateY(12px); opacity: 0; } }

/* ---------- clave de Gemini ---------- */

.gemini-puesta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .92rem; font-weight: 600; margin-bottom: .35rem;
}
.gemini-puesta code {
  font-size: .82rem; font-weight: 500;
  padding: .15rem .5rem; border-radius: 8px;
  background: var(--crema); color: var(--texto-suave);
}

/* ---------- panel de usuarios ---------- */

.lista-usuarios { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.lista-usuarios li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--borde);
}
.usuario-nombre { flex: 1; font-size: .92rem; font-weight: 500; }
.usuario-fecha { font-size: .78rem; color: var(--texto-suave); }

/* ---------- pantalla de acceso ---------- */

/* Mientras se decide si hay sesión, y cuando no la hay, la app de
   dentro no se pinta: así no asoma un fogonazo del menú antes de
   la pantalla de acceso. */
body.cargando > .cabecera, body.cargando > main, body.cargando > .nav,
body.sin-sesion > .cabecera, body.sin-sesion > main, body.sin-sesion > .nav {
  display: none;
}

.login {
  position: fixed; inset: 0; z-index: 60;
  /* En COLUMNA desde que hay pie legal: en fila, el pie se colocaba al
     lado de la tarjeta y se la comía a la mitad. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
  padding-top: calc(1.5rem + env(safe-area-inset-top));
  background: linear-gradient(168deg, var(--crema) 0%, var(--crema-fin) 100%);
  overflow-y: auto;
}
.login[hidden] { display: none; }

.login-caja {
  width: min(100%, 380px);
  background: var(--tarjeta);
  border-radius: 24px;
  padding: 1.9rem 1.4rem 1.6rem;
  box-shadow: var(--sombra-alta);
  animation: entrar .3s ease;
}
.login-marca { font-size: 3.2rem; text-align: center; line-height: 1; }
.login-caja h1 { text-align: center; font-size: 1.75rem; margin: .5rem 0 .1rem; letter-spacing: -.035em; }

/* El lema, pegado al nombre: son una sola cosa, no dos líneas sueltas.
   Va en versalitas pequeñas para que acompañe sin competir. */
.login-lema {
  text-align: center;
  margin: 0 0 1.1rem;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.login-intro {
  text-align: center; font-size: .87rem; color: var(--texto-suave);
  margin-bottom: 1.35rem;
}

.login-caja label {
  display: flex; flex-direction: column; gap: .3rem;
  margin-bottom: .9rem;
  font-size: .8rem; color: var(--texto-suave);
}
.login-caja .btn { width: 100%; padding: .8rem 1.1rem; }

.login-error {
  background: var(--rojo-claro); color: var(--rojo);
  border-radius: 10px; padding: .6rem .75rem;
  font-size: .85rem; margin-bottom: .9rem;
}
.login-error[hidden] { display: none; }

/* Por qué se está pidiendo la clave justo ahora. Quien llega aquí desde
   un botón concreto necesita ver, lo primero, que esto le desbloquea
   eso que acaba de pulsar. */
/* Lo primero que hay que leer del diálogo de instalar: que todavía no
   está en las tiendas, pero que da igual. */
.instalar-aviso {
  background: var(--acento-claro);
  border-radius: 12px;
  padding: .8rem .95rem;
  margin-bottom: 1rem;
  font-size: .92rem;
}

.gemini-porque {
  background: var(--acento-claro);
  border-radius: 12px;
  padding: .7rem .85rem;
  margin-bottom: .9rem;
  font-size: .9rem;
}

/* Entrar y crear cuenta, en la misma tarjeta */
.login-pestanas {
  display: flex; gap: .25rem;
  background: var(--neutro);
  border-radius: 12px;
  padding: .25rem;
  margin-bottom: 1.1rem;
}
.login-pestana {
  flex: 1;
  border: 0; border-radius: 9px;
  padding: .55rem .4rem;
  font: inherit; font-size: .87rem; font-weight: 600;
  color: var(--texto-suave);
  background: transparent;
  cursor: pointer;
}
.login-pestana.activa {
  background: var(--tarjeta);
  color: var(--texto);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
/* Un `hidden` a secas lo pisa cualquier display propio, y aquí conviven
   dos formularios en la misma tarjeta: sin esto se pintan los dos. */
#form-entrar[hidden], #form-crear[hidden] { display: none; }

/* Lo que hay que saber antes de escribir en el campo, no después de
   fallar: qué caracteres valen y para qué se guarda el correo. */
/* El pie legal del acceso: visible, pero sin robarle sitio a lo que la
   gente viene a hacer, que es entrar. */
.login-legal {
  width: min(100%, 380px);
  margin: 1rem auto 0;
  text-align: center;
  font-size: .78rem;
  color: var(--texto-suave);
}
.login-legal a { color: inherit; }

.login-olvidada {
  display: block; width: 100%;
  margin-top: .9rem; padding: .3rem;
  background: none; border: 0;
  font: inherit; font-size: .82rem;
  color: var(--texto-suave);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

.login-pista {
  font-size: .72rem; line-height: 1.35;
  color: var(--texto-suave);
}

/* ---------- pantallas grandes ---------- */

@media (min-width: 720px) {
  .avisos { bottom: 1.5rem; }
  .modal { align-items: center; padding: 1rem; }
  .modal-caja { border-radius: 20px; }
}

/* ---------- escritorio ----------
   El reparto en columnas ya lo hace `.rejilla-doble` sola. Aquí solo
   quedan las piezas que NO deben crecer con la pantalla. */

@media (min-width: 900px) {
  /* En el perfil, la ficha de datos es mucho más alta que las otras
     dos: ocupa su columna entera y las cortas se apilan al lado, en
     vez de dejar un hueco debajo. */
  #vista-perfil > .tarjeta:first-child { grid-row: span 2; }

  .login-caja { width: min(100%, 420px); }
}

/* La diana no crece con el contenedor: cuatro cifras separadas por
   250px cada una se leen como cuatro cosas sueltas, no como una fila.
   (El mazo de cartas ya tiene su propio tope: es un gesto de una
   mano y no gana nada por ser más ancho.) */
#menu-diana .diana { max-width: 620px; margin-inline: auto; }

/* ---------- biblioteca ---------- */

/* La llamada a instalar. Destaca sin competir con «Generar menú», que
   es el botón primario de la pantalla: por eso va rellena del acento
   claro y no del acento a secas.

   Vive por duplicado —en la barra del índice y en la cabecera— y solo
   se ve una cada vez. No es descuido: en escritorio el índice es la
   fila de arriba y ahí es donde toca; en móvil el índice es la barra
   fija del pie, con las seis pestañas repartidas al milímetro, y meter
   ahí una séptima cosa las estruja. */
.btn-instalar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--acento);
  border-radius: 999px;
  background: var(--acento-claro);
  color: var(--acento);
  font: inherit; font-size: .85rem; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.btn-instalar:hover { background: var(--acento); color: var(--sobre-acento); }

/* En la barra del índice: pegada al extremo derecho, y fuera en móvil. */
.btn-instalar-nav {
  margin-left: auto;
  /* Anclada al borde derecho de la barra. La barra desliza de lado
     cuando las seis pestañas no caben —ya lo hacía antes de existir
     este botón— y sin esto el botón se iba con ellas y no volvía a
     verse. El fondo es opaco a propósito: las pestañas pasan por
     debajo, y la sombra a la izquierda cuenta que hay más barra ahí. */
  position: sticky; right: 0;
  box-shadow: -10px 0 10px -6px var(--barra);
}

/* Con las seis pestañas delante, el texto largo no cabe hasta bien
   entrados los 900 px: por debajo, la barra desbordaba y el botón se
   quedaba cortado en el borde derecho. */
@media (max-width: 900px) {
  .btn-instalar-nav .instalar-largo { display: none; }
  .btn-instalar-nav .instalar-corto { display: inline; }
}
.btn-instalar-cabecera { display: none; }

@media (max-width: 600px) {
  .btn-instalar-nav { display: none; }
  .btn-instalar-cabecera {
    display: inline-flex;
    padding: .35rem .7rem;
    font-size: .78rem;
  }
}

/* Instalada ya, el botón sobra. Se esconde por CSS (Android y
   escritorio) y por JS (iPhone, que usa navigator.standalone). */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .btn-instalar { display: none; }
}
body.instalada .btn-instalar { display: none; }

.instalar-corto { display: none; }
@media (max-width: 560px) {
  .instalar-largo { display: none; }
  .instalar-corto { display: inline; }
}

.subnav {
  display: flex; gap: .3rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  scrollbar-width: none;          /* deslizan, como la barra principal */
}
.subnav::-webkit-scrollbar { display: none; }

/* `flex: 0 0 auto` NO es cosmético. Los hijos de un flex se encogen por
   defecto, así que con cuatro pestañas cada botón se comprimía por
   debajo de su propio contenido; y como los botones llevan
   `overflow: hidden` para la onda al pulsar, la cola se recortaba en
   silencio: los contadores salían como «Te gustan 1» en vez de 18.
   Sin encogerse, desbordan y el `overflow-x` del contenedor hace lo
   que estaba pensado, que es dejarlas deslizar. */
.subnav-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none; font: inherit; font-size: .92rem; font-weight: 500;
  color: var(--texto-suave);
  white-space: nowrap; cursor: pointer;
}
.subnav-btn:hover { color: var(--texto); }
.subnav-btn.activo { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

.bib-panel { padding: 0; overflow: hidden; }
.bib-panel .bib-filtro { margin-top: 1rem; }
.bib-panel .bib-form { padding: 1rem; }

.bib-cuenta {
  background: var(--acento-claro); color: var(--acento-oscuro);
  border-radius: 999px; padding: .1rem .55rem;
  font-size: .8rem; font-weight: 600;
}

.bib-filtro {
  width: calc(100% - 2rem); margin: 0 1rem .75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--borde); border-radius: 999px;
  font: inherit; font-size: .9rem; background: var(--fondo);
}

.bib-lista { padding: 0 .5rem .5rem; max-height: 26rem; overflow-y: auto; }
.bib-vacio { padding: 1.2rem 1rem; color: var(--texto-suave); font-size: .9rem; text-align: center; }

.bib-item {
  display: flex; align-items: center; gap: .25rem;
  border-top: 1px solid var(--borde);
}
.bib-item:first-child { border-top: 0; }

.bib-item-abrir {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .5rem;
  border: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer; border-radius: 8px;
}
.bib-item-abrir:hover { background: var(--acento-claro); }
.bib-arte { display: block; flex-shrink: 0; }
.bib-datos { display: flex; flex-direction: column; min-width: 0; }
.bib-datos strong {
  font-weight: 500; font-size: .95rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bib-datos small { color: var(--texto-suave); font-size: .78rem; }
.bib-acciones { display: flex; flex-shrink: 0; padding-right: .3rem; }

/* ---------- formulario de receta propia ---------- */

.bib-form { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.bib-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 500; }
.bib-form label small { font-weight: 400; color: var(--texto-suave); }
.bib-form input, .bib-form select, .bib-form textarea {
  padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 10px;
  font: inherit; font-size: .92rem; background: var(--fondo); color: var(--texto);
}
.bib-form textarea { resize: vertical; }

.bib-fila-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 520px) { .bib-fila-campos { grid-template-columns: repeat(2, 1fr); } }

.bib-ingredientes { border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem; }
.bib-ingredientes legend { font-size: .88rem; font-weight: 500; padding: 0 .35rem; }
.bib-ingredientes legend small { font-weight: 400; color: var(--texto-suave); }
.bib-ing { display: grid; grid-template-columns: 1fr 5.5rem 2rem; gap: .4rem; margin-bottom: .4rem; }

.btn-pequeno { padding: .4rem .8rem; font-size: .85rem; }

.bib-macros {
  background: var(--crema); border-radius: 10px;
  padding: .6rem .8rem; font-size: .9rem; margin: 0;
}
.bib-macros small { color: var(--texto-suave); }
.bib-aviso {
  background: var(--rojo-claro); border-radius: 10px;
  padding: .6rem .8rem; font-size: .85rem; margin: 0; color: var(--texto);
}

/* ---------- móvil: la navegación baja a barra fija ----------
   Cuatro pestañas del día a día abajo; Perfil y Ajustes se recogen
   bajo «Más», que abre una hoja desde el borde inferior. */

@media (max-width: 600px) {
  .nav {
    /* `top: auto` es imprescindible: la regla de escritorio deja la nav
       en sticky con un `top`, y en `fixed` ese `top` combinado con
       `bottom: 0` estiraría la barra a lo alto de toda la pantalla. */
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 40;
    max-width: none; margin: 0;
    display: flex; flex-wrap: nowrap; gap: 0;
    overflow: visible;   /* aquí las cinco pestañas caben repartidas */
    background: var(--barra);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--borde);
    border-bottom: 0;
    box-shadow: 0 -2px 16px rgba(94, 68, 30, .1);
    padding: .3rem .2rem calc(.3rem + env(safe-area-inset-bottom, 0px));
  }
  .nav-boton {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; gap: .18rem;
    padding: .4rem .15rem .35rem;
    border-radius: 12px;
    font-size: .64rem; font-weight: 500;
  }
  .nav-boton .icono { width: 22px; height: 22px; }
  .nav-etiqueta {
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 100%;
  }
  .nav-boton:hover { background: none; color: var(--texto-suave); }

  /* Abajo el subrayado no se ve (queda contra el borde de la pantalla):
     el activo se marca con el color y una pastilla suave detrás. */
  .nav-boton.activo {
    background: var(--acento-claro);
    color: var(--acento-oscuro); font-weight: 700;
  }
  .nav-boton.activo::after { content: none; }

  .nav-boton.nav-secundaria { display: none; }   /* van dentro de «Más» */
  #nav-mas { display: inline-flex; }

  /* Hueco para la barra fija: su alto más el área segura del móvil */
  main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .avisos { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }

  /* Con la nav abajo, la cabecera es la única barra de arriba */
  .cabecera { border-bottom: 1px solid var(--borde); }

  /* La acción principal de cada vista ocupa la fila entera: es más
     fácil de acertar con el pulgar y deja de partirse a media palabra. */
  .acciones-principales > .btn-primario,
  .acciones-principales > .btn { flex: 1 1 12rem; }
  .progreso { flex: 1 1 100%; text-align: center; }
}

/* ---------- ilustraciones de familia de plato ----------
   Una por familia (js/arte.js), no una foto por receta: 5.342 fotos
   serían 130 MB. Van en SVG, así que se ven nítidas a cualquier
   tamaño y no cuestan una petición. */

.arte {
  display: block;
  border-radius: 10px;
  background: var(--crema);
  object-fit: cover;
}
.arte-mini { width: 57px; height: 38px; }
.arte-ficha { width: 111px; height: 74px; border-radius: 14px; }

@media (max-width: 600px) {
  .arte-mini { width: 48px; height: 32px; }
  .arte-ficha { width: 90px; height: 60px; }
}

/* Marca de la cabecera e iconos sueltos del marcado */
.cabecera h1 { display: inline-flex; align-items: center; gap: .5rem; }
.marca { width: 30px; height: 30px; flex-shrink: 0; }
.subnav-icono { display: inline-flex; }
.subnav-icono .icono { width: 16px; height: 16px; }

/* Los botones de fila llevan icono SVG, no emoji: el tamaño lo manda
   el icono y no la fuente del sistema. */
.btn-icono .icono { width: 17px; height: 17px; display: block; }

/* ============================================================
   MOVIMIENTO
   ------------------------------------------------------------
   Tono de la app: cocina de casa. Ni lujo (lento y solemne) ni
   marca juguetona (rebotes). Tiempos cortos y una curva que
   desacelera al final, para que las cosas "aterricen".

   Nada aquí debe hacerte esperar: las animaciones acompañan a lo
   que ya ha pasado, no lo retrasan.
   ============================================================ */

:root {
  --mov-rapido: .14s;
  --mov-medio: .2s;
  --mov-largo: .32s;
  /* Sale rápido y frena suave */
  --mov-curva: cubic-bezier(.22, .68, .28, 1);
}

/* ---------- cambio de vista ---------- */

.vista:not([hidden]) {
  animation: vista-entra var(--mov-medio) var(--mov-curva);
}
@keyframes vista-entra {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---------- los días del menú, en cascada ----------
   Solo los primeros: una lista larga animándose entera se ve
   lenta y da tirones. */

.dia { animation: sube var(--mov-medio) var(--mov-curva) backwards; }
.dia:nth-child(1) { animation-delay: .02s; }
.dia:nth-child(2) { animation-delay: .05s; }
.dia:nth-child(3) { animation-delay: .08s; }
.dia:nth-child(4) { animation-delay: .11s; }
.dia:nth-child(5) { animation-delay: .14s; }
.dia:nth-child(6) { animation-delay: .17s; }
.dia:nth-child(n+7) { animation-delay: .2s; }

@keyframes sube {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- subpestañas de la biblioteca ---------- */

.bib-panel:not([hidden]) { animation: vista-entra var(--mov-rapido) var(--mov-curva); }

/* El subrayado crece desde el centro en vez de aparecer de golpe */
.subnav-btn { position: relative; }
.subnav-btn::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--acento);
  transform: scaleX(0);
  transition: transform var(--mov-medio) var(--mov-curva);
}
.subnav-btn.activo { border-bottom-color: transparent; }
.subnav-btn.activo::after { transform: scaleX(1); }

/* ---------- onda al pulsar ---------- */

.btn, .nav-boton, .subnav-btn, .btn-redondo { position: relative; overflow: hidden; }
.onda {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: .22;
  pointer-events: none;
  transform: scale(0);
  animation: onda-crece var(--mov-largo) var(--mov-curva) forwards;
}
@keyframes onda-crece {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- filas y tarjetas que responden ---------- */

.comida-plato, .bib-item-abrir {
  transition: background var(--mov-rapido) var(--mov-curva),
              transform var(--mov-rapido) var(--mov-curva);
}
.comida-plato:active, .bib-item-abrir:active { transform: scale(.985); }

.tarjeta, .dia {
  transition: box-shadow var(--mov-medio) var(--mov-curva),
              transform var(--mov-medio) var(--mov-curva);
}
@media (hover: hover) {
  .dia:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
}

.btn-icono { transition: opacity var(--mov-rapido), background var(--mov-rapido), transform var(--mov-rapido); }
.btn-icono:active { transform: scale(.88); }

/* Los iconos del nav se levantan un pelo al activarse */
.nav-boton .icono { transition: transform var(--mov-medio) var(--mov-curva); }
.nav-boton.activo .icono { transform: translateY(-1px) scale(1.06); }

/* ---------- esqueleto mientras llega la preparación ----------
   Un bloque latiendo dice "viene en camino" mejor que un texto, y
   además reserva el sitio para que la ficha no dé un salto. */

.receta-cargando { display: grid; gap: .55rem; margin: .8rem 0 0; }
.receta-cargando::before,
.receta-cargando::after {
  content: ""; height: .8rem; border-radius: 6px;
  background: linear-gradient(90deg, var(--borde) 25%, var(--crema) 50%, var(--borde) 75%);
  background-size: 200% 100%;
  animation: latido 1.3s ease-in-out infinite;
}
.receta-cargando::after { width: 70%; }
@keyframes latido {
  to { background-position: -200% 0; }
}

/* ============================================================
   Si el sistema pide menos movimiento, no se mueve nada. A mucha
   gente el movimiento le provoca mareo de verdad; esto no es una
   preferencia estética.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .dia:hover { transform: none; }
  .receta-cargando::before, .receta-cargando::after { background: var(--borde); }
}

/* ============================================================
   TIPOGRAFÍA CON CARÁCTER
   ------------------------------------------------------------
   Casi todo el carácter de un diseño sale de los titulares. Una
   serif de sistema (Georgia y compañía) da tono editorial de libro
   de cocina sin descargar una sola fuente: cero peso, cero espera
   y funciona sin conexión.

   Las cifras siguen en la de palo: los números se comparan mejor
   alineados y sin remates.
   ============================================================ */

h1, h2, h3, .login-caja h1 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -.012em;
}
.cabecera h1 { font-weight: 700; letter-spacing: -.015em; }
.diana strong, .comida-kcal, .dia-macros { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- marca e ilustraciones de apoyo ---------- */

.login-marca { display: flex; justify-content: center; }
.login-marca .marca { width: 62px; height: 62px; }

.vacio-arte { display: flex; justify-content: center; margin-bottom: .9rem; }
.arte-vacio {
  width: 168px; height: 112px;
  border-radius: 16px;
  box-shadow: var(--sombra);
}

/* ============================================================
   GASTOS
   ------------------------------------------------------------
   Una cifra manda en cada pantalla y el resto la explica. Los
   importes van en tinta normal, nunca en el color de marca: aquí
   el color codifica estado (dentro o fuera del objetivo) y si se
   gastara en decorar dejaría de significar nada.

   Todo lo que lleva color lleva además palabra o símbolo: ni el
   mes que se pasa del objetivo ni el precio estimado se
   distinguen solo por el tono.
   ============================================================ */

.gastos-panel { margin-top: .5rem; }

.bal-cabecera {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .35rem;
}
.bal-selector {
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--texto);
  background: var(--neutro);
  border: 1px solid var(--borde); border-radius: 999px;
  padding: .3rem .7rem;
}
.bal-chip {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--acento-oscuro); background: var(--acento-claro);
  border-radius: 999px; padding: .15rem .55rem;
}

/* La cifra del mes: es lo único que mucha gente va a mirar */
.bal-cifra {
  margin: .1rem 0 0;
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.bal-cifra.pequena { font-size: 1.8rem; }
.bal-sub { margin: .25rem 0 .8rem; font-size: .85rem; color: var(--texto-suave); }

.bal-barra {
  height: 10px; border-radius: 999px;
  background: var(--neutro); overflow: hidden;
  margin: .6rem 0 .5rem;
}
.bal-barra-lleno {
  height: 100%; border-radius: 999px;
  background: var(--acento);
  transition: width var(--mov-largo, .32s) ease;
}
.bal-barra-lleno.pasado { background: var(--rojo); }

.bal-estado { margin: 0 0 .3rem; font-size: .9rem; font-weight: 600; }
.bal-estado.bien { color: var(--bien); }
.bal-estado.mal { color: var(--rojo); }
.bal-ritmo { margin: 0 0 .3rem; font-size: .85rem; color: var(--texto-suave); }

.bal-objetivo {
  display: flex; align-items: end; gap: .6rem;
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--borde);
}
.bal-objetivo label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; flex: 1; }
.bal-objetivo input {
  padding: .5rem .7rem; width: 100%;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font: inherit; font-size: .9rem; color: var(--texto);
}

/* ---------- la gráfica ----------
   SVG a mano: hereda los tokens de color, así que el modo oscuro
   sale gratis. El objetivo es una línea de referencia y por eso va
   de puntos y en tinta apagada; las barras son el dato. */

.bal-grafica { width: 100%; height: auto; display: block; margin: .3rem 0 .2rem; overflow: visible; }

.bal-suelo { stroke: var(--borde); stroke-width: 1; }
.bal-objetivo-linea {
  stroke: var(--texto-suave); stroke-width: 1.5;
  stroke-dasharray: 5 4; opacity: .75;
}
.bal-objetivo-etq { fill: var(--texto-suave); font-size: 9px; font-weight: 600; }

.bal-barra-fondo { fill: var(--acento); }
.bal-barra-mes.pasado .bal-barra-fondo { fill: var(--rojo); }
.bal-barra-mes.activo .bal-barra-fondo { stroke: var(--texto); stroke-width: 1.5; }

/* Área de toque: mucho mayor que la barra, sobre todo cuando el mes
   ha sido barato y la barra mide cuatro píxeles. */
.bal-diana { fill: transparent; cursor: pointer; }
.bal-barra-mes:hover .bal-diana,
.bal-barra-mes:focus-visible .bal-diana { fill: var(--acento-claro); }
.bal-barra-mes:focus-visible { outline: none; }

.bal-valor { fill: var(--texto); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bal-barra-mes.pasado .bal-valor { fill: var(--rojo); }
.bal-mes-etq { fill: var(--texto-suave); font-size: 10px; }
.bal-leyenda { margin-top: .2rem; }

/* ---------- en qué se ha ido ---------- */

.bal-desglose { list-style: none; margin: 0; padding: 0; }
.bal-desglose li {
  display: grid; grid-template-columns: 1fr 4rem auto;
  align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--borde);
}
.bal-desglose li:last-child { border: 0; }
.bal-desglose-nombre { font-size: .9rem; }
.bal-desglose-barra { height: 6px; border-radius: 999px; background: var(--neutro); overflow: hidden; }
.bal-desglose-barra i { display: block; height: 100%; background: var(--acento); }
.bal-desglose-cifra {
  text-align: right; font-size: .9rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bal-desglose-cifra small { display: block; font-weight: 400; color: var(--texto-suave); font-size: .72rem; }

/* ---------- apuntes ---------- */

.mov-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  align-items: end; gap: .6rem;
}
.mov-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; min-width: 0; }
.mov-form input, .mov-form select {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font: inherit; font-size: .9rem; color: var(--texto);
}
.mov-form .btn { white-space: nowrap; }

.mov-dia {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: .75rem 1rem; margin-bottom: .75rem;
  box-shadow: var(--sombra);
}
.mov-dia h4 {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .85rem; color: var(--acento-oscuro); margin-bottom: .3rem;
}
.mov-dia h4 span { color: var(--texto); font-variant-numeric: tabular-nums; }
.mov-dia ul { list-style: none; margin: 0; padding: 0; }
.mov-dia li {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0; border-top: 1px solid var(--borde);
}
.mov-emoji { font-size: 1.1rem; flex: none; }
.mov-texto { flex: 1; font-size: .9rem; min-width: 0; }
.mov-texto small { display: block; font-size: .75rem; color: var(--texto-suave); }
.mov-importe { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- precios ---------- */

.pre-supers { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.pre-super {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--fondo); color: var(--texto);
  border-left: 4px solid var(--color-super, var(--acento));
}
.pre-super.activo {
  background: var(--acento-claro); color: var(--acento-oscuro);
  border-color: var(--acento);
  border-left-color: var(--color-super, var(--acento));
}

.pre-calidad { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
.pre-calidad select {
  padding: .5rem .7rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font: inherit; font-size: .9rem; color: var(--texto);
}

.pre-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  align-items: end; gap: .6rem;
}
.pre-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; min-width: 0; }
.pre-form input, .pre-form select {
  width: 100%; padding: .55rem .7rem;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font: inherit; font-size: .9rem; color: var(--texto);
}

/* Una tienda por sección del súper */
.pre-secciones { list-style: none; margin: 0 0 .6rem; padding: 0; }
.pre-secciones li {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 0; border-top: 1px solid var(--borde);
}
.pre-secciones li:first-child { border-top: 0; }
.pre-secciones select {
  margin-left: auto; max-width: 55%;
  padding: .35rem .5rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font: inherit; font-size: .85rem; color: var(--texto);
}

/* Los productos que la tienda tiene de verdad, para elegir el tuyo */
.pre-alternativas { list-style: none; margin: 0 0 .5rem; padding: 0; }
.pre-alternativas button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .6rem; margin-bottom: .3rem;
  font: inherit; text-align: left; cursor: pointer; color: var(--texto);
  background: none; border: 1px solid var(--borde); border-radius: 12px;
}
.pre-alternativas button:hover { background: var(--acento-claro); border-color: var(--acento); }
.pre-alternativas .pre-eur small { font-weight: 400; color: var(--texto-suave); }

/* Cuando la compra se reparte entre tiendas, cada sección dice cuál */
.seccion-super {
  margin: -.2rem 0 .35rem;
  font-size: .72rem; color: var(--texto-suave);
}

.pre-lista { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; }
.pre-lista li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 0; border-top: 1px solid var(--borde);
}
.pre-lista li:first-child { border-top: 0; }
.pre-nombre { flex: 1; font-size: .9rem; min-width: 0; }
.pre-nombre small { display: block; font-size: .72rem; color: var(--texto-suave); }
.pre-eur { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* De dónde sale cada precio. Nunca es solo el color: manda la palabra
   (tuyo, real, estimado) y el color solo la acompaña. */
.pre-fuente { font-style: normal; font-weight: 700; }
.pre-fuente.tuyo { color: var(--bien); }
.pre-fuente.real { color: var(--acento-oscuro); }
.pre-fuente.estimado, .pre-fuente.seccion { color: var(--texto-suave); }

/* ---------- coste dentro de la lista de la compra ---------- */

.compra-total {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem;
}
.compra-total .acciones-principales { margin-bottom: 0; }
.compra-total-cifra {
  margin: 0; font-size: 1.9rem; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.rejilla-doble > .compra-total { grid-column: 1 / -1; }

.seccion-compra h3 { display: flex; justify-content: space-between; gap: .6rem; }
.seccion-coste { color: var(--texto); font-variant-numeric: tabular-nums; }

.item-coste {
  display: block; font-weight: 600; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
/* Un precio orientativo se dice: en gris y con la tilde de aproximado,
   para no confundirlo con lo que sabes que cuesta. */
.item-coste.estimado::before,
.item-coste.seccion::before { content: "~"; }
.item-coste.estimado, .item-coste.seccion { color: var(--texto-suave); font-weight: 500; }

/* ============================================================
   ASISTENTE DE DIETA
   ------------------------------------------------------------
   Lo primero que se lee es cuánto sabe la app de esa semana. Si
   solo tiene seis comidas de veintiuna, el análisis vale lo que
   vale, y eso va antes que ningún consejo.
   ============================================================ */

.dieta-cobertura {
  margin: 0 0 .5rem; font-size: .9rem; font-weight: 600;
}
.dieta-cobertura.bien { color: var(--bien); }
.dieta-cobertura.medio { color: var(--ambar); }
.dieta-cobertura.poco { color: var(--rojo); }

.dieta-macros { display: grid; gap: .45rem; margin: .8rem 0 .4rem; }
.dieta-macro {
  display: grid; grid-template-columns: 5rem 1fr auto;
  align-items: center; gap: .6rem;
}
.dieta-macro-nombre { font-size: .85rem; }
.dieta-macro-barra { height: 8px; border-radius: 999px; background: var(--neutro); overflow: hidden; }
.dieta-macro-barra i { display: block; height: 100%; background: var(--bien); }
.dieta-macro-barra i.desviado { background: var(--ambar); }
.dieta-macro-cifra { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dieta-macro-cifra small { font-weight: 400; color: var(--texto-suave); }

.dieta-bien { margin: .6rem 0 0; font-size: .85rem; color: var(--bien); font-weight: 600; }

.dieta-grupos { list-style: none; margin: 0; padding: 0; }
/* Ancho fijo en las dos columnas de la derecha: con `auto`, el texto
   de la guía (de «2 al día» a «3 o 4 veces por semana») movía la barra
   de sitio en cada fila y la columna salía en escalera. */
.dieta-grupos li {
  display: grid; grid-template-columns: 1fr 5rem 1.6rem;
  align-items: center; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--borde);
}
.dieta-grupos li:last-child { border: 0; }
.dieta-grupo-nombre { font-size: .9rem; }
.dieta-grupo-nombre small { display: block; font-size: .72rem; color: var(--texto-suave); }
.dieta-grupo-barra { height: 6px; border-radius: 999px; background: var(--neutro); overflow: hidden; }
.dieta-grupo-barra i { display: block; height: 100%; background: var(--bien); }
.dieta-grupos li.flojo .dieta-grupo-barra i { background: var(--ambar); }
.dieta-grupo-cifra {
  text-align: right; font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}


.dieta-senales { list-style: none; margin: 0 0 .8rem; padding: 0; }
.dieta-senales li {
  font-size: .9rem; padding: .4rem 0;
  border-bottom: 1px solid var(--borde);
}
.dieta-senales li:last-child { border: 0; }
.dieta-senales li span { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.dieta-senales li.falta span { color: var(--ambar); }
.dieta-senales li.sobra span { color: var(--rojo); }

.dieta-veredicto { font-size: 1rem; line-height: 1.5; margin: 0 0 .8rem; }

.dieta-bloque { margin-bottom: .7rem; }
.dieta-bloque h4 { margin: 0 0 .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.dieta-bloque.bien h4 { color: var(--bien); }
.dieta-bloque.sobra h4 { color: var(--rojo); }
.dieta-bloque.falta h4 { color: var(--ambar); }
.dieta-bloque ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; }

.dieta-cambios { list-style: none; margin: 0 0 .8rem; padding: 0; }
.dieta-cambios li {
  font-size: .9rem; padding: .5rem .7rem; margin-bottom: .4rem;
  background: var(--crema); border-radius: 12px;
}
.dieta-cambios small { display: block; color: var(--texto-suave); font-size: .78rem; }

.dieta-consejo {
  font-size: .95rem; font-weight: 600;
  background: var(--acento-claro); color: var(--acento-oscuro);
  padding: .7rem .9rem; border-radius: 12px;
}

.dieta-sugerencias { list-style: none; margin: 0 0 .8rem; padding: 0; }
.dieta-sug {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  text-align: left; font: inherit; cursor: pointer;
  padding: .45rem .5rem; margin-bottom: .3rem;
  background: none; border: 1px solid var(--borde); border-radius: 12px;
  color: var(--texto);
}
.dieta-sug:hover { background: var(--acento-claro); border-color: var(--acento); }
.dieta-sug-emoji { font-size: 1.3rem; flex: none; }
.dieta-sug-texto { min-width: 0; font-size: .9rem; }
.dieta-sug-texto small { display: block; font-size: .75rem; color: var(--texto-suave); }

.dieta-diario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .8rem;
}
.dieta-dia h4 {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .85rem; color: var(--acento-oscuro); margin-bottom: .2rem;
}
.dieta-dia h4 span { color: var(--texto-suave); font-weight: 400; }
.dieta-dia ul { list-style: none; margin: 0; padding: 0; }
.dieta-dia li {
  font-size: .85rem; padding: .3rem 0;
  border-top: 1px solid var(--borde);
}
.dieta-dia li span {
  display: inline-block; min-width: 4.6rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-suave);
}
.dieta-dia li small { color: var(--texto-suave); }
.dieta-dia li.hueco { color: var(--texto-suave); font-style: italic; }
.dieta-dia li.fuera { color: var(--acento-oscuro); }

/* ------------------------------------------------------------
   Fotos de los platos
   ------------------------------------------------------------
   La foto viene de la web que publicó la receta, y cada web la
   sirve con el recorte que le da la gana: verticales, cuadradas y
   panorámicas mezcladas. `object-fit: cover` las iguala a un solo
   ratio con recorte centrado, que es lo que hace que una lista
   parezca una lista y no un collage. Sin esto, las fotos se ven
   peor que los dibujos que sustituyen.

   El fondo crema debajo evita el destello blanco mientras carga.

   Aquí NO se toca ni el tamaño ni el radio: los pone la clase del
   sitio donde va (.arte-carta, .arte-mini, .arte-ficha, .arte-video),
   igual que se los ponía al SVG que sustituye. Este bloque va al
   final de la hoja, así que cualquier width o border-radius que
   pusiera aquí ganaría por orden y aplastaría los 57x38 de una
   miniatura. La foto se mete en el hueco del dibujo; no lo redefine. */
.arte-foto {
  object-fit: cover;
  object-position: center;
  background: var(--crema);
  display: block;
}

/* ============================================================
   CABECERA: PERFIL Y AJUSTES
   ------------------------------------------------------------
   No son pestañas donde se trabaja, son la configuración, y van
   donde todo el mundo las busca: arriba a la derecha. Solo icono,
   con `aria-label` en el HTML porque sin texto visible es lo único
   que tiene quien usa lector de pantalla.
   ============================================================ */

.cabecera-acciones {
  display: flex; align-items: center; gap: .15rem;
  margin-left: auto;
}

.cab-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--texto-suave); cursor: pointer;
}
.cab-boton .icono { width: 21px; height: 21px; display: block; }
.cab-boton:hover { background: var(--acento-claro); color: var(--acento-oscuro); }
.cab-boton.activo { background: var(--acento-claro); color: var(--acento-oscuro); }

/* El estado de sincronización se queda pegado a los botones y se
   calla en cuanto puede; en pantallas estrechas no cabe y estorba. */
@media (max-width: 520px) {
  .estado-sync { display: none; }
}

/* ============================================================
   AJUSTES
   ============================================================ */

.ajustes-panel { margin-top: .5rem; }

/* `hidden` es `display: none` de la hoja del navegador, y CUALQUIER
   regla propia que ponga `display` le gana: como los paneles llevan
   `rejilla-doble` (display: grid), se veían los cuatro a la vez y el
   batch-cooking salía dentro de «Aspecto». Hay que decirlo aquí. */
.ajustes-panel[hidden] { display: none; }

/* Nunca tuvo estilos: la casilla y su texto caían uno encima del otro
   y centrados, con pinta de descuido. */
.interruptor {
  display: flex; align-items: center; gap: .6rem;
  text-align: left; cursor: pointer;
  font-size: .95rem;
}
.interruptor input {
  width: 20px; height: 20px; flex: none;
  accent-color: var(--acento);
}

/* Las tres opciones de tema, con su muestra de color: se elige mirando
   el color, no leyendo la palabra. */
.tema-opciones { display: grid; gap: .5rem; margin-bottom: .8rem; }

.tema-opcion {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .6rem .75rem;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 14px;
}
.tema-opcion:hover { border-color: var(--acento); }
.tema-opcion.activo {
  border-color: var(--acento);
  background: var(--acento-claro);
  color: var(--acento-oscuro);
}

.tema-nombre { font-weight: 600; font-size: .95rem; }
.tema-nombre small { display: block; font-weight: 400; font-size: .78rem; color: var(--texto-suave); }
.tema-opcion.activo .tema-nombre small { color: inherit; opacity: .8; }

/* La muestra enseña de verdad los dos fondos de la app; la de
   automático los parte en diagonal. Los colores van escritos a mano a
   propósito: tienen que enseñar el tema CONTRARIO al que estés viendo,
   así que no pueden salir de las variables. */
.tema-muestra {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  border: 1px solid var(--borde);
}
.tema-muestra.claro { background: #fffbf0; }
.tema-muestra.oscuro { background: #16130f; }
.tema-muestra.auto { background: linear-gradient(135deg, #fffbf0 0 50%, #16130f 50% 100%); }

/* ---------- Descubrir: retoques del mazo ---------- */

.carta-ing {
  margin: .1rem 0 0;
  font-size: .78rem; line-height: 1.35;
  color: rgba(255, 255, 255, .8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lo que no es un plato entero lleva su aviso en la carta. Va sobre la
   foto como todo lo demás de aquí, así que el color lo pone el velo y
   no el tema de la app. */
.carta-chip-rol {
  background: rgba(255, 255, 255, .3);
  border-color: rgba(255, 255, 255, .45);
  text-transform: none;
}
.carta-nota {
  margin: .35rem 0 0;
  font-size: .72rem; line-height: 1.3;
  color: rgba(255, 255, 255, .72);
}

.swipe-progreso {
  margin: 0 auto .6rem;
  font-size: .8rem; color: var(--texto-suave); text-align: center;
}
.swipe-progreso strong { color: var(--acento-oscuro); font-size: .95rem; }

/* La foto ampliada del diálogo */
.foto-grande { margin: -.2rem 0 .9rem; }
.arte-grande {
  width: 100%; height: auto;
  max-height: 60vh; object-fit: cover;
  border-radius: 16px;
  background: var(--crema);
}
svg.arte-grande { aspect-ratio: 3 / 2; }

/* Cartas sin foto: el dibujo se ve entero, arriba, sobre la crema de
   la casa. El velo sigue oscureciendo el bajo para que el texto blanco
   se lea igual que sobre una foto. */
/* El mismo crema que lleva pintado dentro el propio dibujo
   (ARTE_COLORES.fondo en js/arte.js). Con un token de la app aquí
   salía una banda: en oscuro el marco se iba a negro y el dibujo se
   quedaba claro, con un corte horizontal a media carta. */
.carta-dibujo .carta-portada { background: #fdf3ce; }
.carta-dibujo svg.arte-carta {
  height: 60%; width: 100%;
  margin-top: 6%;
  /* `.arte` le pone de fondo `--crema`, que en oscuro es marrón muy
     oscuro: dejaba una banda y una línea a media carta, porque el
     dibujo trae su propio crema pintado dentro. Aquí sobra. */
  background: transparent;
}

/* ============================================================
   HOY
   ------------------------------------------------------------
   La pantalla del martes a las dos: una comida grande, el resto
   del día en pequeño y tres cifras de estado. Reutiliza las
   piezas de la carta de Descubrir (foto a sangre, chips sobre el
   velo), que es el mismo problema: enseñar un plato y que apetezca.
   ============================================================ */

.menu-panel { margin-top: .5rem; }

.hoy-fecha {
  margin: .2rem 0 .8rem;
  font-size: .9rem; color: var(--texto-suave); text-align: center;
}
.hoy-fecha strong { color: var(--acento-oscuro); }

.hoy-carta {
  position: relative;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  margin-bottom: 1rem;
}

.hoy-foto {
  display: block; width: 100%; padding: 0; border: 0;
  background: #fdf3ce; cursor: pointer;
}
.arte-hoy {
  display: block; width: 100%;
  height: clamp(9rem, 30vh, 15rem);
  object-fit: cover;
  border-radius: 0;
}

.hoy-cuerpo { padding: .9rem 1rem 1rem; }

/* Los chips vienen de la carta de Descubrir, donde van sobre la foto y
   por eso son blancos con fondo translúcido. Aquí caen sobre la
   tarjeta: en blanco sobre blanco no se veía ni la hora ni la gente. */
.hoy-cuerpo .carta-chip {
  color: var(--texto);
  background: var(--neutro);
  border-color: var(--borde);
  backdrop-filter: none;
}
.hoy-cuerpo h3 { font-size: 1.3rem; margin: .1rem 0 .2rem; }
.hoy-macros { margin: 0 0 .8rem; font-size: .85rem; color: var(--texto-suave); }
.hoy-cuerpo .acciones-principales { margin-bottom: 0; }

.hoy-hecho { text-align: center; }
.hoy-hecho h3 { color: var(--bien); }
.hoy-hecho .acciones-principales { justify-content: center; }

/* El resto del día */
.hoy-resto { list-style: none; margin: 0; padding: 0; }
.hoy-resto li {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0; border-top: 1px solid var(--borde);
}
.hoy-resto li:first-child { border-top: 0; }
.hoy-tipo {
  flex: none; width: 4.6rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--texto-suave);
}
.hoy-plato {
  flex: 1; min-width: 0; text-align: left;
  font: inherit; font-size: .92rem; color: var(--texto);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hoy-plato small { display: block; font-size: .75rem; color: var(--texto-suave); }
.hoy-resto li.hecha .hoy-plato { text-decoration: line-through; color: var(--texto-suave); }
.hoy-resto li.fuera .hoy-plato { color: var(--acento-oscuro); cursor: default; }
.hoy-resto li.hueco .hoy-plato { color: var(--texto-suave); }

/* Las tres cifras de estado, cada una con su pestaña detrás */
.hoy-estado ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}
.hoy-estado button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: .6rem .7rem;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 12px;
  font: inherit; color: var(--texto);
}
.hoy-estado button:hover { border-color: var(--acento); background: var(--acento-claro); }
.hoy-estado strong { display: block; font-size: 1.05rem; font-weight: 800; }
.hoy-estado small { color: var(--texto-suave); font-size: .75rem; }

/* ------------------------------------------------------------
   Bebidas
   ------------------------------------------------------------
   En el menú la bebida va como una nota debajo del plato, no como
   otro botón: no es una decisión de ese día, es una costumbre que
   se cambia en Perfil. Si pareciera pulsable, se intentaría
   pulsar. */
.comida-bebida {
  display: block;
  font-size: .82rem;
  color: var(--texto-suave);
  padding: .15rem 0 0 .2rem;
}

/* En Perfil sí se eligen: una fila por momento del día. */
.bebidas-lista { display: flex; flex-direction: column; gap: .5rem; }
.bebida-fila {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: .6rem;
}
.bebida-momento { text-transform: capitalize; color: var(--texto-suave); font-size: .9rem; }
.bebida-kcal { font-size: .82rem; color: var(--texto-suave); white-space: nowrap; }
.bebida-azucar { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--borde); }
.bebidas-total { margin-top: .8rem; font-size: .92rem; }

@media (max-width: 480px) {
  .bebida-fila { grid-template-columns: 5rem 1fr; }
  .bebida-kcal { grid-column: 2; text-align: right; margin-top: -.35rem; }
}

/* ------------------------------------------------------------
   Mi cocina: utensilios
   ------------------------------------------------------------
   Los que condicionan un plato (horno, batidora…) van marcados,
   porque son los únicos que llegan a avisar en una receta. El
   resto se marca por completitud, no porque cambie nada. */
.cocina-grupo { margin-bottom: 1.1rem; }
.cocina-grupo h4 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-suave);
  margin: 0 0 .5rem;
}
.cocina-casillas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .35rem .8rem;
}
.cocina-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--tarjeta);
  font-size: .88rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.cocina-clave span { font-weight: 600; }

.cocina-cuantas { margin: 0 0 .8rem; }
ul.cocina-desbloquea { list-style: none; margin: 0; padding: 0; }
ul.cocina-desbloquea li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--borde);
}
ul.cocina-desbloquea li:last-child { border-bottom: 0; }
.cocina-nombre { font-weight: 600; }
.cocina-cifra { font-weight: 700; color: var(--acento); font-variant-numeric: tabular-nums; }
.cocina-detalle { grid-column: 1 / -1; font-size: .82rem; color: var(--texto-suave); }

/* Aviso en la ficha de la receta */
.receta-falta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .8rem 0;
  padding: .7rem .85rem;
  background: var(--ambar-fondo);
  border-radius: 12px;
  font-size: .9rem;
}
.receta-falta strong { color: var(--ambar); }
.receta-utensilios { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.receta-utensilios .chip.falta {
  background: var(--ambar-fondo);
  color: var(--ambar);
  font-weight: 600;
}

/* ---------- avisos de salud ----------
   La casilla de supervisión y los dos textos que la acompañan. No van
   en rojo: no es un error de nadie, es una advertencia que tiene que
   leerse sin asustar.

   El selector lleva `label` a propósito: `.formulario label` pone
   columna, y con una clase suelta ganaba ella y la casilla se salía
   del recuadro. */
.formulario label.casilla-aviso,
.tarjeta > label.casilla-aviso {
  flex-direction: row; align-items: flex-start; gap: .6rem;
  background: var(--neutro); border-radius: 12px;
  padding: .8rem .9rem; margin-bottom: .9rem;
  font-size: .82rem; color: var(--texto);
  cursor: pointer;
}
.casilla-aviso input { margin-top: .1rem; flex-shrink: 0; }
/* `min-width: 0` para que el texto pueda partirse: sin eso, un
   elemento flexible no baja de su contenido y desborda la caja. */
.casilla-aviso span { flex: 1; min-width: 0; line-height: 1.45; }

.nota-aviso {
  background: var(--ambar-fondo); color: var(--ambar);
  border-radius: 12px; padding: .7rem .85rem;
}
.nota-legal { font-size: .78rem; opacity: .85; }

/* Botón de lo que no tiene vuelta atrás. Va en hueco y no relleno:
   tiene que verse claramente distinto de los de acción normal, pero
   sin gritar desde media pantalla de distancia. */
.btn-peligro {
  background: var(--rojo-claro); color: var(--rojo);
  border: 1px solid var(--rojo-borde);
}
.btn-peligro:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); }

/* Aviso dentro de un paso de la bienvenida. Ámbar y no rojo: no es un
   error, es un «esto conviene que lo sepas» que tiene que leerse. */
.bienv-ojo {
  background: var(--ambar-fondo); color: var(--ambar);
  border-radius: 12px; padding: .7rem .85rem;
  font-size: .85rem;
}

/* ============================================================
   MODO COCINA
   ------------------------------------------------------------
   Tapa la app entera, barra de pestañas incluida: aquí no se
   navega, se cocina. Todo es más grande de lo que sería cómodo
   sentado, porque esto se lee a medio metro y de reojo.
   ============================================================ */
.cocina {
  position: fixed; inset: 0; z-index: 60;
  background: var(--fondo); color: var(--texto);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.cocina[hidden] { display: none; }
/* Sin esto, el fondo sigue desplazándose por debajo en el móvil */
body.cocinando { overflow: hidden; }

.cocina-barra {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--borde);
  /* Que nada empuje al botón de salir fuera de la pantalla */
  max-width: 100%; box-sizing: border-box;
}
.cocina-titulo {
  flex: 1; min-width: 0; font-weight: 700; font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cocina-salir {
  border: 0; background: var(--neutro); color: var(--texto);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font-size: 1.1rem; cursor: pointer; flex-shrink: 0;
}

.cocina-cuerpo {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.2rem; padding: 1.5rem clamp(1rem, 5vw, 3rem);
  text-align: center;
}
.cocina-numero {
  margin: 0; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave);
}
/* El tamaño es la función: un paso que no se lee de pie no sirve */
.cocina-paso {
  margin: 0; font-size: clamp(1.35rem, 4.5vw, 2.1rem);
  line-height: 1.4; max-width: 32ch; align-self: center;
  text-wrap: pretty;
}
.cocina-temporizador { align-self: center; font-size: 1rem; padding: .8rem 1.4rem; }

.cocina-cuenta {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem 1rem; background: var(--crema);
  border-bottom: 1px solid var(--borde);
}
.cocina-cuenta[hidden] { display: none; }
.cuenta-que { font-size: .8rem; color: var(--texto-suave); }
.cuenta-cifra {
  flex: 1; font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Cuando salta, el color hace el trabajo que el sonido puede no
   hacer: en una cocina con extractor no se oye un pitido. */
.cocina-cuenta.suena { background: var(--acento); color: var(--sobre-acento); }
.cocina-cuenta.suena .cuenta-que,
.cocina-cuenta.suena .cuenta-cifra { color: var(--sobre-acento); }
@media (prefers-reduced-motion: no-preference) {
  .cocina-cuenta.suena { animation: latido 1s ease-in-out infinite; }
}
@keyframes latido { 50% { opacity: .55; } }

.cocina-ingredientes {
  max-height: 45vh; overflow-y: auto;
  padding: 0 clamp(1rem, 5vw, 3rem) 1rem;
  border-top: 1px solid var(--borde);
}
.cocina-ingredientes[hidden] { display: none; }
.cocina-ingredientes h3 { font-size: .95rem; margin: 1rem 0 .5rem; }

.cocina-puntos {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  padding: .6rem 1rem;
}
.cocina-punto {
  width: .6rem; height: .6rem; padding: 0; border-radius: 50%;
  border: 0; background: var(--borde); cursor: pointer;
}
.cocina-punto.hecho { background: var(--acento-oscuro); opacity: .5; }
.cocina-punto.activo { background: var(--acento); transform: scale(1.5); }

.cocina-pie {
  display: flex; gap: .6rem; padding: .8rem 1rem 1.2rem;
  border-top: 1px solid var(--borde);
}
/* `min-width: 0` es imprescindible: un elemento flexible no baja de
   su contenido por defecto, y tres botones con texto no caben en un
   móvil estrecho — el tercero se salía de la pantalla. */
.cocina-pie .btn {
  flex: 1; min-width: 0; padding: .9rem .5rem;
  font-size: .88rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cocina-pie .btn:disabled { opacity: .4; }

/* ---------- semanas guardadas ----------
   Plegado y al final del menú: es historial, no es donde se trabaja.
   Pero tiene que verse, porque antes generar una semana parecía
   borrar la anterior. */
.semanas {
  margin-top: 1.2rem; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: .3rem .2rem;
}
.semanas > summary {
  cursor: pointer; padding: .7rem .9rem; font-weight: 600; font-size: .92rem;
  list-style: none; display: flex; gap: .5rem; align-items: baseline;
}
.semanas > summary::-webkit-details-marker { display: none; }
.semanas > summary::before { content: "▸"; color: var(--texto-suave); }
.semanas[open] > summary::before { content: "▾"; }
.semanas-lista { list-style: none; margin: 0; padding: 0 .9rem; display: grid; gap: .5rem; }
.semana-guardada {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  justify-content: space-between;
  padding: .7rem .8rem; background: var(--neutro); border-radius: 12px;
}
.semana-que { display: flex; flex-direction: column; min-width: 0; }
.semana-que strong { font-size: .92rem; }
.semana-acciones { display: flex; gap: .4rem; align-items: center; }
.semana-acciones .btn { padding: .45rem .8rem; font-size: .82rem; }
.semanas > .nota { padding: .6rem .9rem 0; }

/* ---------- buscador del catálogo ---------- */
.busc-filtros {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end;
  margin: .8rem 0 .6rem;
}
.busc-filtros label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .75rem; color: var(--texto-suave); flex: 1 1 8rem; min-width: 0;
}
.busc-filtros .btn { padding: .55rem .9rem; font-size: .82rem; }

.busc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.chip-filtro {
  border: 1px solid var(--borde); background: var(--neutro); color: var(--texto);
  cursor: pointer; font-size: .78rem; padding: .3rem .7rem; border-radius: 999px;
}
.chip-filtro.activo {
  background: var(--acento); color: var(--sobre-acento); border-color: var(--acento);
}

.busc-cuenta {
  font-size: .85rem; color: var(--texto-suave);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  margin: 0 0 .6rem;
}
/* Alterna el filtro por restricciones. Es un enlace y no un botón
   grande a propósito: enseñar platos que no puedes comer es la
   excepción, no algo que se ofrezca al mismo nivel. */
.busc-alterna {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--acento); font-size: .8rem; text-decoration: underline;
}

.busc-lista { display: grid; gap: .35rem; }
.busc-fila {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .6rem; border: 0; border-radius: 12px;
  background: var(--neutro); cursor: pointer; text-align: left;
}
.busc-fila:hover { background: var(--acento-claro); }
.busc-arte { flex-shrink: 0; display: flex; }
.busc-arte .arte-mini { width: 42px; height: 42px; border-radius: 9px; }
.busc-que { display: flex; flex-direction: column; min-width: 0; }
.busc-nombre {
  font-weight: 600; font-size: .9rem; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.busc-meta { font-size: .75rem; color: var(--texto-suave); }