/* ═══════════════════════════════════════════════════════════════════════════
   Control de Producción
   ───────────────────────────────────────────────────────────────────────────
   Un instrumento de planta, no una landing. Tres decisiones lo gobiernan:

   1. El color de marca sale del logo (hoy navy #06377B, rojo #ED1C24), no de
      una paleta inventada. Al clonar para otro cliente se reemplaza
      `static/logo.png` y se ajustan `--brand` y `--brand-ink` en `:root` (dos
      veces: el bloque oscuro y el `[data-theme="light"]`); el resto de la hoja
      deriva de esas variables. El resto del color está reservado para significar
      estado (bien / atención / mal) o identidad de producto. No hay color
      decorativo: si algo tiene color, quiere decir algo.
   2. La tipografía es Inter —la única que se puede servir sin salida a
      internet— pero seteada como panel de instrumentos: cifras tabulares
      siempre, display en 800 con tracking negativo, etiquetas en versalitas
      espaciadas.
   3. El tema claro no es el oscuro invertido: es la planilla de producción en
      papel, que es donde vive el original de estos datos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía local ──────────────────────────────────────────────────────
   Inter se sirve desde /static: la planta puede quedarse sin salida a internet
   y con Google Fonts la interfaz se degradaba a la fuente por defecto del
   navegador. Es la variable, cubre los pesos 300-800. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ═══════════════ TOKENS ═══════════════ */

:root {
  /* Marca — muestreada del propio logo */
  --brand: #5a9be0;          /* navy del logo, aclarado para el fondo oscuro */
  --brand-ink: #06377b;      /* navy exacto, para fondos claros */
  --green: #3fbb6b;

  /* Neutros: carbón cálido. No es azul-negro (el default de siempre) ni negro
     puro (mancha en OLED). */
  --shell: #12161c;
  --surface: #191f26;
  --surface-2: #212a33;
  --surface-3: #29333d;
  --line: #2f3a45;
  --line-soft: #232c35;

  /* Tinta. Los tres niveles superan 4.5:1 sobre --surface. */
  --ink: #eef1f5;
  --ink-2: #aab4c0;
  --ink-3: #8b95a2;
  --ink-on-accent: #0b0f14;

  /* Estado. Único lugar donde el color es semántico. */
  --ok: #3fbb6b;
  --warn: #e0a02c;
  --low: #ea7a3c;
  --bad: #e5544b;
  --ok-bg: rgba(63, 187, 107, 0.13);
  --warn-bg: rgba(224, 160, 44, 0.13);
  --low-bg: rgba(234, 122, 60, 0.13);
  --bad-bg: rgba(229, 84, 75, 0.13);

  /* Escala de espacio densa: es un tablero, no una página de marketing. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;

  --r-sm: 5px;
  --r: 8px;
  --r-lg: 12px;

  --rail-w: 15rem;
  --fast: 160ms cubic-bezier(0.32, 0.72, 0, 1);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.22);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Tema claro: la planilla. Papel apenas cálido, no blanco de pantalla. */
[data-theme='light'] {
  --brand: #0b4899;
  --brand-ink: #06377b;
  --green: #12833c;

  --shell: #eceee9;
  --surface: #ffffff;
  --surface-2: #f5f6f2;
  --surface-3: #eceee8;
  --line: #d4d8ce;
  --line-soft: #e3e6de;

  --ink: #1a1f26;
  --ink-2: #4d5561;
  /* Medido, no elegido a ojo: con #666f7c las versalitas y el reloj de la barra
     superior quedaban en 4.35:1 sobre el papel del fondo. Este valor da 4.98:1
     como mínimo sobre las cuatro superficies del tema claro. */
  --ink-3: #5d6672;
  --ink-on-accent: #ffffff;

  --ok: #12833c;
  --warn: #9a6508;
  --low: #b1521a;
  --bad: #bc2f27;
  --ok-bg: rgba(18, 131, 60, 0.10);
  --warn-bg: rgba(154, 101, 8, 0.10);
  --low-bg: rgba(177, 82, 26, 0.10);
  --bad-bg: rgba(188, 47, 39, 0.10);

  --shadow: 0 1px 2px rgba(20, 30, 15, 0.06), 0 4px 14px rgba(20, 30, 15, 0.07);
}

/* ═══════════════ BASE ═══════════════ */

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

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

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
  /* Las cifras cambian solas cada pocos segundos: sin ancho fijo el número
     entero baila y se vuelve ilegible de reojo, que es como se mira un
     tablero de planta. */
  font-variant-numeric: tabular-nums;
}

svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 0.05em 0.35em;
}

.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;
}

/* Foco visible siempre: en planta se navega con teclado más de lo que se
   admite, y el anillo del navegador es lo único que dice dónde estás. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

[hidden] { display: none !important; }

/* ── Versalitas de instrumento ──
   El registro de las etiquetas grabadas en un tablero de máquina. */
.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

.placeholder {
  color: var(--ink-3);
  font-size: 13px;
  padding: var(--s5) 0;
  text-align: center;
  grid-column: 1 / -1;
}

/* ═══════════════ INGRESO ═══════════════ */

.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s5);
  /* Un solo gesto de color en toda la pantalla: el navy de la marca subiendo
     desde abajo, como la luz de una sala de control.
     La declaración plana va primero a propósito: color-mix() no existe antes de
     Chrome 111, y en la planta hay equipos viejos. Sin el respaldo, el
     `background` entero se descarta y la pantalla de ingreso queda blanca. */
  background: var(--shell);
  background:
    radial-gradient(120% 80% at 50% 115%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    var(--shell);
}

.signin__card {
  width: min(23rem, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s5);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--s4);
}

.signin__logo { width: 8.5rem; justify-self: center; height: auto; }
/* El logo es una placa a color sobre fondo claro propio: se lee sobre el fondo
   oscuro sin ayuda. La versión anterior lo pasaba a silueta blanca
   (`brightness(0) invert(1)`), que servía para una marca monocroma pero acá
   deja un rectángulo blanco: el 55 % de los píxeles son opacos. */

.signin__eyebrow { justify-self: center; margin-top: calc(var(--s3) * -1); }

/* ═══════════════ ESTRUCTURA ═══════════════ */

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

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

/* ── Barra lateral ──
   Es el límite de rol hecho objeto: lo que ves acá es exactamente lo que
   podés hacer. Por eso el bloque de administración está separado y rotulado,
   en vez de simplemente aparecer de más. */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
  position: sticky;
  top: 0;
  height: 100vh;
}

.rail__brand { padding: var(--s2) var(--s2) 0; }
.rail__logo { width: 7.5rem; height: auto; display: block; }

.rail__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }

.rail__group-label { padding: var(--s3) var(--s2) var(--s1); }

.rail__group-label--admin {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  color: var(--warn);
}

.rail__group-icon { width: 12px; height: 12px; stroke-width: 2; }

.navitem {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 0.5rem var(--s2);
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}

.navitem:hover { background: var(--surface-2); color: var(--ink); }

.navitem.is-on {
  background: var(--surface-2);
  color: var(--ink);
  /* La marca de posición es una barra a la izquierda, del navy de la marca:
     un relleno completo competiría con los estados de color de los datos. */
  box-shadow: inset 2px 0 0 var(--brand);
}

.navitem__icon { width: 17px; height: 17px; flex: none; }

.rail__foot { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line-soft); }

.whoami { display: grid; gap: 2px; padding: 0 var(--s2); }
.whoami__name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }

.rolebadge {
  justify-self: start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-3);
  border: 1px solid var(--line);
}

.rolebadge--admin { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ── Barra superior ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  /* Respaldo opaco antes del translúcido: si color-mix() no está soportado, la
     barra queda sólida en vez de dejar pasar el contenido que scrollea debajo. */
  background: var(--shell);
  background: color-mix(in srgb, var(--shell) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.topbar__menu { display: none; }
.topbar__title { flex: 1; min-width: 0; }
.topbar__h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }

.topbar__clock {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Píldora de salud ──
   La ve todo el mundo. Si el tracker se cae, los números de producción dejan
   de ser confiables y eso no es información de administración. */
.health {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  white-space: nowrap;
}

.health--admin { cursor: pointer; }
.health--admin:hover { border-color: var(--ink-3); }
.health--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 32%, transparent); background: var(--ok-bg); }
.health--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-bg); }
.health--bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 38%, transparent); background: var(--bad-bg); }

.health__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.health--bad .health__dot { animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: 0.3; } }

/* ── Vistas ── */
.views { padding: var(--s5); display: block; }
.view { display: flex; flex-direction: column; gap: var(--s4); max-width: 90rem; }

/* ═══════════════ CONTROLES ═══════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}

.btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--ink-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn__icon { width: 14px; height: 14px; flex: none; }

.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--ink-on-accent); }
.btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 86%, var(--ink));
  border-color: color-mix(in srgb, var(--brand) 86%, var(--ink));
}

.btn--quiet { background: transparent; color: var(--ink-2); }
.btn--quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.btn--danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
.btn--danger:hover:not(:disabled) { background: var(--bad-bg); border-color: var(--bad); }

.btn--sm { min-height: 28px; padding: 0.25rem 0.6rem; font-size: 12px; }
.btn--block { width: 100%; }

.input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  transition: border-color var(--fast);
}

.input:hover { border-color: var(--ink-3); }
.input:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }

/* El icono nativo del date/time picker es negro y se pierde sobre el oscuro. */
[data-theme='dark'] .input::-webkit-calendar-picker-indicator { filter: invert(0.75); }

.field { display: grid; gap: var(--s1); }
.field__label { font-size: 12px; font-weight: 550; color: var(--ink-2); }
.field__error {
  font-size: 12.5px;
  color: var(--bad);
  background: var(--bad-bg);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
}

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}

.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn svg { width: 17px; height: 17px; }

.icon-moon { display: none; }
[data-theme='dark'] .icon-sun { display: none; }
[data-theme='dark'] .icon-moon { display: block; }

/* ── Segmentado ── */
.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.segmented button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.25rem 0.6rem;
  min-height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}

.segmented button:hover { color: var(--ink); }
.segmented button.is-on { background: var(--surface-3); color: var(--ink); }
.segmented button small { font-size: 10px; color: var(--ink-3); font-weight: 500; }
.segmented button.is-on small { color: var(--ink-2); }

/* ── Chips de producto ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.6rem;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}

.chip::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-color, currentColor);
  opacity: 0.35;
  transition: opacity var(--fast);
}

.chip:hover { color: var(--ink); }
.chip.is-on { color: var(--ink); border-color: color-mix(in srgb, var(--chip-color) 55%, transparent); background: var(--chip-dim); }
.chip.is-on::before { opacity: 1; }

/* ── Barra de herramientas ── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* La ventana horaria de la que salen los datos, colgada del filtro de fechas.
   El margen negativo la despega del gap de la vista para que se lea como parte
   de la barra de arriba y no como un párrafo suelto. */
.rangehint {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: calc(var(--s2) * -1);
  padding-inline: var(--s2);
}
.rangehint:empty { display: none; }

.toolbar--filters { background: transparent; border-style: dashed; }
.toolbar__field { display: grid; gap: 0.3rem; min-width: 8.5rem; }
.toolbar__field--grow { flex: 1; min-width: 14rem; }
.toolbar__spacer { flex: 1; }

/* ═══════════════ PANELES ═══════════════ */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  min-height: 30px;
}

.panel__title { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; flex: 1; }
.panel__hint { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.panel__desc { font-size: 12.5px; color: var(--ink-2); max-width: 68ch; margin-top: calc(var(--s2) * -1); }
/* La ayuda de navegación a la izquierda y el botón de restablecer a la derecha.
   El empuje lo da el margen automático de la ayuda y no `space-between`: así el
   botón queda contra el margen derecho también cuando el pie envuelve en dos
   líneas, y un pie sin ayuda —el botón solo— sigue alineado a la derecha como
   antes. */
.panel__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.panel__foot .panel__hint { margin-right: auto; }

.subhead {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
}

/* ═══════════════ LECTURA DE INDICADORES ═══════════════
   Disponibilidad, Rendimiento y Eficiencia no son tres tarjetas hermanas: la
   tercera es el producto de las dos primeras. Se dibujan como la cuenta que
   son, para que se lea de dónde sale el número que después se discute. */

.readout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s4);
}

.figure { display: grid; gap: 0.15rem; align-content: center; min-width: 8rem; }

.figure__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

.figure__value {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--figure-color, var(--ink));
  display: flex;
  align-items: baseline;
  gap: 0.2em;
}

.figure__unit { font-size: 0.5em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.figure__hint { font-size: 11.5px; color: var(--ink-3); }

.figure__bar { height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin: 0.2rem 0 0.1rem; }
.figure__fill { height: 100%; border-radius: 2px; background: var(--figure-color, var(--brand)); transition: width 400ms cubic-bezier(0.32, 0.72, 0, 1); }

/* La ecuación D × R = E */
.equation {
  display: flex;
  align-items: stretch;
  gap: var(--s3);
  flex: 1;
  min-width: 20rem;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface-2);
}

.equation__op {
  align-self: center;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-3);
  flex: none;
}

.equation .figure { flex: 1; min-width: 6rem; }
.equation__result .figure__label { color: var(--ink-2); }

.readout__divider { width: 1px; background: var(--line-soft); flex: none; }

/* ═══════════════ LA CINTA DE LA JORNADA ═══════════════
   El elemento firma. Cada etapa del turno es un segmento a escala sobre la
   ventana completa: se ve de un vistazo qué proporción del turno se fue en
   arranque, en cambios de producto y en parada. La tabla de abajo dice cuánto
   duró cada etapa; sólo la cinta dice cuánto pesa cada una. */

.ribbon { display: grid; gap: var(--s2); }

.ribbon__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.ribbon__track {
  display: flex;
  height: 3.25rem;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.ribbon__seg {
  position: relative;
  border: 0;
  padding: 0;
  /* Ancho mínimo para que una etapa de segundos siga siendo visible y
     clicable, pero con shrink habilitado: una jornada muy fragmentada no debe
     desbordar la pista. */
  min-width: 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: var(--seg-color, var(--surface-3));
  transition: filter var(--fast);
  transform-origin: left center;
}

/* El único momento coreografiado de la interfaz: la cinta se despliega una vez
   al cargar. Todo lo demás es hover y foco.
   La animación se aplica desde una clase que pone el JS, y el estado base del
   segmento es el final. Si estuviera al revés —`backwards` sobre el segmento
   pelado— una animación que no llega a correr (pestaña en segundo plano, o un
   navegador que no está componiendo) dejaría la cinta entera en `scaleX(0)`, es
   decir invisible, que es peor que no animar nada. */
.ribbon__track--entering .ribbon__seg {
  animation: seg-in 420ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

@keyframes seg-in { from { transform: scaleX(0); } }

.ribbon__seg + .ribbon__seg { border-left: 1px solid color-mix(in srgb, var(--shell) 45%, transparent); }
.ribbon__seg:hover { filter: brightness(1.18); }
.ribbon__seg.is-picked { box-shadow: inset 0 0 0 2px var(--ink); }

/* Los tiempos muertos no llevan color de producto: van rayados, que es como se
   marca "no producción" en una planilla. */
.ribbon__seg--dead {
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-3) 0 5px,
    var(--surface-2) 5px 10px
  );
}

.ribbon__seg--change { background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn); }

.ribbon__seg-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--ink-on-accent);
  padding: 0 0.25rem;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.ribbon__seg--dead .ribbon__seg-label,
.ribbon__seg--change .ribbon__seg-label { color: var(--ink-2); }

.ribbon__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-size: 11.5px;
  color: var(--ink-2);
}

.ribbon__key { display: inline-flex; align-items: center; gap: 0.4em; }
.ribbon__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--key-color); flex: none; }
.ribbon__swatch--dead { background: repeating-linear-gradient(-45deg, var(--surface-3) 0 3px, var(--surface-2) 3px 6px); border: 1px solid var(--line); }
.ribbon__swatch--change { background: var(--warn-bg); border-bottom: 2px solid var(--warn); }

.row--picked > td { background: var(--surface-3) !important; }

/* ═══════════════ MOSAICOS (totales por producto) ═══════════════ */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s3);
}

.tile {
  display: grid;
  gap: 0.1rem;
  padding: var(--s3);
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--tile-color, var(--brand));
}

.tile__value { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.tile__label { font-size: 11px; font-weight: 550; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════ GRÁFICOS ═══════════════ */

.chartbox { position: relative; height: clamp(15rem, 38vh, 24rem); }

/* ═══════════════ TABLAS ═══════════════ */

.tablebox { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r); }

.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.table th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: var(--s2) var(--s3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.table td { padding: 0.4rem var(--s3); border-bottom: 1px solid var(--line-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }

.table .num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table__empty { text-align: center; color: var(--ink-3); padding: var(--s5) !important; }

.row--muted td { color: var(--ink-3); }
.row--reverted td { opacity: 0.55; text-decoration: line-through; }

/* ═══════════════ TARJETAS ═══════════════ */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s3); }

.card {
  display: grid;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface-2);
}

.card__head { display: flex; align-items: center; gap: var(--s2); }
.card__title { font-size: 13px; font-weight: 650; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.card__row { display: grid; gap: 0.2rem; }
.card__actions { display: flex; gap: var(--s2); justify-content: flex-end; }
.card__group { display: grid; gap: var(--s2); }
.card__group-title { font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }

.card--ok { border-left: 2px solid var(--ok); }
.card--down, .card--stale { border-left: 2px solid var(--bad); }
.card--idle { border-left: 2px solid var(--ink-3); }
.card--inactive { opacity: 0.62; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--ok { background: var(--ok); }
.dot--down, .dot--stale { background: var(--bad); }
.dot--idle { background: var(--ink-3); }

/* Pares dato/valor dentro de una tarjeta */
.minigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: var(--s2); }
.minigrid dt { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.minigrid dd { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s3); }
.statgrid > div { padding: var(--s3); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-soft); }
.statgrid dt { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.statgrid dd { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 0.1rem; }

/* ═══════════════ ETIQUETAS Y AVISOS ═══════════════ */

.tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-2);
  white-space: nowrap;
}

.tag--muted { color: var(--ink-3); }
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--bad { background: var(--bad-bg); color: var(--bad); }
.tag--detected { background: var(--bad-bg); color: var(--bad); }
.tag--expected { background: var(--ok-bg); color: var(--ok); }

.alerts { display: grid; gap: var(--s2); }
.alerts:empty { display: none; }

.alert {
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r);
  font-size: 12.5px;
  border: 1px solid transparent;
}

.alert__icon { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.alert--bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.alert--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.alert--info { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.alert strong { font-weight: 700; }
.alert code { background: color-mix(in srgb, currentColor 12%, transparent); border-color: transparent; }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.pager__status { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ═══════════════ MODAL Y AVISOS FLOTANTES ═══════════════ */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s4); }
.modal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }

.modal__card {
  position: relative;
  width: min(26rem, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--s3);
}

.modal__title { font-size: 15px; font-weight: 650; }
.modal__body { font-size: 13px; color: var(--ink-2); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }

.toasts { position: fixed; bottom: var(--s4); right: var(--s4); z-index: 200; display: grid; gap: var(--s2); max-width: min(24rem, calc(100vw - 2rem)); }

.toast {
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  animation: toast-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.toast--success { border-left-color: var(--ok); }
.toast--error { border-left-color: var(--bad); }
.toast--info { border-left-color: var(--brand); }
.toast--out { animation: toast-out 220ms ease forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width: 60rem) {
  .app { grid-template-columns: 1fr; }

  .rail {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    width: var(--rail-w);
    transform: translateX(-100%);
    transition: transform var(--fast);
    box-shadow: var(--shadow);
  }

  .rail.is-open { transform: none; }
  .topbar__menu { display: inline-grid; }
  .topbar__clock { display: none; }
  .views { padding: var(--s3); }
}

@media (max-width: 40rem) {
  .topbar { gap: var(--s2); padding: var(--s2) var(--s3); }
  .topbar__h1 { font-size: 16px; }
  .health__text { display: none; }
  .health { padding: 0.4rem; }
  .toolbar { padding: var(--s3); }
  .toolbar__field { min-width: 100%; }
  .toolbar__spacer { display: none; }
  .readout { gap: var(--s3); }
  .equation { min-width: 100%; padding: var(--s3); }
  .btn__text { display: none; }
}

/* La cinta se despliega una vez; si el sistema pide menos movimiento, aparece
   y punto. Lo mismo con el resto de las transiciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .rail, .topbar, .toolbar, .panel__foot { display: none; }
  .panel { break-inside: avoid; border-color: #ccc; }
  body { background: #fff; color: #000; }
}