@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   SIGA — Sistema Integrado de Gestión Alimentaria
   Interface system · bound to the Dashboard design system
   ------------------------------------------------------------
   BLOCK A is the Dashboard tokens.css contract, pasted verbatim.
   BLOCK B derives every SIGA alias from block A through color-mix.
   No raw color literal exists anywhere outside block A.
   ============================================================ */

/* --- BLOCK A · Dashboard tokens.css contract (verbatim) --- */
:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-warm: #eef6ff;
  --fg: #111827;
  --fg-2: #334155;
  --muted: #64748b;
  --meta: #0ea5e9;
  --border: #d8e2ee;
  --border-soft: #edf3f8;
  --accent: #0ea5e9;
  --accent-on: #04131d;
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-active: color-mix(in oklab, var(--accent), black 14%);
  --success: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --font-display: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 30px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --leading-body: 1.48;
  --leading-tight: 1.1;
  --tracking-display: -0.015em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --section-y-desktop: 84px;
  --section-y-tablet: 60px;
  --section-y-phone: 42px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10);
  --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --container-max: 1280px;
  --container-gutter-desktop: 36px;
  --container-gutter-tablet: 24px;
  --container-gutter-phone: 16px;
}

/* --- BLOCK B · SIGA aliases, every value derived from block A ---
   Tres anclas hacen que las mismas fórmulas funcionen en claro y en oscuro:
   --toward-ink  dirección hacia la que se oscurece/aclara un texto de color
   --ink-abs     ancla oscura absoluta (velos, sombras, base del rail)
   --paper-abs   ancla clara absoluta (texto del rail, monograma invertido)
   El tema oscuro solo redefine el bloque A y estas anclas; las fórmulas
   de abajo no cambian. */
:root {
  color-scheme: light;
  --toward-ink: black;
  --ink-abs:    var(--fg);
  --paper-abs:  var(--surface);

  /* neutrals */
  --fg-strong:   color-mix(in oklab, var(--fg), var(--toward-ink) 22%);
  --subtle:      color-mix(in oklab, var(--bg), var(--border) 34%);
  --subtle-2:    color-mix(in oklab, var(--bg), var(--border) 70%);
  --line-strong: color-mix(in oklab, var(--border), var(--fg) 16%);
  /* --muted del contrato da 4.76:1 sobre blanco puro, pero cae a 4.15 en
     cuanto el fondo se tiñe (fila alterna, píldora, aviso). El texto
     secundario usa esta versión, que se mantiene ≥5.2:1 en toda superficie. */
  --muted-ink:   color-mix(in oklab, var(--muted), var(--toward-ink) 10%);
  /* Un placeholder es texto suplementario, no un control deshabilitado: la
     única excepción autorizada a perder contraste es «disabled». Derivado de
     --muted (3.70:1 en claro, 4.41 en oscuro) no llegaba a AA. Desde
     --muted-ink da 4.88:1 en claro y 5.31:1 en oscuro, y sigue 1.13 puntos por
     debajo del texto secundario, así que no se confunde con un valor escrito. */
  --placeholder: color-mix(in oklab, var(--muted-ink), var(--surface) 10%);
  --fg-disabled: color-mix(in oklab, var(--muted), var(--surface) 42%);
  --veil:        color-mix(in oklab, var(--surface) 88%, transparent);
  --veil-2:      color-mix(in oklab, var(--surface) 92%, transparent);
  --scrim-ink:   color-mix(in oklab, var(--ink-abs) 42%, transparent);

  /* accent derivations */
  --accent-ink:  color-mix(in oklab, var(--accent), var(--toward-ink) 42%);
  --accent-soft: color-mix(in oklab, var(--accent), var(--surface) 92%);
  --accent-line: color-mix(in oklab, var(--accent), var(--surface) 65%);

  /* acción sólida — sobre fondo claro el acento se hunde para poder llevar
     texto blanco (5.7:1); el acento brillante se reserva a selección, foco
     e indicadores. En oscuro se invierte: ver bloque A′. */
  --solid-bg:        color-mix(in oklab, var(--accent), var(--toward-ink) 26%);
  --solid-bg-hover:  color-mix(in oklab, var(--accent), var(--toward-ink) 38%);
  --solid-bg-active: color-mix(in oklab, var(--accent), var(--toward-ink) 46%);
  --solid-fg:        var(--paper-abs);

  /* status families */
  --ok:          var(--success);
  --ok-ink:      color-mix(in oklab, var(--success), var(--toward-ink) 40%);
  --ok-soft:     color-mix(in oklab, var(--success), var(--surface) 92%);
  --ok-line:     color-mix(in oklab, var(--success), var(--surface) 66%);
  --warn-ink:    color-mix(in oklab, var(--warn), var(--toward-ink) 48%);
  --warn-ink-2:  color-mix(in oklab, var(--warn), var(--toward-ink) 60%);
  --warn-soft:   color-mix(in oklab, var(--warn), var(--surface) 90%);
  --warn-line:   color-mix(in oklab, var(--warn), var(--surface) 62%);
  --danger-ink:  color-mix(in oklab, var(--danger), var(--toward-ink) 34%);
  --danger-soft: color-mix(in oklab, var(--danger), var(--surface) 92%);
  --danger-line: color-mix(in oklab, var(--danger), var(--surface) 68%);
  --info:        color-mix(in oklab, var(--meta), var(--toward-ink) 34%);
  --info-soft:   var(--surface-warm);
  --info-line:   color-mix(in oklab, var(--meta), var(--surface) 68%);
  --mark:        color-mix(in oklab, var(--warn), var(--surface) 72%);

  /* Codificación de datos. Una barra o columna ES el dato, así que necesita
     3:1 contra su pista y contra la tarjeta: no puede quedarse en un gris
     decorativo. */
  --data-bar:         color-mix(in oklab, var(--muted), var(--surface) 8%);
  --data-track:       color-mix(in oklab, var(--muted), var(--surface) 22%);
  --data-track-hover: var(--muted);
  --track:            color-mix(in oklab, var(--border), var(--fg) 40%);

  /* structure */
  --rail: 244px;
  --topbar-h: 57px;
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --shadow-pop: var(--elev-raised);
  --shadow-modal: 0 28px 70px -14px color-mix(in oklab, var(--ink-abs) 34%, transparent);
}

/* --- BLOCK A′ · variante oscura del contrato --------------------
   Mismos nombres de token, otra paleta. Se aplica con
   <html data-theme="dark">; siga.js resuelve la preferencia del
   sistema y la elección guardada antes de pintar. Solo se redefinen
   el bloque A, las tres anclas y los derivados cuya dirección cambia
   de sentido sobre fondo oscuro. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0a0e13;
  --surface: #181f29;
  --surface-warm: #16283a;
  --fg: #e6edf3;
  --fg-2: #b9c4d0;
  --muted: #8b97a6;
  --meta: #38bdf8;
  --border: #2f3948;
  --border-soft: #232b36;
  --accent: #38bdf8;
  --accent-on: #04131d;
  --success: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;

  --toward-ink: white;
  --ink-abs:   #01060d;
  --paper-abs: #e9f1f8;

  --elev-raised: 0 18px 46px rgba(1, 5, 12, 0.60);
  --focus-ring:  0 0 0 4px rgba(56, 189, 248, 0.30);

  /* sobre oscuro el acento brillante ya destaca: la acción sólida lo usa
     tal cual con tinta oscura (8.8:1), que es lo legible en este fondo */
  --solid-bg:        var(--accent);
  --solid-bg-hover:  var(--accent-hover);
  --solid-bg-active: var(--accent-active);
  --solid-fg:        var(--accent-on);

  /* sobre fondo oscuro el relleno tenue sube, no baja */
  --subtle:      color-mix(in oklab, var(--surface), var(--border) 55%);
  --subtle-2:    color-mix(in oklab, var(--surface), var(--border) 95%);
  /* --data-bar mantiene la fórmula común: al 20% perdía contra su propia
     pista (2.84:1). La columna de gráfica sí necesita subir sobre oscuro. */
  --data-track:       color-mix(in oklab, var(--muted), var(--surface) 30%);
  --data-track-hover: color-mix(in oklab, var(--muted), var(--surface) 15%);
  --scrim-ink:   color-mix(in oklab, var(--ink-abs) 62%, transparent);
  --shadow-modal: 0 28px 70px -14px color-mix(in oklab, var(--ink-abs) 72%, transparent);
}

/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  margin: 0;
  font-weight: 600;
}

h1 { font-size: 21px; letter-spacing: -0.017em; line-height: 1.2; }
h2 { font-size: 16px; letter-spacing: -0.012em; line-height: 1.3; }
h3 { font-size: 14px; letter-spacing: -0.008em; line-height: 1.35; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

svg { display: block; flex: none; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* ============================================================
   Utility primitives
   ============================================================ */

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -0.005em; }

.overline {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--muted-ink);
}

.small { font-size: 12.5px; letter-spacing: 0.01em; color: var(--muted-ink); }
.dim   { color: var(--muted-ink); }
.strong { color: var(--fg-strong); font-weight: 550; }
.neg   { color: var(--danger); }
.hr    { height: 1px; background: var(--border); border: 0; margin: 0; }
.spacer { flex: 1; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.row-flex { display: flex; align-items: center; gap: 10px; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }

/* ============================================================
   App shell
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- sidebar --- */

/* El rail es la única superficie oscura del sistema. Sus colores se derivan
   del contrato: azul del acento mezclado con el texto para el fondo, y capas
   translúcidas claras para líneas y estados, según la regla de superficies
   oscuras (borde de luz, nunca borde oscuro sólido). */
.sidebar {
  --rail-bg:     color-mix(in oklab, var(--ink-abs), var(--accent) 18%);
  --rail-fg:     color-mix(in oklab, var(--paper-abs), var(--accent) 6%);
  --rail-muted:  color-mix(in oklab, var(--rail-fg), var(--rail-bg) 38%);
  --rail-line:   color-mix(in oklab, var(--rail-fg) 13%, transparent);
  --rail-hover:  color-mix(in oklab, var(--rail-fg) 9%, transparent);
  --rail-badge:  color-mix(in oklab, var(--rail-fg) 16%, transparent);
  --rail-active: color-mix(in oklab, var(--accent), var(--rail-bg) 35%);

  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
  color: var(--rail-muted);
}

/* el rail ya es oscuro en modo claro; en tema oscuro se hunde un poco más,
   así que el seleccionado necesita más base para no perder contraste */
:root[data-theme='dark'] .sidebar {
  --rail-active: color-mix(in oklab, var(--accent), var(--rail-bg) 45%);
}

/* el aro de foco oscuro no se ve sobre el rail: se invierte a luz */
.sidebar :focus-visible { outline-color: var(--rail-fg); }

/* control compacto propio del rail (cambio de tema) */
.railbtn {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--rail-line);
  background: var(--rail-hover);
  color: var(--rail-muted);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.railbtn:hover {
  background: var(--rail-badge);
  color: var(--rail-fg);
  border-color: color-mix(in oklab, var(--rail-fg) 26%, transparent);
}
/* en una página con el tema fijado el conmutador queda como indicador: pierde
   la afordancia de clic pero no el contraste, porque «deshabilitado» aquí no
   comunica un control vedado sino un estado de la página */
.railbtn:disabled { cursor: default; }
.railbtn:disabled:hover {
  background: var(--rail-hover);
  color: var(--rail-muted);
  border-color: var(--rail-line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--rail-line);
  flex: none;
}

.brand__mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--rail-fg);
  color: var(--rail-bg);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  flex: none;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; letter-spacing: -0.008em;
  color: var(--rail-fg);
  line-height: 1.15;
}

.brand__sub { font-size: 11px; color: var(--rail-muted); letter-spacing: 0.012em; }

.orgswitch {
  margin: 12px 12px 6px;
  padding: 9px 10px;
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--rail-line);
  border-radius: var(--r-md);
  background: var(--rail-hover);
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.orgswitch:hover {
  background: var(--rail-badge);
  border-color: color-mix(in oklab, var(--rail-fg) 26%, transparent);
}

.orgswitch__badge {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--rail-badge); color: var(--rail-fg);
  display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
}
.orgswitch__name {
  font-size: 12.5px; font-weight: 550; color: var(--rail-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orgswitch__meta { font-size: 11px; color: var(--rail-muted); }

.nav { padding: 8px 12px; overflow-y: auto; flex: 1; }
.nav__group + .nav__group { margin-top: 18px; }
.nav__label { padding: 0 8px 6px; }
.sidebar .nav__label { color: var(--rail-muted); }

.navitem {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  color: var(--rail-muted);
  font-size: 13.5px;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
/* etiqueta corta, solo visible con el rail colapsado (≤900px) */
.navitem__short { display: none; }
.navitem:hover { background: var(--rail-hover); color: var(--rail-fg); }
.navitem[aria-current='page'] {
  background: var(--rail-active);
  color: var(--rail-fg);
  font-weight: 550;
}
.navitem__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rail-muted);
  background: var(--rail-badge);
  border: 1px solid var(--rail-line);
  border-radius: 20px;
  padding: 0 6px;
  line-height: 17px;
}
.navitem[aria-current='page'] .navitem__count {
  color: var(--rail-fg);
  background: color-mix(in oklab, var(--rail-fg) 20%, transparent);
  border-color: color-mix(in oklab, var(--rail-fg) 30%, transparent);
}

.sidebar__foot { flex: none; border-top: 1px solid var(--rail-line); padding: 10px 12px; }

.userchip {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--r-sm);
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  transition: background var(--motion-fast) var(--ease-standard);
}
.userchip:hover { background: var(--rail-hover); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--subtle-2); color: var(--fg-strong);
  display: grid; place-items: center; flex: none;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
}
.sidebar .avatar { background: var(--rail-badge); color: var(--rail-fg); }
.userchip__name { font-size: 12.5px; font-weight: 550; color: var(--rail-fg); line-height: 1.25; }
.userchip__role { font-size: 11px; color: var(--rail-muted); letter-spacing: 0.012em; }

.envnote {
  margin: 8px 0 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  font-weight: 600; color: var(--rail-muted);
}
.envnote::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--warn); flex: none;
}

/* --- topbar --- */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: var(--veil);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.crumb { font-size: 12.5px; color: var(--muted-ink); display: flex; align-items: center; gap: 6px; }

/* El área de trabajo ocupa el ancho completo del monitor. La medida se controla
   en el contenido —la prosa a 68 ch, el panel lateral con ancho tope— y no
   recortando la página: en una conciliación de cinco centros cada columna que
   cabe es una columna que no hay que buscar con scroll horizontal. */
.page {
  padding: 22px 24px 72px;
  max-width: none;
  width: 100%;
}
.page--wide { max-width: none; }
/* Único caso con medida tope: una pantalla de lectura larga sin tablas. */
.page--reading { max-width: 980px; }

.pagehead { margin-bottom: 18px; }
.pagehead__desc { font-size: 13px; color: var(--muted-ink); margin-top: 3px; max-width: 68ch; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 550; letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn:hover { background: var(--subtle); border-color: var(--line-strong); }
.btn:active { background: var(--subtle-2); }

.btn--primary {
  background: var(--solid-bg);
  border-color: var(--solid-bg);
  color: var(--solid-fg);
}
.btn--primary:hover { background: var(--solid-bg-hover); border-color: var(--solid-bg-hover); color: var(--solid-fg); }
.btn--primary:active { background: var(--solid-bg-active); border-color: var(--solid-bg-active); color: var(--solid-fg); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--muted-ink); }
.btn--ghost:hover { background: var(--subtle); border-color: transparent; color: var(--fg-strong); }

.btn--danger { color: var(--danger); border-color: var(--danger-line); background: var(--surface); }
.btn--danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.btn--sm { height: 27px; padding: 0 9px; font-size: 12.5px; gap: 5px; }
.btn--lg { height: 44px; padding: 0 20px; font-size: 15px; border-radius: var(--r-md); }

.btn--icon { width: 32px; padding: 0; }
.btn--icon.btn--sm { width: 27px; }

.btn:disabled, .btn[aria-disabled='true'] {
  color: var(--fg-disabled);
  background: var(--subtle);
  border-color: var(--border);
  cursor: not-allowed;
}

.linkish {
  color: var(--accent-ink);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish:hover { text-decoration-color: var(--accent-ink); }

/* --- segmented control --- */

.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--subtle-2);
  border-radius: var(--r-md);
  gap: 2px;
}
/* La pista del segmentado es --subtle-2, el relleno neutro más oscuro del
   sistema. Ahí --muted-ink cae a 4.87:1 en claro y 4.53 en oscuro: pasa por los
   pelos y se apoya justo en el peor fondo posible. La etiqueta inactiva usa
   --fg-2 (8.38 y 6.70), y el activo sigue distinguiéndose por lo que de verdad
   lo distingue: el pulgar elevado sobre --surface, más --fg-strong encima.
   Corregir aquí, y no aclarando --subtle-2, evita mover un relleno del que
   dependen nueve componentes y que perdería su distinción frente al hover. */
.segmented button {
  height: 26px; padding: 0 11px;
  border: 0; background: transparent;
  border-radius: 6px;
  font-family: var(--font-display); font-size: 12.5px; font-weight: 550;
  color: var(--fg-2); cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.segmented button:hover { color: var(--fg-strong); }
.segmented button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--fg-strong);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--ink-abs) 10%, transparent);
}

/* --- tabs --- */

.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tabs button {
  position: relative;
  padding: 9px 12px 11px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 550;
  color: var(--muted-ink);
  transition: color var(--motion-fast) var(--ease-standard);
}
.tabs button:hover { color: var(--fg-strong); }
.tabs button[aria-selected='true'] { color: var(--fg-strong); }
.tabs button[aria-selected='true']::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--fg-strong); border-radius: 2px;
}

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 46px;
}
.card__head .spacer { flex: 1; }
.card__title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fg-strong); letter-spacing: -0.006em; }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--subtle);
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted-ink);
}

/* --- explicit grid rows (never auto-fill with spanning children) --- */
/* `hidden` tiene que ganarle a cualquier clase de disposición. .rows y
   .rowN declaran display, y una regla de clase le gana al [hidden] del
   navegador: sin esto, un panel de pestaña oculto se sigue viendo. Es la
   misma razón por la que normalize.css lo marca !important. */
[hidden] { display: none !important; }

.rows { display: flex; flex-direction: column; gap: 16px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.row-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.row-1-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; }
.row-3-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }

/* --- KPI --- */

.kpi { padding: 14px 16px 15px; }
.kpi__label { display: flex; align-items: center; gap: 6px; }
.kpi__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 27px; font-weight: 500; letter-spacing: -0.028em;
  color: var(--fg-strong);
  line-height: 1.1;
  margin-top: 9px;
}
.kpi__value small { font-size: 15px; font-weight: 400; color: var(--muted-ink); letter-spacing: -0.01em; }
.kpi__foot { margin-top: 7px; font-size: 12px; color: var(--muted-ink); display: flex; align-items: center; gap: 5px; }

/* ============================================================
   Pills & badges
   ============================================================ */

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--subtle);
  color: var(--muted-ink);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.065em; text-transform: uppercase;
  white-space: nowrap;
}
.pill svg { width: 11px; height: 11px; }
.pill--ok     { background: var(--ok-soft);     border-color: var(--ok-line);     color: var(--ok-ink); }
.pill--warn   { background: var(--warn-soft);   border-color: var(--warn-line);   color: var(--warn-ink); }
.pill--danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.pill--info   { background: var(--info-soft);   border-color: var(--info-line);   color: var(--info); }
.pill--solid  { background: var(--fg-strong); border-color: var(--fg-strong); color: var(--surface); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 12px; color: var(--fg);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.tag--variant { background: var(--info-soft); border-color: var(--info-line); color: var(--info); font-weight: 550; }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--border); }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--danger { background: var(--danger); }
.dot--idle { background: var(--track); }

/* ============================================================
   Tables
   ============================================================ */

.tablewrap { overflow-x: auto; }

table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.t th {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--muted-ink);
  text-align: left;
  padding: 9px 14px;
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.t td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--fg);
}
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr.hoverable { transition: background var(--motion-fast) var(--ease-standard); cursor: pointer; }
table.t tbody tr.hoverable:hover { background: var(--subtle); }
table.t tbody tr.hoverable:hover td { color: var(--fg-strong); }
table.t tbody tr[aria-selected='true'] { background: var(--subtle-2); }
/* misma razón que en .segmented: sobre el relleno más oscuro, el texto
   secundario de la fila seleccionada sube a --fg-2 en vez de quedarse en
   --muted-ink, que ahí sólo daba 4.87:1 */
table.t tbody tr[aria-selected='true'] .small,
table.t tbody tr[aria-selected='true'] .cell-sub { color: var(--fg-2); }
table.t td.n, table.t th.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
table.t th.n { font-family: var(--font-display); }
/* Cabecera de fila. Una tabla cruzada —centro × tipo de comida, variante
   × centro— necesita <th scope="row"> o el lector de pantalla no puede
   decir a qué centro pertenece un número. El estilo de arriba es de
   cabecera de columna, así que dentro del cuerpo la celda de encabezado
   se comporta como una celda normal, con el peso de énfasis. */
table.t tbody th {
  font-family: var(--font-display);
  font-size: 13.5px; font-weight: 550; letter-spacing: 0; text-transform: none;
  color: var(--fg-strong);
  background: transparent;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: normal;
}
table.t tbody tr:last-child th { border-bottom: 0; }
table.t tbody tr.hoverable:hover th { color: var(--fg-strong); }
table.t tfoot td {
  padding: 11px 14px;
  border-top: 1px solid var(--border);
  background: var(--subtle);
  font-weight: 600;
  color: var(--fg-strong);
}
table.t .cell-strong { color: var(--fg-strong); font-weight: 550; }
table.t .cell-sub { font-size: 12px; color: var(--muted-ink); margin-top: 1px; }
table.t tr.grouphead td {
  background: var(--subtle);
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.065em; text-transform: uppercase;
  color: var(--muted-ink);
  padding: 7px 14px;
}
table.t tr.subtotal td { background: var(--border-soft); font-weight: 550; color: var(--fg-strong); }

/* ============================================================
   Forms
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 550; letter-spacing: 0.012em;
  color: var(--fg-strong);
  display: flex; align-items: center; gap: 5px;
}
.req { color: var(--danger); font-weight: 600; }
.field__hint { font-size: 12px; color: var(--muted-ink); }
.field__error { font-size: 12px; color: var(--danger); display: flex; align-items: center; gap: 5px; }

.input, .select, .textarea {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--fg-strong);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--solid-bg);
  box-shadow: var(--focus-ring);
}
.textarea { min-height: 78px; resize: vertical; line-height: 1.5; font-family: var(--font-body); }
.select {
  appearance: none;
  padding-right: 28px;
  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='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
/* el chevron va dentro de un data-URI y no acepta var(): una versión por tema */
:root[data-theme='dark'] .select {
  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='%238b97a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.input--num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

.searchbox { position: relative; }
.searchbox svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted-ink); pointer-events: none;
}
.searchbox .input { padding-left: 30px; }

.qty { display: flex; }
.qty .input { border-radius: var(--r-sm) 0 0 var(--r-sm); border-right: 0; }
.qty .select { border-radius: 0 var(--r-sm) var(--r-sm) 0; width: 82px; min-width: 82px; background-color: var(--subtle); }

.switchrow { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.switch {
  width: 34px; height: 20px; border-radius: 20px; flex: none;
  background: var(--track);
  border: 0; padding: 0; cursor: pointer;
  position: relative; transition: background var(--motion-base) var(--ease-standard);
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--ink-abs) 30%, transparent);
  transition: transform var(--motion-base) var(--ease-standard);
}
.switch[aria-checked='true'] { background: var(--accent-ink); }
.switch[aria-checked='true']::after { transform: translateX(14px); }

/* --- stepper (tablet-sized ration counter) --- */

.stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.stepper button {
  width: 46px; border: 0; background: var(--surface);
  color: var(--muted-ink); cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.stepper button:hover { background: var(--subtle-2); color: var(--fg-strong); }
.stepper button:active { background: var(--subtle-2); }
.stepper input {
  width: 74px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg-strong);
  background: var(--surface);
  padding: 0;
}
.stepper input:focus { outline: none; background: var(--accent-soft); }
.stepper--lg button { width: 52px; }
.stepper--lg input { width: 88px; font-size: 26px; height: 52px; }

/* ============================================================
   Week strip
   ============================================================ */

.weekstrip {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.daybtn {
  flex: 1;
  border: 0; border-left: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 8px 9px;
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-standard);
  min-width: 0;
}
.daybtn:first-child { border-left: 0; }
.daybtn:hover { background: var(--subtle); }
.daybtn[aria-pressed='true'] { background: var(--subtle-2); }
.daybtn[aria-pressed='true'] .daybtn__num { color: var(--fg-strong); }
.daybtn__dow {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted-ink);
}
.daybtn__num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1.15; margin-top: 2px;
}
.daybtn__dots { display: flex; gap: 3px; margin-top: 7px; }
.daybtn__today {
  display: inline-block; margin-left: 6px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink);
  vertical-align: middle;
}

/* ============================================================
   Meal blocks (menu composer / service recording)
   ============================================================ */

.meal { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.meal + .meal { margin-top: 12px; }
.meal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--subtle);
}
.meal__name { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: var(--fg-strong); letter-spacing: -0.005em; }
.meal__time { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-ink); }
.meal--active { border-color: var(--accent-line); }
.meal--active .meal__head { background: var(--accent-soft); border-bottom-color: var(--accent-line); }

/* Cuatro celdas con nombre propio: en móvil la fila se repliega a dos líneas
   sin tocar el marcado y sin perder las calorías. */
.itemrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 74px 40px;
  grid-template-areas: 'main qty kcal act';
  align-items: center;
  gap: 10px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--motion-fast) var(--ease-standard);
}
.itemrow > :first-child { grid-area: main; min-width: 0; }
.itemrow > :last-child  { grid-area: act; }
.itemrow:last-child { border-bottom: 0; }

/* Variante de registro de servicio: al personal de centro no le sirve la
   columna de calorías —le sirve la porción y el botón de sustituir— y la fila
   respira más porque se toca con el dedo. */
.itemrow--serve {
  grid-template-columns: minmax(0, 1fr) 96px auto;
  grid-template-areas: 'main qty act';
  padding-left: 18px;
  padding-right: 18px;
}
.itemrow:hover { background: var(--subtle); }
.itemrow__name { font-size: 13.5px; color: var(--fg-strong); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.itemrow__cat { font-size: 11.5px; color: var(--muted-ink); letter-spacing: 0.01em; }
.itemrow__qty { grid-area: qty; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; color: var(--fg-strong); }
.itemrow__kcal { grid-area: kcal; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; text-align: right; color: var(--muted-ink); }
.itemrow--replaced .itemrow__name { text-decoration: line-through; text-decoration-color: var(--danger-line); color: var(--muted-ink); }

.subline {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 15px 11px 15px;
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  font-size: 12.5px;
  color: var(--warn-ink);
}
.subline svg { width: 15px; height: 15px; margin-top: 1px; color: var(--warn-ink); }
.subline b { color: var(--warn-ink-2); font-weight: 600; }

.variantbox {
  border: 1px solid var(--info-line);
  background: var(--info-soft);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}
.variantbox + .variantbox { margin-top: 8px; }

/* ============================================================
   Recetas · composición de platos preparados (FR-RC.*)
   ------------------------------------------------------------
   Unas habichuelas guisadas no son un alimento suelto: llevan sofrito,
   salsa, calabaza y agua, y el inventario descuenta esos ingredientes en
   proporción al rendimiento, nunca el plato. La interfaz tiene que dejar
   ver esa composición sin sacar a nadie de la pantalla donde trabaja, así
   que la receta se despliega dentro de la propia fila del menú.
   ============================================================ */

/* Clasificación, no estado: la marca de receta es neutra y no gasta el
   acento, que está reservado a selección, foco e indicadores. */
.pill--recipe {
  background: var(--subtle-2);
  border-color: var(--line-strong);
  color: var(--fg-strong);
  letter-spacing: 0.055em;
}

/* El nombre del plato es el disparador: pulsarlo abre sus ingredientes.
   En hover el texto no se aclara —se subraya— y el chevrón se oscurece. */
.disclose {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--fg-strong); text-align: left;
  cursor: pointer;
}
/* el giro del chevrón lo aplica siga.js sobre el <i>, no el CSS sobre el <svg>:
   si ambos rotaran 180° el resultado sería un giro completo, o sea ninguno */
.disclose > [data-icon] { transition: transform var(--motion-base) var(--ease-standard); }
.disclose svg { color: var(--muted-ink); transition: color var(--motion-fast) var(--ease-standard); }
.disclose:hover { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.disclose:hover svg { color: var(--fg-strong); }

/* Panel de ingredientes: hermano de .itemrow, con las mismas cuatro
   columnas para que las cantidades del ingrediente caigan bajo la porción. */
.ingredients {
  background: var(--subtle);
  border-bottom: 1px solid var(--border-soft);
  padding: 2px 15px 11px;
}
.ingredients__head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 0 7px;
}
.ingredients__note {
  margin-top: 9px;
  font-size: 12px; color: var(--muted-ink); line-height: 1.5;
}

/* Las dos primeras columnas coinciden con .itemrow (1fr + 96px), de modo que la
   cantidad del ingrediente cae justo bajo la porción del plato. Las dos últimas
   no heredan los 40px de la celda de acción: ahí van «volumen» o «192.8 fl oz»
   y con 40px se desbordarían. */
.ingrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 84px 108px;
  grid-template-areas: 'main qty kcal use';
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 12.5px;
}
.ingrow + .ingrow { border-top: 1px dashed var(--border); }
.ingrow--head {
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.075em; text-transform: uppercase;
  color: var(--muted-ink);
}
.ingrow--total {
  border-top: 1px solid var(--line-strong);
  padding-top: 8px;
  color: var(--fg-strong); font-weight: 550;
}
.ingrow__name { grid-area: main; color: var(--fg); min-width: 0; }
.ingrow__qty  { grid-area: qty;  font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-strong); }
.ingrow__kcal { grid-area: kcal; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted-ink); }
.ingrow__use  { grid-area: use;  font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted-ink); }
.ingrow--total .ingrow__kcal, .ingrow--total .ingrow__use { color: var(--fg-strong); }
/* Vista de descuento: ahí la última columna deja de ser un dato secundario —es
   lo que sale del almacén— y se escribe con la tinta fuerte. */
.ingredients--deduct .ingrow__use { color: var(--fg-strong); font-weight: 550; }

/* Rendimiento: la base de escalado de todo el consumo por receta. */
.yield {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted-ink);
}
.yield__n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg-strong);
}

/* Peso · volumen · conteo. El eje nuevo que introducen las recetas: una
   receta mezcla libremente las tres familias de unidad. */
.unitclass {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--muted-ink);
  white-space: nowrap;
}
.unitclass svg { width: 12px; height: 12px; flex: none; }

/* Tabla en modo edición: el editor de receta escribe dentro de las celdas. */
table.t--edit td { padding: 6px 10px; }
table.t--edit .input,
table.t--edit .select { min-height: 30px; font-size: 13px; }
table.t--edit .qty .select { width: 96px; min-width: 96px; }
table.t--edit .drag { color: var(--muted-ink); cursor: grab; }

/* ============================================================
   Ledger
   ============================================================ */

.ledger { position: relative; padding-left: 0; }
/* Cinco celdas con nombre: fecha · tipo · referencia · cantidad con signo ·
   balance. En móvil se repliegan a dos líneas sin cambiar el marcado. */
.ledger__row {
  display: grid;
  grid-template-columns: 92px 106px minmax(0, 1fr) 92px 96px;
  grid-template-areas: 'date type ref qty bal';
  gap: 12px;
  align-items: baseline;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row:hover { background: var(--subtle); }
.ledger__date { grid-area: date; font-family: var(--font-mono); font-size: 12px; color: var(--muted-ink); }
.ledger__row > .small { grid-area: type; }
.ledger__qty { grid-area: qty; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
.ledger__qty--in { color: var(--fg-strong); }
.ledger__qty--out { color: var(--fg); }
.ledger__bal { grid-area: bal; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-strong); font-weight: 500; }
.ledger__ref { grid-area: ref; font-size: 12px; color: var(--muted-ink); min-width: 0; }
/* Un consumo generado por una receta nombra el plato que lo originó: sin esta
   línea el ledger dice «−1.4 lb de sofrito» sin explicar de dónde salió. */
.ledger__via {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--fg-strong); font-weight: 550;
}
.ledger__via svg { width: 12px; height: 12px; color: var(--muted-ink); }

/* --- inline proportion bar --- */
.bar { height: 6px; border-radius: 3px; background: var(--subtle-2); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--data-bar); border-radius: 3px; }
.bar > i.is-accent { background: var(--solid-bg); }

/* --- column chart --- */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding: 0 2px; }
.chartcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; min-width: 0; }
.chartcol__bar {
  width: 100%;
  background: var(--data-track);
  border-radius: 3px 3px 0 0;
  transition: background var(--motion-fast) var(--ease-standard);
  min-height: 3px;
}
.chartcol:hover .chartcol__bar { background: var(--data-track-hover); }
.chartcol--now .chartcol__bar { background: var(--solid-bg); }
.chartcol--now:hover .chartcol__bar { background: var(--solid-bg-hover); }
.chartcol__label {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-ink);
  white-space: nowrap; overflow: hidden;
}
.chartcol--now .chartcol__label { color: var(--accent-ink); font-weight: 600; }

/* ============================================================
   Overlays: modal + drawer
   ============================================================ */

.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--scrim-ink);
  display: none;
}
.scrim[data-open='true'] { display: block; }

.modal {
  position: fixed; z-index: 70;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  display: none;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.modal[data-open='true'] { display: flex; }
.modal--wide { width: min(760px, calc(100vw - 40px)); }
.modal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal__body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.modal__foot {
  padding: 13px 18px; border-top: 1px solid var(--border);
  background: var(--subtle);
  display: flex; align-items: center; gap: 9px;
}

.drawer {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0;
  width: min(620px, calc(100vw - 40px));
  display: none; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-modal);
}
.drawer[data-open='true'] { display: flex; }
.drawer__head { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
.drawer__body { overflow-y: auto; flex: 1; }
.drawer__foot { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--subtle); display: flex; gap: 9px; }

/* --- autocomplete list --- */
.aclist { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; max-height: 230px; overflow-y: auto; }
.acitem {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard);
}
.acitem:last-child { border-bottom: 0; }
.acitem:hover, .acitem[aria-selected='true'] { background: var(--subtle); }
.acitem[aria-selected='true'] { background: var(--accent-soft); }
.acitem mark { background: var(--mark); color: var(--fg-strong); border-radius: 2px; padding: 0 1px; }

/* ============================================================
   Banners & callouts
   ============================================================ */

.banner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 13px;
}
.banner svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.banner__title { font-family: var(--font-display); font-weight: 600; color: var(--fg-strong); font-size: 13px; }
.banner__text { color: var(--muted-ink); margin-top: 2px; }
.banner--warn { background: var(--warn-soft); border-color: var(--warn-line); }
.banner--warn svg { color: var(--warn); }
.banner--danger { background: var(--danger-soft); border-color: var(--danger-line); }
.banner--danger svg { color: var(--danger); }
.banner--info { background: var(--info-soft); border-color: var(--info-line); }
.banner--info svg { color: var(--info); }

.empty { padding: 34px 20px; text-align: center; color: var(--muted-ink); font-size: 13px; }

/* --- sticky action bar --- */
.actionbar {
  position: sticky; bottom: 0; z-index: 15;
  margin: 20px -24px -72px;
  padding: 12px 24px;
  background: var(--veil-2);
  backdrop-filter: saturate(160%) blur(8px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
}

/* ============================================================
   Texto secundario dentro de una fila con hover
   ------------------------------------------------------------
   Una fila que se tiñe al pasar el cursor oscurece su celda, pero un
   .small, un .cell-sub o un .itemrow__cat llevan color propio y no
   heredan ese oscurecimiento: se quedaban en --muted-ink sobre --subtle,
   o sea 5.25:1, bajando desde los 6.02:1 que tenían en reposo. El
   contraste no puede caer al entrar en un estado. Con --fg-2 sube a
   9.03:1 en todas ellas.
   ============================================================ */

table.t tbody tr.hoverable:hover .small,
table.t tbody tr.hoverable:hover .cell-sub,
.ledger__row:hover .small,
.ledger__row:hover .ledger__date,
.ledger__row:hover .ledger__ref,
.itemrow:hover .itemrow__cat,
.itemrow:hover .itemrow__kcal,
.ingrow:hover .ingrow__kcal,
.ingrow:hover .ingrow__use,
.acitem:hover .small,
.daybtn:hover .daybtn__dow {
  color: var(--fg-2);
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- monitor ancho ------------------------------------------------
   La página ya no lleva medida tope, así que en un monitor grande el área
   de trabajo se llena entera. Lo que sí se limita es el panel lateral: si
   creciera con la pantalla, la columna principal —la tabla, el compositor—
   dejaría de ganar el espacio que se acaba de liberar. */
@media (min-width: 1600px) {
  .page     { padding: 24px 32px 76px; }
  .topbar   { padding: 0 32px; }
  .actionbar { margin: 22px -32px -76px; padding: 13px 32px; }
}

@media (min-width: 1760px) {
  .row-2-1 { grid-template-columns: minmax(0, 1fr) 460px; }
  .row-1-2 { grid-template-columns: 460px minmax(0, 1fr); }
  .row-3-2 { grid-template-columns: minmax(0, 1fr) 560px; }
}

@media (min-width: 2200px) {
  .page     { padding: 26px 44px 80px; }
  .topbar   { padding: 0 44px; }
  .actionbar { margin: 24px -44px -80px; padding: 14px 44px; }
  .row-2-1 { grid-template-columns: minmax(0, 1fr) 520px; }
  .row-1-2 { grid-template-columns: 520px minmax(0, 1fr); }
  .row-3-2 { grid-template-columns: minmax(0, 1fr) 620px; }
}

/* --- portátil / tableta apaisada ---------------------------------- */
@media (max-width: 1180px) {
  .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-2-1, .row-1-2, .row-3-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- tableta vertical ---------------------------------------------
   El iPad apaisado (1024px) conserva el rail completo con etiquetas: ahí
   cabe y se lee mejor. Solo por debajo de 900px el rail se colapsa, y no a
   iconos mudos: 80px con una etiqueta corta debajo, porque una cocina no es
   el sitio para adivinar qué significa un pictograma. */
@media (max-width: 900px) {
  :root { --rail: 80px; }

  .brand__text, .brand__name, .brand__sub,
  .orgswitch__text, .userchip__text, .nav__label, .envnote { display: none; }
  .brand { justify-content: center; padding: 0; }

  .navitem { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 4px; min-height: 52px; }
  .navitem span { display: none; }
  .navitem .navitem__short {
    display: block;
    font-size: 10px; line-height: 1.15; letter-spacing: 0.01em; text-align: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .navitem__count {
    margin-left: 0;
    position: absolute; top: 4px; right: 8px;
    font-size: 9.5px; line-height: 15px; padding: 0 4px;
  }
  .nav { padding: 8px 6px; }
  .nav__group + .nav__group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rail-line); }

  .orgswitch { justify-content: center; padding: 9px 6px; margin: 10px 8px 4px; }
  .userchip { justify-content: center; }
  .sidebar__foot { padding: 8px; }
  .sidebar__foot .row-flex { flex-direction: column; gap: 6px; }

  .page { padding: 18px 18px 68px; }
  .topbar { padding: 0 18px; }
  .actionbar { margin: 18px -18px -68px; padding: 11px 18px; }
}

/* --- objetivos táctiles -------------------------------------------
   Se activa por tipo de puntero, no por ancho: la tableta de cocina recibe
   controles grandes esté en vertical o apaisada, y el ratón conserva la
   densidad que hace útil una conciliación de cinco centros. */
@media (pointer: coarse) {
  .btn { height: 40px; padding: 0 14px; }
  .btn--sm { height: 34px; padding: 0 11px; }
  .btn--icon { width: 40px; }
  .btn--icon.btn--sm { width: 34px; }
  .input, .select, .textarea { min-height: 42px; font-size: 14px; }
  .navitem { min-height: 46px; }
  .segmented button { height: 34px; padding: 0 14px; }
  .tabs button { padding: 12px 14px 14px; }
  .daybtn { padding: 12px 8px 11px; }
  .acitem { padding: 11px 12px; }
  .switch { width: 42px; height: 25px; }
  .switch::after { width: 21px; height: 21px; }
  .switch[aria-checked='true']::after { transform: translateX(17px); }
  table.t td { padding: 13px 14px; }
}

/* --- móvil ---------------------------------------------------------
   El rail pasa a una tira horizontal fija sobre el contenido —no a una
   barra inferior, que chocaría con la barra de acción pegajosa— y las
   rejillas de cinco y cuatro columnas se repliegan a dos líneas en vez de
   desbordar de lado. */
@media (max-width: 680px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: sticky; top: 0; z-index: 30;
    height: auto; flex-direction: row; align-items: stretch;
    border-right: 0; border-bottom: 1px solid var(--rail-line);
    overflow: visible;
  }
  .brand { height: auto; padding: 0 12px; border-bottom: 0; border-right: 1px solid var(--rail-line); }
  .orgswitch { display: none; }
  .nav {
    display: flex; flex: 1; min-width: 0;
    padding: 5px 6px; gap: 2px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__group { display: flex; }
  .nav__group + .nav__group { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--rail-line); margin-left: 4px; padding-left: 4px; }
  .nav ul { display: flex; gap: 2px; }
  .navitem { min-width: 62px; min-height: 46px; padding: 6px 6px; }
  .sidebar__foot { border-top: 0; border-left: 1px solid var(--rail-line); padding: 6px 8px; display: flex; align-items: center; }
  .sidebar__foot .row-flex { flex-direction: row; gap: 6px; }
  .userchip { padding: 4px; }

  /* el rail ya ocupa la posición pegajosa superior; dos barras fijas a la vez
     se solaparían y comerían un tercio de una pantalla de teléfono */
  .topbar {
    position: static;
    height: auto; min-height: 52px;
    padding: 8px 14px; flex-wrap: wrap; row-gap: 7px;
    backdrop-filter: none;
    background: var(--surface);
  }
  .topbar__title h1 { font-size: 18px; }
  .topbar .crumb { display: none; }
  .topbar__actions {
    margin-left: 0; width: 100%;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 1px;
  }
  .topbar__actions::-webkit-scrollbar { display: none; }

  .page { padding: 16px 14px 64px; }
  .row2, .row3, .row4 { grid-template-columns: minmax(0, 1fr); }
  .actionbar { margin: 16px -14px -64px; padding: 10px 14px; flex-wrap: wrap; row-gap: 8px; }
  .actionbar .btn { flex: 1 1 150px; }
  .actionbar .spacer { flex-basis: 100%; height: 0; }

  .card__head { flex-wrap: wrap; row-gap: 6px; padding: 11px 14px; }
  .card__body { padding: 14px; }
  .kpi__value { font-size: 24px; }
  .pagehead__desc { font-size: 12.5px; }

  /* fila de alimento: dos líneas, sin perder las calorías */
  .itemrow {
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-areas: 'main qty act' 'main kcal act';
    row-gap: 1px;
  }
  .itemrow--serve {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'main qty' 'main act';
    row-gap: 6px;
    padding-left: 14px; padding-right: 14px;
  }
  .ingrow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'main qty' 'main kcal' 'main use';
    row-gap: 1px;
  }
  .ingredients { padding: 2px 14px 11px; }

  /* ledger: fecha y movimiento arriba, referencia y balance abajo */
  .ledger__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'date type qty' 'ref ref bal';
    gap: 4px 10px;
    padding: 11px 14px;
  }

  /* la semana se desliza en vez de comprimirse a 60px por día */
  .weekstrip { overflow-x: auto; scrollbar-width: none; }
  .weekstrip::-webkit-scrollbar { display: none; }
  .daybtn { flex: 0 0 112px; }

  /* superposiciones a pantalla completa */
  .modal {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: 90vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
  }
  .modal--wide { width: 100%; }
  .drawer { width: 100%; border-left: 0; }
  .modal__foot, .drawer__foot { flex-wrap: wrap; row-gap: 8px; }
  .modal__foot .btn, .drawer__foot .btn { flex: 1 1 140px; }
  .modal__foot .spacer, .drawer__foot .spacer { flex-basis: 100%; height: 0; }

  .stepper--lg button { width: 56px; }
  .stepper--lg input { width: 96px; }
  table.t th { padding: 9px 12px; }
}