:root {
  /* Paleta "Lima de precision" (ver DESIGN.md). Neutros con tinte oliva,
     lima solo como relleno de accion/progreso, nunca como texto sobre claro. */
  --bg: #f5f7f0;
  --surface: #ffffff;
  --surface-2: #edf0e4;
  --text: #13160d;
  --text-dim: #5f6652;
  --accent: #c6ec5c;
  --accent-ink: #1a220c;
  --accent-soft: #e9f6c4;
  --accent-text: #24300c;
  --danger: #c23b36;
  --danger-soft: rgba(194, 59, 54, 0.1);
  --border: #d8dec9;
  --protein: #3e7cb8;
  --carbs: #d98a2a;
  --fat: #8c5fb0;
  --protein-soft: #dceaf5;
  --carbs-soft: #f8e8d2;
  --fat-soft: #ece2f3;
  /* Texto de macro sobre su fondo -soft: el color fuerte no llega a AA
     (4,5:1) en claro, estas variantes oscuras si (>5:1). */
  --protein-ink: #2c6299;
  --carbs-ink: #8f520a;
  --fat-ink: #6e4592;
  --shadow-sm: 0 1px 2px rgba(19, 22, 13, 0.05), 0 2px 6px rgba(19, 22, 13, 0.06);
  --shadow-md: 0 2px 4px rgba(19, 22, 13, 0.06), 0 8px 24px rgba(19, 22, 13, 0.1);
  /* Escalas compartidas por ambos temas */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  /* Curva de salida fuerte para feedback de UI (pulsar, abrir). */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Cifras que se comparan o se leen en columna (kcal, gramos, pesos). */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* El numero protagonista (anillo de kcal): Geist con cifras tabulares, no
     la mono -- en mono el punto decimal ocupa un hueco entero ("949 . 5"). */
  --font-display: var(--font);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101208;
    --surface: #191c12;
    --surface-2: #24281a;
    --text: #eef0e6;
    --text-dim: #9aa08a;
    --accent: #d6f17a;
    --accent-ink: #15180c;
    --accent-soft: #2a3418;
    --accent-text: #d6f17a;
    --danger: #e2615c;
    --danger-soft: rgba(226, 97, 92, 0.14);
    --border: #2b3020;
    --protein: #6fa8dd;
    --carbs: #e7a94e;
    --fat: #b089d6;
    --protein-soft: #263241;
    --carbs-soft: #3d2f1a;
    --fat-soft: #332a3d;
    /* En oscuro el color claro de cada macro ya contrasta sobre su -soft. */
    --protein-ink: #6fa8dd;
    --carbs-ink: #e7a94e;
    --fat-ink: #b089d6;
    /* Sobre fondo oscuro una sombra "de papel" no se ve: en vez de negro
       mas negro, un halo sutil mas claro que separa la tarjeta del fondo. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  input[type="date"] {
    color-scheme: dark;
  }
}

/* Interruptor de tema a mano (ver btn-theme-toggle en app.js): gana sobre
   prefers-color-scheme porque un selector con atributo pesa mas que un
   :root suelto dentro de un @media, pase lo que pase el sistema. */
:root[data-theme="light"] {
  /* Paleta "Lima de precision" (ver DESIGN.md). Neutros con tinte oliva,
     lima solo como relleno de accion/progreso, nunca como texto sobre claro. */
  --bg: #f5f7f0;
  --surface: #ffffff;
  --surface-2: #edf0e4;
  --text: #13160d;
  --text-dim: #5f6652;
  --accent: #c6ec5c;
  --accent-ink: #1a220c;
  --accent-soft: #e9f6c4;
  --accent-text: #24300c;
  --danger: #c23b36;
  --danger-soft: rgba(194, 59, 54, 0.1);
  --border: #d8dec9;
  --protein: #3e7cb8;
  --carbs: #d98a2a;
  --fat: #8c5fb0;
  --protein-soft: #dceaf5;
  --carbs-soft: #f8e8d2;
  --fat-soft: #ece2f3;
  /* Texto de macro sobre su fondo -soft: el color fuerte no llega a AA
     (4,5:1) en claro, estas variantes oscuras si (>5:1). */
  --protein-ink: #2c6299;
  --carbs-ink: #8f520a;
  --fat-ink: #6e4592;
  --shadow-sm: 0 1px 2px rgba(19, 22, 13, 0.05), 0 2px 6px rgba(19, 22, 13, 0.06);
  --shadow-md: 0 2px 4px rgba(19, 22, 13, 0.06), 0 8px 24px rgba(19, 22, 13, 0.1);
}

:root[data-theme="light"] input[type="date"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #101208;
  --surface: #191c12;
  --surface-2: #24281a;
  --text: #eef0e6;
  --text-dim: #9aa08a;
  --accent: #d6f17a;
  --accent-ink: #15180c;
  --accent-soft: #2a3418;
  --accent-text: #d6f17a;
  --danger: #e2615c;
  --danger-soft: rgba(226, 97, 92, 0.14);
  --border: #2b3020;
  --protein: #6fa8dd;
  --carbs: #e7a94e;
  --fat: #b089d6;
  --protein-soft: #263241;
  --carbs-soft: #3d2f1a;
  --fat-soft: #332a3d;
  /* En oscuro el color claro de cada macro ya contrasta sobre su -soft. */
  --protein-ink: #6fa8dd;
  --carbs-ink: #e7a94e;
  --fat-ink: #b089d6;
  /* Sobre fondo oscuro una sombra "de papel" no se ve: en vez de negro
     mas negro, un halo sutil mas claro que separa la tarjeta del fondo. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

:root[data-theme="dark"] input[type="date"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  /* Defensivo: en movil (sobre todo iOS/Safari) cualquier elemento que se
     pase por 1-2px del viewport deja la pagina entera desplazable en
     horizontal, y tras un scrollIntoView (ver startEditMeal) el scroll
     puede quedarse encallado unos pixeles a la derecha -- se ve como si
     el principio de cada linea/boton se hubiera "comido" una letra. Sin
     contenido pensado para desplazarse en horizontal en esta app, no hay
     downside a bloquearlo del todo. */
  overflow-x: hidden;
  /* iOS/Safari a veces agranda el texto por su cuenta (pensado para texto
     de lectura en columnas estrechas) IGNORANDO el font-size exacto del
     CSS -- probablemente la causa real de que "Desayuno"/"Merienda" no
     cupieran en su boton en iPhone aunque el margen calculado en
     escritorio diera de sobra. Esto fuerza a respetar el font-size tal
     cual se declara. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.date-nav.hidden,
.view.hidden {
  display: none;
}

.tabs {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 10;
  transition: transform 0.15s ease;
}

/* Con el teclado abierto (ver focusin/focusout en app.js): se desliza fuera
   de la pantalla en vez de quedarse flotando encima del teclado, que es lo
   que pasa en iOS Safari con position:fixed cuando el teclado aparece (el
   viewport de layout no se encoge como el visual). */
.tabs.nav-hidden-for-keyboard {
  transform: translateY(100%);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
}

.tab-btn svg {
  stroke: currentColor;
}

.tab-btn.active {
  color: var(--text);
  font-weight: 600;
}

.tab-btn.active svg {
  stroke: var(--text);
}

.tab-btn .tab-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 1px;
}

.tab-btn.active .tab-dot {
  background: var(--text);
}

/* Acceso rapido "+": flota por encima de la barra, en vez de ser una
   pestana mas (no cambia de vista, abre un selector de accion). */
.quick-add-fab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.quick-add-fab svg {
  width: 48px;
  height: 48px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
}

.quick-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
}

.quick-add-btn-big {
  grid-column: span 1;
  padding: 22px 10px;
  font-size: 15px;
  font-weight: 600;
}

/* Dictar es la accion principal tambien en el selector rapido. */
#qa-dictar {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.quick-add-btn-small {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--text-dim);
}

/* Overlay flotante que recibe #entry-card (el mismo de Agenda, movido aqui
   con JS) para poder dictar/escribir/escanear/anadir a mano desde cualquier
   pestana sin cambiar de vista. Ver openQuickAddOverlay en app.js. */
.entry-card-overlay {
  position: fixed;
  inset: 0;
  /* Por debajo de .simple-modal/.barcode-modal (110): si desde "Escanear" se
     abre el escaner de codigo de barras encima de este overlay, tiene que
     verse por delante, no detras del fondo oscuro de este overlay. */
  z-index: 105;
  background: rgba(19, 22, 13, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.entry-card-overlay.hidden {
  display: none;
}

.entry-card-overlay .entry-card-floating {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-md);
}

.entry-card-overlay-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  background: var(--surface);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.progress-card,
.entry-card,
.confirm-panel,
.foods-list,
.food-form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 16px;
}

/* #confirm-panel aparece pegado al boton Procesar, justo encima, sin nada
   entre medias que ya aporte separacion vertical: su propio border-top de
   3px quedaba tocando ese boton. El resto de .confirm-panel (p.ej. dentro
   de foods-list) ya tiene separacion natural por el margin-bottom del
   elemento anterior, por eso esto se limita a este id en vez de a toda la
   clase. (#edit-panel ya no necesita esto: ahora vive dentro de un popup
   propio, #edit-modal, no pegado a ningun boton de la pagina.) */
#confirm-panel {
  margin-top: 16px;
}

/* Las 2 tarjetas protagonistas (resumen del dia y dictar/anadir) solo
   ganan aire; la sombra se reserva para lo que flota (FAB, modales). */
.progress-card,
.entry-card {
  padding: 20px;
  margin-bottom: 16px;
}

.progress-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 18px;
}

.progress-card .ring-row {
  grid-column: 1;
  grid-row: 1;
}

.progress-card .ring {
  width: 118px;
  height: 118px;
}

/* Pantallas muy estrechas: anillo arriba centrado, macros debajo. */
@media (max-width: 359px) {
  .progress-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .progress-card .macro-ring-list {
    grid-column: 1;
    grid-row: 2;
  }
}


.ring-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring {
  flex-shrink: 0;
}

.ring-track {
  stroke: var(--surface-2);
}

#ring-progress {
  stroke: var(--accent);
}

.ring-kcal-text {
  fill: var(--text);
  /* Geist con tabular-nums: cada digito ~0,6em y el punto mas estrecho.
     El peor caso ("2345.6") a 24px ocupa ~80 unidades, dentro de las ~92
     libres del circulo (r=52 menos medio trazo de 12). */
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ring-goal-text {
  fill: var(--text-dim);
  font-size: 11px;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.macro-value {
  font-variant-numeric: tabular-nums;
}

.ring-remaining-text {
  grid-column: 1 / -1;
  grid-row: 2;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-md);
  padding: 9px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 359px) {
  .ring-remaining-text {
    grid-row: 3;
  }
}

.ring-remaining-text.over {
  background: var(--danger-soft);
  color: var(--danger);
}

.macro-ring-remaining {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.macro-ring-item.over .macro-ring-remaining {
  color: var(--danger);
}

/* Acceso discreto al peso de hoy, junto a la racha (arriba a la derecha):
   solo el icono, sin texto ni fondo propio -- no debe competir con la
   racha, solo estar ahi para quien lo busque. */
.quick-log-weight-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

#ring-progress {
  transition: stroke-dashoffset 0.3s, stroke 0.3s;
}

/* 3 anillos por macro (en vez de barras lineales): track en el color
   suave de esa macro, arco en el color fuerte -- mismo lenguaje de
   "color suave debajo, fuerte encima" que ya usa MyFitnessPal. */
.macro-ring-list {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  container-type: inline-size;
}

/* Con sitio (escritorio, moviles grandes): la cifra pasa a la derecha de
   cada fila, alineada en columna, en vez de dejar media tarjeta vacia. En
   moviles estrechos se queda debajo del nombre. */
/* Selectores con .macro-ring-list delante: tienen que ganar a las reglas
   base de .macro-ring-info/.macro-ring-value, que van mas abajo. */
@container (min-width: 240px) {
  .macro-ring-list .macro-ring-item {
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .macro-ring-list .macro-ring-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  .macro-ring-list .macro-ring-info {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label amount" "remaining amount";
    align-items: center;
    column-gap: 12px;
    text-align: left;
  }
  .macro-ring-list .macro-ring-label { grid-area: label; justify-content: flex-start; }
  .macro-ring-list .macro-ring-remaining { grid-area: remaining; }
  .macro-ring-list .macro-ring-amount { grid-area: amount; text-align: right; }
  .macro-ring-list .macro-ring-value { font-size: 18px; }
  .macro-ring-list .macro-ring-goal-text { font-size: 13px; }
  .macro-ring-list .macro-name { font-size: 13px; }
}

/* Con ancho de sobra, anillo de kcal mas grande para equilibrar la columna
   de macros (que gana alto al tener mas aire). */
@media (min-width: 420px) {
  .progress-card .ring {
    width: 136px;
    height: 136px;
  }
}

.macro-ring-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.macro-ring {
  flex-shrink: 0;
}

.macro-ring-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.macro-ring-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.macro-ring-track {
  transition: stroke 0.2s;
}

.macro-ring-item[data-macro="protein"] .macro-ring-track { stroke: var(--protein-soft); }
.macro-ring-item[data-macro="carbs"] .macro-ring-track { stroke: var(--carbs-soft); }
.macro-ring-item[data-macro="fat"] .macro-ring-track { stroke: var(--fat-soft); }

.macro-ring-progress {
  transition: stroke-dashoffset 0.3s, stroke 0.3s;
}

.macro-ring-item[data-macro="protein"] .macro-ring-progress { stroke: var(--protein); }
.macro-ring-item[data-macro="carbs"] .macro-ring-progress { stroke: var(--carbs); }
.macro-ring-item[data-macro="fat"] .macro-ring-progress { stroke: var(--fat); }

.macro-ring-value {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.macro-ring-goal-text {
  color: var(--text-dim);
  font-size: 12px;
}

.macro-ring-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.macro-name {
  color: var(--text-dim);
  font-weight: 600;
}

/* Check verde cuando vas bien de esa macro (90%-100% del objetivo, sin
   pasarte) -- confirmacion positiva de un vistazo, no solo el anillo. */
.macro-check {
  display: none;
  flex-shrink: 0;
  color: var(--accent-text);
}

.macro-ring-item.on-track .macro-check {
  display: block;
}

.macro-ring-item[data-macro="protein"] .macro-name { color: var(--protein-ink); }
.macro-ring-item[data-macro="carbs"] .macro-name { color: var(--carbs-ink); }
.macro-ring-item[data-macro="fat"] .macro-name { color: var(--fat-ink); }

.macro-ring-item.over .macro-name,
.macro-ring-item.over .macro-ring-value {
  color: var(--danger);
}

.progress-row .value {
  width: 100px;
  text-align: right;
  font-size: 13px;
  color: var(--text-dim);
}

.category-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

/* Selector de categoria de comida (dictado y mover/editar): 2 filas de
   .category-select normales (3 principales arriba, 2 abajo) en vez de 5
   botones apretados en una sola -- mismo ancho total, cada boton bastante
   mas ancho al tener menos vecinos por fila. El gap entre filas ya lo da
   el margin-bottom de .category-select, no hace falta uno aparte aqui. */
.meal-category-select {
  display: flex;
  flex-direction: column;
}

/* Con 3 o 2 botones por fila (antes 5), hay ancho de sobra para una letra
   algo mayor que el resto de usos de .cat-btn (pestañas/selects de texto
   corto, que se quedan en el 11px base). */
.meal-category-select .cat-btn {
  font-size: 13px;
}

.cat-btn {
  /* flex-basis 0 (no "auto"): todos miden igual pase lo que pase el largo
     del texto de cada uno, en vez de que "Desayuno" sea mas ancho que
     "Cena" solo porque la palabra pesa mas. */
  flex: 1 1 0%;
  min-width: 0;
  padding: 12px 10px;
  display: flex;
  /* Icono a la izquierda del texto (antes arriba, columna): con 2 filas de
     3/2 botones en vez de 1 de 5, cada boton tiene de sobra ancho para
     ponerlos en fila sin perder el alto extra de apilarlos. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
}

/* Con el icono ahora a la izquierda (.cat-btn en fila, no en columna), el
   label SI respeta flex-shrink por el eje principal (horizontal) sin
   necesitar truquitos: min-width:0 le permite encogerse por debajo de su
   ancho de contenido, y white-space:nowrap + ellipsis como red de
   seguridad por si algun texto no cupiera ni asi, en vez de desbordar. */
.cat-btn-label {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-btn-icon {
  color: var(--text-dim);
  flex-shrink: 0;
}

.cat-btn.active .cat-btn-icon {
  color: inherit;
}

/* Activa invertida (fondo tinta, texto claro), no verde solido: el lima
   se reserva para la accion principal y el progreso (ver DESIGN.md). */
.cat-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  /* Antes font-weight:700: el trazo mas grueso era justo lo que le hacia
     falta al boton activo (siempre "Desayuno" al abrir la app) para
     desbordar por un pelo. El fondo+color ya marcan el estado activo de
     sobra sin necesitar tambien mas peso de fuente. */
}

.cat-btn-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

textarea,
input[type="text"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 10px;
}

input[type="date"] {
  color-scheme: light;
}

/* Patron boton visible + input[type=date] invisible (ver buildDatePicker/
   wireDateField en app.js): el control nativo real nunca se ve (misma
   .date-picker-input que ya usaba el selector de fecha de arriba del
   todo), asi que su ancho minimo propio en iOS ya no puede desbordar ni
   cortarse -- lo unico visible es .date-field-btn, un boton normal con
   el mismo aspecto que tenia el input de fecha antes. */
.date-picker-field {
  position: relative;
  /* El input[type=date] real (ver .date-picker-input) se intenta dejar en
     1x1px, pero su area de interaccion real en algunos navegadores/SO
     puede ignorar ese CSS y quedarse mas grande de lo declarado -- sin
     overflow:hidden aqui, ese sobrante invisible puede extenderse fuera
     del boton visible y comerse el clic de lo que haya al lado (en la
     barra de arriba, la flecha de "dia siguiente", justo a la derecha). */
  overflow: hidden;
}

.date-field-btn {
  width: 100%;
  display: block;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 10px;
}

textarea {
  min-height: 70px;
  resize: vertical;
}

.primary-btn {
  width: 100%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.secondary-btn {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 10px;
}

.hidden {
  display: none !important;
}

.save-toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%) translateY(8px) scale(0.96);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.save-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.save-toast svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Botones: pequeno feedback al pulsar, no solo al soltar. */
.primary-btn,
.secondary-btn,
.entry-mode-btn,
.icon-btn,
.icon-add-btn,
.cat-btn,
.tab-btn,
.sort-btn,
.quick-add-btn,
.quick-add-fab svg,
.streak-day,
.quick-log-weight-btn {
  transition: transform 160ms var(--ease-out);
}

.primary-btn:active,
.secondary-btn:active,
.entry-mode-btn:active,
.icon-btn:active,
.icon-add-btn:active,
.cat-btn:active,
.tab-btn:active,
.sort-btn:active,
.quick-add-btn:active,
.quick-add-fab:active svg,
.streak-day:active,
.quick-log-weight-btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .secondary-btn,
  .entry-mode-btn,
  .icon-btn,
  .icon-add-btn,
  .cat-btn,
  .tab-btn,
  .sort-btn,
  .quick-add-btn,
  .quick-add-fab svg,
  .streak-day,
  .quick-log-weight-btn,
  #ring-progress,
  .bar-fill,
  .save-toast,
  .simple-modal,
  .simple-modal-inner,
  .barcode-modal,
  .barcode-modal-inner,
  .entry-mode-btn.listening svg {
    transition: none !important;
    animation: none !important;
  }
}

/* Estados de foco visibles para teclado, sin afectar al click con raton. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.confirm-item {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.confirm-item .item-name {
  font-weight: 700;
}

/* Frase de ayuda sobre el panel de editar comida: antes usaba .item-name
   (pensado para el nombre de un alimento dentro de .confirm-item, ni
   siquiera le aplicaba fuera de ahi) a tamaño de cuerpo normal sin
   margen, pegada arriba del todo -- quedaba como un bloque de texto
   plano y denso. Mas pequeña, atenuada y con aire debajo antes de los
   botones de categoria.
*/
.edit-panel-title {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.edit-category-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.edit-category-select {
  flex: 1;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.confirm-item .item-macros {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.confirm-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

input.confirm-qty-input {
  width: 64px;
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 0;
}

.confirm-qty-unit {
  color: var(--text-dim);
  font-size: 12px;
  flex-shrink: 0;
}

.confirm-qty-approx {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
}

/* "ambiguous"/"catalog"/"swap": ya hay algo que parece encajar (tuyo o del
   catalogo), solo falta confirmar -- tono neutro, no de alarma. "unknown"/
   "unparsed": el sistema de verdad no entendio nada, eso si pide atencion. */
.confirm-item.status-ambiguous,
.confirm-item.status-catalog,
.confirm-item.status-swap {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-bottom: none;
  padding: 10px;
}

.confirm-item.status-unknown,
.confirm-item.status-unparsed {
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  border-bottom: none;
  padding: 10px;
}

.item-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.candidate-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.candidate-name {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.candidate-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9px;
  line-height: 1;
  flex-shrink: 0;
}

.candidate-macros {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.candidate-btn.selected {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-soft);
}

.meal-group {
  margin-bottom: 22px;
}

.meal-group h4 {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.meal-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meal-group-title {
  font-size: 15px;
}

.meal-group-title .section-icon {
  color: var(--accent-text);
  background: var(--accent-soft);
  width: 28px;
  height: 28px;
  padding: 6px;
}

.meal-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.meal-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.meal-food-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  min-width: 0;
}

.meal-food-row {
  display: contents;
}

.food-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.food-name-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Un punto de color por alimento segun su macro dominante (por kcal): da
   textura real a la lista en vez de filas de texto plano, y de paso dice
   algo util (esto es sobre todo proteina/carbos/grasa) de un vistazo. */
.food-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
}

.food-dot-protein { background: var(--protein); }
.food-dot-carbs { background: var(--carbs); }
.food-dot-fat { background: var(--fat); }

.food-qty,
.food-item-macros,
.streak-day-label,
.streak-count,
.quick-log-weight-btn,
.meal-entry .meal-macros {
  font-family: var(--font-mono);
}

.food-qty {
  color: var(--text-dim);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.food-item-macros {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* C/P/G en su color de macro (mismo que food-dot y la barra de abajo), para
   distinguirlas sin leer la letra -- reusado tanto en cada fila de la lista
   de comidas como en el resumen colapsado de "Objetivo diario" (Ajustes).
   El opacity:0.8 que tenia antes .food-item-macros se quita (no se puede
   "deshacer" desde un hijo con opacity:1, la opacidad de un padre afecta a
   todo su contenido) -- var(--text-dim) ya es un color atenuado de por si
   para los parentesis/espacios que quedan fuera de los spans de color. */
.macro-c { color: var(--carbs-ink); font-weight: 600; }
.macro-p { color: var(--protein-ink); font-weight: 600; }
.macro-g { color: var(--fat-ink); font-weight: 600; }

.meal-icon-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Fila de acciones de una comida (+ anadir rapido, editar, guardar como
   receta, eliminar): antes el edit/guardar/eliminar iban en una columna
   vertical al lado del nombre del alimento (le quitaba ancho, de ahi el
   ellipsis en .food-name-text) y el "+" vivia en su propia fila aparte
   debajo, ocupando una linea entera solo para un boton pequeño. Juntar los
   4 en una sola fila, pegados a la derecha, deja el nombre del alimento
   usar todo el ancho de la tarjeta y evita esa linea extra solo para el "+".
*/
.meal-actions-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
}

.edit-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.edit-item-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input.edit-item-qty {
  width: 56px;
  text-align: center;
  flex-shrink: 0;
  margin-bottom: 0;
}

.edit-item-unit {
  color: var(--text-dim);
  font-size: 12px;
  flex-shrink: 0;
}

.icon-btn {
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.icon-btn.delete {
  color: var(--danger);
}

.meal-entry .meal-macros {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

/* Las etiquetas NO van a width:pct% (como los segmentos de la barra de
   abajo): cuando a una comida le toca poco de una macro (p.ej. 2% de
   grasa), ese % de ancho no le daba sitio ni a su propio texto y se
   superponia con la etiqueta de al lado. space-between las reparte sin
   atarlas a la proporcion real. */
.macro-segment-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.macro-segment-labels span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* El color llega en linea desde app.js (var(--carbs)...): como texto no
   llega a AA sobre blanco, se usa la variante -ink de cada macro. */
.macro-segment-labels span:nth-child(1) { color: var(--carbs-ink) !important; }
.macro-segment-labels span:nth-child(2) { color: var(--protein-ink) !important; }
.macro-segment-labels span:nth-child(3) { color: var(--fat-ink) !important; }

.macro-segment-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.meal-actions {
  display: flex;
  gap: 10px;
}

.meal-actions button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.meal-actions button.delete {
  color: var(--danger);
}

.food-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.food-row .food-macros {
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Resultado del catalogo (todavia no en tu lista): borde discontinuo para
   distinguirlo de un lado de un vistazo de tus alimentos ya guardados. */
.food-row-catalog {
  border-bottom-style: dashed;
}

.foods-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
}

.foods-pager .secondary-btn {
  width: auto;
  flex: 1;
}

.foods-pager .secondary-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.foods-page-label {
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
}

.food-row-edit {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 6px 0;
}

.food-row-edit input,
.food-row-edit select {
  margin-bottom: 8px;
}

.fe-label {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.food-edit-actions {
  display: flex;
  gap: 8px;
}

.food-edit-actions button {
  flex: 1;
  width: auto;
}

.date-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.date-nav .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Fila de racha (sustituye al "< Ayer >" a secas de antes): 7 circulos de
   la semana actual (relleno = registraste algo ese dia) + racha de dias
   seguidos con una llama, al estilo de la fila de racha de MyFitnessPal
   pero con el lenguaje visual propio de la app (sin iconos ni colores
   calcados) -- pensado para dar una razon visual a volver cada dia, no
   solo para navegar fechas. */
.streak-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.streak-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.streak-week {
  flex: 1;
  max-width: 320px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.streak-day {
  background: none;
  border: none;
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--text-dim);
}

.streak-day-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.streak-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  box-sizing: border-box;
}

.streak-day.logged .streak-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.streak-day.logged .streak-day-label {
  color: var(--text);
}

/* Dia que se esta viendo ahora mismo (state.viewDate): aro para ubicarse de
   un vistazo, registrado o no (el anillo de "hoy" de MyFitnessPal, pero
   siguiendo el dia visto, no fijo en el dia real -- al navegar con las
   flechas/la barra de fecha de arriba, el aro se mueve con ellas en vez de
   quedarse siempre en hoy). */
.streak-day.is-viewed .streak-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text);
}

.streak-day.is-viewed.logged .streak-dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text);
}

/* Dia que se esta viendo ahora mismo (state.viewDate, no necesariamente
   hoy): letra en color de acento, para distinguirlo de "solo tiene datos"
   (.logged, que ya pone la letra en color de texto normal). */
.streak-day.is-viewed .streak-day-label {
  color: var(--text);
  font-weight: 700;
}

.streak-count {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Llama "apagada" (gris) con racha 0, "encendida" (color calido, el mismo
   naranja que ya usa la macro de carbohidratos) a partir de 1 dia. */
.streak-count-active {
  color: var(--carbs);
}

.streak-count-active .streak-flame {
  color: var(--carbs);
}

/* Input real para el selector de calendario nativo (ver date-label click en
   app.js): invisible pero presente en el DOM, no display:none, para que
   showPicker()/click() lo sigan pudiendo abrir en todos los navegadores.
   Dos intentos anteriores fallaron:
   1) left:50%; bottom:0; width/height:1px -- relativo a TODA la barra de
      fecha (.date-nav, las 2 flechas incluidas), caia cerca de la flecha
      "siguiente" y se comia su clic.
   2) Lejos de la pantalla (left/top:-9999px) -- ya no se comia nada, pero
      Safari/iOS se nego a abrir showPicker()/click() en un input tan lejos
      del viewport, aunque se disparase por codigo: rompio el picker entero.
   Ahora cubre el boton entero (inset:0, mismo tamaño que el boton visible,
   dentro de .date-picker-field que lo envuelve a el solo): el propio toque
   nativo sobre el input abre el calendario directamente, sin depender de
   que el clic del boton lo dispare por codigo (eso se deja como fallback
   para teclado/lector de pantalla). overflow:hidden en .date-picker-field
   evita que se salga de los limites del boton hacia otro de al lado. */
.date-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.date-label-btn {
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
  text-align: center;
}

.sort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.sort-btn {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.sort-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 600;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* Inputs sueltos dentro de .calc-grid (registrar medidas, que no pasa por
   .field-box): sin esto, el margin-bottom de 10px de cada input se suma al
   gap de la rejilla y deja huecos verticales de mas. Los que si estan
   dentro de .field-box ya tienen su propio reset mas abajo. */
.calc-grid > input {
  margin-bottom: 0;
}

/* Caja de campo con etiqueta + icono de linea arriba del valor, en vez del
   input/select a secas con solo un placeholder (que desaparece en cuanto
   escribes, asi que un campo ya relleno deja de decir que es). Mismo
   lenguaje visual que el resto de iconos de la app (stroke, sin relleno) --
   ver field-icon-svg en app.js para el set de iconos de cada campo. */
.field-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px 8px;
}

.field-box-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.field-box-label svg {
  flex-shrink: 0;
}

/* .food-dot (macros C/P/G, ver goals-form) trae su propio margin-right
   pensado para ir pegado a un nombre en texto corrido: aqui ya hay gap en
   el flex, asi que se quita para no duplicar el espacio. */
.field-box-label .food-dot {
  margin-right: 0;
}

/* Dentro de .field-box el input/select pierde su propio fondo/borde (ya lo
   pone la caja) y se pega al borde inferior de la etiqueta, en vez de los
   10px de padding y el borde propio que tiene fuera de aqui. */
.field-box input,
.field-box select {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  width: 100%;
}

.field-box input:focus,
.field-box select:focus {
  outline: none;
}

.field-box-full {
  margin-bottom: 10px;
}

#btn-calculate {
  margin-top: 4px;
}

/* Fondo propio para distinguir claramente "lo que se esta añadiendo ahora"
   (buscador, alimento elegido, cantidad) de "lo que ya esta añadido" (la
   lista de arriba, en edit-item-row sin fondo): antes, al reutilizar
   edit-item-row/qty/unit para la fila del elegido (ver comentario en
   buildManualAddWidget, app.js), ambas filas quedaban visualmente
   identicas y se confundian una con otra. */
.manual-add {
  margin-top: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.entry-mode-row {
  display: flex;
  gap: 8px;
}

.entry-mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* Dictar: la accion principal de la app. */
#btn-dictar {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.entry-mode-btn-wide {
  flex: 2;
}

.entry-mode-btn-narrow {
  flex: 1;
}

.entry-mode-btn.listening,
#btn-dictar.listening {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

@keyframes entry-mode-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.entry-mode-btn.listening svg {
  animation: entry-mode-pulse 1s ease-in-out infinite;
}

#text-entry-area {
  margin-top: 10px;
}

.simple-modal {
  position: fixed;
  inset: 0;
  background: rgba(19, 22, 13, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.simple-modal.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.simple-modal-inner {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Al fijar overflow-y, overflow-x se calcula a "auto" aunque no se
     escriba (regla de CSS para la propiedad overflow), asi que cualquier
     hijo que se desborde (el input[type=date] de "Registrar peso"/
     "Registrar medidas" en iOS, que a veces ignora su width:100%) abria
     un scroll horizontal del modal entero en vez de quedarse contenido
     dentro -- justo lo que se veia en las capturas. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: scale(1);
  transition: transform 200ms var(--ease-out);
}

.simple-modal.hidden .simple-modal-inner {
  transform: scale(0.96);
}

.simple-modal-title {
  text-align: center;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Insignia circular en vez de un icono suelto flotando en la fila: rompe
   la monotonia de "todo es un rectangulo redondeado" con una forma de
   verdad distinta, y de paso le da un anclaje de color de marca a cada
   cabecera de seccion. */
.section-icon {
  color: var(--accent-text);
  background: var(--accent-soft);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
}

.section-header h3 {
  margin: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Beneficios del plan Pro dentro del popup de "funcion bloqueada" (ver
   pro-feature-modal en index.html): en vez de un simple texto que dice
   "esto es de pago", se ve de un vistazo TODO lo que se desbloquea, con
   el mismo lenguaje visual de insignia circular que el resto de la app
   (.section-icon) para que no desentone. */
.pro-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 6px;
}

.pro-benefit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.pro-benefit-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
}

.icon-add-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.progreso-history-details {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Pantalla de entrada de Alimentos: 3 tarjetas en vez de entrar directo en
   "Mi lista" -- las 2 principales (lista/recetas) en paralelo, sugerencias
   debajo a todo lo ancho. */
.alimentos-landing {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alimentos-landing-row {
  display: flex;
  gap: 12px;
}

.alimentos-landing-card {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.alimentos-landing-card svg {
  color: var(--accent-text);
}

.alimentos-landing-card-wide {
  width: 100%;
  flex-direction: row;
  padding: 18px;
}

.alimentos-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 14px;
  cursor: pointer;
}

/* Fila de una receta en la lista (nombre + resumen de alimentos + kcal) y
   en la lista "pendiente" del modal de creacion (mismo span de nombre,
   boton de quitar en vez de borrar de verdad). */
.recipe-row {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.recipe-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.recipe-row-name {
  font-weight: 700;
  font-size: 14px;
}

.recipe-row-summary {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 3px;
}

.progreso-history-details summary {
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
}

.progreso-history-details[open] summary {
  margin-bottom: 8px;
}

.bodyfat-display {
  margin-bottom: 10px;
}

.subsection {
  margin-top: 14px;
}

.subsection h4 {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}

.ready-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.ready-hint svg {
  flex-shrink: 0;
  stroke: var(--accent-text);
}

.divider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.divider-label span {
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

/* Fondo var(--surface), no --surface-2: desde que .manual-add (su
   contenedor) tiene fondo --surface-2 propio, usar el mismo tono aqui
   dejaba la lista de resultados sin contraste contra su propia tarjeta. */
.manual-results {
  background: var(--surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}

.manual-result-item {
  padding: 9px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.manual-result-item:last-child {
  border-bottom: none;
}

.manual-result-item:hover {
  background: var(--surface-2);
}

/* .manual-selected reutiliza edit-item-row/qty/unit (ver buildManualAddWidget
   en app.js): el hueco de cantidad queda vacio con el mismo ancho estrecho
   que las filas que ya tienen numero, en vez de un estilo propio. */

.manual-selected-kcal {
  color: var(--text-dim);
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Barra de macros SOLO (el kcal ya va dentro de la fila del producto, ver
   .manual-selected-kcal): justo debajo del producto elegido, antes de
   cualquier boton -- antes vivia junto al kcal despues de "Añadir", lejos
   del alimento al que pertenece. */
.manual-preview {
  margin-top: 4px;
  margin-bottom: 10px;
}

.manual-buttons-row {
  display: flex;
  gap: 10px;
}

.manual-buttons-row .secondary-btn {
  width: auto;
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.profile-picker {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  /* La pantalla de planes (#no-access-box) puede ser mas alta que la
     pantalla en moviles bajos: sin esto, el contenido de mas abajo
     (Elegir Pro, Gestionar suscripcion) quedaria inalcanzable. */
  overflow-y: auto;
}

.barcode-modal {
  position: fixed;
  inset: 0;
  background: rgba(19, 22, 13, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.barcode-modal.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.barcode-modal-inner {
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: scale(1);
  transition: transform 0.2s ease;
}

.barcode-modal.hidden .barcode-modal-inner {
  transform: scale(0.94);
}

.barcode-modal-title {
  text-align: center;
  color: var(--text-dim);
  margin: 0;
}

#barcode-reader {
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

#barcode-reader video {
  width: 100%;
  display: block;
}

/* Guia puramente visual para apuntar: no recorta ni limita lo que se
   decodifica de verdad (eso analiza el frame entero). Ancha y baja, como
   un codigo de barras real. */
.barcode-guide {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 32%;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.profile-picker-box {
  width: 100%;
  max-width: 360px;
  /* margin-block auto (no solo el centrado del flex padre): con
     overflow-y:auto en .profile-picker, un contenido mas alto que la
     pantalla necesita este margen para poder desplazarse hasta el
     principio/final en vez de quedar pegado arriba. */
  margin: auto 0;
}

/* Pantalla de planes (ver #no-access-box en index.html): mismo ancho que
   el resto del selector de cuenta (mobile-first, pantallas ~360px), asi
   que las dos tarjetas van apiladas en vertical, no lado a lado -- side by
   side no cabria sin quedar aplastado. */
.plan-trial-badge {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 10px 0;
}

.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.plan-card-recommended {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.plan-card-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.plan-card-name {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
}

.plan-card-period {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

/* Mensual y anual lado a lado (no detras de un toggle): asi se compara
   directamente cuanto compensa el anual sin tener que hacer la cuenta a
   mano ni cambiar de pestaña. */
.plan-price-options {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}

.plan-price-option {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 10px;
}

.plan-price-option-highlight {
  background: var(--accent-soft);
}

.plan-price-option-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.plan-price-option-highlight .plan-price-option-label {
  color: var(--accent-text);
}

.plan-price-badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-price-option-amount {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-price-option-equiv {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--text-dim);
}

.plan-price-option .plan-choice-btn {
  margin-top: auto;
  font-size: 13px;
  padding: 8px;
}

/* Linea de bajada de precio por fidelidad (ver renderPlanPrices en app.js):
   solo visible con "Anual" elegido. Fondo propio, no texto plano, para que
   no se pierda entre el precio grande de arriba y la lista de funciones
   de abajo -- es el argumento a favor de elegir anual, no un detalle
   menor. */
.plan-card-loyalty {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin: 2px 0 14px;
}

.plan-card-loyalty-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* Los 3-4 escalones en fila, cada uno con su propio año: de un vistazo,
   sin frases largas que se parten mal en movil (como antes). */
.plan-card-loyalty-steps {
  display: flex;
  gap: 6px;
}

.plan-card-loyalty-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
}

/* El ultimo escalon (precio suelo, se queda ahi para siempre) destaca con
   el color de acento: es el numero al que se quiere llegar. */
.plan-card-loyalty-step:last-child {
  background: var(--accent-soft);
}

.plan-card-loyalty-year {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

.plan-card-loyalty-step:last-child .plan-card-loyalty-year {
  color: var(--accent-text);
}

.plan-card-loyalty-amount {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-card-features {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}

.plan-card-features li {
  padding-left: 20px;
  position: relative;
}

.plan-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg);
}

.plan-details-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
}

/* Tabla comparativa dentro de #plan-details-modal (popup "Ver todo lo
   incluido"): nombre de la funcion a la izquierda, check/cruz o el valor
   concreto (p.ej. "Hasta 10") en cada columna de plan. */
.plan-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 4px 0;
}

.plan-compare-table th,
.plan-compare-table td {
  padding: 10px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.plan-compare-table td:first-child {
  text-align: left;
  color: var(--text);
}

.plan-compare-table th {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 700;
}

.plan-compare-table th:nth-child(3) {
  color: var(--accent-text);
}

.plan-compare-table tr:last-child td {
  border-bottom: none;
}

.plan-compare-yes {
  color: var(--accent-text);
}

.plan-compare-no {
  color: var(--text-dim);
}

.profile-picker-box h2 {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.profile-list button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.profile-list button:hover {
  border-color: var(--accent-text);
}

.profile-new-row {
  display: flex;
  gap: 8px;
}

.profile-new-row input {
  flex: 1;
  margin-bottom: 0;
}

.profile-new-row button {
  width: auto;
  flex-shrink: 0;
}

.profile-switch-btn {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-dim);
}

/* Progreso: grafico de lineas generico (peso, medidas, % grasa...) */

.chart-container {
  position: relative;
}

.chart-container svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-empty {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

/* Selector de rango (1M/3M/6M/1A/Todo) encima de un grafico: mismas
   pastillas que category-select/cat-btn, pero mas apretado (son 5 botones
   cortos, no 5 categorias de comida). */
.chart-range-select {
  margin-bottom: 8px;
  gap: 4px;
}

.chart-range-select .cat-btn {
  padding: 5px 6px;
  font-size: 11px;
}

/* Tarjetas pequeñas de medidas corporales (una por medida con 2+ registros)
   en vez de un grafico entero apilado por cada una -- tocar una abre su
   grafico completo en measurement-chart-modal. */
.measurement-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.measurement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  font-family: var(--font);
  cursor: pointer;
}

.measurement-card-label {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.measurement-card-value {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.measurement-card-delta {
  color: var(--text-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart-line {
  fill: none;
  stroke: var(--accent-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-baseline {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-dot {
  fill: var(--accent-text);
  stroke: var(--surface);
  stroke-width: 2;
}

.chart-hover-dot {
  fill: var(--text);
  stroke: var(--surface);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
}

.chart-crosshair {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
}

.chart-axis-label {
  fill: var(--text-dim);
  font-size: 9px;
  font-family: var(--font);
}

.chart-hit-area {
  fill: transparent;
  cursor: crosshair;
}

.chart-tooltip {
  position: absolute;
  transform: translate(-50%, -125%);
  background: var(--text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 11px;
  color: var(--bg);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}

.chart-tooltip.visible {
  opacity: 1;
}

.chart-tooltip .tt-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chart-tooltip .tt-date {
  margin-left: 4px;
  opacity: 0.75;
}

.weight-date {
  font-size: 12px;
  color: var(--text-dim);
}

.weight-value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.weight-delta {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
}

.bodyfat-value {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.hint {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 12px;
}

/* Numero "titular" dentro de un resumen de .hint (Objetivo diario, Datos
   personales en Ajustes): mismo tratamiento que .weight-value, para que el
   dato principal destaque en vez de ser una linea de texto plano igual que
   cualquier otra. */
.summary-stat {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Icono de sexo dentro de un .hint de texto (ver sexIconSvg en app.js):
   vertical-align negativo para centrarlo con la linea de texto en vez de
   quedar pegado a la base, y un pelin de separacion a la derecha antes de
   "Hombre"/"Mujer". */
.inline-sex-icon {
  vertical-align: -1px;
  margin-right: 3px;
}

.calc-result-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
  margin: 0 0 12px;
}

.unparsed-qty-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.unparsed-qty-row input {
  flex: 1;
  margin-bottom: 0;
}

.unparsed-qty-row button {
  width: auto;
  flex-shrink: 0;
  margin-top: 0;
}

.manual-search-box {
  margin-top: 8px;
}

.manual-search-area {
  margin-top: 8px;
}

.suggestion-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}

.suggestion-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.suggestion-items {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-dim);
}

.suggestion-macros {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.suggestion-match-warning {
  font-size: 12px;
  color: var(--danger);
  margin-bottom: 8px;
}

.chat-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
}

.chat-bubble-user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--accent-ink);
}

.chat-bubble-assistant {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text-dim);
}

.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input-row input {
  flex: 1;
  margin-bottom: 0;
}

.chat-input-row button {
  width: auto;
  flex-shrink: 0;
  margin-top: 0;
}

/* ===== Agenda: tarjetas de comida (rediseño "Lima de precision") =====
   Solo CSS sobre el marcado que genera renderMealsList (app.js), limitado
   a #meals-list para no tocar las otras .meal-entry (historial de peso y
   medidas). Orden visual: cabecera (kcal + C/P/G) -> barra de reparto ->
   alimentos -> acciones. */
#meals-list .meal-group {
  margin-bottom: 16px;
}

#meals-list .meal-group-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  gap: 8px;
}

#meals-list .meal-group-title .section-icon {
  width: 24px;
  height: 24px;
  padding: 5px;
}

#meals-list .meal-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "kcal labels"
    "bar bar"
    "list list"
    "actions actions";
  align-items: center;
  column-gap: 12px;
  padding: 14px;
}

#meals-list .meal-entry .meal-macros {
  grid-area: kcal;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#meals-list .macro-segment-labels {
  grid-area: labels;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
}

#meals-list .macro-segment-bar {
  grid-area: bar;
  margin: 10px 0 12px;
}

#meals-list .meal-food-list {
  grid-area: list;
  row-gap: 8px;
}

#meals-list .meal-actions-row {
  grid-area: actions;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* "(C42 P8 G12)" de cada alimento -> tres etiquetas de color. Los
   parentesis y espacios son texto suelto dentro de .food-item-macros: con
   font-size 0 desaparecen y solo quedan las etiquetas. */
#meals-list .food-item-macros {
  display: inline-flex;
  gap: 3px;
  font-size: 0;
  justify-self: end;
}

#meals-list .food-item-macros span {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 5px;
  border-radius: var(--radius-pill);
}

#meals-list .food-item-macros .macro-c { background: var(--carbs-soft); }
#meals-list .food-item-macros .macro-p { background: var(--protein-soft); }
#meals-list .food-item-macros .macro-g { background: var(--fat-soft); }

#meals-list .food-qty {
  font-size: 12.5px;
}

/* ===== Alimentos (rediseño "Lima de precision") =====
   Solo CSS, limitado a #view-alimentos y al modal de receta. */

/* Portada: tres accesos con el icono en insignia lima suave. */
#view-alimentos .alimentos-landing-card {
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 160ms var(--ease-out), border-color 150ms ease;
}

#view-alimentos .alimentos-landing-card svg {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 11px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  flex-shrink: 0;
}

#view-alimentos .alimentos-landing-card-wide {
  justify-content: flex-start;
  padding: 16px 18px;
}

#view-alimentos .alimentos-landing-card:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  #view-alimentos .alimentos-landing-card:hover {
    border-color: var(--text-dim);
  }
}

/* Volver: pastilla pequena en vez de texto suelto. */
#view-alimentos .alimentos-back-btn {
  padding: 6px 12px 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

/* Buscador con lupa (dibujada en CSS, sin tocar el HTML). */
#food-search {
  padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6652' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}

/* Lista de alimentos */
#view-alimentos .food-row {
  gap: 12px;
  padding: 11px 0;
}

#view-alimentos .food-row:last-child,
#view-alimentos .food-row:has(+ .foods-pager) {
  border-bottom: none;
}

#view-alimentos .food-row > div:first-child {
  min-width: 0;
  font-weight: 500;
}

#view-alimentos .food-row .food-macros {
  margin-top: 2px;
}

#view-alimentos .food-row .secondary-btn {
  width: auto;
  margin: 0;
  padding: 7px 14px;
  font-size: 13px;
}

#view-alimentos .food-row-edit {
  border: 1px solid var(--border);
}

#view-alimentos .foods-pager {
  border-top: 1px solid var(--border);
}

/* Titulo "Anadir alimento": etiqueta de seccion como en la Agenda. */
#alimentos-subview-lista-panel > h3 {
  margin: 22px 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Formulario de alimento: nombre/alias/base a todo el ancho, las cuatro
   cifras en rejilla de 2x2. */
#food-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

#food-form > * {
  grid-column: 1 / -1;
  margin: 0;
}

#food-form > input[type="number"] {
  grid-column: auto;
}

/* Sugerencias: etiquetas encima del campo y cifras en 2x2. */
#sugerencias-manual-form,
#sugerencias-automatica-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
}

#sugerencias-manual-form > label,
#sugerencias-automatica-form > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
}

#sugerencias-manual-form > label input,
#sugerencias-manual-form > label select,
#sugerencias-automatica-form > label select {
  margin: 0;
}

#sugerencias-manual-form > label:nth-of-type(5),
#sugerencias-automatica-form > label,
#sugerencias-manual-form > button,
#sugerencias-automatica-form > button {
  grid-column: 1 / -1;
}

#sugerencias-manual-form > button,
#sugerencias-automatica-form > button {
  margin-top: 4px;
}

.suggestion-title {
  font-weight: 600;
}

.suggestion-items {
  color: var(--text);
}

.suggestion-items li + li {
  margin-top: 2px;
}

.suggestion-macros {
  font-family: var(--font-mono);
  font-size: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Recetas: la lista ya vive dentro de una tarjeta, sin tarjeta doble. */
#recipes-list.foods-list {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.recipe-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 12px;
}

.recipe-row-name {
  font-weight: 600;
}

/* ===== Progreso (rediseño "Lima de precision") =====
   Solo CSS. Graficos: linea en tinta (el lima no se lee como trazo fino
   sobre blanco), puntos en lima con borde de tinta, el ultimo punto mas
   grande para marcar "donde estas ahora". */
.chart-line {
  stroke: var(--text);
}

.chart-dot {
  fill: var(--accent);
  stroke: var(--text);
  stroke-width: 1.5;
}

/* El ultimo punto de datos: penultimo <circle> del SVG (el ultimo es el
   punto de hover que renderLineChart anade despues). */
.chart-container svg circle.chart-dot:nth-last-of-type(2) {
  r: 5.5px;
}

.chart-baseline {
  stroke-dasharray: 2 3;
}

.chart-axis-label {
  font-family: var(--font-mono);
}

.chart-crosshair {
  stroke: var(--text-dim);
  stroke-dasharray: 2 3;
}

.chart-tooltip {
  font-family: var(--font-mono);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
}

.chart-tooltip .tt-value {
  font-weight: 600;
}

/* % graso: cifra grande en mono, en tinta. */
#view-progreso .bodyfat-value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

#view-progreso .subsection h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Tarjetas de cada medida (cintura, cuello...). */
.measurement-card-grid {
  margin-top: 14px;
}

.measurement-card {
  background: var(--surface);
  gap: 3px;
  padding: 12px 6px;
  transition: transform 160ms var(--ease-out), border-color 150ms ease;
}

.measurement-card:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .measurement-card:hover {
    border-color: var(--text-dim);
  }
}

.measurement-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.measurement-card-value,
.measurement-card-delta {
  font-family: var(--font-mono);
}

.measurement-card-value {
  font-size: 16px;
  font-weight: 600;
}

/* "Ver historico": desplegable con flecha propia que gira al abrir. */
.progreso-history-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
}

.progreso-history-details summary::-webkit-details-marker {
  display: none;
}

.progreso-history-details summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}

.progreso-history-details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .progreso-history-details summary::after,
  .measurement-card {
    transition: none;
  }
}

/* Historico: filas compactas separadas por linea, no tarjetas sueltas. */
.weight-history .meal-entry {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 0;
  margin: 0;
  background: none;
}

.weight-history .meal-entry:last-child {
  border-bottom: none;
}

.weight-history .meal-top-row {
  align-items: center;
  margin: 0;
}

.weight-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
}

.weight-delta {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* "Ver mas" al final de cada historico (ver appendPagedHistory en app.js):
   carga los registros de 10 en 10 en vez de todos de golpe. */
.history-more-btn {
  margin-top: 8px;
  padding: 10px;
  font-size: 13px;
}

/* ===== Ajustes (rediseño "Lima de precision") =====
   Solo CSS. Tarjetas mas compactas (cabecera sin linea, resumen y boton
   pegados), tema como control segmentado y campos de los modales con foco
   visible. */
#view-ajustes .entry-card {
  padding: 16px 18px;
  margin-bottom: 12px;
}

#view-ajustes .section-header {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}

#view-ajustes .section-header h3 {
  font-size: 16px;
}

#view-ajustes .section-icon {
  width: 30px;
  height: 30px;
  padding: 7px;
}

#view-ajustes .hint {
  margin-bottom: 12px;
}

#view-ajustes .secondary-btn {
  margin-top: 0;
}

#view-ajustes .secondary-btn + .secondary-btn {
  margin-top: 8px;
}

/* Resumen del objetivo: kcal en mono grande, C/P/G como etiquetas de
   color (mismo lenguaje que las tarjetas de comida). */
#view-ajustes .summary-stat {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#goals-summary .macro-c,
#goals-summary .macro-p,
#goals-summary .macro-g {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 7px;
  border-radius: var(--radius-pill);
  vertical-align: 2px;
}

#goals-summary .macro-c { background: var(--carbs-soft); }
#goals-summary .macro-p { background: var(--protein-soft); }
#goals-summary .macro-g { background: var(--fat-soft); }

/* Tema: control segmentado (una sola pastilla con tres posiciones). */
#theme-select {
  gap: 3px;
  padding: 3px;
  margin-bottom: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

#theme-select .cat-btn {
  padding: 8px 10px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
}

#theme-select .cat-btn.active {
  background: var(--text);
  border-color: var(--text);
}

/* Campos de los modales (objetivo, datos personales, calculadora). */
.field-box {
  background: var(--surface);
  padding: 8px 12px 9px;
  transition: border-color 150ms ease;
}

.field-box:focus-within {
  border-color: var(--text);
}

.field-box-label {
  font-weight: 500;
}

.field-box input,
.field-box select {
  font-weight: 600;
}

.field-box input[type="number"] {
  font-family: var(--font-mono);
}

/* Resultado de la calculadora: recuadro lima suave en vez de texto suelto. */
.calc-result-text {
  font-weight: 600;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
}

#goals-modal .subsection h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Contador en vivo del objetivo diario (ver updateGoalsBudget en app.js). */
.goals-budget {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.goals-budget-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.goals-budget-status {
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

.goals-budget[data-state="ok"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.goals-budget[data-state="ok"] .goals-budget-status {
  color: var(--accent-text);
}

.goals-budget[data-state="over"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.goals-budget[data-state="over"] .goals-budget-status {
  color: var(--danger);
}

.goals-budget-bar {
  display: flex;
  gap: 2px;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}

.goals-budget-seg {
  height: 100%;
  transition: width 200ms var(--ease-out);
}

.goals-budget-seg-carbs { background: var(--carbs); }
.goals-budget-seg-protein { background: var(--protein); }
.goals-budget-seg-fat { background: var(--fat); }

.goals-fill-carbs {
  margin-top: 0;
  padding: 8px 10px;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .goals-budget-seg {
    transition: none;
  }
}

.goals-budget-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-dim);
}

/* Objetivo diario: selector Porcentajes / Gramos (mismo control segmentado
   que el tema en Ajustes) y panel de porcentajes. */
.goals-mode-select {
  gap: 3px;
  padding: 3px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.goals-mode-select .cat-btn {
  padding: 8px 10px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
}

.goals-mode-select .cat-btn.active {
  background: var(--text);
  border-color: var(--text);
}

.goals-pro-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
}

.goals-pct-panel {
  margin-bottom: 12px;
}

.goals-pct-grid {
  margin-bottom: 8px;
}

.goals-pct-input-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.goals-pct-input-row input {
  min-width: 0;
  flex: 1;
}

.goals-pct-grams {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}

.goals-pct-sum {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--text-dim);
}

.goals-pct-sum[data-state="ok"] {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}

.goals-pct-sum[data-state="off"] {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ===== Acceso y planes (rediseño "Lima de precision") =====
   Solo CSS sobre #account-picker. */

/* Marca: anillo lima (el mismo lenguaje que el anillo de kcal) sobre el
   nombre, en vez de un titulo suelto. */
.profile-picker-box h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 30px;
  letter-spacing: -0.03em;
}

.profile-picker-box h2::before {
  content: "";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 7px solid var(--surface-2);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  transform: rotate(-20deg);
}

#account-welcome-pitch .hint {
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.profile-list button {
  border-radius: var(--radius-md);
  font-size: 15px;
  transition: border-color 150ms ease, transform 160ms var(--ease-out);
}

.profile-list button:hover {
  border-color: var(--text-dim);
}

.profile-list button:active {
  transform: scale(0.98);
}

/* Planes */
.plan-trial-badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  margin: 12px 0 16px;
}

.plan-card {
  background: var(--surface);
  box-shadow: none;
}

/* Recomendado: borde de tinta, no relleno lima (el lima se queda para la
   etiqueta y el boton principal). */
.plan-card-recommended {
  background: var(--surface);
  border: 2px solid var(--text);
}

.plan-card-badge {
  top: -11px;
  left: 16px;
  right: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
}

.plan-card-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.plan-price-option {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 10px 10px 10px;
}

.plan-price-option-highlight {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.plan-price-option-label {
  font-weight: 600;
}

.plan-price-option-amount {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.plan-card-period {
  font-family: var(--font);
  letter-spacing: 0;
}

.plan-price-badge {
  font-weight: 600;
}

.plan-card-loyalty {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.plan-card-loyalty-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.plan-card-loyalty-step {
  background: var(--surface);
  border: 1px solid var(--border);
}

.plan-card-loyalty-step:last-child {
  border-color: var(--accent);
}

.plan-card-loyalty-year {
  font-family: var(--font-mono);
  font-weight: 600;
}

.plan-card-loyalty-amount {
  font-family: var(--font-mono);
  font-weight: 600;
}

.plan-details-toggle {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}

@media (hover: hover) and (pointer: fine) {
  .plan-details-toggle:hover {
    text-decoration-color: var(--text);
  }
}

.plan-compare-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-compare-table td:not(:first-child) {
  font-family: var(--font-mono);
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-list button {
    transition: none;
  }
}

/* Botones de Google (Registrarse / Iniciar sesion) con el logo oficial. */
.google-auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

/* Sobre el lima, el logo va en un circulo blanco para que se lea. */
.google-g-wrap {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

.google-g {
  flex-shrink: 0;
}

.google-login-label {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
}

.google-login-label + .secondary-btn {
  margin-top: 8px;
}

/* ===== Popups de alimentos (confirmar, añadir, editar comida) ===== */

/* Campos de cantidad: con el relleno lateral general (10px 12px) el numero
   se cortaba ("20(" en vez de 200). Mas anchos, centrados, en mono y sin
   las flechas del navegador, que se comian sitio. */
input.confirm-qty-input,
input.edit-item-qty {
  width: 76px;
  padding: 8px 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  -moz-appearance: textfield;
  appearance: textfield;
}

input.confirm-qty-input::-webkit-outer-spin-button,
input.confirm-qty-input::-webkit-inner-spin-button,
input.edit-item-qty::-webkit-outer-spin-button,
input.edit-item-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.confirm-qty-unit,
.edit-item-unit {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Alimento reconocido: nombre algo mas contenido y macros en mono. */
.confirm-item .item-name {
  font-size: 15px;
  font-weight: 600;
}

.confirm-item .item-macros {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Alimento dudoso ("no estoy seguro, ¿cual es?") o cambiando: recuadro con
   borde, titulo en peso normal y candidatos a todo el ancho, iguales entre
   si (antes cada uno media lo que su nombre). */
.confirm-item.status-swap,
.confirm-item.status-ambiguous,
.confirm-item.status-catalog,
.confirm-item.status-unknown,
.confirm-item.status-unparsed {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 8px 0;
}

.confirm-item.status-swap .item-name,
.confirm-item.status-ambiguous .item-name,
.confirm-item.status-catalog .item-name,
.confirm-item.status-unknown .item-name,
.confirm-item.status-unparsed .item-name {
  font-size: 14px;
  margin-bottom: 8px;
}

.candidate-list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
}

.candidate-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, transform 160ms var(--ease-out);
}

.candidate-btn:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .candidate-btn:hover {
    border-color: var(--text-dim);
  }
}

.candidate-macros {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* Buscador de "Añadir alimento": recuadro con borde en vez de bloque gris. */
.manual-add {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.manual-buttons-row .secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.manual-selected-kcal {
  font-family: var(--font-mono);
}

/* Editar comida: "Comida" y el selector en una fila limpia. */
.edit-category-row select {
  flex: 1;
  margin: 0;
}

.edit-panel-title {
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .candidate-btn {
    transition: none;
  }
}

/* Cantidad + kcal + barra C/P/G por alimento: lista de añadidos a mano
   (tarjeta de entrada) y alimentos reconocidos al dictar/escribir. */
.manual-item {
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border);
}

.manual-item .edit-item-row {
  border-bottom: none;
  padding: 0 0 8px;
}

.confirm-qty-row .manual-selected-kcal {
  margin-left: auto;
}

.item-macro-bar:empty {
  display: none;
}

.item-macro-bar .macro-segment-labels {
  margin-bottom: 4px;
}

.item-macro-bar .macro-segment-bar {
  height: 5px;
}

.confirm-item .item-macro-bar {
  margin-top: 4px;
}

/* Popup "Crear alimento" (createFoodPrompts) */
.create-food-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.create-food-form .field-box-full,
.create-food-form .calc-grid {
  margin-bottom: 0;
}

.create-food-form .primary-btn,
.create-food-form .secondary-btn {
  margin-top: 0;
}

.cf-per {
  font-weight: 400;
  color: var(--text-dim);
}

/* Aviso "Tu comida sigue sin guardar" con "No volver a mostrar" */
.notice-dont-show {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
}

.notice-dont-show input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--text);
  flex-shrink: 0;
}

/* Botones bloqueados mientras guardan (evitan el doble toque). */
.primary-btn:disabled,
.secondary-btn:disabled,
.candidate-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ===== Fase 4: movimiento (rediseño "Lima de precision") =====
   Solo transform/opacity (y color en los avisos), curva --ease-out, todo por
   debajo de 300 ms salvo el anillo (400 ms, es el "premio" de registrar).
   @starting-style: la transicion de entrada sin JS, al pasar de
   display:none (.hidden) a visible o al insertarse en el DOM. */

/* 1. Ventana del + del medio: mismo tipo de entrada que el resto de modales. */
.entry-card-overlay {
  transition: opacity 200ms ease;
}

.entry-card-overlay .entry-card-floating {
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

@starting-style {
  .entry-card-overlay {
    opacity: 0;
  }
  .entry-card-overlay .entry-card-floating {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* Popups creados al vuelo (crear alimento, avisos, elegir opcion): entran
   igual que los que ya existen en el HTML. */
@starting-style {
  .simple-modal:not(.hidden) {
    opacity: 0;
  }
  .simple-modal:not(.hidden) .simple-modal-inner {
    transform: scale(0.96);
  }
}

/* 2. Alimentos reconocidos tras Procesar/dictar. */
#confirm-panel {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

@starting-style {
  #confirm-panel {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* 3. Caja de texto al pulsar Escribir. */
#text-entry-area {
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}

@starting-style {
  #text-entry-area {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* 4. "Cuadra" / "Suma 100 %": el cambio a verde o rojo se funde. */
.goals-budget,
.goals-pct-sum,
.goals-budget-status {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* 5. Contenido de "Ver historico": solo fundido, sin animar la altura. */
.progreso-history-details[open] .weight-history {
  transition: opacity 200ms var(--ease-out);
}

@starting-style {
  .progreso-history-details[open] .weight-history {
    opacity: 0;
  }
}

/* 6. Anillos: arrancan rapido y frenan al llegar. */
#ring-progress,
.macro-ring-progress {
  transition: stroke-dashoffset 400ms var(--ease-out), stroke 300ms ease;
}

/* Movimiento reducido: se quedan los fundidos, sin desplazamiento ni
   escala (sin transicion de transform, el salto de 0.96 a 1 o de 6px es
   instantaneo) y los anillos sin animar. */
@media (prefers-reduced-motion: reduce) {
  .entry-card-overlay .entry-card-floating,
  #confirm-panel,
  #text-entry-area,
  .simple-modal-inner {
    transition: opacity 150ms ease !important;
  }
  #ring-progress,
  .macro-ring-progress {
    transition: none !important;
  }
}

/* ===== Pantalla de planes (opcion A: Basico primero, selector unico) ===== */
.plan-trial-sub {
  margin: 0 0 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
}

.plan-interval-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.plan-interval-select button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.plan-interval-select button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

/* Solo se ve el precio, los escalones y el boton del periodo elegido. */
#plan-cards[data-interval="year"] .plan-only-month,
#plan-cards[data-interval="month"] .plan-only-year {
  display: none;
}

.plan-cards {
  gap: 16px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.plan-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.plan-price-amount {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-price-equiv {
  margin: -6px 0 0;
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
}

.plan-card .plan-card-loyalty {
  margin: 0;
}

.plan-card .plan-card-features {
  margin: 0;
}

.plan-card .plan-choice-btn {
  margin-top: 4px;
}

/* El badge "Recomendado" no debe tapar el nombre al estar Pro debajo. */
.plan-card-recommended {
  margin-top: 6px;
}

/* ===== Ajustes: tarjeta "Tu plan" ===== */
.plan-card-chip {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-dim);
}

.plan-card-chip:empty {
  display: none;
}

#plan-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-card-plan {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.plan-card-status {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}

.plan-card-status b {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
}

.plan-card-upsell,
.plan-card-scheduled {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md);
}

.plan-card-upsell {
  background: var(--accent-soft);
}

.plan-card-upsell p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
}

.plan-card-scheduled {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.plan-card-scheduled p {
  margin: 0;
  font-size: 13px;
}

.plan-card-upsell .primary-btn,
.plan-card-scheduled .secondary-btn {
  margin-top: 0;
}

.plan-card-links {
  display: flex;
  flex-direction: column;
}

.plan-card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 2px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.plan-card-link::after {
  content: "›";
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
}

.plan-card-link[data-plan-action="cancel"] {
  color: var(--danger);
}

.plan-confirm-detail {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.plan-confirm-detail b {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Enlaces legales (entrada, planes y Ajustes). */
.legal-links {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
  margin: var(--space-4) auto 0;
  max-width: 34ch;
  text-wrap: pretty;
}
#no-access-box .legal-links { max-width: 46ch; }
.legal-links a { color: var(--text); text-underline-offset: 2px; }
.legal-card-links { display: flex; flex-direction: column; }
.legal-card-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  border-top: 1px solid var(--border);
}
.legal-card-links a:first-child { border-top: 0; }
.legal-card-links a::after { content: "›"; color: var(--text-dim); font-size: 18px; }

/* Sugerencias restantes hoy (limite diario de IA). */
.suggestion-quota {
  text-align: center;
  font-size: 13px;
  margin-top: var(--space-3);
}

/* Consentimiento y "Tus datos" (fase legal). */
.consent-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.consent-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  padding: var(--space-3);
  margin: var(--space-3) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.consent-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--accent-ink);
}
.consent-check a { color: var(--text); text-underline-offset: 2px; }
#consent-box .primary-btn { width: 100%; margin-top: var(--space-4); }
.danger-link-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--danger);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.danger-btn {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--danger);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-4);
}
.danger-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.danger-btn:not(:disabled):active { transform: scale(0.97); }
.delete-account-list {
  margin: var(--space-2) 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.delete-account-list li { margin: 6px 0; }

/* Avisos (notificaciones push) en Ajustes. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease-out);
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); background: var(--accent-ink); }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.notif-master { border-top: 0; cursor: pointer; }
.notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-label { font-size: 15px; font-weight: 550; color: var(--text); }
.notif-hint { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.notif-when { display: flex; gap: var(--space-2); align-items: center; margin-top: 4px; }
.notif-fixed { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: var(--text-dim); }
.notif-time, .notif-day {
  font: inherit;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 14px;
  padding: 4px 8px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.notif-group {
  margin: var(--space-4) 0 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.notif-pro-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
#notif-test-btn { margin-top: var(--space-3); }

/* Panel de costes de IA (solo el dueño). */
#admin-range { margin-bottom: var(--space-3); }
.admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.admin-stats > div {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-stat-value {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.admin-stat-label { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: var(--space-2);
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}
.admin-table th { font-weight: 600; color: var(--text-dim); font-size: 12px; }
.admin-table .num, .admin-table th:not(:first-child) {
  text-align: right;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-email { overflow-wrap: anywhere; }

/* Primeros pasos (Agenda). */
.onboarding-card {
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.onboarding-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.onboarding-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--accent-text);
}
.onboarding-dismiss {
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 36px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--accent-text);
  opacity: 0.75;
  cursor: pointer;
}
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.onboarding-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.onboarding-step.is-actionable { cursor: pointer; transition: transform 160ms var(--ease-out); }
.onboarding-step.is-actionable:active { transform: scale(0.98); }
.onboarding-check {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-dim);
}
.onboarding-step.is-done .onboarding-check { background: var(--accent); color: var(--accent-ink); }
.onboarding-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.onboarding-step-title { font-size: 15px; font-weight: 600; color: var(--text); }
.onboarding-step.is-done .onboarding-step-title { color: var(--text-dim); text-decoration: line-through; text-decoration-thickness: 1px; }
.onboarding-step-hint { font-size: 13px; color: var(--text-dim); line-height: 1.35; }
.onboarding-go {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* Logotipo en la pantalla de entrada. */
.brand-title { display: flex; align-items: center; justify-content: center; gap: 12px; }
.brand-mark { flex: none; border-radius: 9px; }