/* =============================================================================
   PARTE SEMANAL — la pestaña «Semanas» de Control de Producción
   -----------------------------------------------------------------------------
   Lámina 15 (docs/produccion/15-parte-semanal-dos-propuestas.html), votada el
   09/11/2026: ganó la B, «El historial y el cierre en tres pasos».
   RUNBOOK-PARTE-SEMANAL, etapa 1.

   Scope `.sem-ui`, adentro de `.prod-ui`. Declara su base tipográfica porque
   el hub no la declara en la raíz (ver el encabezado de produccion-ui.css).
   Usa las piezas que el Panel ya tiene —`prod-kpi`, `prod-card`, `prod-chip`,
   `prod-tira`, `prod-nota`, `prod-cols`— y la paleta de core/tokens.css:
   ningún token nuevo.

   Tratamiento PLANO: superficie blanca sobre `--canvas`, trazo y una sola
   sombra. El navy es el botón primario, el paso en curso y el número contado.
   El semáforo de los insumos va SÓLO sobre lo que se mide en kilos.
   ========================================================================== */
.sem-ui, .sem-ui * { box-sizing: border-box; }
.sem-ui {
    font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif;
    font-size: 13.5px; line-height: 1.5; color: var(--ink);
    -webkit-font-smoothing: antialiased;
    padding: 14px var(--gutter) 30px; max-width: 1440px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 13px;
}
.sem-ui :focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 5px; }
.sem-ui .material-symbols-outlined { font-size: 18px; line-height: 1; vertical-align: middle; }
.sem-ui .tn { font-variant-numeric: tabular-nums; }
.sem-ui .ok { color: var(--ok); } .sem-ui .warn { color: var(--warn); } .sem-ui .crit { color: var(--crit); } .sem-ui .mut { color: var(--muted); }

/* ── Botones: el primario es navy; el resto, trazo ───────────────────────── */
.sem-ui .sem-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
    border-radius: 10px; border: 1px solid transparent; background: var(--navy); color: #fff;
    font: inherit; font-size: 12.8px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: transform .15s var(--curva), background .15s var(--curva);
}
.sem-ui .sem-btn:hover { transform: translateY(-1px); background: var(--navy-500); }
.sem-ui .sem-btn.sec { background: var(--surface); color: var(--ink); border-color: var(--hair-strong); }
.sem-ui .sem-btn.sec:hover { background: var(--navy-050); border-color: var(--navy-300); }
.sem-ui .sem-btn.gh { background: transparent; color: var(--muted); }
.sem-ui .sem-btn.gh:hover { background: var(--navy-050); color: var(--navy); }
.sem-ui .sem-btn.pel { background: transparent; color: var(--crit); }
.sem-ui .sem-btn.pel:hover { background: var(--crit-050); }
/* El botón chico se llama `.chico` y NO `.ch`: `.ch` es la cabecera de una
   tarjeta del hub (`.prod-ui .prod-card .ch`, que es `display: flex` con margen
   abajo), y un botón `.ch` adentro de una tarjeta la heredaba — «Cargar
   anteriores» quedaba pegado a la izquierda (09/11/2026, lo vio la prueba en vivo). */
.sem-ui .sem-btn.chico { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.sem-ui .sem-ico {
    width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px;
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.sem-ui .sem-ico:hover { background: var(--navy-050); color: var(--navy); }
.sem-ui .sem-ico.pel:hover { background: var(--crit-050); color: var(--crit); }
.sem-ui .sem-ico[disabled] { opacity: .28; cursor: not-allowed; }

/* ── Chips de estado ─────────────────────────────────────────────────────── */
.sem-ui .sem-chip {
    display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 8px;
    font-size: 11px; font-weight: 600; border: 1px solid var(--hair-strong); color: var(--muted);
    background: var(--surface); white-space: nowrap;
}
.sem-ui .sem-chip .material-symbols-outlined { font-size: 13px; }
.sem-ui .sem-chip.ok   { background: var(--ok-050);   border-color: var(--ok-hair);   color: var(--ok); }
.sem-ui .sem-chip.warn { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); }
.sem-ui .sem-chip.crit { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); }
.sem-ui .sem-chip.nav  { background: var(--navy-050); border-color: var(--navy-300);  color: var(--navy); }

/* La franja: algo que el número de arriba no dice solo. */
.sem-ui .sem-franja {
    display: flex; gap: 9px; align-items: flex-start; padding: 9px 13px; border-radius: 10px;
    background: var(--warn-050); border: 1px solid var(--warn-hair); color: var(--ink); font-size: 12.5px;
}
.sem-ui .sem-franja .material-symbols-outlined { color: var(--warn); margin-top: 1px; }
.sem-ui .sem-franja b { color: var(--warn); }
.sem-ui .sem-franja.nav { background: var(--navy-050); border-color: var(--navy-300); }
.sem-ui .sem-franja.nav .material-symbols-outlined, .sem-ui .sem-franja.nav b { color: var(--navy); }
/* Lo que frena el cierre: un parte diario abierto adentro de la semana. */
.sem-ui .sem-franja.crit { background: var(--crit-050); border-color: var(--crit-hair); }
.sem-ui .sem-franja.crit .material-symbols-outlined, .sem-ui .sem-franja.crit b { color: var(--crit); }

/* El medidor del desvío: las tres bandas del turno (0,6 % · 1,0 %) y la aguja. */
.sem-ui .sem-gau { position: relative; display: grid; grid-template-columns: 6fr 4fr 5fr; gap: 2px; height: 6px; margin-top: 8px; }
.sem-ui .sem-gau i { border-radius: 3px; background: var(--ok); opacity: .32; }
.sem-ui .sem-gau i:nth-child(2) { background: var(--warn); } .sem-ui .sem-gau i:nth-child(3) { background: var(--crit); }
.sem-ui .sem-gau b { position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px; background: var(--ink); transform: translateX(-1px); }

/* ── La hoja de una semana (lectura) y su cabecera ───────────────────────── */
.sem-ui .sem-hoja { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.sem-ui .sem-cab {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
    box-shadow: var(--shadow); padding: 13px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sem-ui .sem-cab h5 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.sem-ui .sem-cab .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.sem-ui .sem-cab .sub .id { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.sem-ui .sem-cab .der { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* Las cuatro cifras: las del Panel (`prod-kpi`), con su medidor. */
.sem-ui .prod-kpis { gap: 12px; }

/* ── Los días de la semana ───────────────────────────────────────────────── */
.sem-ui .sem-dias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sem-ui .sem-dia {
    border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); padding: 8px 10px 9px;
    min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; position: relative;
    transition: transform .15s var(--curva), box-shadow .15s var(--curva);
}
.sem-ui .sem-dia:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.sem-ui .sem-dia .d { display: flex; align-items: baseline; gap: 6px; }
.sem-ui .sem-dia .d small { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.sem-ui .sem-dia .d b { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.sem-ui .sem-dia .k { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sem-ui .sem-dia .k small { font-size: 11px; font-weight: 600; color: var(--muted); }
.sem-ui .sem-dia .v { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sem-ui .sem-dia .bar { height: 4px; border-radius: 2px; background: var(--canvas); overflow: hidden; margin: 2px 0; }
.sem-ui .sem-dia .bar i { display: block; height: 100%; background: var(--navy-300); }
.sem-ui .sem-dia .tk {
    position: absolute; top: 8px; right: 9px; width: 16px; height: 16px; border-radius: 5px;
    background: var(--navy); color: #fff; display: grid; place-items: center;
}
.sem-ui .sem-dia .tk .material-symbols-outlined { font-size: 13px; font-weight: 700; }
.sem-ui .sem-dia.sin { background: var(--canvas); border-style: dashed; cursor: default; }
.sem-ui .sem-dia.sin:hover { transform: none; box-shadow: none; }
.sem-ui .sem-dia.sin .d b { color: var(--faint); font-weight: 600; }
.sem-ui .sem-dia.sin .k { font-size: 11px; font-style: italic; font-weight: 500; color: var(--faint); }

/* ── Lo que se produjo ───────────────────────────────────────────────────── */
.sem-ui .sem-pr { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(90px, 1fr) auto 52px; gap: 6px 12px; align-items: center; font-size: 12.8px; }
.sem-ui .sem-pr .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem-ui .sem-pr .bar { height: 6px; border-radius: 3px; background: var(--canvas); overflow: hidden; }
.sem-ui .sem-pr .bar i { display: block; height: 100%; background: var(--navy-300); border-radius: 3px; }
.sem-ui .sem-pr .kg { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sem-ui .sem-pr .pc { text-align: right; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sem-ui .sem-tip { display: flex; flex-direction: column; gap: 5px; font-size: 12.8px; }
.sem-ui .sem-tip div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--hair); padding-bottom: 5px; }
.sem-ui .sem-tip div:last-child { border-bottom: 0; padding-bottom: 0; }
.sem-ui .sem-tip b { font-variant-numeric: tabular-nums; }

/* ── La tabla de insumos ─────────────────────────────────────────────────── */
.sem-ui .sem-filtro { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 9px; overflow: hidden; }
.sem-ui .sem-filtro button {
    border: 0; background: var(--surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    padding: 4px 11px; cursor: pointer;
}
.sem-ui .sem-filtro button + button { border-left: 1px solid var(--hair-strong); }
.sem-ui .sem-filtro button.on { background: var(--navy); color: #fff; }
.sem-ui table.sem-tab { width: 100%; border-collapse: collapse; font-size: 12.6px; }
.sem-ui .sem-tab th {
    font-size: 9.8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
    text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--hair-strong); white-space: nowrap;
}
.sem-ui .sem-tab th:first-child, .sem-ui .sem-tab td.nm { text-align: left; }
.sem-ui .sem-tab td { padding: 6px 10px; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; }
.sem-ui .sem-tab tr:last-child td { border-bottom: 0; }
.sem-ui .sem-tab td.nm b { font-weight: 600; display: block; line-height: 1.3; }
.sem-ui .sem-tab td.nm { min-width: 180px; }
.sem-ui .sem-tab.ed td, .sem-ui .sem-tab.ed th { padding-left: 7px; padding-right: 7px; }
.sem-ui .sem-tab td.cons, .sem-ui .sem-tab td:nth-child(2) { white-space: nowrap; }
.sem-ui .sem-tab td.nm small { color: var(--muted); font-size: 11px; display: block; line-height: 1.3; }
.sem-ui .sem-tab td.cons { font-weight: 700; }
.sem-ui .sem-tab td .u { color: var(--faint); font-size: 10.5px; font-weight: 600; margin-left: 3px; }
.sem-ui .sem-tab tr.grp td {
    background: var(--canvas); text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--hair);
}
.sem-ui .sem-tab tr.grp td span { float: right; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); }
.sem-ui .sem-tab tr.plegado td { text-align: left; color: var(--muted); font-size: 12px; cursor: pointer; }
.sem-ui .sem-tab tr.plegado td .material-symbols-outlined { color: var(--faint); margin-right: 4px; }
.sem-ui .sem-tab tr.falta td.nm b::after {
    content: 'falta contar'; margin-left: 8px; font-size: 10.5px; font-weight: 700; color: var(--warn);
    background: var(--warn-050); border: 1px solid var(--warn-hair); border-radius: 999px; padding: 0 7px;
    display: inline-block; white-space: nowrap;      /* la píldora no se parte en dos renglones */
}
.sem-ui .sem-in {
    width: 68px; text-align: right; font: inherit; font-size: 12.6px; font-variant-numeric: tabular-nums;
    padding: 4px 8px; border: 1px solid var(--hair-strong); border-radius: 7px; background: var(--surface); color: var(--ink);
}
.sem-ui .sem-in.cero { color: var(--faint); }
.sem-ui .sem-in.cont, .sem-ui .sem-in.sinc { width: 88px; }
.sem-ui .sem-in.cont { border-color: var(--navy-300); background: var(--navy-050); color: var(--navy); font-weight: 700; }
.sem-ui .sem-in.sinc { border-style: dashed; color: var(--faint); background: var(--surface); font-weight: 500; }
.sem-ui .sem-in.foco { outline: 2px solid var(--navy-500); outline-offset: 1px; }
.sem-ui .sem-dif { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; white-space: nowrap; }
.sem-ui .sem-dif small { font-weight: 600; font-size: 11px; }
.sem-ui .sem-dif.nd { color: var(--faint); font-weight: 500; font-style: italic; font-size: 11.5px; }

/* ── El pie: se queda a la vista mientras se cuenta ──────────────────────── */
.sem-ui .sem-pie {
    position: sticky; bottom: 0; z-index: 2; margin-top: 2px;
    background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--r-card);
    box-shadow: var(--e2); padding: 10px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sem-ui .sem-pie .med { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.sem-ui .sem-pie .med .l1 { font-size: 12.8px; font-weight: 700; }
.sem-ui .sem-pie .med .l2 { font-size: 11.5px; color: var(--muted); }
.sem-ui .sem-pie .der { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sem-ui .sem-pie .met { width: 150px; height: 6px; border-radius: 3px; background: var(--canvas); border: 1px solid var(--hair); overflow: hidden; }
.sem-ui .sem-pie .met i { display: block; height: 100%; background: var(--navy); }

/* ── El historial ─────────────────────────────────────────────────────────── */
.sem-ui .prod-tira .sem-btn { margin-left: auto; }
.sem-ui table.sem-hist { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.sem-ui .sem-hist th {
    font-size: 9.8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
    text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--hair-strong); white-space: nowrap;
}
.sem-ui .sem-hist th.n, .sem-ui .sem-hist td.n { text-align: right; }
.sem-ui .sem-hist td { padding: 8px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; font-variant-numeric: tabular-nums; }
.sem-ui .sem-hist tr.fila { cursor: pointer; transition: background .15s var(--curva); }
.sem-ui .sem-hist tr.fila:hover { background: var(--navy-050); }
.sem-ui .sem-hist tr.mes td {
    background: var(--canvas); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); padding: 6px 12px;
}
.sem-ui .sem-hist tr.mes td span { float: right; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); }
.sem-ui .sem-hist tr.abierta td { background: var(--warn-050); border-bottom-color: var(--warn-hair); }
.sem-ui .sem-hist .sm { display: flex; align-items: center; gap: 10px; }
.sem-ui .sem-hist .sm .fe {
    width: 46px; text-align: center; border: 1px solid var(--hair-strong); border-radius: 8px; padding: 3px 0 4px;
    background: var(--surface); line-height: 1.15; flex: none;
}
.sem-ui .sem-hist .sm .fe small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: var(--faint); }
.sem-ui .sem-hist .sm .fe b { font-size: 11.5px; font-weight: 700; color: var(--navy); }
.sem-ui .sem-hist .sm .t b { display: block; font-weight: 600; line-height: 1.3; }
.sem-ui .sem-hist .sm .t small { color: var(--muted); font-size: 11px; }
.sem-ui .sem-hist .pk { display: grid; grid-template-columns: 96px minmax(60px, 1fr); gap: 10px; align-items: center; }
.sem-ui .sem-hist .pk b { text-align: right; font-weight: 700; }
.sem-ui .sem-hist .pk b small { font-weight: 600; color: var(--muted); font-size: 11px; }
.sem-ui .sem-hist .pk .bar { height: 6px; border-radius: 3px; background: var(--canvas); overflow: hidden; }
.sem-ui .sem-hist .pk .bar i { display: block; height: 100%; background: var(--navy-300); border-radius: 3px; }
.sem-ui .sem-hist .dv { font-weight: 700; }
.sem-ui .sem-hist .dv small { font-weight: 600; font-size: 11px; }
.sem-ui .sem-hist .acc { display: flex; justify-content: flex-end; gap: 2px; }
.sem-ui .sem-hist .ce small { display: block; color: var(--muted); font-size: 11px; }

/* La tira de pasos: la del Parte Diario, con tres. */
.sem-ui .sem-pasos {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow);
    display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; align-items: stretch; overflow: hidden;
}
.sem-ui .sem-pasos .tit { padding: 10px 16px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; justify-content: center; }
.sem-ui .sem-pasos .tit b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.sem-ui .sem-pasos .tit small { font-size: 11.5px; color: var(--muted); }
.sem-ui .sem-paso { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-right: 1px solid var(--hair); position: relative; cursor: pointer; }
.sem-ui .sem-paso .nro {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
    border: 1.5px solid var(--hair-strong); color: var(--muted); font-size: 12px; font-weight: 700; background: var(--surface);
}
.sem-ui .sem-paso .tx b { display: block; font-size: 12.8px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.sem-ui .sem-paso .tx small { font-size: 11px; color: var(--muted); }
.sem-ui .sem-paso.hecho .nro { background: var(--ok); border-color: var(--ok); color: #fff; }
.sem-ui .sem-paso.hecho .nro .material-symbols-outlined { font-size: 15px; }
.sem-ui .sem-paso.hecho .tx b { color: var(--ink); }
.sem-ui .sem-paso.on { background: var(--navy-050); }
.sem-ui .sem-paso.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: var(--navy); }
.sem-ui .sem-paso.on .nro { background: var(--navy); border-color: var(--navy); color: #fff; }
.sem-ui .sem-paso.on .tx b { color: var(--navy); }
.sem-ui .sem-pasos .sal { display: flex; align-items: center; padding: 0 12px; }
.sem-ui .sem-b2 { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 13px; align-items: start; }
.sem-ui .sem-res { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sem-ui .sem-res .gr { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sem-ui .sem-res .gr small { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.sem-ui .sem-res .ln { display: flex; justify-content: space-between; gap: 8px; font-size: 12.2px; padding: 4px 0; border-bottom: 1px solid var(--hair); }
.sem-ui .sem-res .ln:last-child { border-bottom: 0; }
.sem-ui .sem-res .ln span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sem-ui .sem-res .ln b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sem-ui .sem-res .cap { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin: 8px 0 2px; }
.sem-ui .sem-rev { display: flex; flex-direction: column; }
.sem-ui .sem-rev .r { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); align-items: start; }
.sem-ui .sem-rev .r:last-child { border-bottom: 0; }
.sem-ui .sem-rev .r .material-symbols-outlined { margin-top: 1px; }
.sem-ui .sem-rev .r b { font-weight: 600; }
.sem-ui .sem-rev .r small { display: block; color: var(--muted); font-size: 11.5px; }
.sem-ui .sem-rev .r .x { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* =============================================================================
   LO QUE LA MAQUETA NO DIBUJABA: la espera, el vacío, el error, y los controles
   de verdad (el tilde del día, el campo que se tipea, la fila que pide conteo).
   ========================================================================== */
.sem-ui button { font-family: inherit; }
.sem-ui .sem-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.sem-ui .sem-btn .gs-spin { margin-right: 2px; }

/* La espera con la forma de lo que viene; el vacío y el error dicen qué pasó. */
.sem-ui .sem-espera { display: flex; flex-direction: column; gap: 13px; }
.sem-ui .sem-espera .fila { display: flex; gap: 12px; }
.sem-ui .sem-espera .caja {
    flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
    padding: 14px 15px; display: flex; flex-direction: column; gap: 9px;
}
.sem-ui .sem-vacio {
    background: var(--surface); border: 1px dashed var(--hair-strong); border-radius: var(--r-card);
    padding: 26px 20px; text-align: center; color: var(--muted); font-size: 12.8px;
}
.sem-ui .sem-vacio b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
.sem-ui .sem-vacio .material-symbols-outlined { font-size: 28px; color: var(--faint); display: block; margin: 0 auto 6px; }
.sem-ui .sem-vacio.mal { border-style: solid; border-color: var(--crit-hair); background: var(--crit-050); }
.sem-ui .sem-vacio.mal .material-symbols-outlined, .sem-ui .sem-vacio.mal b { color: var(--crit); }
.sem-ui .sem-vacio .sem-btn { margin-top: 10px; }

/* La franja lleva UNA oración: el texto va en un solo elemento (un flex la parte). */
.sem-ui .sem-franja > span:last-of-type { min-width: 0; flex: 1; }
.sem-ui .sem-franja .sem-btn { margin-left: auto; flex: none; }

/* El historial: la fila se abre con el clic o con Enter; las acciones no la abren. */
.sem-ui .sem-hist tr.fila:focus-visible { outline-offset: -2px; }
.sem-ui .sem-hist tr.abierta .sm .fe { border-color: var(--warn-hair); }
.sem-ui .sem-hist tr.abierta .sm .fe b { color: var(--warn); }
.sem-ui .sem-hist tr.abierta .pk .bar i { background: var(--warn); }
.sem-ui .sem-hist tr.abierta.quieta { cursor: default; }
.sem-ui .sem-hist tr.abierta.quieta:hover { background: transparent; }
.sem-ui .sem-hist-pie { text-align: center; margin-top: 10px; font-size: 12px; color: var(--faint); }
.sem-ui .sem-tab-caja { overflow-x: auto; }

/* El día: la tarjeta abre su Parte Diario; el tilde, aparte, lo saca de la semana. */
.sem-ui .sem-dia { text-align: left; font: inherit; color: inherit; }
.sem-ui .sem-dia .tk { border: 1.5px solid var(--navy); cursor: pointer; padding: 0; width: 20px; height: 20px; top: 7px; right: 8px; }
.sem-ui .sem-dia .tk:hover { background: var(--navy-500); border-color: var(--navy-500); }
/* El tilde de un día abierto: no se puede, y se nota (va después del hover, que si no lo pinta). */
.sem-ui .sem-dia .tk:disabled, .sem-ui .sem-dia .tk:disabled:hover { border-style: dashed; border-color: var(--faint); background: transparent; color: var(--faint); cursor: not-allowed; }
.sem-ui .sem-dia.fuera { background: var(--canvas); }
.sem-ui .sem-dia.fuera .tk { background: var(--surface); border-color: var(--hair-strong); color: transparent; }
.sem-ui .sem-dia.fuera .tk:hover { border-color: var(--navy-300); background: var(--navy-050); }
.sem-ui .sem-dia.fuera .k, .sem-ui .sem-dia.fuera .v, .sem-ui .sem-dia.fuera .d b { color: var(--faint); }
.sem-ui .sem-dia.fuera .bar i { background: var(--hair-strong); }
.sem-ui .sem-dia .v.nd { color: var(--faint); font-weight: 500; font-style: italic; }

/* Lo que se produjo, cuando todavía no hay nada tildado. */
.sem-ui .sem-nada { color: var(--faint); font-style: italic; font-size: 12.5px; padding: 4px 0; }

/* El campo que se tipea. Sin las flechitas del navegador: acá se escribe. */
.sem-ui .sem-in { -moz-appearance: textfield; appearance: textfield; }
.sem-ui .sem-in::-webkit-outer-spin-button, .sem-ui .sem-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sem-ui .sem-in:focus { outline: 2px solid var(--navy-500); outline-offset: 1px; border-color: var(--navy-300); border-style: solid; }
.sem-ui .sem-tab td.cons.neg { color: var(--warn); }
.sem-ui .sem-tab tr.plegado:hover td { background: var(--navy-050); }
.sem-ui .sem-tab tr.plegado td b { color: var(--ink); font-weight: 600; }

/* El paso de la tira es un botón de verdad. */
.sem-ui .sem-paso { border: 0; border-right: 1px solid var(--hair); background: transparent; text-align: left; font: inherit; color: inherit; min-width: 0; }
.sem-ui .sem-paso .tx { min-width: 0; }
.sem-ui .sem-paso .tx small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem-ui .sem-paso:hover:not(.on) { background: var(--canvas); }
.sem-ui .sem-pasos .sal { gap: 4px; }
.sem-ui .sem-pasos .tit small b { color: var(--navy); font-weight: 700; }

/* El pie del conteo: el medidor, el texto y los botones van en UN renglón. El
   texto es el que cede (sin `flex: 1` baja a un renglón propio y el pie pegado
   abajo se come tres filas de la tabla que se está contando). */
.sem-ui .sem-pie .med { flex: 1 1 220px; }
.sem-ui .sem-pie .med .l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem-ui .sem-pie .met { flex: none; }

/* La revisión: cada renglón es una oración; «Contar» lleva a la fila del insumo. */
.sem-ui .sem-rev .r > span:nth-child(2) { min-width: 0; }
.sem-ui .sem-res .ln .a21 { font-size: 11px; }

/* =============================================================================
   EL INGRESO VINCULADO A FLEXXUS — etapa 3 (lámina 17, ganó la A: «bajo la fila
   del insumo»). «Ingresó» no se tipea: es la suma de los comprobantes tildados
   bajo la fila, más los «ingresos sin remito». Ningún token nuevo.
   ========================================================================== */
/* «Ingresó»: la suma de lo tildado. No es un control (lo que se toca está abajo);
   el `.vac` sí es un botón: suma un ingreso sin remito a un insumo sin comprobantes. */
.sem-ui .sem-ing {
    display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 76px;
    padding: 2px 8px 3px; border: 1px solid var(--hair); border-radius: 7px; background: var(--canvas);
    font: inherit; font-size: 12.6px; font-weight: 700; color: var(--ink); line-height: 1.25;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sem-ui .sem-ing small { font-size: 10px; font-weight: 600; color: var(--muted); }
.sem-ui .sem-ing.vac { border-style: dashed; background: transparent; color: var(--faint); font-weight: 500; cursor: pointer; align-items: center; min-width: 68px; }
.sem-ui .sem-ing.vac:hover { border-color: var(--navy-300); background: var(--navy-050); color: var(--navy); }
.sem-ui .sem-ing.vac .material-symbols-outlined { font-size: 16px; }
.sem-ui .sem-ing.elegir { border-color: var(--warn-hair); background: var(--warn-050); }
.sem-ui .sem-ing.elegir small { color: var(--warn); }
.sem-ui .sem-tab th .sub { letter-spacing: 0; text-transform: none; font-weight: 600; }
.sem-ui .sem-tab td .leyenda { display: block; font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1.2; }

/* El latido del vigía: hasta cuándo está leído Flexxus. */
.sem-ui .sem-lat { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; margin-right: 12px; }
.sem-ui .sem-lat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.sem-ui .sem-lat b { color: var(--ink); font-weight: 600; }
.sem-ui .sem-lat.viejo::before { background: var(--warn); }
.sem-ui .sem-lat.viejo b { color: var(--warn); }

/* ── Un comprobante ──────────────────────────────────────────────────────── */
.sem-ui .sem-cps { display: flex; flex-direction: column; gap: 2px; }
.sem-ui .sem-cp {
    display: grid; grid-template-columns: 22px 156px 40px minmax(0, 1fr) minmax(0, 1.3fr) 112px 26px;
    gap: 0 9px; align-items: center; padding: 3px 6px; border-radius: 7px; font-size: 12.2px; text-align: left;
    font-variant-numeric: tabular-nums;
}
.sem-ui .sem-cp:hover { background: var(--surface); }
.sem-ui .sem-cp .tk2 {
    width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--navy); background: var(--navy); color: #fff;
    display: grid; place-items: center; padding: 0; cursor: pointer;
}
.sem-ui .sem-cp .tk2 .material-symbols-outlined { font-size: 13px; font-weight: 700; }
.sem-ui .sem-cp.off .tk2 { background: var(--surface); border-color: var(--hair-strong); color: transparent; }
.sem-ui .sem-cp.off .tk2:hover { border-color: var(--navy-300); background: var(--navy-050); }
/* Un tilde que no se toca: lo emparejado, lo que espera una respuesta, lo guardado. */
.sem-ui .sem-cp .tk2.fijo { cursor: default; background: var(--canvas); border-color: var(--hair-strong); color: var(--muted); }
.sem-ui .sem-cp.on .tk2.fijo { background: var(--navy-050); border-color: var(--navy-300); color: var(--navy); }
.sem-ui .sem-cp .tk2.fijo.vac { background: var(--surface); border-style: dashed; }
.sem-ui .sem-cp .doc { font-weight: 600; white-space: nowrap; }
.sem-ui .sem-cp .doc i {
    font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; border-radius: 4px; padding: 1px 5px; margin-right: 6px;
    background: var(--navy-050); color: var(--navy); border: 1px solid var(--navy-300);
}
.sem-ui .sem-cp .doc i.re { background: var(--ok-050); color: var(--ok); border-color: var(--ok-hair); }
.sem-ui .sem-cp .doc i.sr { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); }
.sem-ui .sem-cp .fe { color: var(--muted); }
.sem-ui .sem-cp .pr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* El origen puede ir en dos renglones: cortado con puntos suspensivos escondía «todavía no llegó». */
.sem-ui .sem-cp .or { color: var(--muted); font-size: 11.5px; line-height: 1.25; min-width: 0; }
.sem-ui .sem-cp em { font-style: normal; color: var(--warn); font-weight: 600; }
.sem-ui .sem-cp .ca { text-align: right; font-weight: 700; white-space: nowrap; }
.sem-ui .sem-cp .ca small { font-weight: 600; color: var(--faint); font-size: 10.5px; }
.sem-ui .sem-cp .ca u { display: block; text-decoration: none; font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1.1; }
.sem-ui .sem-cp .sem-ico { width: 26px; height: 26px; }
.sem-ui .sem-cp .sem-ico .material-symbols-outlined { font-size: 16px; }
/* Destildado: todavía no llegó. No está tachado (no se anuló): espera. */
.sem-ui .sem-cp.off .doc, .sem-ui .sem-cp.off .pr, .sem-ui .sem-cp.off .ca { color: var(--muted); font-weight: 500; }
/* No cuenta (la otra punta de un duplicado, lo emparejado, lo descartado): tachado. */
.sem-ui .sem-cp.no .doc, .sem-ui .sem-cp.no .ca { color: var(--faint); text-decoration: line-through; font-weight: 500; }
.sem-ui .sem-cp.no .doc i { text-decoration: none; }
.sem-ui .sem-cp.no .pr { color: var(--faint); }
/* El ingreso sin remito: lo cargó una persona. */
.sem-ui .sem-cp.sr .tk2.fijo { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); }

/* Dos comprobantes de la misma mercadería: uno u otro (los tildes son redondos). */
.sem-ui .sem-dup { border: 1px solid var(--warn-hair); border-radius: 9px; background: var(--warn-050); padding: 5px 4px 4px; margin: 3px 0; }
.sem-ui .sem-dup.listo { border-color: var(--hair); background: transparent; }
.sem-ui .sem-dup .cap { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink); padding: 0 6px 3px; text-align: left; }
.sem-ui .sem-dup .cap > span:nth-child(2) { flex: 1; min-width: 0; }
.sem-ui .sem-dup .cap .material-symbols-outlined { font-size: 15px; color: var(--warn); }
.sem-ui .sem-dup .cap b { color: var(--warn); }
.sem-ui .sem-dup.listo .cap, .sem-ui .sem-dup.listo .cap .material-symbols-outlined { color: var(--muted); }
.sem-ui .sem-dup.listo .cap b { color: var(--ink); font-weight: 600; }
.sem-ui .sem-dup .sem-cp .tk2 { border-radius: 50%; }
.sem-ui .sem-dup .sem-cp:hover { background: rgba(255, 255, 255, .6); }
.sem-ui .lk { border: 0; background: transparent; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--navy); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; flex: none; }

/* «＋ Ingreso sin remito» y su formulario: cantidad y motivo, en un renglón. */
.sem-ui .sem-mas {
    display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; font: inherit; font-size: 11.8px;
    font-weight: 600; color: var(--navy); cursor: pointer; padding: 3px 6px; border-radius: 6px; align-self: flex-start;
}
.sem-ui .sem-mas:hover { background: var(--navy-050); }
.sem-ui .sem-mas .material-symbols-outlined { font-size: 15px; }
.sem-ui .sem-srf {
    border: 1px solid var(--navy-300); border-radius: 9px; background: var(--surface); padding: 9px 11px; margin: 3px 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.2px; text-align: left;
}
.sem-ui .sem-srf > b { font-size: 12.5px; }
.sem-ui .sem-srf label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.sem-ui .sem-srf .u { color: var(--faint); font-size: 11px; font-weight: 600; }
.sem-ui .sem-srf .mot { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 100%; align-items: center; }
.sem-ui .sem-srf .mot > span { color: var(--muted); font-size: 11.5px; font-weight: 600; margin-right: 3px; }
.sem-ui .sem-srf .mot button {
    border: 1px solid var(--hair-strong); background: var(--surface); border-radius: 999px; font: inherit; font-size: 11.8px;
    font-weight: 600; color: var(--muted); padding: 2px 10px; cursor: pointer;
}
.sem-ui .sem-srf .mot button:hover { border-color: var(--navy-300); color: var(--navy); }
.sem-ui .sem-srf .mot button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.sem-ui .sem-in.txt { width: 200px; text-align: left; }
.sem-ui .sem-srf .ay { flex: 1 1 260px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.sem-ui .sem-srf .ay b { color: var(--ink); font-weight: 600; }
.sem-ui .sem-srf .bts { display: flex; gap: 6px; margin-left: auto; }

/* Una pregunta que se contesta en vez de un tilde: ¿es el «sin remito» de antes?, ¿es mercadería ya contada? */
.sem-ui .sem-par {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border: 1px solid var(--navy-300); background: var(--navy-050);
    border-radius: 9px; padding: 6px 10px; margin: 3px 0; font-size: 12px; text-align: left;
}
.sem-ui .sem-par .material-symbols-outlined { color: var(--navy); font-size: 17px; }
.sem-ui .sem-par > span:nth-child(2) { flex: 1 1 300px; min-width: 0; }
.sem-ui .sem-par b { color: var(--navy); }
.sem-ui .sem-par .sem-btn .material-symbols-outlined { color: inherit; font-size: 15px; }

/* Bajo la fila del insumo: la fila y sus comprobantes se leen como una sola cosa. */
.sem-ui .sem-tab tr.conc > td { border-bottom-color: transparent; }
.sem-ui .sem-tab tr.comp > td { padding: 0 7px 8px 7px; text-align: left; background: transparent; }
.sem-ui .sem-tab tr.comp .sem-cps {
    margin-left: 14px; padding: 5px 4px; border-left: 2px solid var(--navy-300); background: var(--canvas); border-radius: 0 9px 9px 0;
}
.sem-ui .sem-tab tr.comp.ro .sem-cps { border-left-color: var(--hair-strong); }

/* Lo descartado («no es un ingreso»): plegado bajo la tabla; se puede deshacer. */
.sem-ui .sem-desc { margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 8px; }
.sem-ui .sem-desc .cab {
    display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; font: inherit;
    font-size: 12px; color: var(--muted); cursor: pointer; padding: 3px 4px; border-radius: 6px; text-align: left;
}
.sem-ui .sem-desc .cab:hover { background: var(--navy-050); }
.sem-ui .sem-desc .cab b { color: var(--ink); font-weight: 600; }
.sem-ui .sem-desc .cab .material-symbols-outlined { color: var(--faint); }
.sem-ui .sem-desc .sem-cps { margin-top: 5px; padding: 5px 4px; background: var(--canvas); border-radius: 9px; }

@media (max-width: 1100px) {
    .sem-ui .sem-b2 { grid-template-columns: 1fr; }
    .sem-ui .sem-res { position: static; }
    .sem-ui .sem-dias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sem-ui .sem-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sem-ui .sem-pasos .tit { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--hair); flex-direction: row; align-items: baseline; gap: 10px; }
    .sem-ui .sem-pasos .sal { grid-column: 1 / -1; border-top: 1px solid var(--hair); padding: 6px 12px; justify-content: flex-end; }
    .sem-ui .sem-hist .pk { grid-template-columns: 1fr; }
    .sem-ui .sem-hist .pk .bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sem-ui .sem-btn, .sem-ui .sem-dia, .sem-ui .sem-hist tr.fila { transition: none; }
    .sem-ui .sem-btn:hover, .sem-ui .sem-dia:hover { transform: none; }
}