/* ============================================================
   LabsPep — Protocolo Nutricional
   Estilo: laboratorio futurista / HUD
   ============================================================ */

/* ---------- Tipografía propia ----------
   Las dos familias se sirven desde aquí, no desde Google Fonts. La hoja de
   Google era lo primero que frenaba el pintado de todas las páginas: una
   conexión aparte —DNS, TCP, TLS— para recibir 300 bytes de CSS que el
   navegador no puede saltarse, y luego otra conexión a fonts.gstatic.com
   para los archivos. Medido contra el sitio publicado: 0,55 s solo la hoja.
   Desde el propio dominio viajan por la conexión que ya está abierta y con
   la caché de un año de /fuentes/ (vercel.json). Viven fuera de assets/ a
   propósito: los archivos de assets/ se versionan con «?v=» y una regla
   distinta, y un archivo que nunca cambia no necesita versión.

   Solo el subconjunto latino, que cubre el español entero (á, ñ, ¿, ¡). Los
   rangos son los mismos que servía Google. Orbitron es una fuente variable:
   un solo archivo sirve los pesos 500, 700 y 900.

   `font-display: swap` pinta el texto de inmediato con la letra de respaldo
   y lo cambia cuando llega la propia; con el `preload` que lleva cada
   página, la propia llega junto con el CSS. Las licencias (SIL OFL) están
   junto a los archivos. */
@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fuentes/orbitron-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/rajdhani-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/rajdhani-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/rajdhani-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/rajdhani-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Letras de respaldo del mismo ancho ----------
   Mientras la fuente propia no ha llegado, el texto se pinta con la del
   sistema, y cuando entra la propia todo se recoloca: Rajdhani es estrecha
   y Orbitron es ancha, así que un párrafo cambia de largo y un titular de
   número de líneas. Eso es el salto que se ve en las páginas al cargar.

   Estas familias son la letra del sistema con el ancho corregido para que
   mida lo mismo que la nuestra. Los porcentajes se midieron en el
   navegador con un párrafo de la página: Rajdhani mide el 92 % de Segoe UI
   y el 101 % de Roboto; Orbitron, el 125 % de Segoe y el 121 % de Roboto.
   Android trae Roboto y Windows trae Segoe; el navegador toma la primera
   que exista. En iPhone no hay ninguna de las dos y se queda como estaba. */
@font-face {
  font-family: "Rajdhani respaldo Roboto";
  src: local("Roboto");
  size-adjust: 101%;
}
@font-face {
  font-family: "Rajdhani respaldo Segoe";
  src: local("Segoe UI");
  size-adjust: 92%;
}
@font-face {
  font-family: "Orbitron respaldo Roboto";
  src: local("Roboto");
  size-adjust: 121%;
}
@font-face {
  font-family: "Orbitron respaldo Segoe";
  src: local("Segoe UI");
  size-adjust: 125%;
}

:root {
  /* Le dice al navegador que la página YA viene oscura. Sin esto, Chrome en
     Android puede aplicarle su oscurecimiento automático encima y lavar los
     colores, y los controles nativos —desplegables, barras de desplazamiento,
     autocompletado— se dibujan en claro sobre fondo oscuro. */
  color-scheme: dark;

  --bg:        #05070d;
  --bg-2:      #080c16;
  --panel:     rgba(14, 20, 34, 0.72);
  --panel-br:  rgba(120, 200, 255, 0.14);
  --ink:       #e7f1ff;
  --ink-dim:   #8fa3bf;
  --ink-faint: #5d6f8a;

  --cyan:   #22e6ff;
  --violet: #a06bff;
  --lime:   #7dff9b;
  --amber:  #ffc766;
  --rose:   #ff6b8b;

  /* Alto de la barra del sitio. Va en una variable porque hay otra barra
     pegajosa —las pestañas de la bitácora— que tiene que quedarse JUSTO
     debajo: las dos estaban en top:0 y la de la página se metía debajo del
     encabezado, que es lo que se veía como si se superpusieran.
     .topbar se fuerza a esta altura para que la variable no mienta. */
  --alto-barra: 76px;

  --radius: 16px;
  --font-display: "Orbitron", "Orbitron respaldo Roboto", "Orbitron respaldo Segoe", "Segoe UI", system-ui, sans-serif;
  --font-body: "Rajdhani", "Rajdhani respaldo Roboto", "Rajdhani respaldo Segoe", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Fondo ---------- */
.grid-bg {
  position: fixed; inset: 0; z-index: -3;
  background:
    linear-gradient(rgba(34, 230, 255, 0.045) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(34, 230, 255, 0.045) 1px, transparent 1px) 0 0 / 44px 100%,
    radial-gradient(ellipse at 50% 0%, #0d1526 0%, var(--bg) 60%);
  mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 20%, #000 30%, transparent 92%);
}

.glow {
  position: fixed; z-index: -2;
  width: 44vw; height: 44vw; max-width: 620px; max-height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
  pointer-events: none;
}
.glow-a { top: -14vw; left: -8vw;  background: radial-gradient(circle, var(--cyan), transparent 65%); animation: drift 22s ease-in-out infinite; }
.glow-b { bottom: -18vw; right: -10vw; background: radial-gradient(circle, var(--violet), transparent 65%); animation: drift 27s ease-in-out infinite reverse; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, 5vw, 0) scale(1.12); }
}

/* ---------- Barra superior y las capas del sitio ----------
   Se escriben aquí porque el fallo que las obligó no se ve leyendo un
   archivo solo: la barra del sitio estaba en 20 y varias piezas de página
   también, así que ganaba la que estuviera más abajo en el HTML —siempre
   la de la página, porque el encabezado va primero—. Con la hamburguesa
   abierta, las pestañas de la bitácora y la tarjeta del día se pintaban
   POR ENCIMA de los destinos del menú.

   El reparto, de abajo arriba:

      0 -  10  contenido normal y barras pegajosas dentro de un panel
     11 -  50  piezas fijas de una página (barra de compra, menú del panel)
        100    la barra del sitio y su hamburguesa: por encima de todo
                lo que pinte una página, que es lo que se le rompió
        200    lo que tapa a propósito hasta el encabezado: cajones y
                paneles modales, que mientras están abiertos son la pantalla
        300    los avisos, que van encima de todo por definición

   Si haces algo fijo dentro de una página, quédate por debajo de 100. */
.topbar {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(5, 7, 13, 0.92), rgba(5, 7, 13, 0.55));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120, 200, 255, 0.12);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(34, 230, 255, 0.3);
  border-radius: 12px;
  background: rgba(34, 230, 255, 0.06);
  box-shadow: 0 0 24px rgba(34, 230, 255, 0.18) inset;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 0.16em;
}
.brand-sub {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint);
}
.accent {
  background: linear-gradient(92deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.topnav { display: flex; align-items: center; gap: 9px; }
/* En la bitácora el botón de salir vive dentro del menú, para que en el
   teléfono caiga dentro de la hamburguesa. Aquí, con el menú en línea, se
   separa un poco de los destinos: no es uno de ellos. */
.topnav .salir-cliente { margin-left: 8px; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.28; } }
.status-text {
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.22em; color: var(--ink-dim);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 32px) 80px;
}

.hero { margin-bottom: 38px; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.28em;
  color: var(--cyan);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 6.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  text-shadow: 0 0 46px rgba(34, 230, 255, 0.18);
}
.lede {
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: 18px;
  margin: 0;
}

/* ---------- Paneles ---------- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-br);
  border-radius: var(--radius);
  padding: clamp(20px, 3.4vw, 32px);
  margin-bottom: 26px;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.panel::before {
  content: "";
  position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  opacity: 0.65;
  border-radius: var(--radius) var(--radius) 0 0;
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(120, 200, 255, 0.16);
}
.panel-head h2 {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
}
.tag {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.2em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 230, 255, 0.28);
  color: var(--cyan);
  background: rgba(34, 230, 255, 0.07);
  white-space: nowrap;
}

/* ---------- Formulario ---------- */
.form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
label em { font-style: normal; color: var(--ink-faint); letter-spacing: 0.04em; }

input[type="number"], select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(4, 8, 16, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 11px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  appearance: none;
}
input[type="number"]::placeholder { color: var(--ink-faint); font-weight: 500; }
input[type="number"]:focus, select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 230, 255, 0.14);
  background: rgba(6, 14, 26, 0.9);
}
input.invalid { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(255, 107, 139, 0.14); }

.select-wrap { position: relative; }
.select-wrap::after {
  content: "";
  position: absolute; right: 15px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
select option { background: #0a0f1c; color: var(--ink); }

.err { font-size: 13px; color: var(--rose); min-height: 1em; letter-spacing: 0.02em; }
.ayuda { font-size: 13.5px; color: var(--ink-faint); line-height: 1.45; }

textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: rgba(4, 8, 16, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 11px;
  outline: none;
  resize: vertical;
  transition: border-color 0.18s, box-shadow 0.18s;
}
textarea::placeholder { color: var(--ink-faint); }
textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 230, 255, 0.14);
}

/* Botón en espera mientras responde la IA */
.btn[disabled] { opacity: 0.75; cursor: progress; }
.btn.cargando svg { display: none; }
.btn.cargando::after {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid rgba(4, 18, 26, 0.35);
  border-top-color: #04121a;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Nota que devuelve la IA sobre cómo adaptó el plan */
.nota-ia {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  background: rgba(34, 230, 255, 0.07);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
}
.nota-ia[hidden] { display: none; }
/* Cuando la personalización falla, el motivo queda a la vista */
.nota-ia.fallo {
  border-left-color: var(--amber);
  background: rgba(255, 199, 102, 0.08);
  color: var(--ink-dim);
  font-size: 14.5px;
}

/* ---------- Chat con el asistente ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.chat-lede { margin: 0 0 18px; color: var(--ink-dim); font-size: 16px; }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 200, 255, 0.3) transparent;
}
.chat-log:empty { display: none; }
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-thumb {
  background: rgba(120, 200, 255, 0.25);
  border-radius: 99px;
}

.burbuja {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  animation: rise 0.3s ease both;
  overflow-wrap: anywhere;
}
.burbuja.yo {
  align-self: flex-end;
  background: linear-gradient(100deg, rgba(34, 230, 255, 0.18), rgba(160, 107, 255, 0.14));
  border: 1px solid rgba(34, 230, 255, 0.3);
  border-bottom-right-radius: 5px;
  color: var(--ink);
}
.burbuja.ia {
  align-self: flex-start;
  background: rgba(10, 18, 32, 0.9);
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-bottom-left-radius: 5px;
  color: var(--ink);
}
.burbuja.error {
  align-self: flex-start;
  background: rgba(255, 107, 139, 0.1);
  border: 1px solid rgba(255, 107, 139, 0.35);
  color: var(--rose);
}
.burbuja .hecho {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed rgba(120, 200, 255, 0.25);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--lime);
}

/* Tres puntos mientras piensa */
.escribiendo { display: flex; gap: 5px; align-items: center; height: 20px; }
.escribiendo i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  animation: latir 1.2s ease-in-out infinite;
}
.escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes latir {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.chat-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sugerencia {
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  background: rgba(4, 8, 16, 0.6);
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s;
}
.sugerencia:hover { border-color: var(--cyan); color: var(--ink); background: rgba(34, 230, 255, 0.1); }
.chat-sugerencias[hidden] { display: none; }

.chat-entrada { display: flex; gap: 10px; align-items: flex-end; }
.chat-entrada textarea {
  flex: 1;
  min-height: 50px;
  max-height: 140px;
  padding: 14px 16px;
  font-size: 16px;
  resize: none;
}
.chat-entrada .btn { padding: 15px 18px; flex: none; }

/* Resalta la comida que acaba de cambiar el asistente */
.meal.cambiada {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px var(--cyan), 0 0 34px rgba(34, 230, 255, 0.28);
  animation: destello 2.4s ease;
}
@keyframes destello {
  0% { background: rgba(34, 230, 255, 0.18); }
  100% { background: linear-gradient(150deg, rgba(10, 18, 32, 0.8), rgba(6, 10, 20, 0.55)); }
}

/* Captura de correo */
.mail-lede { margin: 0 0 20px; color: var(--ink-dim); font-size: 16px; }
.form-correo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}
.form-correo .field { margin: 0; }
.form-correo input[type="email"] {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(4, 8, 16, 0.72);
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 11px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.form-correo input[type="email"]:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 230, 255, 0.14);
}
/* Señuelo anti-bots: fuera de la pantalla, no oculto con display:none
   (los bots buenos ignoran los campos con display:none). */
.senuelo {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-faint);
  line-height: 1.5;
  cursor: pointer;
}
.consent input { margin-top: 3px; accent-color: var(--cyan); width: 17px; height: 17px; flex: none; }
.envio-ok {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(125, 255, 155, 0.4);
  background: rgba(125, 255, 155, 0.09);
  color: var(--lime);
  font-size: 15px;
}
.envio-ok[hidden] { display: none; }

/* Segmented control */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.segmented label { margin: 0; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid rgba(120, 200, 255, 0.2);
  border-radius: 11px;
  background: rgba(4, 8, 16, 0.6);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  transition: all 0.18s;
}
.segmented span em {
  font-style: normal; font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.segmented label:hover span { border-color: rgba(34, 230, 255, 0.45); }
.segmented input:checked + span {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(34, 230, 255, 0.16), rgba(160, 107, 255, 0.1));
  box-shadow: 0 0 22px rgba(34, 230, 255, 0.2);
}
.segmented input:checked + span em { color: var(--cyan); }
.segmented input:focus-visible + span { box-shadow: 0 0 0 3px rgba(34, 230, 255, 0.3); }

.actions { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* Varios botones son enlaces (<a class="btn">) y salían subrayados: el
     de WhatsApp del catálogo llevaba una raya bajo el texto. */
  text-decoration: none;
  padding: 13px 24px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 11px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.btn:active { transform: translateY(1px); }

/* Sacudida del botón de WhatsApp. El meneo ocupa el último 18 % del ciclo:
   medio segundo moviéndose y dos y medio quieto. Repetida sin esa pausa
   sería un parpadeo, y lo que llama la atención es que aparezca de vez en
   cuando. La clase la pone y la quita assets/animar.js según lo que se esté
   mirando; quien pidió menos animación no ve ninguna, por la regla de
   prefers-reduced-motion del final de esta hoja. */
@keyframes sacudida-wa {
  0%, 82%, 100% { transform: none; }
  85% { transform: translateX(-2px) rotate(-1deg); }
  88% { transform: translateX(2px) rotate(1deg); }
  91% { transform: translateX(-2px) rotate(-0.7deg); }
  94% { transform: translateX(2px) rotate(0.7deg); }
  97% { transform: translateX(-1px); }
}
.sacude { animation: sacudida-wa 3s ease-in-out infinite; }
.btn-primary {
  color: #04121a;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  box-shadow: 0 10px 30px rgba(34, 230, 255, 0.26);
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(160, 107, 255, 0.38); }
.btn-ghost {
  color: var(--ink);
  background: rgba(120, 200, 255, 0.06);
  border-color: rgba(120, 200, 255, 0.24);
}
.btn-ghost:hover { border-color: var(--cyan); background: rgba(34, 230, 255, 0.12); }

/* ---------- Resultados ---------- */
.results[hidden] { display: none; }
.results { animation: rise 0.5s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 13px;
  background: linear-gradient(160deg, rgba(10, 18, 32, 0.85), rgba(6, 10, 20, 0.6));
}
.stat-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; line-height: 1.15;
  color: var(--ink);
}
.stat-note { font-size: 13px; color: var(--ink-dim); line-height: 1.35; }
.stat-hi {
  border-color: rgba(34, 230, 255, 0.4);
  background: linear-gradient(160deg, rgba(34, 230, 255, 0.14), rgba(160, 107, 255, 0.08));
}
.stat-hi .stat-value { color: var(--cyan); text-shadow: 0 0 24px rgba(34, 230, 255, 0.4); }
.stat-imc { grid-column: span 1; }

.imc-bar { position: relative; margin-top: 10px; }
.imc-track { display: flex; height: 7px; border-radius: 99px; overflow: hidden; }
.imc-track i { flex: 1; }
/* Anchos proporcionales al rango real de IMC que cubre cada zona (escala 15 → 40) */
.imc-track .z1 { background: #4d7fd1;    flex: 3.5; }  /* <18.5  bajo peso  */
.imc-track .z2 { background: var(--lime);  flex: 6.5; }  /* 18.5–25 normal   */
.imc-track .z3 { background: var(--amber); flex: 5;   }  /* 25–30  sobrepeso */
.imc-track .z4 { background: var(--rose);  flex: 10;  }  /* >30    obesidad  */
.imc-cursor {
  position: absolute; top: -5px; left: 0;
  width: 3px; height: 17px; border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 12px #fff;
  transform: translateX(-50%);
  transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Macros */
.macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.macro {
  padding: 15px 17px;
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 13px;
  background: rgba(6, 10, 20, 0.55);
}
.macro-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
}
.macro-top span {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
}
.macro-top b { font-family: var(--font-display); font-size: 21px; }
.macro-bar { height: 6px; border-radius: 99px; background: rgba(120, 200, 255, 0.12); overflow: hidden; }
.macro-bar i { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.macro small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.04em; }
.macro-p .macro-top b { color: var(--cyan); }
.macro-p .macro-bar i { background: linear-gradient(90deg, var(--cyan), #6ef2ff); }
.macro-c .macro-top b { color: var(--amber); }
.macro-c .macro-bar i { background: linear-gradient(90deg, var(--amber), #ffe0a3); }
.macro-g .macro-top b { color: var(--violet); }
.macro-g .macro-bar i { background: linear-gradient(90deg, var(--violet), #d3b4ff); }
.macro-w .macro-top b { color: var(--lime); }
.macro-w .macro-bar i { background: linear-gradient(90deg, var(--lime), #c9ffd8); }

/* ---------- Días ---------- */
.days { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.day-btn {
  flex: 1 1 100px;
  padding: 11px 10px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--ink-dim);
  background: rgba(4, 8, 16, 0.6);
  border: 1px solid rgba(120, 200, 255, 0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
}
.day-btn:hover { border-color: rgba(34, 230, 255, 0.5); color: var(--ink); }
.day-btn.on {
  color: #04121a;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(34, 230, 255, 0.24);
}

/* ---------- Comidas ---------- */
.meals { display: grid; gap: 14px; }
.meal {
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(10, 18, 32, 0.8), rgba(6, 10, 20, 0.55));
  padding: 18px 20px;
  animation: rise 0.4s ease both;
}
.meal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 4px;
}
.meal-time {
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.2em;
  color: var(--cyan);
}
.meal-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: 0.03em;
  margin: 2px 0 12px;
}
.meal-kcal {
  font-family: var(--font-display); font-size: 13px; color: var(--ink-dim);
}
.meal-items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.meal-items li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-bottom: 7px;
  border-bottom: 1px dotted rgba(120, 200, 255, 0.13);
  font-size: 16px;
}
.meal-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.meal-items .qty {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--cyan); white-space: nowrap; text-align: right;
}
/* alternativa de alimento y ayuda de medida caseras */
.meal-items .alt,
.meal-items .uni,
.shopping .alt-inline {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.meal-items .uni { font-family: var(--font-body); }

/* Intercambios: "o 130 g de pechuga de pollo" */
.meal-items .eq {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--cyan);
  opacity: 0.85;
  letter-spacing: 0.01em;
}

.chip.bien { border-color: rgba(125, 255, 155, 0.45); background: rgba(125, 255, 155, 0.1); }
.chip.bien b { color: var(--lime); }

.stat-texto { font-size: 20px; line-height: 1.3; }
.shopping .alt-inline { display: inline; }
.meal-macros { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 12.5px; letter-spacing: 0.08em;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(120, 200, 255, 0.2);
  background: rgba(4, 8, 16, 0.6);
  color: var(--ink-dim);
}
.chip b { color: var(--ink); font-weight: 700; }
.meal-tip { margin: 12px 0 0; font-size: 14px; color: var(--ink-faint); font-style: italic; }

/* ---------- Extras ---------- */
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.shopping {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(120, 200, 255, 0.16);
  border-radius: 13px;
  background: rgba(4, 8, 16, 0.55);
}
.shopping h3 {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 12px;
}
.shopping ul { columns: 2; column-gap: 28px; margin: 0; padding-left: 20px; }
.shopping li { font-size: 15.5px; margin-bottom: 6px; break-inside: avoid; color: var(--ink-dim); }
.shopping li b { color: var(--ink); }

.notes { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; }
.notes li { color: var(--ink-dim); font-size: 16px; }
.notes b { color: var(--ink); }
.disclaimer {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--amber);
  border-radius: 0 10px 10px 0;
  background: rgba(255, 199, 102, 0.07);
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.disclaimer b { color: var(--amber); }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 22px clamp(16px, 4vw, 48px);
  border-top: 1px solid rgba(120, 200, 255, 0.1);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.foot-dim { color: var(--ink-faint); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  border-radius: 11px;
  background: rgba(10, 18, 32, 0.95);
  border: 1px solid var(--cyan);
  color: var(--ink);
  font-size: 15px; letter-spacing: 0.06em;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;   /* los avisos van encima de todo, encabezado incluido */
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .form { grid-template-columns: repeat(2, 1fr); }
  .shopping ul { columns: 1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .form { grid-template-columns: 1fr; }
  .form-correo { grid-template-columns: 1fr; }
  .segmented { grid-auto-flow: row; }
  .brand-sub { display: none; }
  .status-text { display: none; }
  .stat-value { font-size: 26px; }
  .btn { flex: 1 1 auto; }
}

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

/* ---------- Impresión ---------- */
@media print {
  .grid-bg, .glow, .topnav, .plan-actions, #panel-input, .hero, .days,
  .panel-mail { display: none !important; }
  body { background: #fff; color: #111; }
  .panel { background: #fff; border-color: #ccc; box-shadow: none; break-inside: avoid; }
  .stat, .macro, .meal { background: #fff; border-color: #ddd; break-inside: avoid; }
  .stat-value, .meal-items .qty, .accent, .tag { color: #111 !important; -webkit-text-fill-color: #111; }
  .foot { color: #555; }
}