/* ═══════════════════════════════════════════════════════════════════════════
   Panxa · sistema de diseño
   Base: @shopify/polaris-tokens 9.4.2 (valores de producción del paquete npm).
   Las extensiones propias llevan el prefijo --nt-.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Superficies ─────────────────────────────────────────────────────── */
  --bg:                 #F1F1F1;
  --surface:            #FFFFFF;
  --surface-secondary:  #F7F7F7;
  --fill-secondary:     #F1F1F1;
  --fill-tertiary:      #E3E3E3;

  /* ── Bordes ──────────────────────────────────────────────────────────── */
  --border:             #E3E3E3;
  --border-secondary:   #EBEBEB;
  --border-focus:       #005BD3;

  /* ── Texto e iconos ──────────────────────────────────────────────────── */
  --text:               #303030;
  --text-secondary:     #616161;
  --icon:               #4A4A4A;
  --icon-secondary:     #8A8A8A;
  --text-on-fill:       #FFFFFF;

  /* ── Acciones ────────────────────────────────────────────────────────── */
  --fill-brand:         #303030;
  --fill-brand-hover:   #1A1A1A;

  /* ── Estados ─────────────────────────────────────────────────────────── */
  --success:            #047B5D;
  --success-text:       #014B40;
  --success-surface:    #CDFED4;
  --success-border:     #92FCAC;
  --caution-text:       #4F4700;
  --caution-surface:    #FFF8DB;
  --caution-border:     #FFEB78;
  --critical:           #C70A24;
  --critical-text:      #8E0B21;
  --critical-surface:   #FEE8EB;
  --critical-border:    #FEC1C7;
  --info-surface:       #EAF4FF;
  --info-text:          #003A5A;

  /* ── Marca ───────────────────────────────────────────────────────────── */
  --accent:             #4338A8;
  --accent-hover:       #372E8C;
  --accent-surface:     #EDEBF9;
  --accent-border:      #D6D1F0;
  --tinta:              #1D1D1D;   /* la tinta del logotipo */

  /* Ámbar de las barras en atención. Contra el carril claro da 1,40:1, por
     debajo del 3:1 recomendado; va sin borde por decisión de diseño, así que
     el dato nunca depende solo de este color: siempre hay cifra al lado. */
  --caution-bar:        #FFC523;

  /* Identidad de cada macro. Va en la LETRA, nunca en la cifra: así el dato
     se lee siempre aunque el color de la etiqueta sea claro. */
  --macro-p:            #000080;
  --macro-c:            #F08080;
  --macro-g:            #FFA94D;
  --macro-f:            #93C572;

  /* Signo del balance */
  --positive:           #047B5D;
  --negative:           #C70A24;

  /* Series de gráficas. Validadas con el script de la guía de visualización:
     banda de luminosidad, suelo de croma, separación para daltonismo y
     contraste contra la superficie. */
  --chart-1:            #5A4FD1;   /* ingeridas   */
  --chart-2:            #B54708;   /* gasto       */
  --chart-p:            #4B49D6;
  --chart-c:            #DB6A6A;
  --chart-g:            #CE7B1E;
  --chart-f:            #679B3F;
  --grid:               #EBEBEB;
  --axis:               #C9C9C9;

  /* ── Espaciado (escala de 4 px) ──────────────────────────────────────── */
  --s-100: .25rem;  --s-150: .375rem; --s-200: .5rem;   --s-300: .75rem;
  --s-400: 1rem;    --s-500: 1.25rem; --s-600: 1.5rem;  --s-800: 2rem;
  --s-1000: 2.5rem;

  /* ── Radios ──────────────────────────────────────────────────────────── */
  --r-100: .25rem; --r-200: .5rem; --r-300: .75rem; --r-full: 999px;

  /* ── Elevación ───────────────────────────────────────────────────────── */
  --shadow-100: 0 .0625rem 0 0 rgba(26, 26, 26, .07);
  --shadow-200: 0 .1875rem .0625rem -.0625rem rgba(26, 26, 26, .07);
  --shadow-300: 0 .25rem .375rem -.125rem rgba(26, 26, 26, .20);

  /* ── Tipografía ──────────────────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-275: .6875rem; --t-300: .75rem;  --t-325: .8125rem; --t-350: .875rem;
  --t-400: 1rem;     --t-500: 1.25rem; --t-600: 1.5rem;   --t-750: 1.875rem;
  --t-900: 2.5rem;   --t-1000: 3.25rem;
  --w-regular: 450; --w-medium: 550; --w-semibold: 650; --w-bold: 700;
}

/* El tema lo decide un atributo en <html>, no el sistema. Así el ajuste de
   la app manda, y cuando está en «automático» es el propio JavaScript
   quien copia lo que diga el sistema al atributo. Una sola lista de
   valores oscuros en vez de dos copias que se desincronizan. */
:root[data-tema="oscuro"] {
  --bg:                #1A1A1A;
  --surface:           #242424;
  --surface-secondary: #2C2C2C;
  --fill-secondary:    #303030;
  --fill-tertiary:     #3D3D3D;
  --border:            #3D3D3D;
  --border-secondary:  #333333;
  --text:              #E3E3E3;
  --text-secondary:    #B5B5B5;
  --icon:              #B5B5B5;
  --icon-secondary:    #8A8A8A;
  --fill-brand:        #E3E3E3;
  --fill-brand-hover:  #FFFFFF;
  --text-on-fill:      #1A1A1A;

  --success:           #2FA98A;
  --success-text:      #92FCAC;
  --success-surface:   #0B3D33;
  --success-border:    #14574A;
  --caution-text:      #FFE9A8;
  --caution-surface:   #3D3208;
  --caution-border:    #5C4D0F;
  --critical:          #E85C6E;
  --critical-text:     #FEC1C7;
  --critical-surface:  #48141C;
  --critical-border:   #6B222C;
  --info-surface:      #10293D;
  --info-text:         #BEDCFF;

  --accent:            #9B90F2;
  --accent-hover:      #B0A7F6;
  --accent-surface:    #2A2550;
  --accent-border:     #3C3670;
  --tinta:             #1D1D1D;

  --caution-bar:       #FFC523;

  --macro-p:           #8E8EF0;
  --macro-c:           #F5A0A0;
  --macro-g:           #FFC182;
  --macro-f:           #B4D99A;

  --positive:          #4ECB9E;
  --negative:          #FF8A99;

  /* Pasos propios para oscuro, no un volteo automático del claro. */
  --chart-1:           #8B80EE;
  --chart-2:           #E0873F;
  --chart-p:           #8B80EE;
  --chart-c:           #EE9090;
  --chart-g:           #E0A040;
  --chart-f:           #8FBF63;
  --grid:              #333333;
  --axis:              #4D4D4D;

  --shadow-100: 0 .0625rem 0 0 rgba(0, 0, 0, .3);
  --shadow-200: 0 .1875rem .0625rem -.0625rem rgba(0, 0, 0, .3);
  --shadow-300: 0 .25rem .375rem -.125rem rgba(0, 0, 0, .5);
}

/* ═══ Base ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* En el móvil, tocar una barra de una gráfica seleccionaba el texto de
   alrededor y tapaba el propio dato. Se desactiva la selección en toda la
   interfaz y se vuelve a permitir donde sí tiene sentido copiar. */
body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
input, textarea, select, .msg, .goal-detail, code, .notice, .chart-tip {
  -webkit-user-select: text; user-select: text;
}
.chart, .chart svg { touch-action: pan-y; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--t-350); font-weight: var(--w-regular);
  line-height: 1.5; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}
/* Cifras tabulares: los dígitos ocupan lo mismo, así las filas no se mueven. */
body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
h1, h2, h3 { margin: 0; font-weight: var(--w-semibold); letter-spacing: -.01em; }
.hidden { display: none !important; }
.muted { color: var(--text-secondary); }
.small { font-size: var(--t-300); }
.error { color: var(--critical-text); font-size: var(--t-325); }
code { font-size: .92em; background: var(--fill-secondary); padding: .05rem .3rem; border-radius: var(--r-100); }

/* ═══ Logotipo ════════════════════════════════════════════════════════════
   El cuenco y la palabra van juntos y heredan el color del contenedor, así
   el mismo trozo de HTML sirve sobre lima, sobre blanco y sobre negro. */
.marca {
  display: flex; align-items: center; gap: .2em; line-height: 1; color: var(--tinta);
  font-weight: 900; font-size: 1.5rem; letter-spacing: -.055em; user-select: none;
}
.marca-cuenco { width: .74em; height: .74em; flex: 0 0 auto; margin-top: .1em; }
.marca-palabra { display: block; }
/* Tamaños del logotipo por sitio: cabecera, puerta de entrada y pie. */
.marca-lg { --marca-alto: 2.5rem; margin-bottom: var(--s-300); }
.marca-pie { --marca-alto: 1.15rem; margin-bottom: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pie-marca {
  display: grid; justify-items: center; gap: var(--s-200);
  padding: var(--s-600) 0 var(--s-400); opacity: .55;
}
.pie-marca .marca-barra { margin-bottom: 0; padding-top: 0; }


/* La palabra sola en la cabecera de Hoy: sin cuenco y sin fondo, siempre visible.
   Va un escalón por debajo de «Hoy» (1 rem frente a 1,5) para hacer de firma y
   no de titular: se lee la marca, pero manda la fecha. */
/* El logotipo de la cabecera va en SVG, en negro sobre claro y en blanco
   sobre oscuro. Un solo número manda el tamaño: 1,35 rem frente a los 18 px
   de la palabra compuesta con Inter, un 20 % más, que es lo que se pedía.
   El respaldo en texto solo aparece si los SVG no están puestos todavía. */
:root { --marca-alto: 1.35rem; }

.marca-barra {
  line-height: 1; margin-bottom: var(--s-300);
  display: flex; justify-content: center; align-items: center;
  /* Compensación óptica: la palabra no tiene ascendentes ni descendentes, así
     que su masa se ve más baja de lo que dice su caja. Un pelo de aire arriba
     la alinea con el resto de la cabecera. */
  padding-top: .0625rem;
}
.marca-svg { height: var(--marca-alto); width: auto; display: block; }
.marca-oscuro, .marca-respaldo { display: none; }
.marca-barra .marca-palabra {
  /* El respaldo se mide con el mismo número que el SVG para que, si algún día
     entra en juego, no dé un salto de tamaño. */
  font-size: var(--marca-alto); font-weight: 900; letter-spacing: -.055em;
  color: var(--text); user-select: none;
}

:root[data-tema="oscuro"] .marca-claro { display: none; }
:root[data-tema="oscuro"] .marca-oscuro { display: block; }

/* Si los SVG aún no están en /static/marca/, se enseña la palabra en Inter. */
.marca-barra.sin-svg .marca-svg { display: none; }
.marca-barra.sin-svg .marca-respaldo { display: block; }

/* ═══ Ajustes por secciones ═══════════════════════════════════════════════
   Ajustes era una columna larguísima con todo a la vista. Ahora es un índice
   de filas y cada una abre su propia pantalla, como los ajustes del teléfono:
   se ve de un vistazo lo que hay y solo se despliega lo que vas a tocar. */
.ajuste-lista {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-300); box-shadow: var(--shadow-100); overflow: hidden;
}
.ajuste-fila {
  display: flex; width: 100%; align-items: center; gap: var(--s-300);
  padding: var(--s-400); background: none; border: 0;
  border-top: 1px solid var(--border-secondary);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.ajuste-fila:first-child { border-top: 0; }
.ajuste-fila:active { background: var(--fill-secondary); }
.ajuste-icono { display: flex; flex: 0 0 auto; color: var(--icon); }
.ajuste-txt { display: grid; gap: .05rem; flex: 1; min-width: 0; }
.ajuste-nombre { font-size: var(--t-350); font-weight: var(--w-medium); }
.ajuste-sub {
  font-size: var(--t-300); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ajuste-flecha { display: flex; flex: 0 0 auto; color: var(--icon-secondary); }

.volver {
  display: inline-flex; align-items: center; gap: var(--s-100);
  background: none; border: 0; padding: 0 0 var(--s-300);
  font: inherit; font-size: var(--t-325); color: var(--accent); cursor: pointer;
}
.volver svg { margin-right: -.15rem; }
.panel-titulo {
  font-size: var(--t-600); font-weight: var(--w-bold); letter-spacing: -.02em;
  margin-bottom: var(--s-400);
}

/* ═══ Deslizar para borrar ════════════════════════════════════════════════
   La fila viaja sobre un fondo rojo que ya está debajo. Se recorta el
   contenedor para que el botón no asome hasta que arrastras. */
.desliza { position: relative; overflow: hidden; }
.desliza-fondo {
  position: absolute; inset: 0 0 0 auto; width: 5.5rem;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--critical); color: #FFFFFF;
  font: inherit; font-size: var(--t-300); font-weight: var(--w-semibold);
}
.desliza-fila {
  position: relative; background: var(--surface);
  will-change: transform; touch-action: pan-y;
}

/* ═══ Sin desplazamiento lateral ══════════════════════════════════════════
   `overflow-x: hidden` parece lo obvio, pero obliga al navegador a calcular
   `overflow-y: auto`, y eso convierte a html y body en contenedores de scroll.
   A partir de ahí cualquier `position: sticky` de dentro se ancla a ese
   contenedor en vez de a la ventana y deja de quedarse fijo: es lo que tumbó
   la cabecera. `clip` recorta igual sin crear contenedor de scroll. */
html, body {
  max-width: 100%; overflow-x: clip;
  overscroll-behavior-x: none;
}
.sheet-body, .prod-lista, .codigo-fila { max-width: 100%; }
.codigo-fila input { min-width: 0; }

/* ═══ Puerta de contraseña ════════════════════════════════════════════════ */
.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--s-600); background: var(--bg); z-index: 60; }
.gate-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-300);
  box-shadow: var(--shadow-100); padding: var(--s-600); width: min(360px, 100%); display: grid; gap: var(--s-300);
}


/* ═══ Cabecera de página ══════════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--surface);
  border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top);
}
.topbar-inner { max-width: 780px; margin: 0 auto; padding: var(--s-400) var(--s-400) var(--s-300); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-300); margin-bottom: var(--s-300); }
.page-title { font-size: var(--t-600); font-weight: var(--w-bold); letter-spacing: -.02em; text-transform: capitalize; }
.page-date { font-size: var(--t-300); color: var(--text-secondary); margin-top: .125rem; }
.date-block { position: relative; flex: 1; min-width: 0; }
.date-block input[type=date] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; cursor: pointer; }
.day-nav { display: flex; gap: var(--s-100); flex: 0 0 auto; }

/* ═══ Layout ══════════════════════════════════════════════════════════════ */
main { max-width: 780px; margin: 0 auto; padding: var(--s-400) var(--s-400) calc(5.5rem + env(safe-area-inset-bottom)); }
/* En las pestañas sin cabecera de página, el contenido llegaba al borde de
   arriba y quedaba bajo la cámara del iPhone. Aquí sí hay que reservar el
   área segura, porque no hay barra superior que ya lo haga. */
body.no-topbar main { padding-top: calc(var(--s-500) + env(safe-area-inset-top)); }
.view { display: grid; gap: var(--s-300); }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-300); box-shadow: var(--shadow-100); padding: var(--s-400);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-300); margin-bottom: var(--s-400); }
.card-title { font-size: var(--t-325); font-weight: var(--w-semibold); }
.row { display: flex; gap: var(--s-200); flex-wrap: wrap; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-400) 0; }

/* ═══ Botones ═════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-200);
  font: inherit; font-size: var(--t-325); font-weight: var(--w-medium);
  padding: var(--s-200) var(--s-300); border-radius: var(--r-200);
  border: 1px solid transparent; background: var(--surface); color: var(--text);
  cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--fill-brand); color: var(--text-on-fill); box-shadow: var(--shadow-200); }
.btn.primary:hover:not(:disabled) { background: var(--fill-brand-hover); }
.btn.secondary, .btn.ghost { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-100); }
.btn.secondary:hover, .btn.ghost:hover { background: var(--surface-secondary); }
.btn.plain { background: none; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.btn.plain:hover { background: var(--fill-secondary); }
.btn.critical { background: var(--critical); color: #fff; }
.btn.small { padding: var(--s-100) var(--s-200); font-size: var(--t-300); }
.btn.wide { width: 100%; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s-200); border: 0; background: none; color: var(--icon);
  border-radius: var(--r-200); cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.btn-icon:hover { background: var(--fill-secondary); }
.btn-icon:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.btn-icon svg { display: block; }

/* ═══ Formularios ═════════════════════════════════════════════════════════ */
label { display: block; font-size: var(--t-300); color: var(--text-secondary); margin-bottom: var(--s-300); }
label.check { display: flex; gap: var(--s-200); align-items: flex-start; font-size: var(--t-325); }
label.check input { width: auto; margin-top: .15rem; }
input[type=text], input[type=number], input[type=email], input[type=password], textarea, select {
  width: 100%; margin-top: var(--s-100); font: inherit; font-size: var(--t-350);
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-200); padding: var(--s-200) var(--s-300);
  box-shadow: inset 0 1px 0 rgba(26, 26, 26, .05);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: -1px; border-color: var(--border-focus);
}
textarea { resize: vertical; line-height: 1.45; }

/* ═══ Sin zoom en el móvil ════════════════════════════════════════════════
   Safari amplía la página sola cuando enfocas un campo de menos de 16 px, y
   luego te deja ahí, ampliado. La única forma fiable de evitarlo es que los
   campos midan 16 px justos en pantallas táctiles. `touch-action` remata la
   jugada quitando el zoom por doble toque. */
@media (pointer: coarse) {
  input[type=text], input[type=number], input[type=email], input[type=password],
  input[type=date], textarea, select, .pv input {
    font-size: 16px;
  }
}
body { touch-action: manipulation; }

/* ═══ Código de barras ════════════════════════════════════════════════════ */
.codigo-bloque { margin-bottom: var(--s-400); }
.codigo-fila { display: flex; gap: var(--s-200); align-items: stretch; }
.codigo-fila input { margin-top: 0; flex: 1; min-width: 0; }
.codigo-fila .btn { flex: 0 0 auto; white-space: nowrap; }

/* Lista de resultados de la búsqueda por nombre. Se limita el alto y se deja
   con inercia: en el móvil la hoja ya es larga y no debe crecer sin fin. */
.prod-lista {
  margin-top: var(--s-300); border: 1px solid var(--border); border-radius: var(--r-200);
  background: var(--surface); overflow-y: auto; -webkit-overflow-scrolling: touch;
  max-height: 17rem;
}
.prod-item {
  display: flex; width: 100%; gap: var(--s-300); align-items: center; justify-content: space-between;
  padding: var(--s-300); background: none; border: 0; border-top: 1px solid var(--border-secondary);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.prod-item:first-child { border-top: 0; }
.prod-item:active { background: var(--fill-secondary); }
.prod-item-txt { min-width: 0; display: grid; gap: .1rem; }
.prod-item-nombre {
  font-size: var(--t-325); font-weight: var(--w-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-item-marca {
  font-size: var(--t-275); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-item-meta {
  flex: 0 0 auto; font-size: var(--t-275); color: var(--text-secondary); text-align: right;
}

.prod {
  border: 1px solid var(--border); border-radius: var(--r-300);
  padding: var(--s-400); background: var(--surface-secondary);
  display: grid; gap: var(--s-300); margin-top: var(--s-300);
}
.prod-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-300); }
.prod-nombre { font-size: var(--t-400); font-weight: var(--w-semibold); letter-spacing: -.01em; }
.prod-marca { font-size: var(--t-300); color: var(--text-secondary); }
.prod-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-400); }
.prod-fila label { margin: 0; flex: 1; }
.prod-total { font-size: var(--t-300); color: var(--text-secondary); }
.prod-total b { font-size: var(--t-600); font-weight: var(--w-bold); color: var(--text); letter-spacing: -.02em; }

.escaner {
  position: relative; margin-bottom: var(--s-400);
  display: grid; gap: var(--s-300); justify-items: center;
}
.escaner-marco { position: relative; width: 100%; }
.escaner video {
  display: block; width: 100%; max-height: 15rem; object-fit: cover;
  border-radius: var(--r-300); background: #000;
}
/* Una ventana clara en el centro: el ojo apunta ahí y el código entra recto.
   No recorta nada, solo guía — se lee toda la imagen igualmente. */
.escaner-guia {
  position: absolute; left: 8%; right: 8%; top: 50%; height: 5.5rem;
  transform: translateY(-50%); border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-200); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* ═══ Segmentos ═══════════════════════════════════════════════════════════ */
.seg {
  display: flex; background: var(--fill-secondary); border-radius: var(--r-200);
  padding: .1875rem; gap: .1875rem; margin-bottom: var(--s-300);
}
.seg.wrap { flex-wrap: wrap; }
/* Cuatro objetivos con nombre largo no caben en fila a 390 px: van en 2×2. */
#objective-seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.seg-btn {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-300); font-weight: var(--w-medium);
  color: var(--text-secondary); background: none; border: 0; border-radius: var(--r-100);
  padding: var(--s-300) var(--s-100); min-height: 2.5rem; cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.seg-btn.active { background: var(--surface); color: var(--text); font-weight: var(--w-semibold); box-shadow: var(--shadow-100); }

/* ═══ Distintivos ═════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-150);
  font-size: var(--t-300); font-weight: var(--w-medium);
  padding: .125rem var(--s-200); border-radius: var(--r-200);
  background: var(--fill-secondary); color: var(--text-secondary);
  border: 1px solid transparent; white-space: nowrap;
}
.badge.success { background: var(--success-surface); color: var(--success-text); border-color: var(--success-border); }
.badge.caution { background: var(--caution-surface); color: var(--caution-text); border-color: var(--caution-border); }
.badge.critical { background: var(--critical-surface); color: var(--critical-text); border-color: var(--critical-border); }
.badge-dot { width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* ═══ Cifras ══════════════════════════════════════════════════════════════ */
.metric { display: flex; align-items: baseline; gap: var(--s-200); flex-wrap: wrap; }
.metric-num { font-size: var(--t-1000); font-weight: var(--w-bold); letter-spacing: -.035em; line-height: 1; }
.metric-num.positive { color: var(--positive); }
.metric-num.negative { color: var(--negative); }
.metric-mid { font-size: var(--t-900); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1; }
.metric-mid.met { color: var(--positive); }
.metric-mid.missed { color: var(--negative); }
.metric-unit { font-size: var(--t-400); color: var(--text-secondary); font-weight: var(--w-medium); }
.metric-sub { font-size: var(--t-325); color: var(--text-secondary); margin-top: var(--s-200); }
.metric-row { display: flex; gap: var(--s-600); margin-top: var(--s-400); padding-top: var(--s-400); border-top: 1px solid var(--border-secondary); }
.metric-cell-label { font-size: var(--t-300); color: var(--text-secondary); display: block; margin-bottom: .125rem; }
.metric-cell-val { font-size: var(--t-500); font-weight: var(--w-semibold); letter-spacing: -.015em; }

/* ═══ Eje de balance ══════════════════════════════════════════════════════ */
.axis { margin-top: var(--s-600); }
.axis-track { position: relative; height: 1.75rem; }
.axis-line { position: absolute; top: 1rem; left: 0; right: 0; height: 1px; background: var(--border); }
.axis-zero { position: absolute; top: .5rem; left: 50%; width: 1px; height: 1rem; background: var(--icon-secondary); }
.axis-seg { position: absolute; top: .75rem; height: .5rem; }
.axis-seg.in-plan { background: var(--success); }
.axis-seg.over { background: var(--caution-bar); }
.axis-seg.surplus { background: var(--critical); }
.axis-seg.round-l { border-radius: var(--r-full) 0 0 var(--r-full); }
.axis-seg.round-r { border-radius: 0 var(--r-full) var(--r-full) 0; }
.axis-seg.round-all { border-radius: var(--r-full); }
.axis-target { position: absolute; top: .375rem; width: 1px; height: 1.25rem; background: var(--text); }
.axis-target::after {
  content: attr(data-label); position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  font-size: var(--t-275); font-weight: var(--w-medium); color: var(--text); white-space: nowrap;
}
.axis-ends { display: flex; justify-content: space-between; font-size: var(--t-275); color: var(--icon-secondary); margin-top: var(--s-200); }

/* ═══ Barras de progreso ══════════════════════════════════════════════════ */
.meter { margin-bottom: var(--s-400); }
.meter:last-child { margin-bottom: 0; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-200); margin-bottom: var(--s-150); }
.meter-label { font-size: var(--t-325); font-weight: var(--w-medium); }
.meter-val { font-size: var(--t-325); color: var(--text-secondary); white-space: nowrap; }
.meter-val b { color: var(--text); font-weight: var(--w-semibold); }
.meter-track { height: .5rem; background: var(--fill-secondary); border-radius: var(--r-full); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--r-full); background: var(--text); transition: width 200ms ease; }
.meter-fill.success { background: var(--success); }
.meter-fill.caution { background: var(--caution-bar); }
.meter-fill.critical { background: var(--critical); }
/* Cada macro con su color de identidad. Solo relleno, sin contorno. */
.meter-fill.m-p { background: var(--macro-p); }
.meter-fill.m-c { background: var(--macro-c); }
.meter-fill.m-g { background: var(--macro-g); }
.meter-fill.m-f { background: var(--macro-f); }

/* ═══ Lista de alimentos ══════════════════════════════════════════════════ */
.res {
  border-top: 1px solid var(--border-secondary); padding: var(--s-300) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-100) var(--s-300); align-items: start;
}
.res:first-child { border-top: 0; padding-top: 0; }
.res-name { font-size: var(--t-350); font-weight: var(--w-medium); overflow-wrap: anywhere; }
.res-sub { font-size: var(--t-300); color: var(--text-secondary); }
.res-value { font-size: var(--t-350); font-weight: var(--w-semibold); white-space: nowrap; }
.res-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-300); margin-top: var(--s-100); }
.res-macros { display: flex; flex-wrap: wrap; gap: var(--s-100) var(--s-400); font-size: var(--t-300); }
.res-macros span { color: var(--text); }
.res-macros b { font-weight: var(--w-medium); }
.res-macros i { font-style: normal; font-weight: var(--w-bold); margin-right: .15rem; }
.res-macros .m-p i { color: var(--macro-p); }
.res-macros .m-c i { color: var(--macro-c); }
.res-macros .m-g i { color: var(--macro-g); }
.res-macros .m-f i { color: var(--macro-f); }
.res-actions { display: flex; gap: var(--s-100); flex: 0 0 auto; }
.res-actions .btn-icon { color: var(--icon-secondary); }
.res-actions .btn-icon:hover { color: var(--icon); }
.res-actions .btn-icon.saved { color: var(--caution-bar); }
.res-actions .btn-icon.saved svg { fill: currentColor; }

.meal-group { margin-bottom: var(--s-500); }
.meal-group:last-child { margin-bottom: 0; }
/* Banda de sección. Se queda pegada bajo la cabecera de página mientras
   recorres la lista, así con muchos alimentos siempre sabes en qué comida vas. */
.meal-group-head {
  position: sticky; top: var(--topbar-h, 8rem); z-index: 2;
  /* El margen negativo + relleno crea una franja opaca que tapa la fila de
     arriba al fijarse, en vez de dejarla asomar por el hueco. */
  margin-left: calc(var(--s-400) * -1); margin-right: calc(var(--s-400) * -1);
  padding-left: var(--s-400); padding-right: var(--s-400);
  border-radius: 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-200);
  background: var(--surface-secondary);
  padding-top: var(--s-300); padding-bottom: var(--s-300); margin-bottom: var(--s-200);
  border-top: 1px solid var(--surface); border-bottom: 1px solid var(--border-secondary);
}
.meal-group-name { font-size: var(--t-325); font-weight: var(--w-semibold); text-transform: capitalize; }
.meal-group-total { font-size: var(--t-300); color: var(--text-secondary); white-space: nowrap; }

/* ═══ Menú de acciones (⋯) ════════════════════════════════════════════════ */
/* Dos toques para borrar en vez de uno: la papelera deja de estar a un dedo
   de distancia de la estrella. */
.menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.menu {
  position: fixed; z-index: 41; min-width: 12rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-200); box-shadow: var(--shadow-300);
  padding: var(--s-100); animation: menu-in 150ms ease;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-.25rem); } }
.menu-item {
  display: flex; align-items: center; gap: var(--s-300); width: 100%;
  font: inherit; font-size: var(--t-325); color: var(--text); text-align: left;
  background: none; border: 0; border-radius: var(--r-100);
  padding: var(--s-300); cursor: pointer;
}
.menu-item:hover { background: var(--fill-secondary); }
.menu-item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.menu-item svg { color: var(--icon); flex: 0 0 auto; }
.menu-item.destructive { color: var(--critical-text); }
.menu-item.destructive svg { color: var(--critical-text); }
.menu-item.on svg { color: var(--caution-bar); fill: var(--caution-bar); }
.menu-sep { height: 1px; background: var(--border-secondary); margin: var(--s-100) 0; }


/* ═══ Editor en línea ═════════════════════════════════════════════════════ */
.item-editor {
  grid-column: 1 / -1; background: var(--surface-secondary); border: 1px solid var(--border);
  border-radius: var(--r-200); padding: var(--s-400); margin-top: var(--s-300);
}
.ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0 var(--s-200); }
.ed-check { font-size: var(--t-300); color: var(--text-secondary); margin: 0 0 var(--s-300); }
.ed-check.warn { color: var(--critical-text); }

/* ═══ Cuadrícula de datos ═════════════════════════════════════════════════ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s-300); }
.stat { background: var(--surface-secondary); border-radius: var(--r-200); padding: var(--s-300); }
.stat-label { font-size: var(--t-275); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: var(--s-100); }
.stat-val { font-size: var(--t-500); font-weight: var(--w-semibold); letter-spacing: -.015em; }
.stat-sub { font-size: var(--t-275); color: var(--text-secondary); display: block; margin-top: .125rem; }

/* ═══ Estado vacío ════════════════════════════════════════════════════════ */
.empty { text-align: center; padding: var(--s-800) var(--s-400); }
.empty-icon { color: var(--icon-secondary); margin-bottom: var(--s-300); display: flex; justify-content: center; }
.empty-title { font-size: var(--t-350); font-weight: var(--w-semibold); margin-bottom: var(--s-100); }
.empty-text { font-size: var(--t-325); color: var(--text-secondary); margin-bottom: var(--s-400); }

/* ═══ Peso ════════════════════════════════════════════════════════════════ */
.weight-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-400); flex-wrap: wrap; }
.weight-form { display: flex; gap: var(--s-200); align-items: center; }
.weight-form input { width: 6.5rem; margin: 0; }

/* ═══ Actividades ═════════════════════════════════════════════════════════ */
.act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-300); align-items: center; padding: var(--s-300) 0; border-top: 1px solid var(--border-secondary); }
.act:first-child { border-top: 0; }
.act-icon { color: var(--icon-secondary); display: flex; }
.act-name { font-size: var(--t-350); font-weight: var(--w-medium); }
.act-meta { font-size: var(--t-300); color: var(--text-secondary); }
.act-right { text-align: right; }
.act-kcal { font-size: var(--t-350); font-weight: var(--w-semibold); white-space: nowrap; }

/* ═══ Gráficas ════════════════════════════════════════════════════════════ */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-200) var(--s-400); font-size: var(--t-300); color: var(--text-secondary); margin-top: var(--s-300); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-150); }
.legend i { width: .625rem; height: .625rem; border-radius: var(--r-100); display: inline-block; }
.legend i.line { height: .1875rem; width: 1rem; border-radius: var(--r-full); }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-200);
  box-shadow: var(--shadow-300); padding: var(--s-200) var(--s-300); font-size: var(--t-300);
  opacity: 0; transition: opacity 150ms ease;
}
.chart-tip.on { opacity: 1; }
.tip-title { font-weight: var(--w-semibold); margin-bottom: var(--s-100); text-transform: capitalize; }
.tip-row { display: flex; justify-content: space-between; gap: var(--s-400); color: var(--text-secondary); }
.tip-row b { color: var(--text); font-weight: var(--w-medium); }

/* ═══ Tabla ═══════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; touch-action: pan-x pan-y; }   /* la única que sí se desplaza de lado */
table { width: 100%; border-collapse: collapse; font-size: var(--t-300); }
th, td { text-align: right; padding: var(--s-200) var(--s-300); border-top: 1px solid var(--border-secondary); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { font-weight: var(--w-semibold); color: var(--text-secondary); border-top: 0; }

/* ═══ Fuentes de proteína ═════════════════════════════════════════════════ */
.src { border-top: 1px solid var(--border-secondary); padding: var(--s-300) 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-150) var(--s-300); align-items: center; }
.src:first-child { border-top: 0; padding-top: 0; }
.src-name { font-size: var(--t-325); }
.src-name::first-letter { text-transform: uppercase; }
.src-val { font-size: var(--t-325); font-weight: var(--w-semibold); white-space: nowrap; }
.src-track { grid-column: 1 / -1; height: .375rem; background: var(--fill-secondary); border-radius: var(--r-full); overflow: hidden; }
.src-fill { height: 100%; background: var(--chart-p); border-radius: var(--r-full); }
.src-meta { font-size: var(--t-275); color: var(--text-secondary); }

/* ═══ Hoja inferior ═══════════════════════════════════════════════════════ */
/* El teclado del iPhone NO encoge la página: se dibuja encima. Como la hoja va
   anclada abajo, quedaba debajo del teclado y no veías lo que escribías. La
   variable --teclado la publica app.js midiendo visualViewport, y aquí sube el
   suelo de la hoja justo por encima de él. Sin teclado vale 0 y no cambia nada. */
.sheet { position: fixed; top: 0; left: 0; right: 0; bottom: var(--teclado, 0px);
  z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, .45); }
.sheet-body {
  /* La hoja es su propio contenedor de scroll, así que el `overflow-x: clip`
     de la página no la alcanza: hay que decírselo aquí. Y `touch-action: pan-y`
     remata el asunto: el navegador solo gestiona el arrastre vertical, así que
     el dedo ya no puede desplazar la hoja de lado. El gesto de deslizar para
     borrar sigue funcionando porque lo mueve el propio JavaScript, no el
     navegador. */
  /* `min-width: 0` es la clave: sin él, al ser un elemento flexible, la hoja
     no puede encogerse por debajo del ancho mínimo de lo que lleva dentro y
     se hace más ancha que la pantalla —da igual que le pidas `100%`—. Con un
     favorito de nombre largo, la hoja se iba a 417 px en una pantalla de 393
     y todo el contenido salía desplazado. */
  /* 92% del hueco disponible, no de la pantalla: con el teclado abierto el
     hueco es más pequeño y la hoja tiene que caber dentro de él. */
  position: relative; width: min(620px, 100%); min-width: 0; max-height: 92%;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--surface); border-radius: var(--r-300) var(--r-300) 0 0;
  padding: var(--s-400) var(--s-400) calc(var(--s-600) + env(safe-area-inset-bottom));
  /* Una sola columna que SÍ puede encogerse. Sin el `minmax(0, 1fr)`, la
     columna de una rejilla se ensancha hasta el mínimo del hijo más
     exigente —un favorito de nombre largo, por ejemplo— y arrastra a la
     hoja entera fuera de la pantalla. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-300); animation: rise 200ms ease;
}
@keyframes rise { from { transform: translateY(1.5rem); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-300); }
.sheet-head h2 { font-size: var(--t-500); font-weight: var(--w-bold); letter-spacing: -.015em; }
.sheet-sub { font-size: var(--t-300); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: var(--s-200); }

/* ═══ Habituales ══════════════════════════════════════════════════════════ */
.fav-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-200); max-height: 13rem; overflow-y: auto; }
.fav {
  display: flex; align-items: center; gap: var(--s-300); width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-200);
  padding: var(--s-300); font: inherit; font-size: var(--t-325); color: var(--text); cursor: pointer;
  transition: background-color 150ms ease;
}
.fav:hover { background: var(--surface-secondary); }
.fav-plus { color: var(--accent); display: flex; flex: 0 0 auto; }
.fav-name { flex: 1; min-width: 0; font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-meta { font-size: var(--t-300); color: var(--text-secondary); white-space: nowrap; }
.fav-badge { font-size: var(--t-275); color: var(--text-secondary); }

/* Ingredientes de una receta */
.ing { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-200) var(--s-300); align-items: center; padding: var(--s-200) 0; border-top: 1px solid var(--border-secondary); font-size: var(--t-325); }
.ing:first-child { border-top: 0; }
.ing-name { overflow-wrap: anywhere; }
.ing-sub { font-size: var(--t-275); color: var(--text-secondary); }
.ing-val { font-size: var(--t-300); color: var(--text-secondary); white-space: nowrap; }
.recipe-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-300); padding-top: var(--s-300); margin-top: var(--s-200); border-top: 1px solid var(--border); font-size: var(--t-325); }
.recipe-total b { font-size: var(--t-400); font-weight: var(--w-bold); }

/* ═══ Previsualización al añadir ══════════════════════════════════════════ */
.pv { border-top: 1px solid var(--border-secondary); padding: var(--s-300) 0; display: grid; grid-template-columns: minmax(0, 1fr) 5rem auto; gap: var(--s-200) var(--s-200); align-items: center; }
.pv:first-child { border-top: 0; }
.pv-name { font-size: var(--t-325); font-weight: var(--w-medium); }
.pv-qty { font-size: var(--t-275); color: var(--text-secondary); }
.pv input { margin: 0; font-size: var(--t-325); padding: var(--s-150) var(--s-200); }
.pv-macros { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-200); }
.pv-macros label { margin: 0; font-size: var(--t-275); }
/* Los hijos de una rejilla no se encogen por debajo de su ancho mínimo, y un
   campo numérico tiene un mínimo propio que en Safari es más ancho que en
   Chrome. Con cuatro seguidos, eso desbordaba la hoja en el iPhone aunque en
   el escritorio entrara de sobra. `min-width: 0` les quita ese suelo. */
.pv > *, .pv-macros > *, .pv-macros label, .pv input, .pv-macros input,
.codigo-fila > *, .ing > * { min-width: 0; }
.pv-macros input, .pv input[type=number] { width: 100%; }
.pv-name, .ing-name, .prod-nombre { overflow-wrap: anywhere; }

.preview-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--s-300); border-top: 1px solid var(--border); font-size: var(--t-325); }
.preview-total b { font-size: var(--t-500); font-weight: var(--w-bold); }

/* ═══ Chat ════════════════════════════════════════════════════════════════ */
.chat-wrap { display: flex; flex-direction: column; gap: var(--s-300); min-height: calc(100dvh - 11rem); }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: var(--s-300); }
.msg { max-width: 88%; padding: var(--s-300) var(--s-400); border-radius: var(--r-300); font-size: var(--t-350); line-height: 1.5; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--fill-brand); color: var(--text-on-fill); border-bottom-right-radius: var(--r-100); white-space: pre-wrap; }
.msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: var(--r-100); }
.msg.bot strong { font-weight: var(--w-semibold); }
.msg.bot ul { margin: var(--s-200) 0; padding-left: var(--s-500); }
.msg.bot li { margin: .15rem 0; }
.msg.err { align-self: flex-start; background: var(--critical-surface); color: var(--critical-text); border: 1px solid var(--critical-border); }
.msg .cursor { display: inline-block; width: .5ch; background: currentColor; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chat-suggestions { display: flex; gap: var(--s-200); flex-wrap: wrap; }
.chat-suggestions button {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: var(--s-200) var(--s-300); font: inherit; font-size: var(--t-300);
  color: var(--text-secondary); cursor: pointer; transition: background-color 150ms ease;
}
.chat-suggestions button:hover { background: var(--surface-secondary); }
.chat-form {
  position: sticky; bottom: calc(4.2rem + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; gap: var(--s-200); align-items: flex-end; background: var(--bg); padding: var(--s-200) 0;
}
.chat-form textarea { flex: 1; margin: 0; min-height: 2.75rem; max-height: 8rem; border-radius: var(--r-300); }
#chat-send { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; flex: 0 0 auto; }

/* ═══ Objetivos ═══════════════════════════════════════════════════════════ */
.goal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-150) var(--s-300); border-top: 1px solid var(--border-secondary); padding: var(--s-300) 0; }
.goal-row:first-child { border-top: 0; padding-top: 0; }
.goal-label { font-size: var(--t-325); font-weight: var(--w-semibold); }
.goal-value { font-size: var(--t-325); font-weight: var(--w-bold); white-space: nowrap; }
.goal-detail { grid-column: 1 / -1; font-size: var(--t-300); color: var(--text-secondary); line-height: 1.45; }
.notice { border-radius: var(--r-200); padding: var(--s-300); font-size: var(--t-325); }
.notice.caution { background: var(--caution-surface); color: var(--caution-text); border: 1px solid var(--caution-border); }
.notice.info { background: var(--info-surface); color: var(--info-text); border: 1px solid var(--border); }
.notice ul { margin: var(--s-200) 0 0; padding-left: var(--s-500); }

/* ═══ Barra de pestañas ═══════════════════════════════════════════════════ */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex;
  background: var(--surface); border-top: 1px solid var(--border);
  padding: var(--s-200) 0 calc(var(--s-300) + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .125rem;
  font: inherit; font-size: var(--t-275); color: var(--icon-secondary);
  background: none; border: 0; cursor: pointer; padding: 0;
  transition: color 150ms ease;
}
.tab svg { display: block; }
.tab.active { color: var(--accent); font-weight: var(--w-semibold); }

/* ═══ Aviso flotante ══════════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 70; max-width: min(28rem, calc(100vw - 2rem));
  background: var(--fill-brand); color: var(--text-on-fill);
  font-size: var(--t-325); padding: var(--s-300) var(--s-400);
  border-radius: var(--r-200); box-shadow: var(--shadow-300);
}

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

/* ═══ Fuerza ══════════════════════════════════════════════════════════════ */

/* La separación entre tarjetas la daba `.view` con su `gap`. Al meter el
   contenido de Deporte dentro de dos paneles, sus hijos dejaron de ser hijos
   de `.view` y se quedaron pegados: la tarjeta de «Últimos entrenamientos»
   aparecía tocando el bloque de estadísticas. Cada panel repite ese gap. */
#sport-actividad, #sport-fuerza {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-300); align-content: start;
}

/* Tres cifras, tres columnas. Con `auto-fit` caben dos y la tercera se
   quedaba sola a media anchura, que parecía un fallo de maquetación. */
#fuerza-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#fuerza-tiles .stat-label { letter-spacing: .03em; }

/* Tarjeta de arranque: lo primero que ves en Fuerza es el botón, no un menú. */
.fz-inicio { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-300);
  padding: var(--s-500); box-shadow: var(--shadow-100);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-300); }
.fz-inicio .dia { font-size: var(--t-300); color: var(--text-secondary); }
.fz-inicio .estado { font-size: var(--t-500); font-weight: var(--w-bold); letter-spacing: -.015em; }
.fz-inicio.viva { border-color: var(--accent-border); background: var(--accent-surface); }
.fz-inicio.viva .estado { color: var(--accent); }

.fz-sesion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-100) var(--s-300);
  align-items: baseline; padding: var(--s-300) 0; border-top: 1px solid var(--border-secondary); width: 100%;
  text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.fz-sesion:first-child { border-top: 0; }
.fz-sesion .fecha { font-weight: var(--w-semibold); }
.fz-sesion .meta { grid-column: 1; font-size: var(--t-300); color: var(--text-secondary); }
.fz-sesion .vol { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; }

/* Pantalla de entreno en curso: ocupa todo, es un modo, no un diálogo. */
.entreno { position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; flex-direction: column; overflow: hidden; }
/* Dos filas: el título y el crono arriba, los grupos debajo. La flecha y el
   crono ocupan las dos filas para quedar centrados con el bloque entero. */
.entreno-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--s-300); padding: calc(env(safe-area-inset-top) + var(--s-400)) var(--s-400) var(--s-300);
  background: var(--surface); border-bottom: 1px solid var(--border); }
.entreno-cab #entreno-cerrar { grid-column: 1; grid-row: 1 / span 2; }
.entreno-cab h2 { grid-column: 2; grid-row: 1; font-size: var(--t-500); font-weight: var(--w-bold); letter-spacing: -.015em; }
.entreno-cab .entreno-crono { grid-column: 3; grid-row: 1 / span 2; }
.entreno-cab #entreno-grupos { grid-column: 2; grid-row: 2; }
.entreno-crono { font-size: var(--t-500); font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; }
.entreno-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pan-y; padding: var(--s-400);
  padding-bottom: calc(var(--s-800) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-300); align-content: start; }

.fz-ej { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-300);
  padding: var(--s-400); box-shadow: var(--shadow-100);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-200); }
.fz-ej-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-300); }
.fz-ej-cab b { font-size: var(--t-350); font-weight: var(--w-semibold); }
.fz-ej-cab .meta { font-size: var(--t-300); color: var(--text-secondary); white-space: nowrap; }
.fz-serie { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-300); padding: var(--s-200) var(--s-300); border-radius: var(--r-200);
  background: var(--surface-secondary); }
.fz-serie .n { color: var(--text-secondary); font-size: var(--t-300); }
.fz-serie .val { font-variant-numeric: tabular-nums; }
.fz-serie.pr { background: var(--success-surface); }
.fz-serie .tag { font-size: var(--t-275); font-weight: var(--w-semibold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--success-text); }

/* Buscador de ejercicios */
.busca-ej { display: flex; align-items: center; gap: var(--s-200); border: 1px solid var(--border);
  border-radius: var(--r-200); padding: var(--s-200) var(--s-300); background: var(--surface); }
.busca-ej input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 1rem; outline: none; }
.busca-ico { color: var(--icon-secondary); display: flex; }
.fz-chips { display: flex; flex-wrap: wrap; gap: var(--s-200); }
.fz-chip { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-full);
  padding: var(--s-100) var(--s-400); font-size: var(--t-300); cursor: pointer; }
.fz-chip:hover { background: var(--surface-secondary); }
.fz-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-200); }
.fz-grupo { display: flex; align-items: center; gap: var(--s-200); border: 1px solid var(--border);
  background: var(--surface); border-radius: var(--r-200); padding: var(--s-300); cursor: pointer;
  text-align: left; }
.fz-grupo span { flex: 1; min-width: 0; font-weight: var(--w-medium); }
.fz-grupo b { font-size: var(--t-300); color: var(--text-secondary); font-weight: var(--w-regular); }
.fz-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-100);
  max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; }
.fz-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-300);
  width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-200); padding: var(--s-300); cursor: pointer; }
.fz-item:hover { background: var(--surface-secondary); }
.fz-item .grupo { font-size: var(--t-300); color: var(--text-secondary); white-space: nowrap; }

/* Memoria: la última vez y el récord, justo antes de apuntar */
.fz-memoria { background: var(--surface-secondary); border-radius: var(--r-200); padding: var(--s-300);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-200); }
.fz-mem { display: grid; grid-template-columns: 5rem auto minmax(0, 1fr); align-items: baseline;
  gap: var(--s-200); }
.fz-mem .et { font-size: var(--t-275); font-weight: var(--w-semibold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary); line-height: 1.3; }
.fz-mem .et.pr { color: var(--success-text); }
.fz-mem b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fz-mem .small { text-align: right; white-space: nowrap; color: var(--text-secondary); font-size: var(--t-275); }

/* Tabla de series con la fila activa */
.fz-tabla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-100); }
.fz-cab, .fz-fila { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2.5rem;
  align-items: center; gap: var(--s-200); }
.fz-cab { font-size: var(--t-275); font-weight: var(--w-semibold); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary); }
.fz-cab span:nth-child(2), .fz-cab span:nth-child(3) { text-align: center; }
.fz-fila { padding: var(--s-100) 0; }
.fz-fila .n { color: var(--text-secondary); font-size: var(--t-300); }
.fz-fila .val { text-align: center; font-variant-numeric: tabular-nums; }
.fz-fila .quita { display: flex; justify-content: center; color: var(--icon-secondary);
  background: none; border: 0; cursor: pointer; padding: var(--s-100); }
.fz-fila.hecha .marca { display: flex; justify-content: center; color: var(--success); }
.fz-fila.activa { background: var(--accent-surface); border-radius: var(--r-200);
  padding: var(--s-200) var(--s-100); box-shadow: inset 0 0 0 1px var(--accent-border); }
.fz-campo { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-100);
  padding: var(--s-200); text-align: center; background: var(--surface); color: var(--text);
  /* 1rem exacto: por debajo de 16px Safari hace zoom al enfocar el campo. */
  font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; }
.fz-campo:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-border);
  font-weight: var(--w-semibold); }
.fz-ok { display: flex; align-items: center; justify-content: center; background: var(--accent);
  color: #fff; border: 0; border-radius: var(--r-100); height: 2rem; cursor: pointer; }
.fz-ok:disabled { opacity: .45; }

/* Historial */
.fz-grafico { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-300);
  padding: var(--s-400); }
.fz-grafico svg { display: block; width: 100%; height: auto; }
.fz-mejora { display: inline-block; font-size: var(--t-300); font-weight: var(--w-semibold);
  background: var(--success-surface); color: var(--success-text); border-radius: var(--r-full);
  padding: var(--s-100) var(--s-300); }
.fz-mejora.baja { background: var(--critical-surface); color: var(--critical-text); }

/* Estas hojas se abren desde la pantalla de entreno (z-index 60), así que
   tienen que ir por encima de ella. El aviso flotante (70) sigue mandando. */
#hoja-ejercicios, #hoja-serie, #hoja-histor { z-index: 65; }

/* Serie que batió un récord, dentro de una tabla editable. */
.fz-fila.pr { background: var(--success-surface); border-radius: var(--r-200); }