/* mes.css — UI mobile-first del MES Probusol.

   Construido sobre el design system de reports (tokens.css + base.css):
   fondo OLED negro, superficies charcoal elevadas, acento Probusol y los
   status semánticos --ok/--warn/--err. `--linea` (cyan aerosoles / violeta
   líquidos) es el acento funcional de la línea activa, seteado inline en el
   root. Touch-first: targets >=48px, inputs a 16px (sin zoom en iOS). */

:root {
    /* ── Cockpit Premium 2026-06-06 (D2) — inversión tonal vs OLED ──────
       El operario pasa del fondo OLED #000 a un charcoal cálido #141417, y
       las cards se HUNDEN a wells #0a0a0c que el charcoal "abraza". La
       profundidad viene del TONO (well más oscuro que el fondo) + la sombra
       glass en capas + el borde top-lit, NO de un blur caro. mes hereda
       --surface-elev/-2 (charcoal claro) de base.css; acá los reapuntamos a
       wells oscuros para que TODAS las superficies del app sean cockpit sin
       editar cada regla. Aislado al operario (programa.html no carga mes.css). */
    --bg:             #141417;          /* page charcoal (override del OLED de base.css) */
    --cockpit-surface:#0a0a0c;          /* well: card / ot-card / iniciar / picker */
    --cockpit-deep:   #050507;          /* recesado MÁS profundo: inputs, kpi cells, resúmenes */
    --surface-elev:   var(--cockpit-surface);
    --surface-elev-2: #0e0e12;          /* sheet / toast — un peldaño "sobre" el well */
    --border-elev:    rgba(255, 255, 255, 0.06);  /* hairline casi invisible (la sombra hace la elevación) */

    /* Radios cockpit: el gold standard subió cards/modales/pills a 12–16px. */
    --radius-chip: 6px;
    --radius-btn:  10px;
    --radius-card: 16px;

    /* Andon: verde=produciendo (--ok) · naranja=EN PAUSA (--parada, pausa
       temporal) · rojo=FRENADA (--err, OT apartada por un problema). */
    --parada: #f97316;          /* naranja de pausa temporal */
    --linea: var(--accent);     /* fallback hasta elegir grupo */
    --nav-h: 60px;

    /* Glow semántico del grupo (D4): halo suave en --linea para la card LIVE.
       Estático → sobrevive a prefers-reduced-motion. */
    --glow-linea: 0 0 0 1px color-mix(in srgb, var(--linea) 28%, transparent),
                  0 0 26px -6px color-mix(in srgb, var(--linea) 50%, transparent);
    /* Inset para celdas recesadas (kpi / resumen): leen "hundido". */
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03),
                    inset 0 3px 10px rgba(0, 0, 0, 0.55);
}

.mes {
    min-height: 100vh;
    /* transparente a propósito: el charcoal lo pinta html/body (base.css) y
       así el noise de body::before se ve entre las cards. */
    background: transparent;
    color: var(--fg);
    -webkit-tap-highlight-color: transparent;
}

/* ── Selector de línea ──────────────────────────────────────────────── */
.selector {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4)
             max(var(--space-5), var(--safe-area-bottom))
             var(--space-4);
    text-align: center;
}
.selector__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.selector__logo { height: 30px; width: auto; flex: none; }
.selector__brand-txt {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent);
}
.selector__sub { color: var(--fg-muted); font-size: var(--text-md); margin: 0; }
.selector__linea {
    width: 100%;
    max-width: 340px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-card);
    background: var(--surface-elev);
    border: 1.5px solid color-mix(in srgb, var(--linea) 55%, transparent);
    color: var(--linea);
    font-size: 21px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-glass-card);
    transition: transform var(--dur-fast) var(--ease-out),
                border-color var(--dur-base) var(--ease);
}
.selector__linea:active { transform: scale(0.98); }
.selector__icono { display: inline-flex; }
.selector__pie {
    margin-top: var(--space-3);
    color: var(--fg-faint);
    font-size: var(--text-xs);
}
.selector__link {
    color: var(--fg-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
}
.selector__link:hover { color: var(--accent-soft); }

/* ── Selector de puesto (Manuales) ──────────────────────────────────── */
.puesto-grid {
    width: 100%;
    max-width: 340px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.puesto-btn {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-card);
    background: var(--surface-elev);
    border: 1.5px solid color-mix(in srgb, var(--linea) 55%, transparent);
    color: var(--linea);
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-glass-card);
    transition: transform var(--dur-fast) var(--ease-out);
}
.puesto-btn:active { transform: scale(0.98); }
.puesto-otro {
    width: 100%;
    max-width: 340px;
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.puesto-otro .inp { flex: 1; }
.puesto-otro .btn { width: auto; min-width: 110px; }

/* ── Shell de la app ────────────────────────────────────────────────── */
.app { padding-bottom: calc(var(--nav-h) + var(--safe-area-bottom)); }

.hdr {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: max(var(--space-2), var(--safe-area-top)) var(--space-3) var(--space-2);
}
.hdr__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.hdr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr__logo { height: 26px; width: auto; flex: none; display: block; }
.hdr__id { min-width: 0; }
.hdr__linea {
    font-weight: 800;
    font-size: var(--text-md);
    color: var(--fg);
}
.hdr__linea::before {
    content: "";
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--linea);
    margin-right: 7px;
    vertical-align: middle;
}
.hdr__meta { font-size: var(--text-xs); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.hdr__cambiar {
    background: none; border: none; cursor: pointer;
    color: var(--fg-muted); font-size: var(--text-sm); padding: var(--space-2);
}

/* ── Banners de estado en header ────────────────────────────────────── */
.banner {
    margin-top: var(--space-2);
    border-radius: var(--radius-btn);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}
.banner--prod  { background: color-mix(in srgb, var(--ok) 18%, var(--bg)); }
.banner--parada{ background: color-mix(in srgb, var(--parada) 22%, var(--bg)); }
.banner__tag {
    font-size: var(--text-xs); font-weight: 700; color: var(--ok);
    display: flex; align-items: center; gap: 5px;
}
.banner__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.banner__main { font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.banner--parada .banner__main { color: #ffd9b3; }
.banner__aside { font-size: var(--text-xs); color: var(--ok); text-align: right; line-height: 1.45; }
.banner__timer { font-size: var(--text-sm); font-weight: 800; color: var(--parada); font-variant-numeric: tabular-nums; }

/* ── Página / panes ─────────────────────────────────────────────────── */
.pg { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.tab-pane { display: flex; flex-direction: column; gap: var(--space-3); animation: fade-up var(--dur-slow) var(--ease-out); }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
    background: var(--surface-elev);
    border: 1px solid var(--border-elev);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    box-shadow: var(--shadow-glass-card);
}
/* Estado por color = borde COMPLETO tintado (no media-raya lateral): andon
   legible sin el "side-stripe" templado. El historial va neutro (el lin-badge
   + el % de eficiencia ya comunican el estado; la raya era ruido arcoíris). */
.card--ok     { border-color: color-mix(in srgb, var(--ok) 42%, var(--border-elev)); }
.card--parada { border-color: color-mix(in srgb, var(--parada) 50%, var(--border-elev)); }
.card--alto   { border-color: color-mix(in srgb, var(--err) 45%, var(--border-elev)); }
.card--hist   { border-color: var(--border-elev); }

.card__eyebrow {
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--space-2);
}
.card__eyebrow--ok     { color: var(--ok); }
.card__eyebrow--parada { color: var(--parada); }
.card__eyebrow--alto   { color: var(--err); }
.card__titulo { font-size: var(--text-xl); font-weight: 800; }
.card__prod { font-size: var(--text-md); color: var(--fg-muted); margin-top: 2px; }
.card__datos { margin-top: var(--space-3); display: flex; gap: var(--space-4); font-size: var(--text-sm); }

.seccion-tit {
    font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--fg-muted); margin-bottom: var(--space-2);
}
/* Variante colapsable (botón): mismo look del título + chevron a la derecha. */
.seccion-tit--toggle {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); width: 100%;
    background: none; border: none; cursor: pointer; font-family: inherit;
}
.seccion-tit__chev { font-size: 0.9em; transition: transform var(--dur-base) var(--ease); }
.seccion-tit__chev--open { transform: rotate(180deg); }

/* ── Botones ────────────────────────────────────────────────────────── */
.btn {
    width: 100%;
    min-height: 52px;
    padding: 14px;
    border: none;
    border-radius: var(--radius-card);
    font-size: var(--text-md);
    font-weight: 700;
    cursor: pointer;
    color: var(--fg-inverse);
    transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-base) var(--ease);
    margin-top: var(--space-3);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { background: var(--bg-soft); color: var(--fg-faint); cursor: not-allowed; box-shadow: none; }
.btn--linea  { background: var(--linea); }
.btn--ok     { background: var(--ok); color: #04140a; }
.btn--parada { background: var(--parada); }
.btn--ghost  { background: var(--bg-soft); color: var(--fg); }
.btn--2 { flex: 2; }
.botonera { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.botonera .btn { margin-top: 0; flex: 1; }

/* ── Inputs ─────────────────────────────────────────────────────────── */
.lbl {
    display: block; font-size: var(--text-xs); color: var(--fg-faint);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: var(--space-3) 0 6px;
}
.inp {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;                 /* >=16 evita el zoom de iOS */
    border-radius: var(--radius-btn);
    background: var(--cockpit-deep);
    border: 1.5px solid var(--border);
    color: var(--fg);
    outline: none;
    box-sizing: border-box;
}
.inp:focus { border-color: var(--linea); }
.inp--select { display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; }
.inp--select .placeholder { color: var(--fg-faint); }
.inp--big { font-size: 30px; font-weight: 800; text-align: center; color: var(--ok); }
/* Sin spinners nativos en los campos numéricos (las flechitas ensucian el
   número grande y no aportan en piso; se carga con el teclado numérico). */
.inp[type="number"], .inp--big { -moz-appearance: textfield; appearance: textfield; }
.inp[type="number"]::-webkit-outer-spin-button,
.inp[type="number"]::-webkit-inner-spin-button,
.inp--big::-webkit-outer-spin-button,
.inp--big::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Lista de OTs ───────────────────────────────────────────────────── */
.ot-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.ot-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    text-align: left;
    background: var(--surface-elev);
    border: 1px solid var(--border-elev);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    cursor: pointer;
    color: var(--fg);
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.ot-card:active { transform: scale(0.985); }
/* hover gateado a punteros finos en el bloque Cockpit (no en táctil) */
.ot-card--hecha { opacity: 0.6; }
.ot-card__nro { font-size: var(--text-xs); font-weight: 700; color: var(--linea); font-variant-numeric: tabular-nums; }
.ot-card__hecha {
    margin-left: 6px; color: var(--ok); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ot-card__prod { font-size: var(--text-md); font-weight: 600; margin-top: 2px; }
.ot-card__meta { font-size: var(--text-xs); color: var(--fg-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ot-card__cta {
    flex-shrink: 0;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--linea) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--linea) 50%, transparent);
    color: var(--linea);
    font-size: var(--text-sm);
    font-weight: 700;
}

.link-manual {
    width: 100%; background: none; border: 1px dashed var(--border);
    border-radius: var(--radius-btn); color: var(--fg-muted);
    padding: 12px; margin-top: var(--space-3); font-size: var(--text-sm);
    font-weight: 600; cursor: pointer;
}
.card-manual {
    margin-top: var(--space-2);
    background: var(--surface-elev);
    border: 1px solid var(--border-elev);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}

/* ── Cierre de OT / eficiencia ──────────────────────────────────────── */
.resumen-cierre {
    background: var(--cockpit-deep); border-radius: var(--radius-btn);
    padding: 10px 12px; font-size: var(--text-sm); line-height: 1.6;
}
.efic-preview { text-align: center; margin-top: var(--space-3); }
.efic-preview__lbl { font-size: var(--text-xs); color: var(--fg-faint); letter-spacing: 0.08em; }
.efic-preview__val { font-size: 44px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

/* Semáforo de eficiencia (texto) y barras */
.efic--verde   { color: var(--ok); }
.efic--amarillo{ color: var(--warn); }
.efic--rojo    { color: var(--err); }
/* Sobreproducción (>100%): se logró más de lo pedido. Teal, NO verde, para que
   se lea como "fuera de lo normal" sin confundirse con un cierre prolijo. */
.efic--sobre   { color: #2dd4bf; }
/* Causa de cierre (logro < umbral) en una fila del historial — ámbar, discreta. */
.hist-causa { margin-top: 4px; font-size: var(--text-xs); color: var(--warn); }
.efic--parada  { color: var(--parada); }
.efic--neutro  { color: var(--fg-muted); }
.bg--verde   { background: var(--ok); }
.bg--amarillo{ background: var(--warn); }
.bg--rojo    { background: var(--err); }

/* ── Paradas ────────────────────────────────────────────────────────── */
.vinc {
    background: var(--cockpit-deep); border-radius: var(--radius-btn);
    padding: 8px 12px; margin-bottom: var(--space-2);
    font-size: var(--text-xs); color: var(--fg-muted);
}
.motivos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.motivo {
    min-height: 52px;
    padding: 12px 10px;
    border-radius: var(--radius-btn);
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
}
.motivo:active { transform: scale(0.97); }
.motivo--sel {
    border-color: var(--parada);
    background: color-mix(in srgb, var(--parada) 14%, transparent);
    color: var(--parada);
}
/* Input de "Otros…" (texto libre) — va debajo de la botonera de motivos. */
.motivos + .inp { margin-top: var(--space-2); }
/* Botonera de causa al finalizar por debajo del umbral de logro. */
.causa-cierre { margin-top: var(--space-3); }
/* Fila "Otros" del pausar (input + confirmar lado a lado). */
.otros-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); align-items: stretch; }
.otros-row .inp { flex: 1; }
.otros-row .btn { flex: none; }
.cronometro {
    font-size: 52px; font-weight: 900; text-align: center; color: var(--parada);
    margin: var(--space-3) 0 var(--space-2); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.parada-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.parada-row__motivo { font-size: var(--text-md); font-weight: 600; }
.parada-row__min { font-size: var(--text-lg); font-weight: 700; color: var(--parada); font-variant-numeric: tabular-nums; }
.total-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--space-2); padding-top: var(--space-2);
}
.parada-total { color: var(--parada); font-variant-numeric: tabular-nums; }

/* ── Historial / KPIs ───────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
/* KPI = celda-gauge recesada dentro de la card del resumen: más profunda que
   el well + inset shadow para que lea "instrumento hundido". El valor mono la
   completa. */
.kpi {
    background: var(--cockpit-deep);
    border: 1px solid var(--border-elev);
    border-radius: var(--radius-card);
    padding: 14px 12px;
    box-shadow: var(--shadow-inset);
}
.kpi--wide { grid-column: 1 / -1; }
.kpi__val { font-size: var(--text-kpi); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi__lbl { font-size: var(--text-xs); color: var(--fg-faint); margin-top: 2px; }

.hist-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.hist-row__nro { font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.hist-row__prod { font-size: var(--text-md); font-weight: 600; margin-top: 2px; }
.hist-row__meta { font-size: var(--text-xs); color: var(--fg-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }
.hist-row__efic { text-align: right; flex-shrink: 0; }
.hist-row__datos { display: flex; gap: var(--space-3); font-size: var(--text-sm); margin-top: var(--space-2); }
.efic-num { font-size: var(--text-kpi); font-weight: 900; font-variant-numeric: tabular-nums; }
.estado-chip { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px; }
.estado-chip--curso { color: var(--ok); }
.estado-chip--fin { color: var(--fg-faint); }

.barra { margin-top: var(--space-2); height: 5px; background: var(--cockpit-deep); border-radius: var(--radius-pill); overflow: hidden; }
.barra__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }

.hist-paradas { margin-top: var(--space-2); border-top: 1px solid var(--border); padding-top: 6px; }
.hist-parada {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--text-xs); color: var(--parada); padding: 2px 0;
}

/* ── Bottom nav ─────────────────────────────────────────────────────── */
.nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    display: flex;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: var(--safe-area-bottom);
}
.nav__btn {
    flex: 1;
    position: relative;
    min-height: var(--nav-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    color: var(--fg-faint);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease);
}
.nav__btn--act { color: var(--linea); border-top-color: var(--linea); }
.nav__dot {
    position: absolute; top: 9px; right: 50%; margin-right: -22px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--parada);
}

/* ── Overlay: picker de producto ────────────────────────────────────── */
.picker {
    position: fixed; inset: 0; z-index: 210;
    background: var(--bg);
    display: flex; flex-direction: column;
    padding-top: var(--safe-area-top);
    animation: slide-down var(--dur-slow) var(--ease-out);
}
.picker__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3); border-bottom: 1px solid var(--border);
    font-weight: 700; font-size: var(--text-md);
}
.picker__x { background: none; border: none; color: var(--fg-muted); font-size: 22px; cursor: pointer; }
.picker__search { padding: var(--space-3); }
.picker__list { flex: 1; overflow-y: auto; padding: 0 var(--space-3) var(--space-4); }
.picker__item {
    width: 100%; text-align: left;
    padding: 14px; margin-bottom: 6px;
    border-radius: var(--radius-btn);
    background: var(--surface-elev); border: 1px solid var(--border-elev);
    color: var(--fg); font-size: var(--text-md); cursor: pointer;
}
.picker__item:active { transform: scale(0.99); }

/* ── Sheet: confirmar inicio de OT ──────────────────────────────────── */
.sheet-back {
    position: fixed; inset: 0; z-index: 200;
    background: var(--bg-overlay);
    display: flex; align-items: flex-end;
    justify-content: center;          /* centra el sheet en PC (no full-width) */
    animation: fade-in var(--dur-base) var(--ease);
}
.sheet {
    width: 100%;
    max-width: 520px;                 /* en PC no ocupa todo el ancho */
    /* Nunca toda la pantalla: cap de altura + scroll INTERNO. Sin esto, un
       formulario largo (Nueva actividad con el roster, editar OT) crece más
       que el viewport y el grip/título quedan fuera de alcance (top negativo,
       el sheet-back no scrollea). Abre en el tope → grip y título visibles. */
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;     /* el scroll no se filtra al body de atrás */
    background: var(--surface-elev-2);
    border-top-left-radius: 20px; border-top-right-radius: 20px;
    border-top: 1px solid var(--border-elev);
    padding: var(--space-3) var(--space-3)
             calc(var(--space-4) + var(--safe-area-bottom));
    animation: sheet-up var(--dur-slow) var(--ease-drawer);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-elev); margin: 0 auto var(--space-3); }
.sheet__tit { font-size: var(--text-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.sheet__prod { font-size: var(--text-md); color: var(--fg-muted); margin-top: 4px; }
.sheet__dato {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--space-3); padding: 12px; border-radius: var(--radius-btn);
    background: var(--cockpit-deep); font-size: var(--text-md);
}

/* ── Estados varios ─────────────────────────────────────────────────── */
.muted { color: var(--fg-faint); }
.vacio { text-align: center; padding: var(--space-5) var(--space-3); color: var(--fg-faint); }
.vacio__ico { font-size: 34px; color: var(--border-elev); }
.vacio__sub { font-size: var(--text-sm); margin-top: 4px; }
.aviso { border-radius: var(--radius-btn); padding: 10px 12px; font-size: var(--text-sm); font-weight: 600; }
.aviso--error { background: var(--color-danger-soft); color: var(--color-danger); cursor: pointer; }
.aviso--warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); margin-top: var(--space-2); }

.skeleton-list { display: flex; flex-direction: column; gap: var(--space-2); }
.skeleton { height: 78px; border-radius: var(--radius-card); background: var(--surface-elev); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ── Historial editable ─────────────────────────────────────────────── */
.hist-fecha { display: flex; align-items: center; gap: var(--space-2); }
.hist-fecha__input {
    flex: 1; padding: 11px 12px; font-size: 16px; text-align: center;
    border-radius: var(--radius-btn); background: var(--surface-elev);
    border: 1.5px solid var(--border); color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.hist-fecha__input:focus { border-color: var(--linea); outline: none; }
.hist-fecha__nav {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-btn);
    background: var(--surface-elev); border: 1px solid var(--border-elev);
    color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer;
}
.hist-fecha__nav:disabled { opacity: 0.4; cursor: not-allowed; }
.hist-fecha__hoy {
    flex-shrink: 0; padding: 0 14px; height: 44px; border-radius: var(--radius-btn);
    background: color-mix(in srgb, var(--linea) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--linea) 50%, transparent);
    color: var(--linea); font-weight: 700; font-size: var(--text-sm); cursor: pointer;
}

.hist-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.btn-editar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-btn);
    background: var(--bg-soft); border: 1px solid var(--border-elev);
    color: var(--fg-muted); cursor: pointer;
    transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn-editar:active { transform: scale(0.94); }
.btn-editar:hover { color: var(--linea); border-color: color-mix(in srgb, var(--linea) 45%, transparent); }

/* paradas tappable en el historial */
.hist-parada--btn, .parada-row--btn {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font: inherit; color: inherit;
}
.hist-parada--btn { border-bottom: none; }
.hist-parada--btn:active, .parada-row--btn:active { opacity: 0.7; }
.parada-row--btn { display: flex; justify-content: space-between; align-items: center; }

/* preview de eficiencia en el sheet de edición */
.efic-edit {
    margin-top: var(--space-2); text-align: center; font-size: var(--text-xs);
    color: var(--fg-faint); letter-spacing: 0.06em; text-transform: uppercase;
}
.efic-edit strong { display: block; font-size: 34px; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* botón destructivo + confirmación */
.btn--alto { background: var(--err); color: #1a0606; }
.btn-eliminar {
    width: 100%; margin-top: var(--space-3); padding: 12px; cursor: pointer;
    background: none; border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
    border-radius: var(--radius-btn); color: var(--color-danger);
    font-size: var(--text-sm); font-weight: 600;
}
.confirm-del {
    margin-top: var(--space-3); padding: var(--space-3);
    background: var(--color-danger-soft); border-radius: var(--radius-btn);
    font-size: var(--text-sm); color: var(--fg); text-align: center;
}
.confirm-del .botonera { margin-top: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════
   Parciales · formato · detener/cambiar de OT · OT en pausa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chip de formato (F4) ──────────────────────────────────────────────── */
.fmt-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--linea) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--linea) 38%, transparent);
    color: var(--linea);
    font-size: var(--text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Producido acumulado + registrar parcial (F1) ──────────────────────── */
.prod-acc {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) 12px;
    border-radius: var(--radius-btn);
    background: color-mix(in srgb, var(--ok) 10%, var(--cockpit-deep));
    border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent);
}
.prod-acc__lbl { font-size: 10px; color: var(--fg-faint); letter-spacing: 0.06em; }
.prod-acc__val { font-size: var(--text-xl); font-weight: 800; color: var(--ok); font-variant-numeric: tabular-nums; line-height: 1.1; }
.prod-acc__den { font-size: var(--text-sm); color: var(--fg-muted); font-weight: 600; }
.btn-parcial {
    flex-shrink: 0;
    padding: 10px 14px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ok) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
    color: var(--ok); font-size: var(--text-sm); font-weight: 700; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
}
.btn-parcial:active { transform: scale(0.96); }
.hint-prefill { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--fg-faint); text-align: center; }

/* ── Pausar línea (naranja) / Frenar OT (rojo) — separados de Finalizar ─── */
.acciones-sep { height: 1px; background: var(--border); margin-top: var(--space-3); margin-bottom: var(--space-2); }
.btn--pausar {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--parada) 55%, transparent);
    color: var(--parada);
}
.btn--frenar {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--err) 55%, transparent);
    color: var(--err);
}

/* Motivo de la pausa, tappable para corregirlo */
.card-motivo-btn {
    display: flex; align-items: baseline; gap: 8px;
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 0; color: inherit; margin-bottom: 2px;
}
.card-motivo-btn__edit { font-size: var(--text-xs); color: var(--fg-faint); font-weight: 600; }

/* Motivos de FRENAR: rojo al seleccionar (se confirma antes de frenar) */
.motivo--sel-frenar {
    border-color: var(--err);
    background: color-mix(in srgb, var(--err) 14%, transparent);
    color: var(--err);
}

/* ── Banner de OTs FRENADAS (LIBRE) — rojo, es un problema ─────────────── */
.susp-banner {
    border: 1.5px solid color-mix(in srgb, var(--err) 40%, var(--border-elev));
    background: color-mix(in srgb, var(--err) 8%, var(--surface-elev));
    margin-bottom: var(--space-3);
}
.susp-banner__tit { font-size: var(--text-sm); font-weight: 700; color: var(--err); margin-bottom: var(--space-2); }
.susp-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border);
}
.susp-item__ot { font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.susp-item__prod { font-size: var(--text-sm); color: var(--fg-muted); margin-top: 1px; }
.susp-item__motivo { font-size: var(--text-xs); font-weight: 700; color: var(--err); margin-top: 2px; }
.susp-item__meta { font-size: var(--text-xs); color: var(--fg-faint); margin-top: 2px; font-variant-numeric: tabular-nums; }
.susp-item__acc { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.susp-acc { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

.btn-mini {
    padding: 8px 14px; border-radius: var(--radius-btn);
    background: var(--bg-soft); border: 1px solid var(--border-elev);
    color: var(--fg); font-size: var(--text-sm); font-weight: 700; cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
}
.btn-mini:active { transform: scale(0.96); }
.btn-mini--ok {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok);
}

/* ── Historial: en pausa + parciales ───────────────────────────────────── */
.estado-chip--susp { color: var(--err); }
.hist-parciales { margin-top: var(--space-2); border-top: 1px solid var(--border); padding-top: 6px; }
.hist-parciales__tit { font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.hist-parcial {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--text-xs); color: var(--fg-muted); padding: 3px 0;
}
.hist-parcial strong { color: var(--ok); font-variant-numeric: tabular-nums; }

/* ── Nav badge: EN PAUSA (naranja) ─────────────────────────────────────── */
.nav__btn--pausa { color: var(--parada); }
.nav__btn--pausa.nav__btn--act { border-top-color: var(--parada); }

/* ── Toast (feedback de parcial) ───────────────────────────────────────── */
.toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--nav-h) + var(--safe-area-bottom) + 12px);
    z-index: 300; max-width: 90%;
    padding: 11px 18px; border-radius: var(--radius-pill);
    background: var(--surface-elev-2);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border-elev));
    color: var(--fg); font-size: var(--text-sm); font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-glass-card);
    animation: sheet-up var(--dur-slow) var(--ease-drawer);
}

/* "Guardando…" — pill arriba-centro (no choca con el toast, que va abajo).
   Confirma al operario que el toque registró cuando la red está lenta. */
.saving-pill {
    position: fixed; left: 50%;
    top: calc(var(--safe-area-top) + 10px);
    transform: translateX(-50%); z-index: 320;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: var(--radius-pill);
    background: var(--surface-elev-2); border: 1px solid var(--border-elev);
    color: var(--fg); font-size: var(--text-xs); font-weight: 700;
    box-shadow: var(--shadow-glass-card);
}
.saving-pill__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--linea, var(--accent));
    animation: pulse 1s ease-in-out infinite;
}

/* ── Selector de operarios (chips) ─────────────────────────────────────── */
.ops-sel { margin-top: var(--space-3); }
.ops-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: var(--space-2); }
.ops-sug { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--space-2); }
.ops-chip {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 38px; padding: 7px 13px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--border); background: transparent;
    color: var(--fg-muted); font-size: var(--text-sm); font-weight: 600;
    cursor: pointer; transition: transform var(--dur-fast) var(--ease-out);
}
.ops-chip:active { transform: scale(0.96); }
.ops-chip--sel {
    border-color: var(--linea); color: var(--linea);
    background: color-mix(in srgb, var(--linea) 14%, transparent);
}
.ops-chip__x { font-size: var(--text-xs); opacity: 0.7; }
.ops-add { display: flex; gap: 7px; align-items: stretch; margin-top: var(--space-2); }
.ops-add .inp { flex: 1; }
.ops-add .btn-mini { white-space: nowrap; }

/* Selector roster-primero: cabecera (label + contador), grilla de tiles de un
   toque, botón "Otro…" (texto libre on-demand) y aviso inline de ≥1 obligatorio.
   Reusa el tamaño/target de .motivos (52px), no los chips chicos de 38px. */
.ops-sel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ops-sel__head .lbl { margin: var(--space-3) 0 6px; }
.lbl-req { text-transform: none; letter-spacing: 0; color: var(--fg-faint); font-weight: 600; }
.ops-sel__count {
    flex: none; min-width: 24px; text-align: center; padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--linea) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--linea) 45%, transparent);
    color: var(--linea); font-size: var(--text-sm); font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ops-tile {
    min-height: 52px; padding: 12px 10px; border-radius: var(--radius-btn);
    border: 1.5px solid var(--border); background: transparent; color: var(--fg);
    font-size: var(--text-md); font-weight: 700; cursor: pointer; text-align: center;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.ops-tile:active { transform: scale(0.97); }
.ops-tile--sel {
    border-color: var(--linea); color: var(--linea);
    background: color-mix(in srgb, var(--linea) 16%, transparent);
}
.ops-tile--sel::after { content: " ✓"; font-weight: 800; }
.ops-otro-btn {
    width: 100%; margin-top: var(--space-2); padding: 12px;
    background: none; border: 1px dashed var(--border); border-radius: var(--radius-btn);
    color: var(--fg-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.ops-otro-btn:active { color: var(--fg); }
.ops-error {
    margin-top: var(--space-2); padding: 8px 12px; border-radius: var(--radius-btn);
    background: var(--color-danger-soft); color: var(--color-danger);
    font-size: var(--text-sm); font-weight: 700;
}

/* Operarios en la card de OT en curso (botón → abre el editor) */
.ot-ops {
    display: flex; align-items: baseline; gap: 7px; width: 100%;
    margin-top: var(--space-2); padding: 9px 12px;
    border-radius: var(--radius-btn); border: 1px dashed var(--border-elev);
    background: transparent; color: var(--fg); text-align: left; cursor: pointer;
}
.ot-ops__lbl { font-size: var(--text-xs); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ot-ops__list { font-size: var(--text-sm); font-weight: 700; flex: 1; }
.ot-ops__none { font-size: var(--text-sm); color: var(--fg-muted); font-style: italic; flex: 1; }
/* OT en curso sin dotación (legacy / pre-regla): prompt ámbar accionable. */
.ot-ops--falta { border-style: solid; border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.ot-ops__falta { font-size: var(--text-sm); font-weight: 700; color: var(--warn); flex: 1; }
.ot-ops__edit { font-size: var(--text-sm); font-weight: 700; color: var(--linea); white-space: nowrap; }

/* ── Hub de grupo (rediseño 2026-06-05): badges, iniciar, volver ───────── */
.lin-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: var(--radius-chip);
    background: color-mix(in srgb, var(--linea) 22%, transparent);
    color: var(--linea);
    vertical-align: middle;
    margin-right: 4px;
}
.lin-badge--act { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #f59e0b; }

.ot-card--curso { border-color: color-mix(in srgb, var(--linea) 45%, transparent); }
.ot-card--act {
    border-color: color-mix(in srgb, #f59e0b 45%, transparent);
    align-items: center;
}
.ot-card--act .btn-mini { flex: none; }

.link-volver {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    margin-bottom: var(--space-1);
}
.link-volver:active { color: var(--fg); }

.iniciar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.iniciar-btn {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-card);
    background: var(--surface-elev);
    border: 1.5px solid color-mix(in srgb, var(--linea) 55%, transparent);
    color: var(--linea);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-glass-card);
    transition: transform var(--dur-fast) var(--ease-out);
}
.iniciar-btn:active { transform: scale(0.98); }
/* No productivo es una celda más de la grilla 2×2 (Aerosoles · Líquidos /
   Manuales · No productivo). Antes ocupaba el ancho completo y quedaba
   huérfano debajo de "Manuales"; se distingue por su acento ámbar, no por
   el tamaño. nowrap para que "No productivo" no parta en dos líneas. */
.iniciar-btn--noprod { white-space: nowrap; }

/* ── Sync de OTs ─────────────────────────────────────────────────────────── */
.iniciar-hdr {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-2);
}
.iniciar-hdr .seccion-tit { margin-bottom: 0; }
.sync-btn {
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--surface-elev);
    border: 1px solid var(--border);
    color: var(--fg-muted); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: opacity var(--dur-fast) var(--ease);
    min-width: 44px; text-align: center;
}
.sync-btn:disabled { opacity: 0.45; cursor: default; }
.sync-aviso {
    font-size: var(--text-xs); padding: 6px 10px;
    border-radius: var(--radius-sm); margin-bottom: var(--space-2);
}
.sync-aviso--ok  { background: color-mix(in srgb, #22c55e 12%, transparent); color: #16a34a; }
.sync-aviso--err { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; }

/* ── Accesibilidad: anillo de foco visible (teclado / switch access) ──────
   Sólo :focus-visible → no aparece en toques (el piso usa táctil), pero sí
   para navegación por teclado. Usa el token --focus-ring del sistema. */
.btn:focus-visible, .btn-mini:focus-visible, .motivo:focus-visible,
.ops-tile:focus-visible, .ops-otro-btn:focus-visible, .iniciar-btn:focus-visible,
.ot-card:focus-visible, .nav__btn:focus-visible, .picker__item:focus-visible,
.selector__linea:focus-visible, .btn-parcial:focus-visible, .ot-ops:focus-visible,
.seccion-tit--toggle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}
.inp:focus-visible { outline: 2px solid var(--accent-live); outline-offset: 1px; }
.ot-filtro { margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════
   COCKPIT PREMIUM 2026-06-06 — firma de superficie (reskin §4-§5).
   Bloque al FINAL: gana la cascada. Toca PIEL (números mono, eyebrow,
   noise, press-spring, glow por grupo), nunca el flujo. Decisiones D1-D4.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── D3 · Números en JetBrains Mono (display industrial de planta) ───────
   Sólo cifras/IDs/metadatos; Inter sigue para texto. Inventario §6. */
.num, .fmt-chip, .hdr__meta,
.ot-card__nro, .ot-card__meta, .hist-row__nro, .hist-row__meta,
.susp-item__ot, .susp-item__meta, .hist-fecha__input,
.parada-row__min, .parada-total, .banner__timer, .ops-sel__count,
.hist-parcial strong, .efic-edit strong, .prod-acc__den, .sheet__dato strong {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'ss01', 'tnum';
    letter-spacing: -0.01em;
}
/* Cifras "hero": aire tipo ticker (+0.015em) en vez de tracking negativo. El
   woff2 de JBM cubre 400-600 → capeamos a 600 real (800-900 daría faux-bold
   embarrado); mono tabular a 44-52px ya es contundente, look "instrumento". */
.cronometro, .efic-preview__val, .efic-num, .kpi__val, .prod-acc__val, .inp--big {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'ss01', 'tnum';
    letter-spacing: 0.015em;
    font-weight: 600;
}
/* Tags SIEMPRE en Inter (son texto: línea/estado), aunque vivan dentro de una
   fila numérica mono — evita que el badge herede monospace. */
.lin-badge, .estado-chip, .ot-card__hecha { font-family: "Inter", sans-serif; }

/* ── D4 · Eyebrows mono (card detalle + section titles) ──────────────────
   Sin pill con borde: card__eyebrow está sobrecargado (a veces es el nombre
   largo de una actividad). Mono + tracking + color semántico ya da el efecto
   "eyebrow de cockpit" sin romper nombres largos. */
.card__eyebrow {
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    display: inline-flex; align-items: center; gap: 6px;
}
.card__eyebrow .lin-badge {           /* dentro del eyebrow: sólo texto teñido */
    background: transparent; padding: 0; margin: 0;
}
.seccion-tit, .seccion-tit--toggle {
    font-family: var(--font-mono);
    letter-spacing: 0.14em;
}
/* Utilitaria del gold standard, disponible si se necesita un eyebrow-pill. */
.eyebrow {
    display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); font-family: var(--font-mono);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--fg-muted); background: transparent;
}

/* Wordmark de marca ámbar (D1) — único ámbar fuera del andon de actividad. */
.hdr__mes { color: var(--accent); font-weight: 700; }

/* ── D4 · Press-spring — el control "respira" al presionarlo (emil) ──────
   scale(0.96) + curva spring. reduced-motion anula el transform (motion.css);
   el estado se lee igual sin movimiento. */
.btn, .btn-mini, .btn-parcial, .motivo, .ops-tile, .ops-otro-btn, .ops-chip,
.iniciar-btn, .ot-card, .picker__item, .selector__linea, .puesto-btn,
.nav__btn, .btn-editar, .hist-fecha__nav, .hist-fecha__hoy,
.seccion-tit--toggle, .ot-ops, .card-motivo-btn, .btn-eliminar {
    transition: transform var(--dur-spring) var(--ease-spring),
                border-color var(--dur-base) var(--ease),
                background var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease),
                filter var(--dur-base) var(--ease);
}
.btn:active, .btn-mini:active, .btn-parcial:active, .motivo:active,
.ops-tile:active, .ops-otro-btn:active, .ops-chip:active, .iniciar-btn:active,
.ot-card:active, .picker__item:active, .selector__linea:active, .puesto-btn:active,
.nav__btn:active, .btn-editar:active, .hist-fecha__nav:active, .hist-fecha__hoy:active,
.seccion-tit--toggle:active, .ot-ops:active, .card-motivo-btn:active,
.btn-eliminar:active { transform: scale(0.96); }

/* Breathing hover SÓLO en punteros finos (no contamina el táctil del piso). */
@media (hover: hover) and (pointer: fine) {
    .ot-card:hover, .iniciar-btn:hover, .selector__linea:hover, .picker__item:hover {
        transform: scale(1.005);
        border-color: color-mix(in srgb, var(--linea) 45%, var(--border-elev));
    }
}

/* ── D4 · Glow semántico del grupo en la card LIVE (OT en curso) ─────────
   Halo suave en --linea: "esto es el trabajo vivo de mi grupo". Estático →
   sobrevive a reduced-motion. Sólo 1 instancia por viewport (regla dura).
   Bloom EXTERNO puro (sin el anillo de 1px de --glow-linea) para no ensuciar
   el borde verde andon de card--ok — borde nítido + halo limpio del grupo. */
.card--live {
    box-shadow: var(--shadow-glass-card),
                0 0 30px -8px color-mix(in srgb, var(--linea) 50%, transparent);
}

/* Botones de grupo del home: halo tenue por grupo (ignición de cockpit).
   Cada uno trae su --linea inline (cyan/violeta). */
.selector__linea { box-shadow: var(--shadow-glass-card),
                   0 0 30px -10px color-mix(in srgb, var(--linea) 40%, transparent); }
.selector__linea:active { box-shadow: var(--shadow-glass-card), var(--glow-linea); }

/* ── Foco por grupo (D1): el anillo de teclado usa --linea, no ámbar.
   Inputs conservan el cyan accent-live (firma de captura). ─────────────── */
.mes button:focus-visible,
.mes a:focus-visible,
.mes [tabindex]:focus-visible { outline-color: var(--linea); }
.mes .inp:focus-visible { outline-color: var(--accent-live); }

/* ── D4 · Textura noise al body (firma completa) ─────────────────────────
   fixed + z-index:-1 detrás del contenido; .mes es transparente para dejarla
   ver entre cards. pointer-events:none → no intercepta toques. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image: url('/static/assets/noise.svg');
    background-size: 200px 200px;
    opacity: 0.02;
    mix-blend-mode: overlay;
}

/* ── Planificación del día siguiente (rol admin) + re-uso de OTs ────────
   Pestaña Plan: lista de OTs abiertas con asignación de grupo de un toque
   (botones por grupo + cantidad ajustable). Chips de estado de re-uso en la
   lista Iniciar: ★ planificada hoy / ✓ terminada (bloqueada) / 🛑 frenada
   (retomable) / "lleva X u" (reapertura con acumulado). */

/* Chips de estado de la OT (lista Iniciar + Planificación) */
.chip-plan, .chip-bloq, .chip-frenada, .chip-avance {
    margin-left: 6px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.chip-plan    { color: #f2a900; }
.chip-bloq    { color: var(--ok); }
.chip-frenada { color: var(--err); text-transform: none; }
.chip-avance  { color: var(--warn); text-transform: none; }

/* OT bloqueada (avance > umbral): apagada, sin CTA — el click avisa y corta. */
.ot-card--bloq { opacity: 0.5; cursor: not-allowed; }
.ot-card--bloq:active { transform: none; }
/* OT planificada hoy: destacada como la opción recomendada de la lista. */
.ot-card--plan {
    border-color: color-mix(in srgb, #f2a900 55%, var(--border-elev));
    background: color-mix(in srgb, #f2a900 7%, var(--surface-elev));
}

/* Acumulado previo (OT reabierta) bajo el PRODUCIDO del detalle. */
.prod-acc__previa { margin-top: 2px; font-size: var(--text-xs); color: var(--warn); }

/* Selector de fecha del plan (reusa los botones del historial). */
.plan-fecha { display: flex; align-items: center; gap: var(--space-2); }
.plan-fecha__mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.plan-fecha__larga { text-align: center; font-size: var(--text-xs); color: var(--fg-muted); }

/* ── Plan por grupo: sección ordenable + carga del turno (ICA) ──────────
   La lista es Sortable (drag ⠿ = orden del visor); la barra de carga dice
   qué % de las horas del turno usaría lo seleccionado. */
.psel-grupos { display: flex; flex-direction: column; gap: var(--space-3); }
.psel {
    border: 1px solid color-mix(in srgb, var(--linea) 40%, var(--border-elev));
    border-radius: var(--radius-card); background: var(--surface-elev);
    padding: 10px 12px;
}
.psel__head { display: flex; align-items: baseline; gap: var(--space-2); }
.psel__nombre { font-size: var(--text-sm); font-weight: 800; color: var(--linea); }
.psel__nums { margin-left: auto; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.psel__nums span { color: var(--fg-muted); }

/* Recomendación de carga (tiempos ICA) */
.psel__carga { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.psel__carga-bar {
    position: relative; height: 8px; border-radius: 4px;
    background: color-mix(in srgb, var(--fg-faint) 18%, transparent);
    overflow: hidden;
}
.psel__carga-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.psel__carga-fill--verde    { background: var(--ok); }
.psel__carga-fill--amarillo { background: var(--parada, #f2a900); }
.psel__carga-fill--rojo     { background: var(--err); }
.psel__carga-txt {
    display: flex; align-items: baseline; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--fg-muted);
}
.psel__carga-txt b { color: var(--fg); }
.psel__carga-pct { margin-left: auto; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sem-carga--verde    { color: var(--ok); }
.sem-carga--amarillo { color: var(--parada, #f2a900); }
.sem-carga--rojo     { color: var(--err); }
.psel__carga-warn { font-size: var(--text-xs); color: var(--fg-faint); font-style: italic; }

/* Lista ordenable del grupo */
.psel__lista { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 46px; }
.psel__vacio {
    border: 1.5px dashed var(--border); border-radius: var(--radius-card);
    padding: 12px; text-align: center;
    font-size: var(--text-xs); color: var(--fg-faint);
}
.psel__item {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border-elev); border-radius: var(--radius-card);
    background: var(--bg); padding: 8px 10px;
}
.psel__item--ghost { opacity: 0.4; border-style: dashed; }
.psel__drag {
    cursor: grab; touch-action: none; flex: none;
    color: var(--fg-faint); font-size: 17px; line-height: 1;
    padding: 6px 4px; margin: -6px 0;
}
.psel__drag:active { cursor: grabbing; }
.psel__ord {
    flex: none; min-width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--linea) 20%, transparent);
    color: var(--linea); font-size: var(--text-xs); font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.psel__main { flex: 1; min-width: 0; }
.psel__prod { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.psel__meta { font-size: var(--text-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.psel__hs { color: var(--fg-muted); }
.psel__hs--sin { color: var(--fg-faint); font-style: italic; }
.psel__cant { width: 84px; padding: 8px 10px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.psel__quitar {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border); background: transparent;
    color: var(--fg-faint); font-size: var(--text-sm); cursor: pointer;
}
.psel__quitar:active { color: var(--err); border-color: var(--err); }
.psel__quitar:disabled { opacity: 0.45; cursor: not-allowed; }

/* Card de OT en la pestaña Plan (no es botón: la acción son los gbtn). */
.plan-card { cursor: default; }
.plan-card:active { transform: none; }

/* Botonera de asignación de grupo (un toque suma/saca del plan). */
.plan-asignar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.plan-gbtn {
    padding: 9px 14px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--border); background: transparent;
    color: var(--fg-muted); font-size: var(--text-sm); font-weight: 700;
    cursor: pointer; transition: transform var(--dur-fast) var(--ease-out);
}
.plan-gbtn:active { transform: scale(0.96); }
.plan-gbtn:disabled { opacity: 0.45; cursor: not-allowed; }
.plan-gbtn--sel {
    border-color: var(--linea);
    background: color-mix(in srgb, var(--linea) 18%, transparent);
    color: var(--linea);
}
/* Picker de OT del etiquetado: 2 líneas (producto+formato / bultos × CxB). */
.picker__item--ot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.picker__ot-l2 { font-size: var(--text-xs); color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* Cerrar sesión (home) — sólo con el gate prendido. Discreto, debajo del
   link al tablero: borra la cookie y vuelve al login (POST /salir). */
.selector__salir-form { margin-top: var(--space-2); text-align: center; }
.selector__salir {
    background: none; border: none; cursor: pointer;
    color: var(--fg-faint); font-size: var(--text-sm); font-weight: 600;
    padding: 10px 14px;
}
.selector__salir:hover { color: var(--err); }