/* KairSun Web — pantalla Comida (mock 1:1 del módulo Food de la app).
 *
 * Fuente de verdad (KairSun-App, READ-ONLY):
 *   lib/features/food/domain/entities/food_entry.dart:6-92
 *     (FoodWeight light/medium/heavy #4ADE80/#F5A623/#E05A2B;
 *      MealCategory breakfast/lunch/snack/dinner 🌅☀️🍎🌙
 *      #FFB347/#4ADE80/#60A5FA/#A855F7)
 *   lib/features/food/presentation/screens/create_food_screen.dart
 *     (scaffold #080B0A, scroll padding 24, pills radio 12,
 *      campos radio 20, CTA sticky 56 + inset 16, foto 200×200 radio 28)
 *   lib/features/food/presentation/screens/food_history_screen.dart
 *     (bg #030D07, glows verde/naranja, header radio 36, toggle 52,
 *      grilla 6×7 gap 5, quick stats, badges de peso, cápsulas por día,
 *      paywall Mastery; tabs Mes/Semana)
 *   lib/features/food/presentation/widgets/food_entry_card.dart
 *     (tarjeta foto 110×160 + radio 22, chip de comida, kcal, notas)
 *   lib/core/routing/shell_chrome_config.dart:268-286
 *     (título FOOD, acento kShellFoodAccent #FF9800; derecha es knownIssue:
 *      NO existe /stats/food — el botón cae en /food/history)
 *   lib/l10n/app_es.arb (copy real: FOOD, Historial, Mes, Semana, HOY,
 *     ESTA SEMANA, Comidas este mes, Días registrados, Balance saludable,
 *     Historial completo, foodMasteryPitch, foodTryMastery, Opcional, ...)
 *
 * Contrato de la base (`ks-screens-base.css`): --u = 1dp real (393dp base),
 * .phone, .ks-view, piezas .ks-*. Acá NO se redefinen esas piezas.
 *
 * Sin JS, sin estilos inline, sin prioridades forzadas. Las fuentes de la app
 * en estas pantallas son Rubik (GoogleFonts, descarga externa): el mock usa DM
 * Sans local por la regla de fuentes. Los alphas de texto secundario se suben
 * para AA (la app usa .38–.55; acá ≥ .55). Todo declarado en
 * docs/screens/55_comida.md.
 */

/* ── Tokens del módulo ─────────────────────────────────────────────────── */
.ks-f,
.ks-fh {
  /* FoodWeight (food_entry.dart:24-33) y MealCategory (:51-75) */
  --f-light: #4ade80;
  --f-medium: #f5a623;
  --f-heavy: #e05a2b;
  --f-cat-breakfast: #ffb347;
  --f-cat-lunch: #4ade80;
  --f-cat-snack: #60a5fa;
  --f-cat-dinner: #a855f7;
  /* Acento de la cara Registro: peso seleccionado (Media por defecto). */
  --f-accent: #f5a623;
  --f-accent-dark: #b87c1a;
  /* Superficies: create #080B0A / history #030D07 + #08150C + #0A160D. */
  --f-create-bg: #080B0a;
  --f-h-bg: #030d07;
  --f-h-surface: #08150c;
  --f-h-empty: #0a160d;
  --f-card: #14161c;
  font-family: var(--ks-font);
}

.ks-f button,
.ks-fh button {
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ── Barra de estado (decorativa, igual en las dos caras) ──────────────── */
.ks-f__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(26 * var(--u)) 0 calc(30 * var(--u));
  color: #fff;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  z-index: 6;
}
.ks-f__status-icons {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
.ks-f__signal,
.ks-f__wifi,
.ks-f__battery {
  display: inline-block;
  background: rgba(255, 255, 255, 0.92);
}
.ks-f__signal {
  width: calc(15 * var(--u));
  height: calc(10 * var(--u));
  clip-path: polygon(0 100%, 18% 100%, 18% 66%, 0 66%, 0 100%, 28% 100%, 28% 44%, 46% 44%, 46% 100%, 56% 100%, 56% 22%, 74% 22%, 74% 100%, 84% 100%, 84% 0, 100% 0, 100% 100%);
}
.ks-f__wifi {
  width: calc(15 * var(--u));
  height: calc(11 * var(--u));
  clip-path: polygon(50% 100%, 0 38%, 12% 26%, 50% 62%, 88% 26%, 100% 38%);
}
.ks-f__battery {
  width: calc(22 * var(--u));
  height: calc(11 * var(--u));
  border-radius: calc(3 * var(--u));
  background: transparent;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.7);
  position: relative;
}
.ks-f__battery::before {
  content: "";
  position: absolute;
  inset: calc(1.6 * var(--u));
  width: 68%;
  border-radius: calc(1.6 * var(--u));
  background: #fff;
}
.ks-f__battery::after {
  content: "";
  position: absolute;
  right: calc(-3.4 * var(--u));
  top: 50%;
  translate: 0 -50%;
  width: calc(2 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  background: rgba(255, 255, 255, 0.7);
}

/* ══════════════════════════════════════════════════════════════════════
 *  CARA REGISTRO — CreateFoodScreen (create_food_screen.dart)
 * ══════════════════════════════════════════════════════════════════════ */
.ks-f {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--f-create-bg);
}

.ks-f__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Status 54 + padding 24; abajo: CTA 56 + inset 16 + colchón 60. */
  padding: calc(78 * var(--u)) calc(24 * var(--u)) calc(132 * var(--u));
  scrollbar-width: none;
  z-index: 1;
}
.ks-f__scroll::-webkit-scrollbar { display: none; }

/* Header: píldora de sección + fecha seleccionada + cerrar
 * (create_food_screen.dart:314-350; la fecha llega por extra `selectedDate`
 * y la app no la dibuja: acá va como chip para que el dato sea visible). */
.ks-f__head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.ks-f__pill {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  color: var(--f-accent);
  background: rgba(245, 166, 35, 0.15);
  border: calc(1 * var(--u)) solid rgba(245, 166, 35, 0.3);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.2 * var(--u));
  white-space: nowrap;
}
.ks-f__pill--cat {
  color: var(--f-cat-lunch);
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
}
.ks-f__pill-emoji { font-size: calc(16 * var(--u)); line-height: 1; }
.ks-f__date {
  margin-bottom: calc(12 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.6 * var(--u));
  white-space: nowrap;
}
.ks-f__close {
  flex: none;
  margin-left: auto;
  margin-bottom: calc(12 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.64);
}
.ks-f__close svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

/* Campo nombre (create_food_screen.dart:327-350: radio 20, fill 4%, 24px). */
.ks-f__name {
  padding: calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.04);
}
.ks-f__name-val {
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.25;
}
.ks-f__counter {
  margin-top: calc(4 * var(--u));
  text-align: right;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(12 * var(--u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ks-f__part--momento { margin-top: calc(24 * var(--u)); }
.ks-f__part--impacto { margin-top: calc(28 * var(--u)); }

/* Selector de categoría (create_food_screen.dart:591-646). */
.ks-f__cats {
  display: flex;
  gap: calc(8 * var(--u));
}
.ks-f__cat {
  flex: 1;
  min-width: 0;
  padding: calc(14 * var(--u)) calc(4 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  color: rgba(255, 255, 255, 0.62);
}
.ks-f__cat-emoji { font-size: calc(22 * var(--u)); line-height: 1; }
.ks-f__cat-name {
  max-width: 100%;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-f__cat--on {
  color: var(--f-cat-lunch);
  background: rgba(74, 222, 128, 0.18);
  border: calc(2 * var(--u)) solid var(--f-cat-lunch);
}

/* Selector de impacto/peso (create_food_screen.dart:361-416). */
.ks-f__weights {
  display: flex;
  gap: calc(12 * var(--u));
}
.ks-f__weight {
  flex: 1;
  min-width: 0;
  padding: calc(18 * var(--u)) calc(4 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  color: rgba(255, 255, 255, 0.62);
}
.ks-f__weight-emoji { font-size: calc(28 * var(--u)); line-height: 1; }
.ks-f__weight-name {
  font-size: calc(13 * var(--u));
  font-weight: 900;
  letter-spacing: calc(1 * var(--u));
  text-transform: uppercase;
}
.ks-f__weight--on {
  color: var(--f-accent);
  background: rgba(245, 166, 35, 0.2);
  border: calc(2.5 * var(--u)) solid var(--f-accent);
}

/* Secciones colapsables (collapsible_section.dart:108-197). */
.ks-f__sec { margin-top: calc(16 * var(--u)); }
.ks-f__sec--first { margin-top: calc(32 * var(--u)); }
.ks-f__sec--flush { margin-top: 0; }
.ks-f__sechead {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
}
.ks-f__sec--open .ks-f__sechead {
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.35);
}
.ks-f__secemoji { font-size: calc(16 * var(--u)); line-height: 1; }
.ks-f__sectitle {
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: calc(1.1 * var(--u));
  color: rgba(255, 255, 255, 0.62);
}
.ks-f__sec--open .ks-f__sectitle { color: var(--f-accent); }
.ks-f__secchip {
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(10 * var(--u));
  font-weight: 600;
}
.ks-f__secchev {
  margin-left: auto;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: rgba(255, 255, 255, 0.55);
}
.ks-f__sec--open .ks-f__secchev {
  color: var(--f-accent);
  rotate: 180deg;
}
.ks-f__secbody { margin-top: calc(12 * var(--u)); }

.ks-f__input {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.04);
}
.ks-f__input-val {
  color: #fff;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ks-f__input-suffix {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.ks-f__notes {
  min-height: calc(88 * var(--u));
  padding: calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(15 * var(--u));
  font-weight: 500;
  line-height: 1.35;
}
.ks-f__photo {
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  border-radius: calc(28 * var(--u));
  background: rgba(255, 255, 255, 0.02);
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.1);
}
.ks-f__photo svg {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  color: rgba(245, 166, 35, 0.5);
}
.ks-f__photo span {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(15 * var(--u));
  font-weight: 700;
}

/* CTA sticky (create_food_screen.dart:553-581 + kairsun_cta_button.dart:182-288). */
.ks-f__dock {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  bottom: calc(16 * var(--u));
  z-index: 4;
}
.ks-f__cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(15 * var(--u)) calc(24 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, #f8bf61 0%, #f5a623 55%, #b87c1a 100%);
  border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 calc(4 * var(--u)) 0 #b87c1a,
    0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-2 * var(--u)) rgba(245, 166, 35, 0.55),
    0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45);
  color: #fff;
}
.ks-f__cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(28 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0));
}
.ks-f__cta svg {
  position: relative;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  filter: drop-shadow(0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.33));
}
.ks-f__cta span {
  position: relative;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.8 * var(--u));
  text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.27);
}
/* AnimatedOpacity 0.55 cuando el nombre está vacío (:562-564). */
.ks-f__cta--idle { opacity: 0.55; }

/* ══════════════════════════════════════════════════════════════════════
 *  CARA HISTORIAL — FoodHistoryScreen (food_history_screen.dart)
 * ══════════════════════════════════════════════════════════════════════ */
.ks-fh {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--f-h-bg);
}
.ks-fh__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ks-fh__glow--green {
  top: calc(-40 * var(--u));
  left: calc(-60 * var(--u));
  width: calc(280 * var(--u));
  height: calc(280 * var(--u));
  background: radial-gradient(circle, rgba(34, 197, 94, 0.14), transparent 70%);
}
.ks-fh__glow--medium {
  top: calc(100 * var(--u));
  right: calc(-80 * var(--u));
  width: calc(200 * var(--u));
  height: calc(200 * var(--u));
  background: radial-gradient(circle, rgba(245, 166, 35, 0.08), transparent 70%);
}

/* El header es una placa; la fila y el toggle son hermanos del input para que
 * el toggle CSS puro de la base los alcance con `~` (ks-screens-base.css:181-217). */
.ks-fh__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(208 * var(--u));
  border-radius: 0 0 calc(36 * var(--u)) calc(36 * var(--u));
  background: rgba(3, 13, 7, 0.93);
  border-bottom: calc(1.5 * var(--u)) solid rgba(34, 197, 94, 0.35);
  box-shadow: 0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(calc(14 * var(--u)));
  backdrop-filter: blur(calc(14 * var(--u)));
  z-index: 4;
}
.ks-fh__row {
  position: absolute;
  top: calc(66 * var(--u));
  left: calc(18 * var(--u));
  right: calc(18 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  z-index: 5;
}
.ks-fh__btn {
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(16.8 * var(--u));
  background: var(--f-h-surface);
  border: calc(1.5 * var(--u)) solid rgba(34, 197, 94, 0.25);
  color: rgba(255, 255, 255, 0.78);
}
.ks-fh__btn svg { width: calc(22.4 * var(--u)); height: calc(22.4 * var(--u)); }
.ks-fh__btn--add {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.45);
  color: var(--f-light);
}
.ks-fh__btn--add svg { width: calc(25.8 * var(--u)); height: calc(25.8 * var(--u)); }
.ks-fh__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ks-fh__eyebrow {
  color: var(--f-light);
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(3.5 * var(--u));
  line-height: 1.25;
}
.ks-fh__title {
  color: #fff;
  font-size: calc(26 * var(--u));
  font-weight: 900;
  line-height: 1.15;
}

/* Toggle Mes | Semana (food_history_screen.dart:327-332, 1144-1225).
 * No usa .ks-view__tabs para que el estilo activo sea el de la app. */
.ks-fh__toggle {
  position: absolute;
  top: calc(138 * var(--u));
  left: calc(18 * var(--u));
  right: calc(18 * var(--u));
  height: calc(52 * var(--u));
  display: flex;
  gap: calc(5 * var(--u));
  padding: calc(5 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--f-h-empty);
  border: calc(1.5 * var(--u)) solid rgba(34, 197, 94, 0.2);
  z-index: 5;
}
.ks-fh__toggle label,
.ks-fh__toggle span {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  border-radius: calc(13 * var(--u));
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(15 * var(--u));
  font-weight: 500;
  cursor: pointer;
}
.ks-fh__toggle label svg,
.ks-fh__toggle span svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); color: rgba(255, 255, 255, 0.5); }
.ks-fh-view > input:nth-of-type(1):checked ~ .ks-fh__toggle label:nth-of-type(1),
.ks-fh-view > input:nth-of-type(2):checked ~ .ks-fh__toggle label:nth-of-type(2),
.ks-fh__toggle span.ks-fh__tagon {
  background: rgba(34, 197, 94, 0.18);
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.55);
  color: #fff;
  font-weight: 800;
}
.ks-fh-view > input:nth-of-type(1):checked ~ .ks-fh__toggle label:nth-of-type(1) svg,
.ks-fh-view > input:nth-of-type(2):checked ~ .ks-fh__toggle label:nth-of-type(2) svg,
.ks-fh__toggle span.ks-fh__tagon svg {
  color: var(--f-light);
}
.ks-fh-view > input:nth-of-type(1):focus-visible ~ .ks-fh__toggle label:nth-of-type(1),
.ks-fh-view > input:nth-of-type(2):focus-visible ~ .ks-fh__toggle label:nth-of-type(2) {
  outline: 2px solid var(--ks-gold);
  outline-offset: 2px;
}

.ks-fh-view > .ks-view__panes {
  position: absolute;
  inset: 0;
}
/* Panes del toggle Mes/Semana: NO usan `.ks-pane` a propósito. La regla de la
 * base para el toggle de página (`~ .ks-view__panes .ks-pane:nth-of-type(n)`)
 * también alcanzaría a los panes anidados y mostraría Mes y Semana a la vez
 * (lo cazó el render de verificación). Con clase propia, cada toggle manda
 * solo en el suyo. */
.ks-fh__pane { display: none; }
.ks-fh-view > input:nth-of-type(1):checked ~ .ks-view__panes .ks-fh__pane:nth-of-type(1),
.ks-fh-view > input:nth-of-type(2):checked ~ .ks-view__panes .ks-fh__pane:nth-of-type(2) {
  display: block;
}
.ks-fh__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(220 * var(--u)) calc(18 * var(--u)) calc(60 * var(--u));
  scrollbar-width: none;
  z-index: 1;
}
.ks-fh__scroll::-webkit-scrollbar { display: none; }

/* ── Mes: cabecera, leyenda, grilla (food_history_screen.dart:380-441, 549-641) */
.ks-fh__monthhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.ks-fh__monthname {
  color: #fff;
  font-size: calc(18 * var(--u));
  font-weight: 900;
  letter-spacing: calc(1.5 * var(--u));
}
.ks-fh__legend {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
}
.ks-fh__legend span {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(10 * var(--u));
  font-weight: 600;
}
.ks-fh__swatch {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin-left: calc(3 * var(--u));
  border-radius: calc(4 * var(--u));
}
.ks-fh__swatch--empty { background: var(--f-h-empty); }
.ks-fh__swatch--light { background: rgba(34, 197, 94, 0.72); }
.ks-fh__swatch--medium { background: rgba(245, 166, 35, 0.72); }
.ks-fh__swatch--heavy { background: rgba(224, 90, 43, 0.72); }

.ks-fh__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: calc(14 * var(--u));
}
.ks-fh__dow span {
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.ks-fh__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(5 * var(--u));
  margin-top: calc(8 * var(--u));
}
.ks-fh__cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--f-h-empty);
  border: calc(1 * var(--u)) solid var(--f-h-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.ks-fh__cell--out {
  background: transparent;
  border: 0;
}
.ks-fh__cell--light { background: #146B36; }
.ks-fh__cell--medium { background: #8A6212; }
.ks-fh__cell--heavy { background: rgba(224, 90, 43, 0.72); }
.ks-fh__cell--today { border: calc(2 * var(--u)) solid var(--f-light); }
.ks-fh__cellnum {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(12 * var(--u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ks-fh__cell--filled .ks-fh__cellnum {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.54);
}
.ks-fh__cell--filled .ks-fh__cellcount { color: #fff; }
.ks-fh__cell--today .ks-fh__cellnum { font-weight: 900; }
.ks-fh__cellcount {
  color: rgba(255, 255, 255, 0.75);
  font-size: calc(8 * var(--u));
  font-weight: 700;
  text-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.54);
}

/* Quick stats (food_history_screen.dart:445-457, 1070-1097). */
.ks-fh__stats {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(16 * var(--u));
}
.ks-fh__stat {
  flex: 1;
  min-width: 0;
  padding: calc(12 * var(--u)) calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  text-align: center;
  background: rgba(34, 197, 94, 0.08);
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.22);
}
.ks-fh__stat--medium {
  background: rgba(245, 166, 35, 0.08);
  border-color: rgba(245, 166, 35, 0.22);
}
.ks-fh__statval {
  color: var(--f-light);
  font-size: calc(15 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ks-fh__stat--medium .ks-fh__statval { color: var(--f-medium); }
.ks-fh__statlabel {
  margin-top: calc(3 * var(--u));
  color: rgba(34, 197, 94, 0.85);
  font-size: calc(9 * var(--u));
  font-weight: 600;
  line-height: 1.2;
}
.ks-fh__stat--medium .ks-fh__statlabel { color: rgba(245, 166, 35, 0.85); }

/* Distribución por peso (food_history_screen.dart:459-489, 1036-1068). */
.ks-fh__dist {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
}
.ks-fh__wbadge {
  flex: 1;
  min-width: 0;
  padding: calc(8 * var(--u)) 0;
  border-radius: calc(12 * var(--u));
  text-align: center;
  line-height: 1.15;
  background: rgba(34, 197, 94, 0.1);
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.25);
}
.ks-fh__wbadge--medium {
  background: rgba(245, 166, 35, 0.1);
  border-color: rgba(245, 166, 35, 0.25);
}
.ks-fh__wbadge--heavy {
  background: rgba(224, 90, 43, 0.1);
  border-color: rgba(224, 90, 43, 0.25);
}
.ks-fh__wemoji { font-size: calc(16 * var(--u)); line-height: 1; }
.ks-fh__wcount {
  color: var(--f-light);
  font-size: calc(14 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ks-fh__wbadge--medium .ks-fh__wcount { color: var(--f-medium); }
.ks-fh__wbadge--heavy .ks-fh__wcount { color: var(--f-heavy); }
.ks-fh__wlabel {
  color: rgba(34, 197, 94, 0.85);
  font-size: calc(9 * var(--u));
  font-weight: 600;
}
.ks-fh__wbadge--medium .ks-fh__wlabel { color: rgba(245, 166, 35, 0.85); }
.ks-fh__wbadge--heavy .ks-fh__wlabel { color: rgba(224, 90, 43, 0.9); }

/* HOY (food_history_screen.dart:496-521). */
.ks-fh__today {
  margin-top: calc(20 * var(--u));
  color: var(--f-light);
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(2.5 * var(--u));
}

/* Tarjeta de comida (food_entry_card.dart:50-315). */
.ks-fh__meal {
  margin-top: calc(8 * var(--u));
  display: flex;
  align-items: stretch;
  border-radius: calc(22 * var(--u));
  overflow: hidden;
  background: linear-gradient(135deg, rgba(20, 22, 28, 0.78), rgba(20, 22, 28, 0.45));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.05);
  box-shadow:
    calc(2 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.3),
    calc(-1 * var(--u)) calc(-1 * var(--u)) calc(4 * var(--u)) rgba(255, 255, 255, 0.025);
}
/* Color.lerp(surface, weightColor, 0.08) al 72% → tinte fijo por peso. */
.ks-fh__meal--light { background: linear-gradient(135deg, rgba(24, 38, 36, 0.72), rgba(20, 22, 28, 0.45)); }
.ks-fh__meal--medium { background: linear-gradient(135deg, rgba(38, 34, 29, 0.72), rgba(20, 22, 28, 0.45)); }
.ks-fh__meal--heavy { background: linear-gradient(135deg, rgba(36, 27, 29, 0.72), rgba(20, 22, 28, 0.45)); }
.ks-fh__mealphoto {
  flex: none;
  width: calc(110 * var(--u));
  min-height: calc(160 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 222, 128, 0.08);
}
.ks-fh__meal--medium .ks-fh__mealphoto { background: rgba(245, 166, 35, 0.08); }
.ks-fh__meal--heavy .ks-fh__mealphoto { background: rgba(224, 90, 43, 0.08); }
.ks-fh__mealemoji {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: calc(28 * var(--u));
  background: radial-gradient(circle, rgba(74, 222, 128, 0.3), rgba(74, 222, 128, 0.08));
  box-shadow: 0 0 calc(18 * var(--u)) rgba(74, 222, 128, 0.35);
}
.ks-fh__meal--medium .ks-fh__mealemoji {
  background: radial-gradient(circle, rgba(245, 166, 35, 0.3), rgba(245, 166, 35, 0.08));
  box-shadow: 0 0 calc(18 * var(--u)) rgba(245, 166, 35, 0.35);
}
.ks-fh__meal--heavy .ks-fh__mealemoji {
  background: radial-gradient(circle, rgba(224, 90, 43, 0.3), rgba(224, 90, 43, 0.08));
  box-shadow: 0 0 calc(18 * var(--u)) rgba(224, 90, 43, 0.35);
}
.ks-fh__mealbody {
  flex: 1;
  min-width: 0;
  padding: calc(14 * var(--u));
}
.ks-fh__mealtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.ks-fh__mealchip {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: rgba(74, 222, 128, 0.12);
  border: calc(1 * var(--u)) solid rgba(74, 222, 128, 0.4);
  color: var(--f-cat-lunch);
  font-size: calc(11 * var(--u));
  font-weight: 700;
}
.ks-fh__mealchip--breakfast { background: rgba(255, 179, 71, 0.12); border-color: rgba(255, 179, 71, 0.4); color: var(--f-cat-breakfast); }
.ks-fh__mealchip--snack { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.4); color: var(--f-cat-snack); }
.ks-fh__mealchip--dinner { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.4); color: var(--f-cat-dinner); }
.ks-fh__actions { display: inline-flex; gap: calc(6 * var(--u)); }
.ks-fh__action {
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(10 * var(--u));
  background: rgba(33, 150, 243, 0.08);
  border: calc(1 * var(--u)) solid rgba(33, 150, 243, 0.2);
  color: rgba(33, 150, 243, 0.9);
}
.ks-fh__action svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ks-fh__action--del {
  background: rgba(255, 82, 82, 0.08);
  border-color: rgba(255, 82, 82, 0.2);
  color: rgba(255, 82, 82, 0.9);
}
.ks-fh__mealname {
  margin-top: calc(8 * var(--u));
  color: #fff;
  font-size: calc(16 * var(--u));
  font-weight: 900;
  letter-spacing: calc(-0.3 * var(--u));
  line-height: 1.1;
}
.ks-fh__mealchips {
  margin-top: calc(8 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex-wrap: wrap;
}
.ks-fh__kcal {
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(10, 12, 16, 0.55);
  border: calc(1 * var(--u)) solid rgba(255, 215, 0, 0.35);
  color: rgba(255, 215, 0, 0.9);
  font-size: calc(11 * var(--u));
  font-weight: 800;
  letter-spacing: calc(0.4 * var(--u));
  font-variant-numeric: tabular-nums;
}
.ks-fh__time {
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(10 * var(--u));
}
.ks-fh__notes {
  margin-top: calc(6 * var(--u));
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(11 * var(--u));
  font-style: italic;
}

/* Cápsulas por día del mes (food_history_screen.dart:523-540, 952-1031). */
.ks-fh__day {
  margin-top: calc(8 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: var(--f-h-surface);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.05);
}
.ks-fh__day--light { border-color: rgba(34, 197, 94, 0.4); }
.ks-fh__day--medium { border-color: rgba(245, 166, 35, 0.4); }
.ks-fh__day--heavy { border-color: rgba(224, 90, 43, 0.4); }
.ks-fh__daybox {
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(13 * var(--u));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(14 * var(--u));
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.ks-fh__day--filled .ks-fh__daybox {
  color: #fff;
  font-size: calc(16 * var(--u));
}
.ks-fh__day--light .ks-fh__daybox { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.45); }
.ks-fh__day--medium .ks-fh__daybox { background: rgba(245, 166, 35, 0.2); border-color: rgba(245, 166, 35, 0.45); }
.ks-fh__day--heavy .ks-fh__daybox { background: rgba(224, 90, 43, 0.2); border-color: rgba(224, 90, 43, 0.45); }
.ks-fh__daybody { flex: 1; min-width: 0; }
.ks-fh__dayname {
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.ks-fh__daydate {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(11 * var(--u));
}
.ks-fh__pills { display: inline-flex; gap: calc(4 * var(--u)); }
.ks-fh__pill {
  padding: calc(3 * var(--u)) calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: rgba(34, 197, 94, 0.18);
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.4);
  color: var(--f-light);
}
.ks-fh__pill--medium { background: rgba(245, 166, 35, 0.18); border-color: rgba(245, 166, 35, 0.4); color: var(--f-medium); }
.ks-fh__pill--heavy { background: rgba(224, 90, 43, 0.18); border-color: rgba(224, 90, 43, 0.4); color: #f08a5e; }
.ks-fh__nodata {
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(11 * var(--u));
}

/* Paywall Mastery (food_history_screen.dart:527-528, 1230-1287).
 * Copy real del ARB; el mock no simula compra: es la tarjeta tal cual. */
.ks-fh__paywall {
  margin: calc(12 * var(--u)) 0 calc(16 * var(--u));
  padding: calc(28 * var(--u)) calc(24 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(3, 13, 7, 0.95));
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.35);
  text-align: center;
}
.ks-fh__payicon {
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(17 * var(--u));
  background: rgba(34, 197, 94, 0.15);
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.45);
  color: var(--f-light);
}
.ks-fh__payicon svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.ks-fh__paytitle {
  margin-top: calc(16 * var(--u));
  color: #fff;
  font-size: calc(18 * var(--u));
  font-weight: 900;
}
.ks-fh__paybody {
  margin-top: calc(6 * var(--u));
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(13 * var(--u));
  line-height: 1.5;
  white-space: pre-line;
}
.ks-fh__paycta {
  position: relative;
  overflow: hidden;
  margin-top: calc(20 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(56 * var(--u));
  padding: calc(15 * var(--u)) calc(24 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, #6ee7a0 0%, #22c55e 55%, #15803d 100%);
  border: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 calc(4 * var(--u)) 0 #15803d,
    0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-2 * var(--u)) rgba(34, 197, 94, 0.55),
    0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: calc(0.6 * var(--u));
  white-space: nowrap;
  text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.27);
}
.ks-fh__paycta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(28 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0));
}

/* ── Semana (food_history_screen.dart:646-928) ─────────────────────────── */
.ks-fh__whead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
.ks-fh__wtitle {
  color: #fff;
  font-size: calc(18 * var(--u));
  font-weight: 900;
  letter-spacing: calc(1.5 * var(--u));
}
.ks-fh__wchip {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  background: rgba(34, 197, 94, 0.12);
  border: calc(1 * var(--u)) solid rgba(34, 197, 94, 0.3);
  color: var(--f-light);
  font-size: calc(12 * var(--u));
  font-weight: 700;
}
.ks-fh__wdist {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(8 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.07);
}
.ks-fh__wdist .ks-fh__wbadge { padding: calc(8 * var(--u)) 0; }
.ks-fh__stack {
  display: flex;
  flex: 0 0 100%;
  height: calc(6 * var(--u));
  margin-top: calc(2 * var(--u));
  border-radius: calc(6 * var(--u));
  overflow: hidden;
}
.ks-fh__stack i { display: block; height: 100%; }
.ks-fh__stack-light { flex: 5; background: var(--f-light); }
.ks-fh__stack-medium { flex: 4; background: var(--f-medium); }
.ks-fh__stack-heavy { flex: 3; background: var(--f-heavy); }

.ks-fh__card {
  margin-top: calc(10 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--f-h-surface);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.ks-fh__card--today { border-color: rgba(34, 197, 94, 0.45); }
.ks-fh__card--light { border-color: rgba(34, 197, 94, 0.28); }
.ks-fh__card--medium { border-color: rgba(245, 166, 35, 0.28); }
.ks-fh__card--heavy { border-color: rgba(224, 90, 43, 0.28); }
.ks-fh__cardrow {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
}
.ks-fh__cardbox {
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(13 * var(--u));
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.08);
  font-size: calc(20 * var(--u));
}
.ks-fh__cardbox--light { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
.ks-fh__cardbox--medium { background: rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 0.35); }
.ks-fh__cardbox--heavy { background: rgba(224, 90, 43, 0.12); border-color: rgba(224, 90, 43, 0.35); }
.ks-fh__cardbox--empty {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(16 * var(--u));
}
.ks-fh__cardbody { flex: 1; min-width: 0; }
.ks-fh__cardname {
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 700;
}
.ks-fh__carddate {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(11 * var(--u));
}
.ks-fh__chev {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: rgba(255, 255, 255, 0.55);
}
.ks-fh__chev--up { rotate: 180deg; }
.ks-fh__cardmeals { padding: 0 calc(12 * var(--u)) calc(12 * var(--u)); }
.ks-fh__cardmeals .ks-fh__meal { margin-top: 0; margin-bottom: calc(8 * var(--u)); }

/* ── Cara Historial sin scroll real: toma desplazada (estados) ─────────── */
.ks-fh--scrolled .ks-fh__scroll {
  padding-top: calc(232 * var(--u));
}

/* ── Toggle de la página + galería de estados ──────────────────────────── */
.ks-f-view,
.ks-f-view .phone,
.ks-f-states .phone {
  --u: calc(min(380px, calc(100vw - 40px)) / 393);
}
.ks-f-view .phone,
.ks-f-states .phone {
  width: min(380px, calc(100vw - 40px));
}
.ks-f-view .ks-view__tabs { margin-bottom: calc(18 * var(--u)); }
.ks-f-view .ks-view__tabs label { min-height: calc(38 * var(--u)); font-size: calc(13 * var(--u)); }

.ks-f-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}
.ks-f-states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}
.ks-f-states__title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--ks-display);
  font-size: 1.15rem;
  color: var(--ks-text);
}
.ks-f-states__title span {
  font-family: var(--ks-font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ks-text-2);
}

/* Los identificadores de código del doc no pueden desbordar en 320-430px. */
.screen-notes li { overflow-wrap: break-word; }
.screen-notes code { overflow-wrap: anywhere; }