/* ==========================================================================
   COMER — la pantalla de lo que comes (js/nutricion.js), con el diseño de
   dentro («Pista»): la tarjeta oscura con el anillo de lo que queda, los
   macros en anillos, apuntar de un toque y el diario como la línea del día.

   Lleva sus PROPIOS colores (--cz-*), con los de la app detrás si están:
   esta pantalla también se abre dentro de una ventana (el entrenador
   apuntando por un socio), fuera de `.app`, y ahí no llegan los de la app.
   Todo cuelga de `.cz`; el prefijo cz- no se pisa con nada de app.css.

   El movimiento tiene su porqué: las cosas entran escalonadas una vez, el
   anillo avanza desde donde estaba (al apuntar se ve lo que ha sumado) y lo
   recién apuntado se ilumina. Con «reducir movimiento», todo quieto.
   ========================================================================== */

.cz {
  /* Terracota y crema, no el verde de la app: comer no es entrenar. El
     acento (--cz-a) es el del anillo; --cz-a-texto es el mismo tono bajado
     hasta que contrasta sobre crema, porque el del anillo sobre fondo claro
     no se lee. */
  --cz-a:#E07B2A; --cz-luz:#F2A65A; --cz-2:#C9651A;
  --cz-a-texto:#B8581A;
  --cz-prot:#1F9D5A; --cz-carb:#E07B2A; --cz-gras:#5B6BD6;
  --cz-prot-t:#1A7F49; --cz-carb-t:#C2602A; --cz-gras-t:#4A58B8;
  --cz-verde:#4F8A60; --cz-azul:#4F76AD; --cz-cian:#4E8E9B; --cz-morado:#8B7BB8; --cz-rojo:#C4604F;
  /* La pantalla trae su propio papel: no hereda el de la app a propósito,
     porque entonces en oscuro saldría gris y esto va en crema. */
  --cz-papel:#F3F1EA;
  /* La tarjeta del anillo ya no es oscura: es crema, un punto más cálida que
     el resto, con manchas de color difuminadas por detrás. --cz-hero-sup es
     el tono de las cajitas que van dentro de ella (consejo, datos). */
  --cz-hero:#FFFAF4; --cz-hero-sup:#F6EEE4; --cz-hero-linea:#EFE6DB;
  --cz-blob1:#F6D6C4; --cz-blob2:#DBE8DC; --cz-blob3:#F3E4C8;
  --cz-carta:#FFFDF8;
  --cz-carta-2:#F4EEE6;
  --cz-linea:#EAE0D4;
  --cz-texto:#26221F; --cz-apagado:#6D625A; --cz-tenue:#A89C8F;
  --cz-sombra:0 1px 0 #fff inset, 0 18px 40px -26px rgba(80,55,35,.4);
  --cz-sombra-alta:0 1px 0 #fff inset, 0 26px 54px -26px rgba(80,55,35,.5);
  --cz-tinta:#26221F;
  --cz-curva:var(--curva, cubic-bezier(.22,.8,.28,1));
  --cz-muelle:var(--muelle, cubic-bezier(.34,1.56,.64,1));
  /* Dentro de `.cz` mandan estos, no los de la app: así la pantalla se ve
     igual suelta que dentro de la ventana del entrenador. */
  --texto:var(--cz-texto); --apagado:var(--cz-apagado); --tenue:var(--cz-tenue);
  color:var(--cz-texto);
  font-family:'DM Sans', var(--fuente, system-ui), sans-serif;
  /* El papel crema lo pone la propia pantalla, no la app: si no, las tarjetas
     (que son casi blancas) se perderían sobre el blanco del fondo. Va con
     padding propio para que el color llegue hasta el borde del contenido. */
  background:var(--cz-papel); padding:16px; border-radius:28px;
  display:flex; flex-direction:column; gap:16px;
  container-type:inline-size;
  transition:opacity .25s;
}
/* Aquí va @media y no @container: `.cz` es el contenedor, y un elemento no
   puede consultarse a sí mismo — la regla no llegaría a aplicarse nunca. */
@media (max-width: 620px) { .cz { padding:12px; border-radius:22px; } }
/* Los titulares y toda cifra que se lee de un vistazo. Bricolage aprieta las
   letras y deja la cifra del anillo enorme sin que ocupe media pantalla. */
.cz h2, .cz h3, .cz h4,
.cz .cz-anillo-dentro b, .cz .cz-lado-cifra b, .cz .cz-vaso-val,
.cz .cz-macro-cifra b, .cz .cz-dato b, .cz .cz-bloque-kcal b {
  font-family:'Bricolage Grotesque', 'DM Sans', var(--fuente, system-ui), sans-serif;
}

/* En oscuro no se vuelve gris: se va al mismo marrón de un café cargado, que
   es lo que hace que siga pareciendo esta pantalla y no otra. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cz {
    --cz-papel:#1C1917; --cz-carta:#252120; --cz-carta-2:#2E2926; --cz-linea:#3A332E;
    --cz-hero:#2A2523; --cz-hero-sup:#342E2A; --cz-hero-linea:#3F3730;
    --cz-blob1:#6B4635; --cz-blob2:#3D4F40; --cz-blob3:#5E4C2E;
    --cz-texto:#F2EBE3; --cz-apagado:#BDB1A5; --cz-tenue:#8C8177;
    --cz-a-texto:#E8B08F; --cz-tinta:#F2EBE3;
    --cz-prot-t:#9CCBA8; --cz-carb-t:#A4C2E4; --cz-gras-t:#E6C08C;
    --cz-sombra:0 1px 2px rgba(0,0,0,.4);
    --cz-sombra-alta:0 2px 4px rgba(0,0,0,.45), 0 24px 50px -26px rgba(0,0,0,.8);
  }
}
:root[data-tema="oscuro"] .cz {
  --cz-papel:#1C1917; --cz-carta:#252120; --cz-carta-2:#2E2926; --cz-linea:#3A332E;
  --cz-hero:#2A2523; --cz-hero-sup:#342E2A; --cz-hero-linea:#3F3730;
  --cz-blob1:#6B4635; --cz-blob2:#3D4F40; --cz-blob3:#5E4C2E;
  --cz-texto:#F2EBE3; --cz-apagado:#BDB1A5; --cz-tenue:#8C8177;
  --cz-a-texto:#E8B08F; --cz-tinta:#F2EBE3;
  --cz-prot-t:#9CCBA8; --cz-carb-t:#A4C2E4; --cz-gras-t:#E6C08C;
  --cz-sombra:0 1px 2px rgba(0,0,0,.4);
  --cz-sombra-alta:0 2px 4px rgba(0,0,0,.45), 0 24px 50px -26px rgba(0,0,0,.8);
}
/* Mientras llega lo nuevo (tras apuntar o cambiar de día), lo de antes se
   queda un poco apagado: se nota que está pensando sin que nada salte. */
.cz.cz-cargando { opacity:.62; pointer-events:none; }
.cz h2, .cz h3, .cz h4, .cz p { margin:0; }
.cz button { font:inherit; }

/* ------------------------------------------------------------ la entrada */
.cz-entra { animation:cz-entra .75s var(--cz-curva) backwards; animation-delay:calc(var(--i, 0) * 70ms); }
@keyframes cz-entra { from { opacity:0; transform:translateY(18px) scale(.985); filter:blur(5px); } }
/* Al volver a pintar tras apuntar no se repite la entrada: solo se mueve lo
   que ha cambiado (los anillos y las cifras). */
.cz.cz-sin-entrada .cz-entra { animation:none; }

/* ------------------------------------------------------------ la cabecera */
.cz-cab { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.cz-cab-txt { flex:1; min-width:240px; }
.cz-eti { font-size:13px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--tenue); }
.cz .cz-h1 { font-size:clamp(32px, 5vw, 44px); font-weight:750; letter-spacing:-.045em; line-height:1.03;
  margin-top:6px; text-wrap:balance; }
.cz-plan { font-size:15px; color:var(--apagado); margin-top:8px !important; line-height:1.5; }
.cz-plan b { color:var(--texto); font-weight:750; }
.cz-cab-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cz-fecha { display:flex; align-items:center; gap:2px; height:48px; padding:4px; border-radius:99px;
  background:var(--cz-carta); border:1px solid var(--cz-linea); box-shadow:var(--cz-sombra); }
/* La fecha del medio no es un rótulo: se toca y sale el calendario del mes.
   Por eso lleva subrayado de puntos — si pareciera texto, nadie la tocaría. */
.cz-fecha-hoy { min-width:78px; height:40px; padding:0 10px; border:none; background:none;
  cursor:pointer; text-align:center; font:inherit; font-size:16px; font-weight:750;
  color:var(--texto); border-radius:99px; text-decoration:underline dotted;
  text-underline-offset:4px; text-decoration-color:var(--cz-linea);
  transition:background .2s, transform .3s var(--cz-muelle); }
.cz-fecha-hoy:hover { background:var(--cz-carta-2); text-decoration-color:var(--cz-a); }
.cz-fecha-hoy:active { transform:scale(.94); }
.cz-fecha-b { width:40px; height:40px; border-radius:50%; border:none; background:none; cursor:pointer;
  font-size:22px; line-height:1; color:var(--apagado); display:grid; place-items:center;
  transition:background .2s, color .2s, transform .3s var(--cz-muelle); }
.cz-fecha-b:hover { background:var(--cz-carta-2); color:var(--texto); }
.cz-fecha-b:active { transform:scale(.88); }
.cz-volver { height:48px; padding:0 18px; border-radius:99px; border:none; cursor:pointer;
  font-size:15px; font-weight:750; color:#fff;
  background:linear-gradient(135deg, var(--cz-a), var(--cz-2));
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--cz-a) 90%, transparent);
  transition:transform .3s var(--cz-muelle); }
.cz-volver:active { transform:scale(.95); }

/* ------------------------------------------------------ las dos columnas */
.cz-arriba, .cz-abajo { display:flex; flex-direction:column; gap:16px; min-width:0; }
.cz-lado { display:flex; flex-direction:column; gap:16px; min-width:0; }
@container (min-width: 900px) {
  .cz-arriba { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:stretch; }
  .cz-abajo { display:grid; grid-template-columns:minmax(0, 1fr) 340px; align-items:start; }
}
/* En una columna, apuntar (lo que más se usa) va justo debajo del anillo, y
   los macros después: no hay que bajar dos pantallas para apuntar algo. */
@container (max-width: 899px) {
  .cz-arriba { display:contents; }
  .cz-hero { order:1; } .cz-apuntar { order:2; } .cz-macros { order:3; } .cz-abajo { order:4; }
}

/* ---------------------------------------------------------- las tarjetas */
.cz-carta { background:var(--cz-carta); border:1px solid var(--cz-linea); border-radius:26px;
  box-shadow:var(--cz-sombra); padding:18px; min-width:0;
  transition:transform .45s var(--cz-curva), box-shadow .45s var(--cz-curva); }
.cz-carta-cab { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cz-carta-cab.con-ico { align-items:center; justify-content:flex-start; }
.cz-carta-cab h3 { font-size:19px; font-weight:750; letter-spacing:-.025em; }
.cz-carta-cab > span { font-size:14px; color:var(--tenue); font-weight:650; }
.cz-ico { width:40px; height:40px; flex:0 0 40px; border-radius:13px; display:grid; place-items:center;
  color:var(--c, var(--cz-a));
  background:linear-gradient(135deg, color-mix(in srgb, var(--c, var(--cz-a)) 22%, transparent),
                                     color-mix(in srgb, var(--c, var(--cz-a)) 8%, transparent)); }
.cz-ico .ico-svg { width:20px; height:20px; }
.cz-ico.ambar { --c:var(--cz-gras); } .cz-ico.azul { --c:var(--cz-azul); }
.cz-ico.cian { --c:var(--cz-cian); } .cz-ico.morado { --c:var(--cz-morado); }
.cz-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:4px 4px 12px; }
.cz-h h3 { font-size:21px; font-weight:750; letter-spacing:-.03em; }
.cz-h > span { font-size:14px; color:var(--tenue); font-weight:650; text-align:right; }
.cz-texto { font-size:15px; line-height:1.5; color:var(--apagado); margin-top:12px !important; }
.cz-texto b { color:var(--texto); font-weight:750; }
.cz-barra { height:8px; border-radius:99px; background:color-mix(in srgb, var(--texto, #1A1C1B) 8%, transparent);
  overflow:hidden; margin-top:10px; }
.cz-barra i { display:block; height:100%; border-radius:99px; max-width:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c, var(--cz-a)) 60%, #fff), var(--c, var(--cz-a)));
  animation:cz-barra 1.3s var(--cz-curva) .35s backwards; }
@keyframes cz-barra { from { width:0; } }
.cz-barra.ambar { --c:var(--cz-gras); } .cz-barra.azul { --c:var(--cz-azul); }
.cz-pastilla { flex:0 0 auto; font-size:14px; font-weight:800; padding:6px 11px; border-radius:99px;
  background:var(--cz-carta-2); color:var(--apagado); font-variant-numeric:tabular-nums; }
.cz-pastilla.ok { background:color-mix(in srgb, var(--cz-verde) 14%, transparent); color:var(--cz-prot-t); }
.cz-pastilla.medio { background:color-mix(in srgb, var(--cz-gras) 16%, transparent); color:var(--cz-gras-t); }
@media (hover:hover) {
  .cz-carta:hover { transform:translateY(-2px); box-shadow:var(--cz-sombra-alta); }
  .cz-apuntar:hover, .cz-vacio:hover { transform:none; box-shadow:var(--cz-sombra); }
}

/* ==================================================== la tarjeta del anillo
   Crema, como el resto, pero con tres manchas de color difuminadas por detrás
   que se mueven muy despacio. Son la única cosa viva de una pantalla que por
   lo demás está quieta, y por eso no pueden ir rápido: si se notan, molestan.
   `isolation` las mantiene detrás del contenido sin sacarlas de la tarjeta. */
.cz-hero { position:relative; overflow:hidden; isolation:isolate; border-radius:32px; padding:20px;
  background:var(--cz-hero); color:var(--cz-texto); min-width:0; display:flex; flex-direction:column;
  border:1px solid var(--cz-hero-linea);
  box-shadow:0 1px 0 #fff inset, 0 30px 56px -30px rgba(80,55,35,.45); }
.cz-hero::before, .cz-hero::after { content:""; position:absolute; z-index:-1; border-radius:50%;
  filter:blur(50px); pointer-events:none; }
.cz-hero::before { width:300px; height:300px; left:-110px; top:-140px; opacity:.85;
  background:radial-gradient(closest-side, var(--cz-blob1), transparent);
  animation:brillo-1 12s ease-in-out infinite alternate; }
.cz-hero::after { width:260px; height:260px; right:-100px; bottom:-130px; opacity:.8;
  background:radial-gradient(closest-side, var(--cz-blob2), transparent);
  animation:brillo-2 15s ease-in-out infinite alternate; }
.cz-hero-cab { position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; }
/* La tercera mancha no cabe en un pseudoelemento más de `.cz-hero` (ya usa
   los dos), así que cuelga de la cabecera y se sale de ella hacia el centro. */
.cz-hero-cab::before { content:""; position:absolute; z-index:-1; width:220px; height:220px;
  right:12%; top:40px; border-radius:50%; filter:blur(50px); opacity:.7; pointer-events:none;
  background:radial-gradient(closest-side, var(--cz-blob3), transparent);
  animation:brillo-1 18s ease-in-out infinite alternate-reverse; }
.cz-hero-eti { font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cz-a-texto); }

/* La nota del día: un semáforo con su luz que late. */
.cz-nota { --s:var(--cz-tenue); display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 13px;
  border-radius:99px; font-size:14px; font-weight:700; color:var(--cz-texto);
  background:color-mix(in srgb, var(--s) 16%, var(--cz-hero));
  border:1px solid color-mix(in srgb, var(--s) 32%, transparent); }
.cz-nota i { width:9px; height:9px; border-radius:50%; background:var(--s);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--s) 25%, transparent), 0 0 12px var(--s);
  animation:cz-late 2.4s ease-in-out infinite; }
.cz-nota.bien { --s:var(--cz-verde); } .cz-nota.medio { --s:var(--cz-gras-t); }
.cz-nota.mal { --s:var(--cz-rojo); }
@keyframes cz-late { 50% { transform:scale(.7); opacity:.6; } }

.cz-hero-centro { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:8px; margin:14px 0 6px; }
.cz-lado-cifra { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; min-width:0; }
.cz-lado-cifra small { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cz-tenue); }
.cz-lado-cifra b { font-size:clamp(22px, 6.4cqi, 30px); font-weight:750; letter-spacing:-.04em; line-height:1.1;
  color:var(--cz-texto); font-variant-numeric:tabular-nums; }
.cz-lado-cifra span { font-size:13px; color:var(--cz-apagado); font-weight:650; }

/* El anillo grande. El trazo y la bolita de la punta avanzan juntos desde
   donde estaban (--vacio/--giro-desde) hasta donde toca (--lleno/--giro). */
.cz-anillo { position:relative; width:clamp(158px, 46cqi, 214px); aspect-ratio:1; }
.cz-anillo svg { display:block; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.cz-anillo-fondo { fill:none; stroke:var(--cz-hero-linea); }
.cz-anillo-linea { fill:none; stroke-dashoffset:var(--lleno);
  filter:drop-shadow(0 6px 10px color-mix(in srgb, var(--cz-2) 35%, transparent));
  animation:cz-arco 1.5s var(--cz-curva) .2s backwards; }
@keyframes cz-arco { from { stroke-dashoffset:var(--vacio); } }
.cz-g1 { stop-color:#F2D3BC; } .cz-g2 { stop-color:#E8B08F; } .cz-g3 { stop-color:#C9795A; }
/* Cuando uno se pasa, el anillo se va al rojo de esta paleta — no al rojo de
   alarma de antes: avisa, pero sin regañar. */
.cz-anillo.pasado .cz-g1 { stop-color:#E2B98A; } .cz-anillo.pasado .cz-g2 { stop-color:#D07A5E; }
.cz-anillo.pasado .cz-g3 { stop-color:#C4604F; }
.cz-anillo.pasado .cz-anillo-linea { animation:cz-arco 1.5s var(--cz-curva) .2s backwards, cz-aviso 2.4s ease-in-out 1.8s infinite; }
.cz-anillo.pasado .cz-anillo-linea { filter:drop-shadow(0 0 8px rgba(229,72,77,.55)); }
@keyframes cz-aviso { 50% { filter:drop-shadow(0 0 16px rgba(229,72,77,.9)); } }
.cz-anillo-punta { position:absolute; inset:0; transform:rotate(var(--giro)); pointer-events:none;
  animation:cz-giro 1.5s var(--cz-curva) .2s backwards; }
@keyframes cz-giro { from { transform:rotate(var(--giro-desde)); } }
.cz-anillo-punta::before { content:""; position:absolute; left:50%; top:4%; width:7.5%; aspect-ratio:1;
  transform:translate(-50%, -50%); border-radius:50%; background:var(--cz-hero);
  box-shadow:0 0 0 4px var(--cz-2), 0 6px 14px -4px color-mix(in srgb, var(--cz-2) 70%, transparent); }
.cz-anillo.vacio .cz-anillo-punta { display:none; }
.cz-anillo-dentro { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; pointer-events:none; padding:0 14%; }
.cz-anillo-dentro b { font-size:clamp(38px, 12cqi, 52px); font-weight:750; letter-spacing:-.05em; line-height:1;
  color:var(--cz-texto); font-variant-numeric:tabular-nums; }
.cz-anillo-dentro span { font-size:14px; font-weight:650; color:var(--cz-apagado); margin-top:4px; }
.cz-anillo-dentro em { font-style:normal; font-size:12.5px; font-weight:750; margin-top:8px; padding:3px 9px;
  border-radius:99px; background:var(--cz-hero-sup); color:var(--cz-a-texto); }

.cz-consejo { margin-top:12px; padding:12px 14px; border-radius:18px; background:var(--cz-hero-sup);
  border:1px solid var(--cz-hero-linea); }
.cz-consejo small { display:block; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cz-a-texto); margin-bottom:3px; }
.cz-consejo p { font-size:16.5px; line-height:1.45; color:var(--cz-texto); font-weight:600; text-wrap:pretty; }
.cz-reloj-fila { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:12px; }
.cz-dato { padding:10px 11px; border-radius:16px; background:var(--cz-hero-sup); min-width:0; }
.cz-dato small { display:block; font-size:12px; color:var(--cz-tenue); line-height:1.3; font-weight:650; }
.cz-dato b { display:block; font-size:19px; letter-spacing:-.03em; color:var(--cz-texto); margin-top:3px;
  font-variant-numeric:tabular-nums; }
.cz-dato b span { font-size:12px; font-weight:650; color:var(--cz-tenue); letter-spacing:0; }
.cz-dato.verde b { color:var(--cz-prot-t); } .cz-dato.azul b { color:var(--cz-carb-t); }
.cz-dato.ambar b { color:var(--cz-gras-t); }
.cz-hero-nota { display:flex; align-items:center; gap:8px; font-size:14px; line-height:1.45;
  color:var(--cz-apagado); margin:12px 0 14px !important; }
.cz-hero-nota .ico-svg { width:18px; height:18px; flex:0 0 18px; color:var(--cz-rojo); }
.cz-hero-pie { display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px;
  border-top:1px solid var(--cz-hero-linea); font-size:14px; font-weight:650; color:var(--cz-apagado); }
.cz-hero-pie span:last-child { color:var(--cz-texto); }

/* ============================================================ los macros */
.cz-macros { display:flex; flex-direction:column; }
.cz-macros-fila { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:14px; flex:1; }
.cz-macro { --m:var(--cz-prot); --mt:var(--cz-prot-t); display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:8px; padding:12px 6px 14px; border-radius:22px; min-width:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--m) 9%, transparent), transparent 75%);
  animation:cz-entra .7s var(--cz-curva) backwards; animation-delay:calc(.25s + var(--i, 0) * 90ms); }
.cz.cz-sin-entrada .cz-macro { animation:none; }
.cz-macro.carb { --m:var(--cz-carb); --mt:var(--cz-carb-t); }
.cz-macro.gras { --m:var(--cz-gras); --mt:var(--cz-gras-t); }
/* El vaso. El líquido es un bloque anclado abajo cuya altura es el porcentaje;
   sube desde donde estaba (--desde) hasta donde toca (--alto). Las dos `i` son
   las manchas que giran detrás del borde y hacen la ondita: van más anchas que
   el vaso y asomando por encima del líquido, y el `overflow:hidden` del vaso
   les recorta todo lo que se sale. */
.cz-vaso { position:relative; width:100%; height:150px; border-radius:20px; overflow:hidden;
  background:color-mix(in srgb, var(--m) 12%, var(--cz-carta));
  border:1px solid color-mix(in srgb, var(--m) 22%, transparent); }
.cz-liq { position:absolute; left:0; right:0; bottom:0; height:var(--alto, 0%);
  background:color-mix(in srgb, var(--m) 62%, #fff);
  animation:cz-sube 1.4s var(--cz-curva) backwards; animation-delay:calc(.3s + var(--i, 0) * 110ms); }
@keyframes cz-sube { from { height:var(--desde, 0%); } }
.cz-liq i { position:absolute; left:50%; bottom:calc(100% - 14px); width:230%; height:130px;
  border-radius:43% 47% 44% 40%; background:inherit; transform-origin:50% 50%;
  animation:cz-gira 9s linear infinite; }
.cz-liq i:last-child { border-radius:40% 44% 47% 43%; opacity:.6;
  animation:cz-gira 13s linear infinite reverse; }
@keyframes cz-gira { to { transform:translateX(-50%) rotate(360deg); } }
/* El translateX vive en el keyframe, así que el estado quieto lo necesita
   también: sin esto la mancha salta al arrancar la animación. */
.cz-liq i { transform:translateX(-50%); }
.cz-vaso-val { position:absolute; inset:auto 0 0; padding:0 0 14px; display:flex; align-items:flex-end;
  justify-content:center; font-size:26px; font-weight:800; letter-spacing:-.04em; color:var(--mt);
  font-variant-numeric:tabular-nums; }
.cz-vaso-val small { font-size:14px; font-weight:750; margin-left:1px; }
.cz-macro.cubierto .cz-vaso::after { content:"✓"; position:absolute; right:8px; top:8px; width:24px; height:24px;
  border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; color:#fff;
  background:var(--mt); box-shadow:0 0 0 3px var(--cz-carta);
  animation:cz-pop .5s var(--cz-muelle) 1.2s backwards; }
@keyframes cz-pop { from { transform:scale(0); } }
.cz-macro-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cz-macro-n { font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mt); }
.cz-macro-cifra { font-size:14px; color:var(--tenue); font-weight:650; }
.cz-macro-cifra b { font-size:22px; color:var(--texto); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.cz-macro-falta { font-size:13.5px; font-weight:700; color:var(--apagado); }
.cz-macro.cubierto .cz-macro-falta { color:var(--mt); }
.cz-macro-frase { display:none; font-size:14px; line-height:1.5; color:var(--apagado); text-wrap:pretty; }
.cz-macro-frase b { color:var(--texto); }
.cz-macro-pie { display:flex; flex-direction:column; gap:1px; font-size:12.5px; color:var(--tenue); font-weight:600; }
@container (min-width: 620px) {
  .cz-macro-frase { display:block; }
  .cz-macro-falta { display:none; }
  .cz-macros-fila { gap:12px; }
  .cz-macro { padding:14px 12px 16px; }
}

.cz-fibra { display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:14px;
  border-top:1px solid var(--cz-linea); }
.cz-fibra-txt { flex:1; min-width:0; }
.cz-fibra-txt > span { display:block; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tenue); }
.cz-fibra-txt b { font-size:20px; letter-spacing:-.02em; }
.cz-fibra-txt b small { font-size:14px; font-weight:600; color:var(--tenue); letter-spacing:0; }
.cz-fibra .cz-barra { margin-top:7px; height:7px; }

/* ================================================================ apuntar */
.cz-apuntar { position:relative; overflow:hidden; }
.cz-apuntar::before { content:""; position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg, var(--cz-luz), var(--cz-a), var(--cz-2)); }
.cz-apuntar-cab { display:flex; align-items:center; gap:12px; }
.cz-apuntar-ico { width:48px; height:48px; flex:0 0 48px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--cz-luz), var(--cz-2));
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--cz-2) 80%, transparent); }
.cz-apuntar-ico .ico-svg { width:24px; height:24px; animation:cz-cuchara 3.2s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes cz-cuchara { 0%, 80%, 100% { transform:none; } 86% { transform:rotate(-10deg); } 93% { transform:rotate(8deg); } }
.cz-apuntar-cab h3 { font-size:20px; font-weight:750; letter-spacing:-.025em; }
.cz-apuntar-cab small { display:block; font-size:14.5px; color:var(--apagado); line-height:1.4; margin-top:2px; }

/* En qué comida: botones grandes, uno encendido. En el móvil se deslizan. */
.cz-momentos { display:flex; gap:8px; margin:16px -18px 0; padding:2px 18px 4px; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none; }
.cz-momentos::-webkit-scrollbar { display:none; }
.cz-mom { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 16px 0 13px;
  border-radius:99px; border:1.5px solid var(--cz-linea); background:var(--cz-carta-2); color:var(--apagado);
  font-size:15px; font-weight:700; cursor:pointer; scroll-snap-align:start; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .3s var(--cz-muelle); }
.cz-mom .ico-svg { width:19px; height:19px; }
.cz-mom:hover { color:var(--texto); border-color:color-mix(in srgb, var(--cz-a) 35%, transparent); }
.cz-mom:active { transform:scale(.94); }
.cz-mom.on { color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--cz-a), var(--cz-2));
  box-shadow:0 10px 20px -12px color-mix(in srgb, var(--cz-a) 95%, transparent); }
.cz-mom.on .ico-svg { animation:cz-pop .45s var(--cz-muelle); }
.cz-oculto { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; border:0 !important; }

/* El buscador: una pastilla grande, con la lupa y el botón de escanear. */
.cz-busca { position:relative; display:flex; align-items:center; gap:4px; margin-top:12px; height:60px;
  padding:0 7px 0 6px; border-radius:99px; background:var(--cz-carta-2); border:1.5px solid var(--cz-linea);
  transition:border-color .2s, box-shadow .2s, background .2s; }
.cz-busca:focus-within { border-color:var(--cz-a); background:var(--cz-carta);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cz-a) 18%, transparent); }
.cz-lupa { width:46px; height:46px; flex:0 0 46px; border-radius:50%; border:none; background:none; cursor:pointer;
  color:var(--tenue); display:grid; place-items:center; }
.cz-lupa .ico-svg { width:22px; height:22px; }
.cz-busca:focus-within .cz-lupa { color:var(--cz-a-texto); }
.cz .cz-busca input { flex:1; min-width:0; height:100%; padding:0; background:none; font-size:17px;
  color:var(--texto); border:none !important; box-shadow:none !important; outline:none; }
.cz .cz-busca input:focus { border:none !important; box-shadow:none !important; }
.cz .cz-busca input::placeholder { color:var(--tenue); }
.cz-escanear { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:46px; padding:0 16px;
  border-radius:99px; border:none; cursor:pointer; font-size:15px; font-weight:750; color:#fff;
  background:var(--cz-tinta); transition:transform .3s var(--cz-muelle), box-shadow .3s; }
.cz-escanear .ico-svg { width:19px; height:19px; }
.cz-escanear:hover { box-shadow:0 10px 20px -10px rgba(0,0,0,.6); }
.cz-escanear:active { transform:scale(.94); }
.cz-fotoia { flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px;
  border-radius:50%; border:none; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--cz-morado, #8e44ad), color-mix(in srgb, var(--cz-morado, #8e44ad) 70%, transparent));
  transition:transform .3s var(--cz-muelle), box-shadow .3s; }
.cz-fotoia .ico-svg { width:22px; height:22px; }
.cz-fotoia:hover { box-shadow:0 10px 20px -10px color-mix(in srgb, var(--cz-morado, #8e44ad) 50%, transparent); }
.cz-fotoia:active { transform:scale(.94); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cz-escanear { background:#332D29; } }
:root[data-tema="oscuro"] .cz-escanear { background:#332D29; }
/* Mientras busca: una línea de luz que recorre el borde de abajo. */
.cz-busca.buscando::after { content:""; position:absolute; left:28px; right:28px; bottom:-1.5px; height:2px;
  border-radius:2px; background:linear-gradient(90deg, transparent, var(--cz-a), transparent);
  background-size:40% 100%; background-repeat:no-repeat; animation:cz-busca 1s linear infinite; }
@keyframes cz-busca { from { background-position:-40% 0; } to { background-position:140% 0; } }

.cz-resultados { display:flex; flex-direction:column; gap:8px; }
.cz-resultados:not(:empty) { margin-top:10px; }
.cz-res { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:12px 12px 12px 16px; border-radius:20px; background:var(--cz-carta); color:var(--texto);
  border:1px solid var(--cz-linea); box-shadow:var(--cz-sombra);
  animation:cz-sube .45s var(--cz-curva) backwards; animation-delay:calc(var(--i, 0) * 45ms);
  transition:transform .3s var(--cz-curva), border-color .2s; }
@keyframes cz-sube { from { opacity:0; transform:translateY(10px); } }
.cz-res:hover { transform:translateX(4px); border-color:color-mix(in srgb, var(--cz-a) 40%, transparent); }
.cz-res:active { transform:scale(.98); }
.cz-res-txt { flex:1; min-width:0; }
.cz-res-txt b { display:block; font-size:16.5px; font-weight:700; }
.cz-res-txt small { font-size:13.5px; color:var(--tenue); }
.cz-res-txt i { font-style:normal; opacity:.8; }
.cz-res-mas { width:40px; height:40px; flex:0 0 40px; border-radius:50%; display:grid; place-items:center;
  font-size:24px; font-weight:600; color:#fff; line-height:1;
  background:linear-gradient(135deg, var(--cz-a), var(--cz-2));
  box-shadow:0 8px 16px -8px color-mix(in srgb, var(--cz-a) 90%, transparent);
  transition:transform .35s var(--cz-muelle); }
.cz-res:hover .cz-res-mas { transform:rotate(90deg) scale(1.06); }
.cz-res-nada { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border-radius:20px; background:var(--cz-carta-2); font-size:15.5px; color:var(--apagado);
  animation:cz-sube .4s var(--cz-curva) backwards; }
.cz-res-nada-b { display:flex; gap:8px; flex-wrap:wrap; }
.cz-res-nada-b .ico-svg { width:16px; height:16px; }

/* El «≈ IA» de un plato estimado: se ve en el buscador cada vez que sale, para
   que nadie se lo tome por un dato de envase. */
.cz-est { font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.04em; vertical-align:2px;
  padding:2px 7px; border-radius:99px; color:var(--cz-morado);
  background:color-mix(in srgb, var(--cz-morado) 14%, transparent); }

/* La ventana de estimar un plato con IA. */
.cz-ia-espera { display:flex; align-items:center; gap:10px; padding:18px 4px; font-size:16px; color:var(--apagado); }
.cz-ia-espera .ico-svg { width:22px; height:22px; flex:0 0 22px; color:var(--cz-morado);
  animation:cz-pensando 1.4s ease-in-out infinite; }
@keyframes cz-pensando { 50% { opacity:.35; transform:scale(.88); } }
.cz-ia-no { font-size:15.5px; line-height:1.5; color:var(--apagado); padding:6px 0 4px; }
.cz-ia-aviso { font-size:14px; line-height:1.5; color:var(--apagado); margin-bottom:14px !important;
  padding:11px 13px; border-radius:16px; border:1px solid color-mix(in srgb, var(--cz-morado) 30%, transparent);
  background:color-mix(in srgb, var(--cz-morado) 9%, transparent); }
.cz-ia-por, .cz-ia-racion { font-size:13.5px; color:var(--tenue); margin:0 0 8px !important; }
.cz-ia-racion { margin:10px 0 0 !important; }

/* Lo de siempre: tarjetitas que se deslizan, cada una con su +. */
.cz-siempre { margin-top:16px; }
.cz-siempre-eti { display:block; font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tenue); margin:0 2px 8px; }
.cz-siempre-eti small { font-size:12.5px; font-weight:650; letter-spacing:0; text-transform:none; }
.cz-siempre-fila { display:flex; gap:8px; margin:0 -18px; padding:2px 18px 6px; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:none; }
.cz-siempre-fila::-webkit-scrollbar { display:none; }
@container (min-width: 900px) { .cz-siempre-fila { flex-wrap:wrap; overflow:visible; } }
.cz-frec { flex:0 0 auto; display:flex; align-items:center; gap:10px; max-width:250px; padding:10px 14px 10px 10px;
  border-radius:18px; border:1px solid var(--cz-linea); background:var(--cz-carta-2); color:var(--texto);
  text-align:left; cursor:pointer; scroll-snap-align:start;
  transition:transform .3s var(--cz-muelle), border-color .2s, background .2s; }
.cz-frec:hover { border-color:color-mix(in srgb, var(--cz-a) 40%, transparent); background:var(--cz-carta); }
.cz-frec:active { transform:scale(.95); }
.cz-frec-mas { width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center;
  font-size:20px; font-weight:700; line-height:1; color:var(--cz-a-texto);
  background:color-mix(in srgb, var(--cz-a) 16%, transparent); transition:transform .35s var(--cz-muelle); }
.cz-frec:hover .cz-frec-mas { transform:rotate(90deg); }
.cz-frec-txt { min-width:0; }
.cz-frec-txt b { display:block; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cz-frec-txt small { font-size:13px; color:var(--tenue); }
.cz-frec.cz-apuntando { opacity:.6; }
.cz-frec.cz-apuntando .cz-frec-mas { animation:cz-gira-mas .8s linear infinite; }
@keyframes cz-gira-mas { to { transform:rotate(360deg); } }

/* ================================================= el diario: la línea */
.cz-linea { position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
/* La raya que une los momentos del día: se dibuja de arriba abajo. */
.cz-linea::before { content:""; position:absolute; left:21px; top:24px; bottom:24px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--cz-luz), color-mix(in srgb, var(--cz-2) 55%, transparent));
  transform-origin:top; animation:cz-raya 1.1s var(--cz-curva) .3s backwards; }
@keyframes cz-raya { from { transform:scaleY(0); } }
.cz-momento { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; }
.cz-nodo { position:relative; z-index:1; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  color:#fff; margin-top:10px;
  background:linear-gradient(150deg, var(--cz-luz), var(--cz-2));
  /* El halo recorta la raya por detrás del nodo, así que tiene que ser del
     color del papel de ESTA pantalla, no del de la app: con `--fondo` salía
     un cerco blanco sobre el crema. */
  box-shadow:0 0 0 5px var(--cz-papel), 0 10px 20px -10px color-mix(in srgb, var(--cz-2) 90%, transparent);
  animation:cz-pop .55s var(--cz-muelle) backwards; }
.cz-nodo .ico-svg { width:21px; height:21px; }
.cz-momento:nth-child(2) .cz-nodo { animation-delay:.12s; } .cz-momento:nth-child(3) .cz-nodo { animation-delay:.24s; }
.cz-momento:nth-child(4) .cz-nodo { animation-delay:.36s; } .cz-momento:nth-child(5) .cz-nodo { animation-delay:.48s; }
.cz-momento:nth-child(6) .cz-nodo { animation-delay:.6s; }
.cz-bloque { background:var(--cz-carta); border:1px solid var(--cz-linea); border-radius:24px; box-shadow:var(--cz-sombra);
  padding:14px 14px 6px 16px; min-width:0;
  animation:cz-desliza .65s var(--cz-curva) backwards; }
.cz-momento:nth-child(2) .cz-bloque { animation-delay:.1s; } .cz-momento:nth-child(3) .cz-bloque { animation-delay:.2s; }
.cz-momento:nth-child(4) .cz-bloque { animation-delay:.3s; } .cz-momento:nth-child(5) .cz-bloque { animation-delay:.4s; }
.cz-momento:nth-child(6) .cz-bloque { animation-delay:.5s; }
@keyframes cz-desliza { from { opacity:0; transform:translateX(18px); } }
.cz.cz-sin-entrada :is(.cz-nodo, .cz-bloque) { animation:none; }
.cz.cz-sin-entrada .cz-linea::before { animation:none; }
.cz-bloque-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.cz-bloque-titulo small { font-size:13px; font-weight:750; color:var(--tenue); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.cz-bloque-titulo h4 { font-size:19px; font-weight:750; letter-spacing:-.025em; line-height:1.2; }
.cz-bloque-kcal { text-align:right; flex:0 0 auto; white-space:nowrap; }
.cz-bloque-kcal b { font-size:24px; font-weight:750; letter-spacing:-.04em; line-height:1.1; font-variant-numeric:tabular-nums; }
.cz-bloque-kcal span { font-size:12.5px; color:var(--tenue); font-weight:650; }
.cz-reparto { display:flex; gap:3px; height:7px; margin-top:10px; border-radius:99px; overflow:hidden; }
.cz-reparto i { display:block; min-width:4px; border-radius:99px; transform-origin:left;
  animation:cz-crece .9s var(--cz-curva) .35s backwards; }
@keyframes cz-crece { from { transform:scaleX(0); } }
.cz-reparto .prot { background:var(--cz-prot); } .cz-reparto .carb { background:var(--cz-carb); }
.cz-reparto .gras { background:var(--cz-gras); }
.cz-bloque-macros { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cz-bloque-macros span { font-size:13px; font-weight:750; padding:3px 9px; border-radius:99px; font-variant-numeric:tabular-nums; }
.cz-bloque-macros .prot { color:var(--cz-prot-t); background:color-mix(in srgb, var(--cz-prot) 12%, transparent); }
.cz-bloque-macros .carb { color:var(--cz-carb-t); background:color-mix(in srgb, var(--cz-carb) 12%, transparent); }
.cz-bloque-macros .gras { color:var(--cz-gras-t); background:color-mix(in srgb, var(--cz-gras) 14%, transparent); }
.cz-platos { list-style:none; margin:10px 0 0; padding:0; }
.cz-plato { display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"n k x" "d d x";
  align-items:center; column-gap:10px; row-gap:2px; padding:11px 0; border-top:1px solid var(--cz-linea);
  transition:background .2s; }
.cz-plato-n { grid-area:n; font-size:16px; font-weight:650; line-height:1.3; min-width:0; }
.cz-plato-kcal { grid-area:k; font-size:16px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cz-plato-kcal small { font-size:12.5px; color:var(--tenue); font-weight:650; }
.cz-plato-det { grid-area:d; font-size:13.5px; color:var(--tenue); line-height:1.4; }
.cz-plato-mac { white-space:nowrap; }
.cz-plato .cz-quitar, .cz-plato-acciones { grid-area:x; }
.cz-plato-acciones { display:flex; align-items:center; gap:2px; }
.cz-quitar, .cz-editar { width:38px; height:38px; flex:0 0 38px; border-radius:50%; border:none; background:none; cursor:pointer;
  color:var(--tenue); font-size:15px; display:grid; place-items:center;
  transition:background .2s, color .2s, transform .3s var(--cz-muelle); }
.cz-quitar:hover { background:color-mix(in srgb, var(--cz-rojo) 12%, transparent); color:var(--cz-rojo); }
.cz-quitar:active, .cz-editar:active { transform:scale(.85); }
.cz-editar:hover { background:color-mix(in srgb, var(--cz-a) 14%, transparent); color:var(--cz-a); }
/* La hora a la que se comió, delante del nombre: una pastilla pequeña que se
   lee sin robarle sitio al plato. */
.cz-plato-hora { display:inline-block; margin-right:7px; padding:1px 7px; border-radius:99px;
  font-size:12.5px; font-weight:750; font-variant-numeric:tabular-nums; vertical-align:1px;
  color:var(--tenue); background:color-mix(in srgb, var(--cz-linea) 60%, transparent); }
/* Lo recién apuntado se ilumina un momento; lo que se quita se va. */
.cz-plato.cz-nueva { animation:cz-nueva 2.2s var(--cz-curva) .3s backwards; }
@keyframes cz-nueva {
  0% { background:color-mix(in srgb, var(--cz-a) 26%, transparent); transform:translateX(-10px);
       box-shadow:-10px 0 0 color-mix(in srgb, var(--cz-a) 26%, transparent), 10px 0 0 color-mix(in srgb, var(--cz-a) 26%, transparent); }
  25% { transform:none; }
  100% { background:transparent; box-shadow:none; }
}
/* Apuntado sin cobertura: cuenta y se ve igual que lo demás, con una flecha
   girando detrás del nombre. No es un error, así que no se pinta de rojo; solo
   avisa de que todavía no está en el servidor (y por eso no se puede tocar). */
.cz-plato-cola { display:inline-block; margin-left:7px; font-size:12.5px; color:var(--tenue);
  vertical-align:1px; animation:cz-gira 1.6s linear infinite; }
@keyframes cz-gira { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .cz-plato-cola { animation:none; } }

.cz-plato.cz-saliendo { animation:cz-sale .35s var(--cz-curva) forwards; }
@keyframes cz-sale { to { opacity:0; transform:translateX(28px); } }

/* El repaso del día con IA. */
.cz-repaso .btn-ancho { margin-top:12px; }
.cz-repaso .btn-ancho.cz-apuntando { opacity:.6; pointer-events:none; }
.cz-repaso-espera { opacity:.7; animation:cz-late 1.4s ease-in-out infinite; }
@keyframes cz-late { 50% { opacity:1; } }
.cz-repaso-txt { margin-top:14px; padding:14px 16px; border-radius:16px; font-size:15px; line-height:1.55;
  background:color-mix(in srgb, var(--cz-a) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--cz-a) 18%, transparent); white-space:pre-line; }
.cz-repaso-pie { display:block; margin-top:8px; font-size:12.5px; color:var(--tenue); }
/* Lo que comer para cerrar el día: lo importante de la tarjeta, así que se
   separa de la lectura y cada alimento va en su línea, con la cantidad
   gorda y lo que aporta debajo en pequeño. */
.cz-repaso-cierre { margin-top:12px; padding:14px 16px; border-radius:16px;
  background:color-mix(in srgb, var(--cz-verde) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--cz-verde) 22%, transparent); }
.cz-repaso-eti { display:block; font-size:12px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--tenue); margin-bottom:8px; }
.cz-repaso-lista { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.cz-repaso-lista li { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; line-height:1.4; }
.cz-repaso-lista li b { font-size:15.5px; font-weight:700; }
.cz-repaso-lista li small { font-size:12.5px; color:var(--tenue); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
/* Cuando ha saltado solo (al 75 % del día) se le nota un poco, para que se
   entienda que nadie lo ha pedido. */
.cz-repaso-solo { animation:cz-nueva 2.2s var(--cz-curva) .4s backwards; }

/* Sin nada apuntado: el plato vacío, que flota. */
.cz-vacio { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:28px 20px 30px; }
.cz-vacio-plato { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; margin-bottom:8px;
  color:var(--cz-a-texto); background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cz-luz) 55%, transparent),
    color-mix(in srgb, var(--cz-a) 14%, transparent));
  box-shadow:0 0 0 10px color-mix(in srgb, var(--cz-a) 7%, transparent);
  animation:cz-flota 3.6s ease-in-out infinite; }
.cz-vacio-plato .ico-svg { width:34px; height:34px; }
@keyframes cz-flota { 50% { transform:translateY(-6px); box-shadow:0 0 0 16px color-mix(in srgb, var(--cz-a) 4%, transparent); } }
.cz-vacio b { font-size:18px; letter-spacing:-.02em; }
.cz-vacio small { font-size:15px; color:var(--apagado); line-height:1.45; max-width:34ch; }
.cz-sin-plan .cz-vacio { background:var(--cz-carta); border:1px solid var(--cz-linea); border-radius:26px;
  box-shadow:var(--cz-sombra); }

/* ================================================================ el lado */
.cz-diario { min-width:0; }
.cz-reloj .cz-barra { margin-top:6px; }
.cz-semana .cz-texto { text-align:center; }
.cz-filas { display:flex; flex-direction:column; margin-top:12px; }
.cz-filas > div { display:flex; justify-content:space-between; gap:10px; padding:9px 0; font-size:15px;
  color:var(--apagado); border-top:1px solid var(--cz-linea); }
.cz-filas > div:first-child { border-top:none; }
.cz-filas b { color:var(--texto); font-variant-numeric:tabular-nums; }
.cz-filas b.verde { color:var(--cz-prot-t); }
.cz-carta-cab.con-ico { gap:12px; }

/* La semana: burbujas con el color de la nota de cada día. */
.cz-dias { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin-top:14px; }
.cz-dia { display:flex; flex-direction:column; align-items:center; gap:5px; padding:2px 0; border:none; background:none;
  cursor:pointer; color:var(--tenue); animation:cz-sube .5s var(--cz-curva) backwards;
  animation-delay:calc(.3s + var(--i, 0) * 50ms); }
.cz.cz-sin-entrada .cz-dia { animation:none; }
.cz-dia small { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cz-dia i { width:40px; height:40px; max-width:100%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:15.5px; font-weight:750; color:var(--texto);
  border:2px dashed color-mix(in srgb, var(--texto, #1A1C1B) 18%, transparent);
  transition:transform .35s var(--cz-muelle); }
.cz-dia:hover i { transform:scale(1.08); }
.cz-dia:active i { transform:scale(.92); }
.cz-dia span { font-size:13px; font-weight:750; font-variant-numeric:tabular-nums; }
/* Los tres semáforos de la semana, ya con los verdes y ámbares apagados de
   esta pantalla: los de antes eran los saturados de la app y sobre crema
   cantaban como un semáforo de verdad. */
.cz-dia.bien i { border:none; color:#fff;
  background:linear-gradient(135deg, var(--cz-prot), var(--cz-prot-t));
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cz-prot-t) 80%, transparent); }
.cz-dia.medio i { border:none; color:#fff;
  background:linear-gradient(135deg, var(--cz-gras), var(--cz-gras-t));
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cz-gras-t) 80%, transparent); }
.cz-dia.mal i { border:none; color:#fff;
  background:linear-gradient(135deg, var(--cz-a), var(--cz-rojo));
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cz-rojo) 80%, transparent); }
.cz-dia.bien span { color:var(--cz-prot-t); } .cz-dia.medio span { color:var(--cz-gras-t); }
.cz-dia.mal span { color:var(--cz-rojo); }
.cz-dia.es-hoy { color:var(--cz-a-texto); }
.cz-dia.es-hoy i { box-shadow:0 0 0 3px var(--cz-carta), 0 0 0 5.5px var(--cz-a); }
.cz-dia.mirando i { outline:2px solid var(--texto); outline-offset:3px; }
.cz-dia.es-hoy.mirando i { outline:none; }

/* La pauta del entrenador: un bocadillo, como un mensaje suyo. */
.cz-pauta { display:flex; gap:10px; align-items:flex-end; }
.cz-pauta .pz-cara { box-shadow:0 8px 16px -8px rgba(16,20,19,.5); }
.cz-bocadillo { position:relative; flex:1; min-width:0; background:var(--cz-carta); border:1px solid var(--cz-linea);
  box-shadow:var(--cz-sombra); border-radius:22px 22px 22px 6px; padding:13px 16px; font-size:16.5px; line-height:1.5; }
.cz-bocadillo b { display:block; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tenue); margin-bottom:3px; }

/* ------------------------------------------------------------ el calendario
   Va dentro de una ventana normal (`modal`), así que no necesita ni fondo ni
   sombra propios: solo la rejilla del mes. Los días de delante de hoy salen
   apagados y sin cursor: se ven, para situarse, pero no se pueden tocar. */
.cz-cal-cab { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.cz-cal-cab b { font-size:17px; font-weight:800; text-transform:capitalize; }
.cz-cal-b { width:38px; height:38px; border-radius:50%; border:none; background:var(--cz-carta-2);
  cursor:pointer; font-size:21px; line-height:1; color:var(--texto); display:grid; place-items:center;
  transition:background .2s, transform .3s var(--cz-muelle); }
.cz-cal-b:hover:not(:disabled) { background:var(--cz-linea); }
.cz-cal-b:active:not(:disabled) { transform:scale(.88); }
.cz-cal-b:disabled { opacity:.3; cursor:default; }
.cz-cal-sem, .cz-cal-rej { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.cz-cal-sem { margin-bottom:6px; }
.cz-cal-sem span { text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tenue); }
.cz-cal-dia { aspect-ratio:1; border:none; background:none; border-radius:50%; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--texto);
  display:grid; place-items:center;
  transition:background .2s, color .2s, transform .3s var(--cz-muelle); }
.cz-cal-dia:hover:not(:disabled) { background:var(--cz-carta-2); }
.cz-cal-dia:active:not(:disabled) { transform:scale(.9); }
.cz-cal-dia:disabled { color:var(--tenue); opacity:.4; cursor:default; }
.cz-cal-dia.es-hoy { box-shadow:inset 0 0 0 2px var(--cz-a); color:var(--cz-a-texto); }
.cz-cal-dia.elegido { background:linear-gradient(135deg, var(--cz-a), var(--cz-2)); color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb, var(--cz-a) 90%, transparent); }

/* ------------------------------------------------------ el móvil estrecho */
@container (max-width: 380px) {
  .cz-hero { padding:18px 16px; }
  .cz-hero-centro { gap:4px; }
  .cz-lado-cifra small { font-size:11px; letter-spacing:.08em; }
  .cz-escanear { padding:0 13px; font-size:14.5px; gap:6px; }
  .cz .cz-busca input { font-size:16px; }
}
@container (max-width: 330px) {
  .cz-escanear span { display:none; }
  .cz-escanear { width:46px; padding:0; justify-content:center; }
  .cz-reloj-fila { grid-template-columns:1fr; }
}
@container (max-width: 520px) {
  .cz-carta { padding:16px; }
  .cz-momentos, .cz-siempre-fila { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }
  .cz-cab-nav { width:100%; justify-content:space-between; }
}

/* ------------------------------------------- la densidad en el móvil
   El mismo diseño, pero sin que una sola tarjeta se coma la pantalla: en el
   móvil todo lo grande (el titular, el anillo, los aros de los macros, los
   botones y los huecos) baja un escalón. Los tamaños táctiles se quedan por
   encima de los 40 px, que es lo que hace falta para acertar con el dedo. */
@container (max-width: 560px) {
  .cz { gap:12px; }
  .cz .cz-h1 { font-size:clamp(25px, 7.2vw, 32px); margin-top:4px; }
  .cz-eti { font-size:12px; }
  .cz-plan { font-size:14px; margin-top:6px !important; }
  .cz-fecha, .cz-volver { height:44px; }
  .cz-fecha span { min-width:70px; font-size:15px; }
  .cz-fecha-b { width:36px; height:36px; font-size:20px; }
  .cz-volver { padding:0 15px; font-size:14.5px; }

  .cz-arriba, .cz-abajo, .cz-lado { gap:12px; }
  .cz-carta { padding:14px; border-radius:22px; }
  .cz-momentos, .cz-siempre-fila { margin-left:-14px; margin-right:-14px;
    padding-left:14px; padding-right:14px; }

  /* La tarjeta oscura: el anillo manda, lo de alrededor se aprieta. */
  .cz-hero { padding:16px 14px; border-radius:24px; }
  .cz-hero-centro { margin:10px 0 2px; }
  .cz-anillo { width:clamp(130px, 40cqi, 170px); }
  .cz-anillo-dentro b { font-size:clamp(31px, 10.5cqi, 42px); }
  .cz-anillo-dentro span { font-size:13px; margin-top:2px; }
  .cz-anillo-dentro em { font-size:11.5px; margin-top:6px; }
  .cz-lado-cifra b { font-size:clamp(19px, 5.6cqi, 25px); }
  .cz-lado-cifra span { font-size:12px; }
  .cz-consejo { margin-top:10px; padding:10px 12px; border-radius:15px; }
  .cz-consejo p { font-size:15px; }
  .cz-reloj-fila { margin-top:10px; gap:6px; }
  .cz-dato { padding:8px 9px; border-radius:13px; }
  .cz-dato b { font-size:17px; }
  .cz-hero-nota { font-size:13px; margin:10px 0 12px !important; }
  .cz-hero-pie { padding-top:12px; font-size:13px; }

  /* Los macros: vasos más bajos y las cifras a su lado, no debajo. */
  .cz-h { margin:2px 2px 8px; }
  .cz-h h3 { font-size:19px; }
  .cz-macros-fila { margin-top:10px; }
  .cz-macro { padding:10px 4px 11px; border-radius:18px; gap:6px; }
  .cz-vaso { height:112px; border-radius:16px; }
  .cz-vaso-val { font-size:20px; padding-bottom:10px; }
  .cz-macro-n { font-size:12px; }
  .cz-macro-cifra b { font-size:19px; }
  .cz-fibra { margin-top:10px; padding-top:11px; }
  .cz-fibra-txt b { font-size:18px; }

  /* Apuntar: sigue siendo lo más grande de la pantalla, pero sin exagerar. */
  .cz-apuntar-ico { width:42px; height:42px; flex:0 0 42px; border-radius:14px; }
  .cz-apuntar-ico .ico-svg { width:21px; height:21px; }
  .cz-apuntar-cab h3 { font-size:18px; }
  .cz-apuntar-cab small { font-size:13.5px; }
  .cz-momentos { margin-top:12px; }
  .cz-mom { height:42px; padding:0 14px 0 11px; font-size:14px; }
  .cz-busca { height:54px; margin-top:10px; }
  .cz-lupa { width:42px; height:42px; flex:0 0 42px; }
  .cz-escanear { height:42px; }
  .cz-fotoia { width:42px; height:42px; }
  .cz-res { padding:10px 10px 10px 14px; border-radius:17px; }
  .cz-res-txt b { font-size:15.5px; }
  .cz-res-mas { width:36px; height:36px; flex:0 0 36px; font-size:22px; }
  .cz-siempre { margin-top:12px; }

  /* El diario: la línea más estrecha deja más sitio al contenido de cada
     comida, que es lo que se lee. */
  .cz-linea { gap:11px; }
  .cz-linea::before { left:18px; }
  .cz-momento { grid-template-columns:38px minmax(0,1fr); gap:10px; }
  .cz-nodo { width:38px; height:38px; margin-top:8px; }
  .cz-nodo .ico-svg { width:18px; height:18px; }
  .cz-bloque { padding:12px 12px 4px 14px; border-radius:20px; }
  .cz-bloque-titulo h4 { font-size:17px; }
  .cz-bloque-kcal b { font-size:21px; }
  .cz-plato { padding:9px 0; }
  .cz-plato-n, .cz-plato-kcal { font-size:15px; }
  .cz-quitar, .cz-editar { width:34px; height:34px; flex:0 0 34px; }

  /* Lo de al lado (semana, reloj, pauta) es de consulta: aún más apretado. */
  .cz-carta-cab h3 { font-size:17px; }
  .cz-ico { width:34px; height:34px; flex:0 0 34px; border-radius:11px; }
  .cz-ico .ico-svg { width:17px; height:17px; }
  .cz-texto { font-size:14px; margin-top:10px !important; }
  .cz-filas > div { padding:7px 0; font-size:14px; }
  .cz-dias { margin-top:10px; }
  .cz-dia i { width:34px; height:34px; font-size:14px; }
  .cz-dia small { font-size:11px; }
  .cz-dia span { font-size:12px; }
  .cz-bocadillo { padding:11px 14px; font-size:15px; }
  .cz-vacio { padding:20px 16px 22px; }
  .cz-vacio-plato { width:62px; height:62px; margin-bottom:4px; }
  .cz-vacio-plato .ico-svg { width:28px; height:28px; }
  .cz-vacio b { font-size:16.5px; }
  .cz-vacio small { font-size:14px; }
}

/* Dentro de la ventana del entrenador, el fondo detrás de los nodos es el
   de la ventana, no el de la página. */
/* Dentro de la ventana del entrenador el papel sigue siendo el de la pantalla
   (`.cz` lo lleva puesto), así que el halo va igual que fuera. */
.modal .cz-nodo { box-shadow:0 0 0 5px var(--cz-papel), 0 10px 20px -10px color-mix(in srgb, var(--cz-2) 90%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .cz *, .cz *::before, .cz *::after, .cz-hero::before, .cz-hero::after {
    animation:none !important; transition:none !important;
  }
}

/* ---- La gráfica de calorías (diseño «Nutrición Hoy v2»): tres anillos, cifras que ruedan, barras ---- */
.nz-hero { display:flex; flex-direction:column; gap:14px; }
.nz-fila { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px; }
.nz-lado { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; }
.nz-lado-d { align-items:flex-end; }
.nz-lado small { font-size:10px; letter-spacing:.12em; color:var(--cz-tenue); font-weight:700; }
.nz-lado b { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--cz-texto); }
.nz-lado span { font-size:11px; color:var(--cz-tenue); font-weight:600; }
.nz-anillo { position:relative; width:186px; height:186px; }
.nz-anillo > svg { position:absolute; inset:0; transform:rotate(-90deg); }
.nz-fondo { fill:none; stroke-width:11; }
.nz-linea { fill:none; stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.2,.9,.1,1); }
.nz-brillo { position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 80%,rgba(255,255,255,.85) 96%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 47px,#000 48px,#000 90px,transparent 91px);
  mask:radial-gradient(circle,transparent 47px,#000 48px,#000 90px,transparent 91px);
  animation:nz-gira 4.5s linear infinite; mix-blend-mode:soft-light; opacity:.9; }
.nz-giro { position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.2,.9,.1,1); }
.nz-giro span { position:absolute; left:89px; width:8px; height:8px; border-radius:50%; background:#fff; }
.nz-halo { position:absolute; inset:0; border-radius:50%; border:3px solid #1f9d5a; opacity:0; pointer-events:none; }
.nz-anillo.completo .nz-halo { animation:nz-halo 1.6s ease-out infinite; }
.nz-centro { position:absolute; inset:48px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:radial-gradient(circle at 50% 30%,var(--cz-carta,#fff),var(--cz-hero-sup,#f6efe4)); box-shadow:inset 0 -6px 14px rgba(120,80,30,.08); }
.nz-digitos { display:flex; font-size:30px; font-weight:800; color:var(--cz-texto); letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; }
.nz-d { display:inline-block; height:1em; overflow:hidden; transition:width .6s cubic-bezier(.2,.9,.1,1); }
.nz-d-col { display:flex; flex-direction:column; transition:transform 1.3s cubic-bezier(.2,.9,.1,1); }
.nz-d-col span { height:1em; line-height:1em; text-align:center; }
.nz-centro > span { font-size:9px; font-weight:700; color:var(--cz-tenue); letter-spacing:.1em; }
.nz-macros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.nz-macro { display:flex; flex-direction:column; gap:6px; min-width:0; }
.nz-macro-cab { display:flex; justify-content:space-between; align-items:baseline; gap:4px; }
.nz-macro-cab span { font-size:11px; font-weight:700; }
.nz-macro-cab em { font-style:normal; font-size:10px; font-weight:600; color:var(--cz-tenue); font-variant-numeric:tabular-nums; }
.nz-barra { position:relative; height:7px; border-radius:4px; }
.nz-barra i { position:relative; display:block; height:100%; border-radius:4px; overflow:hidden; transition:width 1.4s cubic-bezier(.2,.9,.1,1); }
.nz-barra u { position:absolute; inset:0; width:50%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:nz-brilla 2.2s ease-in-out infinite; }
.nz-macro b { font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--cz-texto); }
.nz-macro b small { font-size:11px; color:var(--cz-tenue); font-weight:600; }
@keyframes nz-gira { to { transform:rotate(360deg); } }
@keyframes nz-halo { 0% { transform:scale(.9); opacity:.6; } 100% { transform:scale(1.25); opacity:0; } }
@keyframes nz-brilla { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
/* En el móvil el anillo (186 px) y las dos cifras no caben: se encoge el anillo, que con `zoom`
   también encoge el hueco que ocupa. */
@media (max-width:480px) { .nz-anillo { zoom:.8; } .nz-lado b { font-size:18px; } .nz-fila { gap:2px; } }
@media (prefers-reduced-motion: reduce) { .nz-brillo, .nz-barra u, .nz-anillo.completo .nz-halo { animation:none; } .nz-linea, .nz-giro, .nz-d, .nz-d-col, .nz-barra i { transition:none; } }

/* ---- Comer en el móvil, a la medida del diseño nuevo --------------------------------
   Letras más pequeñas y tarjetas más ajustadas. Solo estilos: nada de lo que hace cada
   botón cambia. En pantalla grande se queda como estaba. */
@media (max-width:620px) {
  .cz { gap:10px; }
  .cz .cz-h1 { font-size:clamp(21px, 6vw, 25px); letter-spacing:-.035em; }
  .cz-plan { font-size:12.5px; margin-top:4px !important; line-height:1.4; }
  .cz-arriba, .cz-abajo, .cz-lado { gap:10px; }
  .cz-carta { padding:12px; border-radius:20px; border:1px solid rgba(0,0,0,.05); }
  .cz-hero { border-radius:24px; }
  .cz-carta-cab h3, .cz-h h3, .cz-apuntar-cab h3 { font-size:16px; }
  .cz-carta-cab > span { font-size:12px; }
  .cz-apuntar-cab small { font-size:12.5px; }
  .cz-texto { font-size:13px; margin-top:8px !important; }
  .cz-consejo p { font-size:14px; line-height:1.4; }
  .cz-consejo small { font-size:10.5px; }
  .cz-dato small { font-size:11px; }
  .cz-dato b { font-size:16px; }
  .cz-hero-nota { font-size:12px; }
  .cz-hero-pie { font-size:12px; }
  .cz-macro-cifra b { font-size:17px; }
  .cz-macro-n { font-size:11px; }
  .cz-macro-falta, .cz-macro-pie { font-size:11.5px; }
  .cz-vaso { height:96px; }
  .cz-vaso-val { font-size:18px; }
  .cz-fibra-txt > span { font-size:11px; }
  .cz-fibra-txt b { font-size:16px; }
  .cz-fibra-txt b small { font-size:12px; }
  .cz-mom { height:38px; font-size:13px; }
  .cz-bloque-titulo h4 { font-size:16px; }
  .cz-bloque-titulo small { font-size:11.5px; }
  .cz-bloque-kcal b { font-size:19px; }
  .cz-bloque-macros span { font-size:11.5px; padding:2px 8px; }
  .cz-plato-n, .cz-plato-kcal { font-size:14.5px; }
  .cz-plato-det { font-size:12px; }
  .cz-repaso-txt { font-size:13.5px; padding:12px 14px; }
  .cz-repaso-lista li b { font-size:14px; }
  .cz-nota { height:28px; font-size:12.5px; padding:0 11px; }
}