/* ============================================================
   PLAN DE NUTRICIÓN · VALENTINA · SIN MIEDO
   Direccion visual: editorial, femenino, cálido y apetitoso.
   Paleta: crema, tinta, verde salvia, durazno.
   ============================================================ */

/* Paleta propia de NATALY (arena/bosque/terracota). Se conservan los nombres de
   variable (--salvia, --durazno) para no tocar los componentes. */
:root {
  --bg-crema: #F3EEE6;
  --crema-2: #EAE1D3;
  --tinta: #23211E;
  --tinta-suave: #4A4740;
  --salvia: #465B47;        /* verde bosque */
  --salvia-suave: #7E9079;
  --durazno: #C9714B;       /* terracota */
  --durazno-suave: #E3B58C;
  --mostaza: #D8A24A;       /* mostaza — racha, insignias, agua */
  --linea: #E4DBCC;
  --linea-suave: #EEE6D8;
  --pendiente-bg: #F6EDDA;
  --pendiente-fg: #A8752E;
  --sombra-suave: 0 1px 2px rgba(35,33,30,0.03), 0 4px 12px rgba(35,33,30,0.04);
  --sombra: 0 1px 2px rgba(35,33,30,0.04), 0 10px 28px rgba(35,33,30,0.06);
  --sombra-fuerte: 0 2px 6px rgba(35,33,30,0.06), 0 22px 50px rgba(35,33,30,0.11);
  --radio: 14px;
  --radio-lg: 22px;
  --font-serif: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-crema);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-weight: 500;
  color: var(--tinta);
  letter-spacing: -0.018em;
  margin: 0 0 .48em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); line-height: 1.02; letter-spacing: -0.028em; font-weight: 600; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.1; }
h3 { font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.25; }
h4 { font-size: .95rem; line-height: 1.4; font-family: var(--font-sans); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--salvia); margin: 0 0 .5em; }

p { margin: 0 0 1em; color: var(--tinta-suave); }
.section-title { font-variant-numeric: tabular-nums; }

a { color: var(--salvia); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
a:hover { border-bottom-color: var(--salvia); }

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

/* ------------ NAV LATERAL ------------ */
.nav-toggle {
  position: fixed; top: 16px; left: 16px; z-index: 60;
  background: var(--tinta); color: var(--bg-crema);
  border: none; border-radius: 999px;
  width: 44px; height: 44px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra);
}
.nav-toggle svg { width: 20px; height: 20px; }

.sidenav {
  position: fixed; top: 0; left: -300px; width: 280px; height: 100vh;
  background: var(--bg-crema); border-right: 1px solid var(--linea);
  padding: 80px 24px 24px; overflow-y: auto; z-index: 50;
  transition: left .3s ease;
}
.sidenav.open { left: 0; }
.sidenav h4 { margin-top: 24px; margin-bottom: 8px; color: var(--durazno); }
.sidenav ul { list-style: none; padding: 0; margin: 0; }
.sidenav li { margin: 4px 0; }
.sidenav a { display: block; padding: 8px 10px; border-radius: 8px; font-size: .92rem; color: var(--tinta); border: none; }
.sidenav a:hover { background: var(--crema-2); }

.overlay {
  position: fixed; inset: 0; background: rgba(32,32,30,0.4);
  z-index: 40; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.overlay.show { opacity: 1; pointer-events: auto; }

/* ------------ LAYOUT ------------ */
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

section {
  margin: 32px 0;
}

/* ------------ HERO / PORTADA ------------ */
.hero {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--crema-2);
  box-shadow: var(--sombra-fuerte);
  margin-top: 32px;
}
.hero__img {
  aspect-ratio: 4/5;
  width: 100%;
  object-fit: cover;
  display: block;
}
.hero__badge {
  position: absolute; top: 20px; left: 20px;
  background: rgba(246, 241, 234, 0.92);
  color: var(--tinta); padding: 6px 14px; border-radius: 999px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.hero__title {
  position: absolute; left: 24px; right: 24px; bottom: 28px;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.hero__title .kicker {
  font-family: var(--font-sans); font-size: .78rem; letter-spacing: .3em;
  text-transform: uppercase; opacity: .92; margin-bottom: 8px;
}
.hero__title h1 { color: #fff; margin-bottom: 6px; }
.hero__title .sub { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; opacity: .95; }

/* ------------ CARDS / TARJETAS ------------ */
.card {
  background: #fff;
  border-radius: var(--radio-lg);
  padding: 32px 28px;
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--linea);
}

.card--cream { background: var(--crema-2); }
.card--tinted { background: linear-gradient(135deg, #fff, var(--crema-2)); }

.section-title {
  font-family: var(--font-sans);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--durazno);
  font-weight: 700;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.section-title::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--durazno); display: inline-block;
}

.pendiente {
  display: inline-block;
  background: var(--pendiente-bg);
  color: var(--pendiente-fg);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.chip {
  display: inline-block;
  background: var(--crema-2);
  color: var(--tinta);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .82rem;
  margin: 2px 4px 2px 0;
  border: 1px solid var(--linea);
}
.chip--salvia { background: var(--salvia); color: #fff; border-color: var(--salvia); }
.chip--durazno { background: var(--durazno); color: #fff; border-color: var(--durazno); }

/* ------------ MÉTODO DEL PLATO ------------ */
.plato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.plato__bloque {
  padding: 22px 20px;
  border-radius: var(--radio);
  color: #fff;
  min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.plato__bloque.salvia { background: var(--salvia); }
.plato__bloque.durazno { background: var(--durazno); }
.plato__bloque.linea { background: #d8cdb9; color: var(--tinta); }
.plato__bloque .parte { font-family: var(--font-serif); font-size: 1.8rem; font-style: italic; }
.plato__bloque .etiqueta { font-weight: 600; letter-spacing: .04em; margin-top: 6px; }
.plato__bloque .ejemplos { font-size: .85rem; opacity: .95; margin-top: 8px; }

/* ------------ SEMANAS TABS ------------ */
.tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 20px;
  flex-wrap: wrap;
}
.tab {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--tinta);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .88rem;
  cursor: pointer;
  transition: all .2s;
}
.tab.active {
  background: var(--tinta);
  color: var(--bg-crema);
  border-color: var(--tinta);
}
.tab:hover:not(.active) {
  background: var(--crema-2);
}
.semana-content { display: none; }
.semana-content.active { display: block; }

.semana-card {
  padding: 24px;
  border-radius: var(--radio);
  background: #fff;
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
.semana-card .n {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 3rem;
  line-height: 1;
  color: var(--durazno);
}

/* ------------ DÍAS / COMIDAS ------------ */
.dias {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.dia {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 20px 22px;
}
.dia__nombre {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--salvia);
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.comida {
  padding: 12px 0;
  border-top: 1px dashed var(--linea);
}
.comida:first-of-type { border-top: none; }
.comida__tipo {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--durazno); font-weight: 600; margin-bottom: 6px;
}
.comida__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 4px 0;
  font-size: .92rem;
}
.comida__row .k {
  color: var(--salvia); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ------------ LISTAS ------------ */
.list-plain { list-style: none; padding: 0; margin: 12px 0; }
.list-plain li {
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: flex-start; gap: 12px;
}
.list-plain li:last-child { border-bottom: none; }
.list-plain li::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--durazno);
  flex-shrink: 0; margin-top: 10px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

/* ------------ CHECKLIST INTERACTIVO ------------ */
.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .2s;
}
.check-item:hover { background: var(--crema-2); }
.check-item.done {
  background: rgba(91, 123, 111, 0.08);
  border-color: var(--salvia);
}
.check-item.done .check-item__label {
  text-decoration: line-through;
  color: var(--tinta-suave);
}
.check-item input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--salvia);
  cursor: pointer;
}
.check-item__label { flex: 1; font-size: .95rem; }

/* ------------ FAQ ------------ */
.faq-item {
  border-bottom: 1px solid var(--linea);
  padding: 16px 0;
}
.faq-q {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--tinta);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.faq-q::after {
  content: "+";
  font-size: 1.6rem; color: var(--durazno);
  transition: transform .2s;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, margin .3s ease;
  color: var(--tinta-suave);
}
.faq-item.open .faq-a { max-height: 400px; margin-top: 10px; }

/* ------------ HIDRATACIÓN VASOS ------------ */
.vasos {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.vaso {
  width: 42px; height: 56px;
  background: #fff;
  border: 2px solid var(--salvia);
  border-radius: 4px 4px 12px 12px;
  cursor: pointer;
  position: relative;
  transition: background .2s;
}
.vaso.filled {
  background: linear-gradient(180deg, transparent 20%, var(--salvia-suave) 20%);
}
.vaso.filled::after {
  content: "✓";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-weight: 700;
}

/* ------------ DISCLAIMER ------------ */
.disclaimer {
  background: var(--crema-2);
  border-left: 4px solid var(--durazno);
  padding: 20px 22px;
  border-radius: var(--radio);
  font-size: .85rem;
  color: var(--tinta-suave);
  margin: 40px 0 20px;
}
.disclaimer strong { color: var(--tinta); }

/* ------------ FOOTER ------------ */
footer {
  text-align: center;
  padding: 40px 20px 60px;
  color: var(--tinta-suave);
  font-size: .85rem;
}
footer .marca {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--salvia);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

/* ------------ AVATAR / GALERÍA ------------ */
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.avatar-item {
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--sombra);
  background: var(--crema-2);
  position: relative;
}
.avatar-item img { width: 100%; height: 100%; object-fit: cover; }
.avatar-item .cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color: #fff; padding: 24px 14px 12px; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ============================================================
   FASE FINAL · imágenes, coach, formulario, animaciones, a11y
   ============================================================ */

/* Scrim del hero para legibilidad del título sobre cualquier foto */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,20,18,0.48), rgba(20,20,18,0) 46%);
  pointer-events: none;
}
.hero__badge, .hero__title { z-index: 2; }

/* ------------ FIGURA EDITORIAL POR SECCIÓN ------------ */
.section-figure {
  margin: 16px 0; border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea); box-shadow: var(--sombra);
  background: var(--crema-2);
}
.section-figure img { width: 100%; height: auto; display: block; }
/* Figura tipo ícono/ilustración (banco SIN MIEDO): más pequeña y centrada, no a todo el ancho */
.section-figure--icon { max-width: 320px; margin: 14px auto; }

/* Galería secundaria de ideas (tiles más pequeños, caption en minúscula) */
.galeria--ideas { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }
.galeria--ideas .gal-item figcaption { font-size: .68rem; letter-spacing: .02em; text-transform: none; font-weight: 500; color: var(--tinta-suave); line-height: 1.3; }

/* Icono de grupo en las tarjetas de categoría (doble clase: gana sobre la regla base de .cat-card__toggle) */
.cat-card__toggle.cat-card__toggle--img { grid-template-columns: 64px 1fr auto; grid-template-areas: "img tag chev" "img mini chev"; }
.cat-card__img { grid-area: img; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; display: block; border: 1px solid var(--linea); background: var(--crema-2); align-self: center; }

/* ------------ GALERÍA DE COMIDAS ------------ */
.galeria {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 18px 0;
}
.gal-item {
  margin: 0; border-radius: var(--radio); overflow: hidden;
  background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra);
}
.gal-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.gal-item figcaption {
  padding: 8px 10px; font-size: .74rem; color: var(--salvia); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; text-align: center;
}

/* ------------ AVATAR / RETRATOS (ajustes) ------------ */
.avatar-item { margin: 0; }
.avatar-item--fallback {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center;
}
.nota-suave {
  font-size: .82rem; color: var(--tinta-suave);
  background: var(--crema-2); padding: 10px 14px; border-radius: 8px; margin-top: 14px;
}
.nota-suave code {
  background: var(--tinta); color: var(--bg-crema); padding: 2px 8px;
  border-radius: 6px; font-family: var(--font-mono); font-size: .85em;
}

/* ------------ TARJETA DE COACH + AVATAR CIRCULAR ------------ */
.coach-card {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 22px; box-shadow: var(--sombra); margin-top: 8px;
}
.coach-avatar {
  position: relative; width: 116px; height: 116px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: var(--salvia);
  display: grid; place-items: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--salvia-suave), var(--sombra);
}
.coach-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coach-initials { color: #fff; font-family: var(--font-serif); font-size: 2.2rem; }
.coach-info { flex: 1; min-width: 220px; }
.coach-info p { margin: 0 0 14px; }
.coach-nombre { font-family: var(--font-serif); font-size: 1.4rem; color: var(--tinta); }
.coach-rol {
  color: var(--durazno); font-weight: 600; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; margin: 2px 0 10px;
}

/* Botón WhatsApp */
.btn-wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; padding: 12px 20px; border-radius: 999px;
  font-weight: 600; border: none; border-bottom: none;
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,211,102,.45); border-bottom-color: transparent; color: #fff; }
.btn-wa svg { width: 20px; height: 20px; }

/* ------------ FORMULARIO / CUESTIONARIO ------------ */
#form-valentina h4 { color: var(--salvia); margin-bottom: 4px; }
.form-grid { display: grid; gap: 14px; margin-top: 10px; }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__label { font-size: .9rem; color: var(--tinta); font-weight: 500; }
.req { color: var(--durazno); }
.campo input, .campo textarea, .campo select {
  width: 100%; font-family: var(--font-sans); font-size: .95rem; color: var(--tinta);
  background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--salvia); box-shadow: 0 0 0 3px rgba(91,123,111,.15);
}
.campo textarea { resize: vertical; min-height: 54px; }

.incentivo {
  margin: 20px 0; padding: 16px 18px; border-radius: var(--radio);
  background: linear-gradient(135deg, var(--durazno-suave), var(--crema-2));
  border: 1px solid var(--durazno-suave); display: flex; flex-direction: column; gap: 6px;
}
.incentivo strong { color: var(--tinta); }
.incentivo span { font-size: .82rem; color: var(--tinta-suave); }

.consentimientos { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--tinta-suave); cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--salvia); flex-shrink: 0; }

.btn-enviar {
  margin-top: 16px; background: var(--tinta); color: var(--bg-crema); border: none;
  padding: 14px 28px; border-radius: 999px; font-family: var(--font-sans);
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.btn-enviar:hover { transform: translateY(-2px); background: var(--salvia); }
.btn-enviar:disabled { opacity: .6; cursor: default; transform: none; }
.form-msg { margin-top: 12px; font-size: .9rem; min-height: 1.2em; }
.form-msg--ok { color: var(--salvia); font-weight: 600; }
.form-msg--err { color: #B3261E; font-weight: 600; }

/* ------------ BOTÓN FLOTANTE DE AYUDA ------------ */
.fab-ayuda {
  position: fixed; right: 18px; bottom: 18px; z-index: 55;
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; padding: 12px 18px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); border-bottom: none;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.fab-ayuda.show { opacity: 1; transform: none; pointer-events: auto; }
.fab-ayuda:hover { color: #fff; border-bottom-color: transparent; transform: translateY(-2px); }
.fab-ayuda svg { width: 20px; height: 20px; }

/* ------------ TOAST ------------ */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px);
  background: var(--tinta); color: var(--bg-crema); padding: 14px 22px;
  border-radius: 999px; box-shadow: var(--sombra-fuerte); z-index: 70;
  opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
  max-width: 90vw; text-align: center; font-size: .9rem;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast--ok { background: var(--salvia); }

/* ------------ SCROLL REVEAL ------------ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-left  { opacity: 0; transform: translateX(-30px); transition: opacity .6s ease, transform .6s ease; }
.reveal-right { opacity: 0; transform: translateX(30px);  transition: opacity .6s ease, transform .6s ease; }
.reveal-left.in, .reveal-right.in { opacity: 1; transform: none; }

/* ------------ BARRA DE PROGRESO DE LECTURA ------------ */
.read-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 0;
  background: linear-gradient(90deg, var(--salvia), var(--durazno));
  z-index: 65; transition: width .12s ease; border-radius: 0 3px 3px 0;
}

/* ------------ CELDA DE MENÚ PENDIENTE (no rota) ------------ */
.comida__nota {
  margin: 4px 0 0; font-size: .86rem; color: var(--pendiente-fg);
  background: var(--pendiente-bg); padding: 8px 12px; border-radius: 8px;
}

/* ============================================================
   DASHBOARD "HOY" (app funcional)
   ============================================================ */
.hoy-demo { display:inline-block; background:var(--pendiente-bg); color:var(--pendiente-fg); font-size:.72rem; font-weight:600; padding:2px 10px; border-radius:999px; margin-left:4px; }
.hoy-aviso { background:var(--crema-2); border-radius:10px; padding:10px 14px; font-size:.86rem; color:var(--tinta-suave); margin:6px 0 14px; }
.hoy-aviso--exp { background:#F6E7E4; color:#8a3b2e; }
.hoy-mini { font-size:.78rem; opacity:.8; }
.hoy-prog { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 18px; }
.hoy-prog__lbl { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--salvia); font-weight:600; margin-bottom:4px; }
.hoy-prog__pct { font-size:.8rem; color:var(--tinta-suave); margin-top:4px; }
.hoy-meals { display:flex; flex-direction:column; gap:14px; }
.meal { background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg); padding:20px 22px; box-shadow:var(--sombra-suave); transition:box-shadow .25s ease; }
.meal:hover { box-shadow:var(--sombra); }
.meal__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; }
.meal__tipo { font-family:var(--font-serif); font-size:1.2rem; color:var(--salvia); }
.meal__estado { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:999px; background:var(--crema-2); color:var(--tinta-suave); font-weight:600; }
.meal__estado--completed { background:var(--salvia); color:#fff; }
.meal__estado--option_selected, .meal__estado--in_progress { background:var(--durazno-suave); color:var(--tinta); }
.meal__estado--skipped { background:#e6ded0; color:var(--tinta-suave); }
.meal__opts { display:flex; flex-direction:column; gap:8px; }
.meal-opt { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--crema-2); border:1px solid var(--linea); border-radius:12px; padding:12px 14px; transition:border-color .2s ease, background .2s ease; }
.meal-opt:hover { border-color:var(--salvia-suave); background:#fff; }
.meal-opt__txt { font-size:.92rem; flex:1; }
.meal-chosen { background:var(--crema-2); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.meal-chosen__txt { font-size:.95rem; }
.meal__acciones { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.btn-mini { border:1px solid var(--salvia); background:var(--salvia); color:#fff; padding:8px 14px; border-radius:999px; font-family:var(--font-sans); font-size:.82rem; font-weight:600; cursor:pointer; transition:transform .12s, opacity .2s; }
.btn-mini:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(70,91,71,.22); }
.btn-mini--ok { background:var(--tinta); border-color:var(--tinta); }
.btn-mini--ghost { background:#fff; color:var(--tinta); border-color:var(--linea); }
.btn-mini--rec { background:#C0392B; border-color:#C0392B; }
.btn-link { background:none; border:none; color:var(--salvia); font-size:.82rem; cursor:pointer; text-decoration:underline; padding:4px 0; }
.meal-ok { color:var(--salvia); font-weight:700; }
.meal-skip { color:var(--tinta-suave); font-size:.88rem; }
.meal__extra { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.meal-sust { background:var(--pendiente-bg); color:var(--pendiente-fg); font-size:.85rem; padding:8px 12px; border-radius:8px; }
.meal-nota { display:flex; flex-direction:column; gap:8px; }
.meal-nota textarea { width:100%; border:1px solid var(--linea); border-radius:10px; padding:10px; font-family:var(--font-sans); font-size:.9rem; resize:vertical; }
.meal-rec { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.meal-rec__st { font-size:.82rem; color:var(--tinta-suave); }
.meal-audio { display:flex; gap:8px; align-items:center; font-size:.82rem; color:var(--tinta-suave); flex-wrap:wrap; }
.meal-audio audio { height:34px; max-width:100%; }

/* Foto del plato en cada momento del día (pestaña Hoy) */
.meal--foto { overflow: hidden; }
.meal__foto { height: 128px; margin: -20px -22px 16px; background-size: cover; background-position: center; background-color: var(--crema-2); position: relative; }
.meal__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.30), transparent 58%); }

/* Micrófono: fila con botón, tiempo y medidor de voz en vivo (se mueve cuando hablas) */
.meal-rec { flex-direction: column; align-items: stretch; gap: 8px; }
.meal-rec__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meal-rec__time { font-size: .82rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; min-width: 34px; }
.meal-rec__meter { flex: 1 1 120px; min-width: 90px; height: 9px; background: var(--crema-2); border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; }
.meal-rec__meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--salvia), var(--durazno)); transition: width .07s linear; }
.btn-mini--rec.rec-on { background: var(--durazno); color: #fff; animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,113,75,.5); } 50% { box-shadow: 0 0 0 6px rgba(201,113,75,0); } }

/* Guía de instalación en el celular (sección Notificaciones) */
.notif-guia { background: var(--crema-2); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.notif-guia strong { display: block; margin-bottom: 8px; color: var(--tinta); }
.notif-guia ol { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.notif-guia li { font-size: .92rem; color: var(--tinta); line-height: 1.4; }
.notif-guia__nota { font-size: .8rem; color: var(--tinta-suave); display: block; }
.notif-ic { font-style: normal; }
#notif-activar[disabled] { opacity: .5; cursor: not-allowed; }
.hoy-priv { font-size:.8rem; color:var(--tinta-suave); opacity:.8; margin-top:14px; }
.hoy-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.racha { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg, var(--mostaza), var(--durazno)); color:#fff; font-weight:700; font-size:.85rem; padding:8px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(216,162,74,.35); white-space:nowrap; flex-shrink:0; }
/* Diario / historial */
.diario-day { display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--linea-suave); }
.diario-day:first-of-type { border-top:none; }
.diario-fecha { font-family:var(--font-serif); font-size:1rem; color:var(--salvia); min-width:110px; text-transform:capitalize; }
.diario-meals { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.diario-meal { font-size:.82rem; background:var(--crema-2); border:1px solid var(--linea); border-radius:999px; padding:4px 12px; color:var(--tinta-suave); }
.diario-meal.ok { background:rgba(70,91,71,.1); border-color:var(--salvia-suave); color:var(--salvia); font-weight:600; }

/* ============ APP SHELL: barra de pestañas inferior ============ */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--linea); box-shadow:0 -4px 24px rgba(35,33,30,.07); }
.tabbar__btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px calc(8px + env(safe-area-inset-bottom)); background:none; border:none; cursor:pointer; color:var(--tinta-suave); font-family:var(--font-sans); font-size:.65rem; font-weight:600; letter-spacing:.02em; transition:color .2s ease; }
.tabbar__btn svg { width:23px; height:23px; opacity:.85; transition:transform .2s ease; }
.tabbar__btn.active { color:var(--salvia); }
.tabbar__btn.active svg { opacity:1; transform:translateY(-1px); }
.tabbar__brand { display:none; }
.tabbar__brand small { display:block; font-family:var(--font-sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--durazno); font-weight:700; margin-top:2px; }
body.modo-tabs .wrap { padding-top:22px; padding-bottom:90px; }
body.modo-tabs #read-progress { display:none; }
body.modo-tabs #fab-ayuda { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* Escritorio: sidebar izquierda en vez de barra inferior */
@media (min-width: 900px) {
  .tabbar { flex-direction:column; top:0; bottom:0; right:auto; width:224px; border-top:none; border-right:1px solid var(--linea); justify-content:flex-start; padding:26px 0 0; gap:4px; background:var(--bg-crema); box-shadow:none; backdrop-filter:none; }
  .tabbar__btn { flex:none; flex-direction:row; justify-content:flex-start; gap:13px; padding:14px 24px; font-size:.94rem; letter-spacing:0; }
  .tabbar__btn svg { width:21px; height:21px; }
  .tabbar__btn.active { background:var(--crema-2); box-shadow:inset 3px 0 0 var(--salvia); }
  body.modo-tabs .wrap { margin-left:224px; max-width:720px; padding-left:36px; padding-right:36px; padding-bottom:60px; }
  body.modo-tabs #fab-ayuda { bottom:22px; }
  body.modo-tabs .nav-toggle { display:none; }
  .tabbar__brand { display:block; padding:2px 24px 22px; font-family:var(--font-serif); font-optical-sizing:auto; font-size:1.4rem; color:var(--tinta); line-height:1; }
}

/* estadísticas de progreso (por acciones) */
.prog-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.prog-stat { background:var(--crema-2); border:1px solid var(--linea); border-radius:var(--radio); padding:16px 10px; text-align:center; }
.prog-stat__num { font-family:var(--font-serif); font-optical-sizing:auto; font-size:2rem; color:var(--salvia); line-height:1; }
.prog-stat__lbl { font-size:.7rem; color:var(--tinta-suave); margin-top:6px; line-height:1.3; }

/* Días expandibles (menú semanal) */
.dia { padding:0; overflow:hidden; }
.dia__toggle { width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:none; cursor:pointer; padding:18px 22px; text-align:left; }
.dia__toggle .dia__nombre { margin:0; display:block; }
.dia__chev { color:var(--salvia); transition:transform .3s cubic-bezier(.2,.7,.3,1); display:flex; }
.dia__chev svg { width:22px; height:22px; }
.dia--open .dia__chev { transform:rotate(180deg); }
.dia__body { padding:0 22px 16px; }
.dia__body:not([hidden]) { animation:catExpand .3s ease; }
.hoy-habitos { margin-top:18px; }
.hoy-habitos h3 { font-family:var(--font-serif); color:var(--salvia); }
@media (max-width:520px){ .hoy-prog { grid-template-columns:1fr; } }

/* ------------ TABLA DE PROGRESO ------------ */
.prog-bar-wrap { height: 10px; background: var(--crema-2); border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.prog-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--salvia), var(--durazno)); transition: width .4s ease; }
.prog-pct { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 12px; }
.prog-tabla { display: flex; flex-direction: column; gap: 6px; }
.prog-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--linea); border-radius: 10px; }
.prog-row .prog-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); flex-shrink: 0; }
.prog-row.done .prog-dot { background: var(--salvia); }
.prog-label { flex: 1; font-size: .92rem; }
.prog-estado { font-size: .72rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .06em; }
.prog-row.done .prog-estado { color: var(--salvia); font-weight: 600; }

/* ------------ TARJETAS DE CATEGORÍA (editorial) ------------ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; margin-top: 18px; }
.cat-card {
  position: relative; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
  padding: 24px 22px 10px; box-shadow: var(--sombra-suave); overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.cat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--durazno); }
.cat-card--salvia::before { background: var(--salvia); }
.cat-card--durazno::before { background: var(--durazno); }
.cat-card--neutro::before { background: var(--durazno-suave); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.cat-card__head { margin-bottom: 12px; }
.cat-tag {
  display: inline-block; font-family: var(--font-sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta);
  padding: 6px 13px; border-radius: 999px; background: var(--crema-2);
}
.cat-card--salvia .cat-tag { background: rgba(70,91,71,.12); color: var(--salvia); }
.cat-card--durazno .cat-tag { background: rgba(201,113,75,.14); color: #a1502c; }
.cat-lead {
  font-family: var(--font-serif); font-optical-sizing: auto; font-size: 1.12rem; line-height: 1.36;
  color: var(--tinta); margin: 0 0 14px; letter-spacing: -.01em;
}
.cat-dl { margin: 0; display: flex; flex-direction: column; }
.cat-dl__row { padding: 11px 0; border-top: 1px solid var(--linea-suave); }
.cat-dl__row dt {
  font-family: var(--font-sans); font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--salvia-suave); margin-bottom: 3px;
}
.cat-dl__row dd { margin: 0; font-size: .92rem; color: var(--tinta-suave); line-height: 1.5; }

/* Tarjetas de categoría EXPANDIBLES (cada tarjeta es un botón) */
.cat-card { padding: 0; overflow: hidden; }
.cat-card__toggle { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tag chev" "mini chev"; gap: 0 12px; align-items: center; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 20px 18px; font-family: inherit; }
.cat-card__toggle .cat-tag { grid-area: tag; justify-self: start; margin-bottom: 8px; }
.cat-card__mini { grid-area: mini; font-family: var(--font-serif); font-optical-sizing: auto; font-size: 1.02rem; line-height: 1.34; color: var(--tinta); letter-spacing: -.01em; }
.cat-card__chev { grid-area: chev; align-self: center; color: var(--salvia); transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.cat-card__chev svg { width: 22px; height: 22px; display: block; }
.cat-card.open .cat-card__chev { transform: rotate(180deg); }
.cat-card__body { padding: 2px 20px 18px; animation: catExpand .3s ease; }
@keyframes catExpand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cat-check { color: var(--salvia); font-weight: 800; }
.cat-card--rev { border-color: var(--salvia-suave); }
.cat-card--rev::before { background: var(--salvia); }
.cat-revisar { margin-top: 14px; }

/* ============================================================
   NAVEGACIÓN POR PANTALLAS (modo app) — Nataly
   ============================================================ */
/* Solo una pantalla visible a la vez cuando el modo está activo. */
body.modo-pantalla .wrap > .screen { display: none; }
body.modo-pantalla .wrap > .screen.active { display: block; animation: screenIn .38s ease; }
body.modo-pantalla .wrap { padding-bottom: 96px; min-height: 60vh; }
/* Sin modo (sin JS o reduced-motion sin activar): todo visible por defecto. */
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Barra inferior de navegación (pager) */
.screen-pager {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea); box-shadow: 0 -4px 20px rgba(32,32,30,.08);
}
body.modo-pantalla .screen-pager { display: flex; }
.sp-btn {
  border: 1px solid var(--linea); background: #fff; color: var(--tinta);
  height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px;
  cursor: pointer; font-family: var(--font-sans); font-size: .9rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.sp-btn:hover:not(:disabled) { background: var(--crema-2); }
.sp-btn:disabled { opacity: .4; cursor: default; }
.sp-next { background: var(--tinta); color: var(--bg-crema); border-color: var(--tinta); margin-left: auto; }
.sp-next:hover:not(:disabled) { background: var(--salvia); border-color: var(--salvia); }
.sp-home { }
.sp-mid { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sp-mid #sp-label { font-family: var(--font-serif); font-size: .98rem; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.sp-mid #sp-count { font-size: .72rem; color: var(--tinta-suave); letter-spacing: .04em; }

/* Estado de avance en el menú lateral (tabla de progreso) */
.sidenav a .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--linea); margin-right: 8px; vertical-align: middle;
}
.sidenav a.visitada .dot { background: var(--salvia); }
.sidenav a.actual { background: var(--crema-2); font-weight: 600; }
.sidenav a.actual .dot { background: var(--durazno); }

@media (prefers-reduced-motion: reduce) {
  body.modo-pantalla .wrap > .screen.active { animation: none; }
}

/* ------------ ACCESIBILIDAD: FOCO VISIBLE ------------ */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--salvia); outline-offset: 2px; border-radius: 6px;
}
.check-item:focus-within { outline: 3px solid var(--salvia); outline-offset: 2px; }

/* ------------ MENOS MOVIMIENTO ------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}

/* ------------ RESPONSIVE ------------ */
@media (max-width: 640px) {
  .wrap { padding: 16px 14px 40px; }
  .card { padding: 22px 18px; }
  .comida__row { grid-template-columns: 1fr; gap: 2px; }
  .hero__title { left: 18px; right: 18px; bottom: 20px; }
  .sidenav { width: 260px; }
  .coach-card { flex-direction: column; text-align: center; }
  .coach-info { min-width: 0; }
  .coach-rol { }
  .fab-ayuda span { display: none; }
  .fab-ayuda { padding: 14px; }
}

/* ============================================================
   ACCESO · Splash + Onboarding + Login / Registro / Recuperar
   Overlay de entrada. Se muestra hasta que la clienta entra.
   ============================================================ */
body.auth-open { overflow: hidden; }
.auth-ov {
  position: fixed; inset: 0; z-index: 3000;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(70,91,71,.10), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(201,113,75,.12), transparent 55%),
    var(--bg-crema);
  display: flex; align-items: stretch; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility .32s ease;
  overflow-y: auto;
}
.auth-ov.show { opacity: 1; visibility: visible; }
.auth-screen {
  width: 100%; max-width: 440px; margin: auto;
  padding: 40px 26px calc(34px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; min-height: 100%;
  animation: authIn .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes authIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.auth-brand {
  font-family: var(--font-serif); font-weight: 600; letter-spacing: .12em;
  font-size: .92rem; text-transform: uppercase; color: var(--salvia);
  display: flex; flex-direction: column; line-height: 1.1; margin-bottom: 8px;
}
.auth-brand small { font-family: var(--font-sans); letter-spacing: .32em; font-size: .6rem; color: var(--durazno); font-weight: 600; margin-top: 3px; }
.auth-brand--sm { font-size: .8rem; }

/* --- Splash --- */
.auth-splash { justify-content: center; text-align: left; }
.auth-splash__h { font-size: clamp(2.4rem, 9vw, 3.1rem); line-height: 1.02; margin: 18px 0 12px; }
.auth-splash__p { color: var(--tinta-suave); font-size: 1.06rem; margin: 0 0 30px; max-width: 34ch; }
.auth-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* --- Onboarding --- */
.auth-onb { justify-content: flex-end; text-align: left; position: relative; }
.auth-skip { position: absolute; top: 4px; right: 0; }
.auth-onb__art {
  height: clamp(200px, 40vh, 320px); border-radius: var(--radio-lg); margin-bottom: 26px;
  box-shadow: var(--sombra); position: relative; overflow: hidden;
  background-color: var(--crema-2);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Oscurecimiento sutil en la base: da profundidad editorial a la foto (no la lava). */
.auth-onb__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,24,18,.24), transparent 50%); }
/* Fotos reales de los platos (banco SIN MIEDO). Rutas compartidas por las 3 apps. */
.auth-onb__art--a { background-image: url(assets/images/comidas/comida-almuerzo.jpg); }
.auth-onb__art--b { background-image: url(assets/images/comidas/comida-desayuno.jpg); }
.auth-onb__art--c { background-image: url(assets/images/comidas/idea-bowl-pollo.jpg); }
.auth-dots { display: flex; gap: 7px; margin-bottom: 16px; }
.auth-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--linea); transition: all .3s ease; }
.auth-dot.on { width: 22px; border-radius: 4px; background: var(--salvia); }
.auth-onb__t { font-size: clamp(1.8rem, 6vw, 2.3rem); margin-bottom: 8px; }
.auth-onb__d { color: var(--tinta-suave); font-size: 1.04rem; margin: 0 0 26px; max-width: 36ch; }
.auth-onb .btn-enviar { margin-top: 0; }

/* --- Formularios (login / registro / recuperar) --- */
.auth-form-screen { justify-content: center; }
.auth-form__h { margin: 14px 0 4px; }
.auth-form__p { color: var(--tinta-suave); margin: 0 0 22px; }
.auth-tabs { display: flex; gap: 4px; background: var(--crema-2); padding: 4px; border-radius: 12px; margin-bottom: 22px; }
.auth-tab {
  flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 9px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: .92rem; color: var(--tinta-suave);
  transition: all .2s ease;
}
.auth-tab.on { background: #fff; color: var(--tinta); box-shadow: var(--sombra-suave); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-pass { position: relative; display: block; }
.auth-pass input { width: 100%; padding-right: 62px; }
.auth-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--salvia); font-weight: 600; font-size: .82rem;
  cursor: pointer; padding: 6px 8px; border-radius: 8px;
}
.auth-eye:hover { background: var(--crema-2); }
.auth-forgot { align-self: flex-start; margin: -4px 0 4px; }
.auth-note { font-size: .8rem; color: var(--tinta-suave); text-align: center; margin: 6px 0 0; line-height: 1.5; }
.auth-full { width: 100%; text-align: center; justify-content: center; }
.auth-center { align-self: center; }
.btn-link { border: 0; background: transparent; color: var(--salvia); font-family: var(--font-sans); font-weight: 600; font-size: .9rem; cursor: pointer; padding: 8px 4px; text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover { color: var(--durazno); }
.form-msg { min-height: 1em; font-size: .86rem; margin: 2px 0 0; text-align: center; }
.form-msg--err { color: #B4451F; }

/* --- Borrado nota/audio + cuenta --- */
.meal-nota__acc, .cuenta-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.meal-audio__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.meal-audio { display: flex; flex-direction: column; gap: 4px; }