/* css/programacionfabrica.css — solo lo propio de Programación de Fábrica (CONTRATO-UI B0).
 *
 * Reglas: prefijo .pf-*, solo tokens del portal (sin hexadecimales ni font-family), nada sobre el
 * chrome (#col1, #col2, #topbar, #pageHead). Lo genérico (tablas, fichas, filtros…) son las piezas
 * ui-/Ui* de shared/. Las vistas de dominio (Gantt, semáforo de carga, rejilla semanal, calendario
 * anual…) son desviaciones aprobadas en el Anexo B de PLAN-MIGRACION.md.
 */

/* El color de la app (manifest "color") también dentro del contenido (CONTRATO-UI A2.3).
 * Las fichas UiModal se montan en <body>, fuera de #vista: llevan el color solo mientras esta es la
 * app activa (mismo selector que Comercial), así no tiñen la ficha de otra app. */
#vista.pf-scope, body.ui-modal-abierto:has(#vista.pf-scope) {
  --brand: var(--app);
  --brand-d: var(--app-d);
  --brand-soft: var(--app-soft);
  --brand-ink: var(--app-ink);

  /* Colores de proceso (Anexo B.2): derivados de los tokens de estado, no escritos a mano. */
  --pf-proc-moldeofl: var(--blue);
  --pf-proc-moldeoman: color-mix(in srgb, var(--blue) 55%, var(--ink));
  --pf-proc-fusion: color-mix(in srgb, var(--warn) 65%, var(--neg));
  --pf-proc-desmoldeo: color-mix(in srgb, var(--blue) 55%, var(--pos));
  --pf-proc-corte: var(--pos);
  --pf-proc-rebarba: var(--neg);
  --pf-proc-acabado: var(--warn);
  --pf-proc-tratamiento_termico: color-mix(in srgb, var(--blue) 50%, var(--neg));
  --pf-proc-plazo: color-mix(in srgb, var(--blue) 40%, var(--muted));   /* RX, mecanizado, revisión final (Anexo B) */
  --pf-proc-otro: var(--muted);
}

/* ── Estados de OT: OK · AT_RISK · LATE · OVERFLOW (convención de badges de B6) ─────────────── */
.pf-est-ok { --pf-est: var(--pos); }
.pf-est-at_risk { --pf-est: var(--warn); }
.pf-est-late { --pf-est: var(--neg); }
.pf-est-overflow { --pf-est: var(--muted); }

.pf-badge-est {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
  background: color-mix(in srgb, var(--pf-est) 16%, transparent);
  color: color-mix(in srgb, var(--pf-est) 65%, var(--ink));
}
.pf-punto-est {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-est); vertical-align: middle;
}

/* Pill de proceso (fondo con el color del proceso). */
.pf-proc {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  white-space: nowrap; color: var(--panel);
}

.pf-proc-sin { background: color-mix(in srgb, var(--blue) 70%, var(--ink)); }
/* Cuadrito de color de un proceso (leyendas, secuencia de la ficha). */
.pf-cuadro { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }

/* ── Ficha de OT ────────────────────────────────────────────────────────────────────────────── */
.pf-campo-ayuda { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.pf-check-fila { display: flex; align-items: center; gap: 8px; padding: 9px 0; font-size: 13px; }
/* Dentro de un campo de ficha (.ui-mcampo) la fila no es la etiqueta del campo (que ui.css pone en mayúsculas a
 * todo label hijo) ni su casilla un input de texto (que estira al 100 %). */
.ui-mcampo > .pf-check-fila { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--ink); }
.ui-mcampo .pf-check-fila input[type="checkbox"] { width: auto; padding: 0; flex: none; }

/* Pestaña Eventos: árbol de tandas del diario (Anexo B.8). Una fila por nivel; las tarjetas usan el
 * marcador y los textos de UiLineaTiempo (B6) y las líneas son un SVG detrás. Si una fila no cabe,
 * el árbol se desplaza en horizontal dentro de la ficha. */
.pf-arbol { overflow-x: auto; padding: 4px 0 8px; }
.pf-arbol-lienzo { position: relative; width: max-content; min-width: 100%; display: flex; flex-direction: column; gap: 40px; }
.pf-arbol-lineas { position: absolute; inset: 0 auto auto 0; pointer-events: none; overflow: visible; }
.pf-arbol-lineas path { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: .55; }
.pf-arbol-lineas text { font-size: 11px; font-weight: 600; fill: var(--muted); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.pf-arbol-nivel { display: flex; justify-content: center; gap: 16px; }
.pf-arbol-nodo {
  position: relative; display: flex; gap: 10px; min-width: 150px; padding: 10px 14px 10px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}

/* ── Formularios de configuración ───────────────────────────────────────────────────────────── */
.pf-config { max-width: 820px; }
.pf-seccion .phead { cursor: pointer; }
.pf-campo-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pf-campo-fila:last-of-type { border-bottom: none; }
.pf-campo-txt { min-width: 0; flex: 1; }
.pf-campo-txt label { display: block; font-weight: 600; }
.pf-campo-txt small { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-campo-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.pf-conmutador { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pf-editor-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pf-error-txt { margin: 8px 0 0; color: var(--neg); font-size: 12px; }
.pf-proceso-fila { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.pf-proceso-n { width: 16px; font-variant-numeric: tabular-nums; }
.pf-proceso-nom { flex: 1; }
.pf-resultado { margin-top: 14px; }
.pf-alerta--ok { background: color-mix(in srgb, var(--pos) 12%, var(--panel)); border-left-color: var(--pos); }

/* ── Calendario anual (Anexo B.1) ───────────────────────────────────────────────────────────── */
.pf-cal-layout { display: flex; gap: 20px; align-items: flex-start; }
.pf-cal-principal { flex: 1; min-width: 0; }
.pf-cal-base { width: 280px; flex: 0 0 auto; }
.pf-cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pf-cal-anio-n { font-size: 21px; }
.pf-cal-leyenda { display: inline-flex; gap: 12px; margin-left: 14px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.pf-cal-leyenda > span { display: inline-flex; align-items: center; gap: 4px; }
.pf-cal-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 8px; border: 1px solid var(--line); }
.pf-cal-anio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .pf-cal-anio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-cal-layout { flex-direction: column; } .pf-cal-base { width: 100%; } }
.pf-cal-mes { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pf-cal-tit { background: var(--brand); color: var(--app-on); text-align: center; padding: 6px; font-size: 12px; font-weight: 700; }
.pf-cal-rejilla { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 1px; padding: 2px 4px 4px; }
.pf-cal-sem { display: flex; align-items: center; justify-content: center; padding: 0 4px 0 0; font-size: 10px; color: var(--muted); }
.pf-cal-cab { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); padding: 3px 0; }
.pf-cal-cab-fin { opacity: .5; }
.pf-cal-dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 26px;
  border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 10px; line-height: 1; padding: 0;
  background: var(--panel); color: var(--ink); cursor: pointer;
}
button.pf-cal-dia:hover { border-color: var(--brand-ink); }
.pf-cal-dia small { font-size: 10px; font-weight: 700; }
.pf-cal-weekend { background: var(--bg); color: var(--muted); opacity: .6; cursor: default; }
.pf-cal-festivo { background: var(--neg-soft); color: color-mix(in srgb, var(--neg) 75%, var(--ink)); border-color: color-mix(in srgb, var(--neg) 30%, transparent); }
.pf-cal-reducida { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 65%, var(--ink)); border-color: var(--warn); }
.pf-cal-laborable.pf-cal-muestra { background: var(--panel); }
.pf-cal-hoy { outline: 2px solid var(--brand-ink); outline-offset: -2px; font-weight: 700; }
.pf-cal-alerta { margin-bottom: 12px; }
.pf-cal-ops th, .pf-cal-ops td { padding: 6px 8px; }
.pf-num-corto { width: 64px; text-align: right; }
.pf-cal-opcion { display: flex; align-items: center; gap: 8px; }
.pf-cal-horas { display: flex; align-items: center; gap: 6px; margin-left: 24px; color: var(--muted); font-size: 12px; }
.pf-cal-horas .ui-input { width: 70px; }

/* ── Carga operativa: tabla-semáforo (Anexo B.1) ────────────────────────────────────────────── */
.pf-barra-vista { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-scroll-x { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); margin-bottom: 18px; }
.pf-scroll-x > .ui-tabla { margin: 0; }
.pf-sticky-col { position: sticky; left: 0; z-index: 1; background: var(--panel); white-space: nowrap; }
.ui-tabla thead .pf-sticky-col { background: var(--brand); }
.pf-col-bucket { text-align: center; white-space: nowrap; }
.pf-col-bucket small { display: block; font-size: 10px; font-weight: 400; opacity: .6; text-transform: none; }
.pf-col-bucket em { display: block; font-style: normal; font-size: 10px; letter-spacing: .5px; }
.ui-tabla thead .pf-col-hoy { background: var(--brand-ink); }
.ui-tabla thead .pf-col-pasada { opacity: .7; }
.pf-italica { font-style: italic; }

.ui-tabla td.pf-sem { padding: 0; vertical-align: top; border: 1px solid var(--line); }
/* Cada línea de la celda en una sola línea ("100% 30.6 kg/h" no se parte): la columna se ensancha. */
.pf-sem-in { display: flex; flex-direction: column; gap: 3px; padding: 8px; min-width: 110px; white-space: nowrap; }
.pf-sem-ok { --pf-sem: var(--pos); }
.pf-sem-warn { --pf-sem: var(--warn); }
.pf-sem-neg { --pf-sem: var(--neg); }
.pf-sem-ok, .pf-sem-warn, .pf-sem-neg { background: color-mix(in srgb, var(--pf-sem) 18%, var(--panel)); color: color-mix(in srgb, var(--pf-sem) 70%, var(--ink)); }
.pf-sem-neg:not(.pf-sem-real) { background: var(--neg); color: var(--panel); }
.pf-sem-real { background: color-mix(in srgb, var(--pf-sem) 10%, var(--panel)); }
.pf-sem-pasada, .pf-sem-fondo-pasado { background: color-mix(in srgb, var(--muted) 14%, var(--panel)); }
.pf-sem-pasada .pf-sem-in { opacity: .55; color: var(--muted); }
.pf-sem-barra { height: 5px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.pf-sem-barra > i { display: block; height: 100%; border-radius: 8px; background: var(--pf-sem, var(--muted)); opacity: .75; }
.pf-sem-neg:not(.pf-sem-real) .pf-sem-barra > i { background: var(--panel); }
td.pf-sem strong { font-size: 13px; }
.pf-sem-tag { font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pf-sem-l1 { font-size: 11px; opacity: .8; }
.pf-sem-l2 { font-size: 10px; opacity: .65; }
.pf-sem-clic { cursor: pointer; }
.pf-carga-aviso { margin-bottom: 12px; }
.pf-sem-clic:hover { filter: brightness(.95); }
.pf-sem-clic:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; }

/* ── Gantt (Anexo B.1) ──────────────────────────────────────────────────────────────────────── */
.pf-g-scroll { max-height: 72vh; overflow: auto; }
.pf-gantt { width: max-content; font-size: 12px; }
.pf-gantt thead th { position: sticky; top: 0; z-index: 2; }
.pf-gantt td { padding: 6px 10px; }
.pf-g-fija { position: sticky; z-index: 1; background: var(--panel); }
.pf-gantt thead .pf-g-fija { z-index: 3; background: var(--brand); }
.pf-g-f0 { left: 0; width: 130px; min-width: 130px; max-width: 130px; }
.pf-g-f1 { left: 130px; width: 60px; min-width: 60px; max-width: 60px; text-align: center; }
.pf-g-f2 { left: 190px; width: 160px; min-width: 160px; max-width: 160px; }
.pf-g-f3 { left: 350px; width: 70px; min-width: 70px; max-width: 70px; }
.pf-g-f4 { left: 420px; width: 95px; min-width: 95px; max-width: 95px; }
.pf-g-f5 { left: 515px; width: 95px; min-width: 95px; max-width: 95px; border-right: 2px solid var(--line); }
.pf-g-cliente { display: block; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-g-col { width: 110px; min-width: 110px; max-width: 110px; }
.pf-gantt td.pf-g-celda { width: 110px; max-width: 110px; padding: 2px; background: var(--bg); overflow: hidden; }
.pf-gantt td.pf-g-hoy { background: color-mix(in srgb, var(--blue) 8%, var(--panel)); }
.pf-gantt td.pf-g-pasado { background: color-mix(in srgb, var(--muted) 14%, var(--panel)); }
.pf-g-vencida > td, .pf-g-vencida > .pf-g-fija { background: color-mix(in srgb, var(--neg) 6%, var(--panel)); }
.pf-g-semana > td, .pf-g-semana > .pf-g-fija { background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.pf-gantt tbody tr:hover > td { background: var(--ui-hover, var(--surface-hover)); }
.pf-g-barras { display: flex; flex-wrap: wrap; gap: 2px; }
.pf-g-barra {
  flex: 1; min-width: 0; padding: 2px 4px; border-radius: 8px; font-size: 10px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--pf-c); color: var(--panel);
}
.pf-g-real { background: color-mix(in srgb, var(--pf-c) 22%, transparent); color: var(--pf-c); border: 1px solid color-mix(in srgb, var(--pf-c) 45%, transparent); }
.pf-g-real-muestra { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.pf-inline { display: inline-block; margin: 0 0 0 3px; vertical-align: middle; }
.pf-leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
.pf-leyenda > span { display: inline-flex; align-items: center; gap: 5px; }
.pf-leyenda-real { padding-left: 14px; border-left: 1px solid var(--line); }

/* Detalle de una celda (ficha) */
.pf-detalle-carga { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.pf-txt-nivel-ok { color: var(--pos); }
.pf-txt-nivel-warn { color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.pf-txt-nivel-neg { color: var(--neg); }
.pf-barra-ok > span { background: var(--pos); }
.pf-barra-warn > span { background: var(--warn); }
.pf-barra-neg > span { background: var(--neg); }

/* ── Avisos y estados de la vista ───────────────────────────────────────────────────────────── */
.pf-aviso .pf-aviso-tit { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.pf-aviso .pf-aviso-txt { margin: 0; color: var(--muted); }
.pf-alerta--neg { background: var(--neg-soft); border-left-color: var(--neg); }
.pf-alerta--warn { background: var(--warn-soft); border-left-color: var(--warn); }
.pf-cargando { padding: 24px 0; color: var(--muted); }
.pf-nota { margin: 0 0 12px; }

/* ── Tablas ─────────────────────────────────────────────────────────────────────────────────── */
/* Fila apagada (B3): un registro que sigue en la tabla pero no cuenta (horno inactivo…). */
.pf-fila-apagada > td { color: var(--muted); }
/* Números editables dentro de una tabla. */
.ui-tabla .pf-num { width: 120px; text-align: right; }

/* Icono de ordenar de PF.orden, solo en el Gantt (Anexo B.4); el resto de tablas usa UiColOrden (B3.2). */
.pf-ordenar {
  border: none; background: transparent; color: inherit; opacity: .55; cursor: pointer;
  padding: 0 0 0 4px; margin: 0; vertical-align: middle; line-height: 0;
}
.pf-ordenar:hover, .pf-ordenar.is-active { opacity: 1; }

/* Tabla con muchas columnas (OTs): desplazamiento horizontal en vez de apretar las columnas. */
/* OTs y Pedidos: cada fila en una sola línea (cabeceras con su icono de orden incluidas) y la tabla
 * al ancho de la página, sin scroll interno (CONTRATO-UI B3). La descripción ocupa lo que sobra y se
 * corta con … (max-width:0 + width:100% la hace ceder antes que las demás columnas). */
.pf-tabla-linea .ui-tabla th, .pf-tabla-linea .ui-tabla td { white-space: nowrap; }
.pf-tabla-linea .ui-tabla td.pf-col-desc { width: 100%; max-width: 0; }
.pf-col-punto { width: 22px; text-align: center; white-space: nowrap; }
/* Iconos SVG de PF.format.icono dentro de una línea de texto (sustituyen a símbolos y emojis). */
.pf-col-punto svg, .pf-tarj-flecha svg, .pf-dash-sub svg { vertical-align: middle; color: var(--muted); }
.pf-col-desc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-punto-override { display: block; width: 6px; height: 6px; margin: 2px auto 0; border-radius: 50%; background: var(--warn); }
.pf-maquina { background: color-mix(in srgb, var(--pos) 55%, var(--ink)); }
.pf-txt-est { color: color-mix(in srgb, var(--pf-est) 75%, var(--ink)); font-weight: 600; }
.pf-txt-muted { color: var(--muted); }

/* Fila desplegable con su subtabla (Pedidos → OTs, Anexo B.5). */
.pf-fila-abierta > td { background: var(--brand-soft); }
.pf-subfila > td { padding: 0 0 0 28px; background: var(--bg); }
.pf-subtabla { margin: 0; }
.pf-subtabla th { padding: 9px 14px; }
.pf-sub-vacio { margin: 0; padding: 12px 14px; }

/* Mini-dashboard encima de una tabla y paginación debajo (Anexo B.6). */
.pf-minidash { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-minikpi { min-width: 140px; }

/* ── Rejilla semanal: Programaciones, Hornadas y Tratamientos (Anexo B.1) ───────────────────── */
.pf-sem-marco { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); margin-bottom: 18px; }
.pf-sem-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px;
  background: var(--brand); color: var(--app-on);
}
.pf-sem-nav .btn.ghost { color: inherit; border-color: color-mix(in srgb, var(--app-on) 40%, transparent); background: transparent; }
.pf-sem-nav-izq { display: inline-flex; align-items: center; gap: 12px; }
.pf-sem-sub { font-size: 12px; opacity: .7; }
.pf-sem-scroll { overflow-x: auto; }
/* .pf-sem-rejilla, no .pf-sem: .pf-sem es la celda semáforo de Carga operativa (td). */
.pf-sem-rejilla { display: grid; grid-template-columns: 90px repeat(5, minmax(0, 1fr)); min-width: 800px; }
.pf-sem-esq, .pf-sem-dia { background: var(--bg); border-bottom: 2px solid var(--line); }
.pf-sem-esq { border-right: 1px solid var(--line); }
.pf-sem-dia { padding: 8px 10px; text-align: center; font-weight: 600; white-space: nowrap; overflow: hidden; border-left: 1px solid var(--line); color: var(--brand-ink); }
.pf-sem-dia small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-sem-dia.pf-sem-festivo { color: var(--muted); }
.pf-sem-cap {
  display: inline-block; margin: 4px 0 0 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--line); color: var(--ink);
}
.pf-sem-cap--exceso { background: var(--neg-soft); color: var(--neg); }
.pf-sem-lbl {
  display: flex; align-items: center; padding: 6px 12px; font-size: 12px; font-weight: 500; white-space: nowrap;
  color: var(--muted); background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Fondo --bg, como las columnas del kanban: así la tarjeta (--panel) se ve como tal. */
.pf-sem-celda { min-width: 0; padding: 4px 6px; background: var(--bg); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-sem-celda.pf-sem-hueco { padding: 0; }
.pf-sem-celda.pf-sem-festivo, .pf-sem-pie.pf-sem-festivo { background: var(--neg-soft); }
.pf-sem-vacio { grid-column: 1 / -1; padding: 32px 16px; text-align: center; color: var(--muted); }
.pf-sem-pie-lbl, .pf-sem-pie { border-top: 2px solid var(--line); background: var(--bg); }
.pf-sem-pie-lbl {
  display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; border-right: 1px solid var(--line);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-ink);
}
.pf-sem-pie-lbl small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.pf-sem-pie { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; align-items: center; padding: 6px 8px; border-left: 1px solid var(--line); font-size: 12px; }
.pf-sem-pie--exceso { background: var(--neg-soft); border-top-color: var(--neg); }
.pf-sem-pill {
  display: inline-block; min-width: 76px; text-align: center; padding: 2px 4px; border-radius: 8px; font-size: 12px; font-weight: 600;
  white-space: nowrap; color: var(--panel); font-variant-numeric: tabular-nums;
}
.pf-sem-pill--kg { background: var(--brand); color: var(--app-on); }
.pf-sem-pill--h { background: var(--pos); }
.pf-sem-pill--exceso { background: var(--neg); }
.pf-sem-pill--deficit { background: color-mix(in srgb, var(--neg) 60%, var(--ink)); }
.pf-sem-pill--kgh { background: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
/* Ocupación de los hornos del día (Fusión, en kg): semáforo de las tarjetas de hornada (S.nivelOcupacion) */
.pf-sem-pill--ok { background: var(--pos); }
.pf-sem-pill--warn { background: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.pf-sem-pill--neg { background: var(--neg); }

/* KPI de la semana (Programaciones) */
.pf-prog-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pf-prog-kpi { width: 88px; padding: 4px 6px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.pf-prog-kpi strong { display: block; font-size: 14px; line-height: 1.2; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.pf-prog-kpi small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pf-prog-kpi--kg strong { color: var(--blue); }
.pf-prog-kpi--h strong { color: var(--pos); }
.pf-prog-kpi--kgh strong { color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }

/* Semáforos de ocupación / rendimiento (≥75 % / ≥50 %; rendimiento ≥85 % / ≥70 %). */
.pf-nivel-ok { --pf-niv: var(--pos); }
.pf-nivel-warn { --pf-niv: var(--warn); }
.pf-nivel-neg { --pf-niv: var(--neg); }

/* Horno (H1–H4 fusión, T1–T4 TT): pastilla con color propio derivado de los tokens. */
.pf-horno {
  --pf-h: var(--muted);
  display: inline-flex; flex: 0 0 auto; padding: 2px 8px; border-radius: 10px;
  background: var(--pf-h); color: var(--panel); font-size: 11px; font-weight: 800;
}
.pf-horno--H1 { --pf-h: var(--blue); }
.pf-horno--H2 { --pf-h: color-mix(in srgb, var(--blue) 60%, var(--ink)); }
.pf-horno--H3 { --pf-h: var(--warn); }
.pf-horno--H4 { --pf-h: var(--pos); }
.pf-horno--T1 { --pf-h: color-mix(in srgb, var(--blue) 50%, var(--neg)); }
.pf-horno--T2 { --pf-h: color-mix(in srgb, var(--blue) 60%, var(--pos)); }
.pf-horno--T3 { --pf-h: color-mix(in srgb, var(--neg) 70%, var(--ink)); }
.pf-horno--T4 { --pf-h: color-mix(in srgb, var(--pos) 60%, var(--ink)); }

/* Tarjeta de la rejilla semanal (Programaciones): estilo de la tarjeta del kanban de B6 sin arrastre (Anexo B.9). */
.pf-tar { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s; }
.pf-tar:hover { transform: translateY(-1px); }
.pf-tar-cuerpo { padding: 10px 12px; cursor: pointer; }
.pf-tar-cuerpo:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: -2px; border-radius: 12px; }
.pf-tar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 5px; }
.pf-tar-id { font-size: 12.5px; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }
.pf-tar-lin { margin: 0 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tar-lin strong { font-weight: 600; }
.pf-tar-lin span { color: var(--muted); }
.pf-tar-barra { height: 5px; margin-bottom: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pf-tar-barra > i { display: block; height: 100%; border-radius: inherit; background: var(--pf-c); }
.pf-tar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tar-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--muted); font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pf-tar-chip--der { margin-left: auto; }
.pf-tar-chip--plazo-hoy, .pf-tar-chip--plazo-vencido { font-weight: 700; border-color: transparent; }
.pf-tar-chip--plazo-hoy { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 65%, var(--ink)); }
.pf-tar-chip--plazo-vencido { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }

/* Hornada / TT desplegable (Fusión / Tratamientos): .pf-tar con semáforo de ocupación y tabla de OTs. */
.pf-tarj { overflow: hidden; --pf-c: var(--pf-niv); }
.pf-tarj-chip {
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--pf-niv) 16%, var(--panel)); color: color-mix(in srgb, var(--pf-niv) 75%, var(--ink));
}
.pf-tarj-flecha { margin-left: auto; line-height: 0; color: var(--muted); }
.pf-tarj-det { border-top: 1px solid var(--line); }
/* Columnas fijas: la tabla nunca es más ancha que la tarjeta; solo Cliente cede, con puntos suspensivos. */
.pf-tarj-ots { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
.pf-tarj-ots th { padding: 5px 4px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tarj-ots td { padding: 7px 4px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tarj-ots th:first-child, .pf-tarj-ots td:first-child { padding-left: 12px; }
.pf-tarj-ots th:first-child { width: 72px; }
.pf-tarj-ots th:last-child, .pf-tarj-ots td:last-child { padding-right: 12px; }
.pf-tarj-ots .num { width: 54px; text-align: right; }
.pf-tarj-ots .num:last-child { width: 62px; }
.pf-tarj-ots tbody tr { cursor: pointer; }
.pf-tarj-ots tbody tr:hover, .pf-tarj-ots tbody tr:focus { background: var(--brand-soft); outline: none; }
.pf-tarj-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.pf-tarj-total small { display: block; color: var(--muted); font-size: 11px; }
.pf-tarj-total strong { font-size: 14px; }
.pf-tarj-total strong span { font-size: 12px; font-weight: 500; }
.pf-tarj-rend {
  padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: color-mix(in srgb, var(--pf-niv) 16%, var(--panel)); color: color-mix(in srgb, var(--pf-niv) 75%, var(--ink));
}
.pf-tarj-sin { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 12.5px; }

/* ── Dashboard: tarjetas del mosaico, banners y fichas (B7 + Anexo B.7) ─────────────────────── */
/* Tono de una pieza (--pf-tono): estado, métrica, semáforo. */
.pf-tono-brand { --pf-tono: var(--brand); }
.pf-tono-pos { --pf-tono: var(--pos); }
.pf-tono-warn { --pf-tono: var(--warn); }
.pf-tono-neg { --pf-tono: var(--neg); }
.pf-tono-muted { --pf-tono: var(--muted); }
.pf-tono-tt { --pf-tono: var(--pf-proc-tratamiento_termico); }
.pf-tono-fusion { --pf-tono: var(--pf-proc-fusion); }

/* Las tarjetas del mosaico no llevan CSS propio: se pintan con las piezas de UiMosaico (CONTRATO-UI
   B7.8), cuyo estilo es de shared/css/ui.css. Aquí solo lo de la vista y lo que va dentro de una tabla. */
.pf-dash-sub { font-size: 12px; color: var(--muted); }
.pf-dash-sin-plan { padding: 48px 18px; }
.pf-dash-mas { font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; }
/* Desviación de una carga (celda de la tabla de cargas). */
.pf-dash-desv {
  min-width: 52px; padding: 0 4px; border-radius: 8px; text-align: right; font-weight: 700; font-size: 12px;
  color: color-mix(in srgb, var(--pf-tono) 80%, var(--ink)); background: color-mix(in srgb, var(--pf-tono) 14%, var(--panel));
}

/* Cargas pasadas: la tabla es la estática de B3 sin retoques (B7.8); aquí solo la pastilla de proceso. */
.pf-dash-proc {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
  color: color-mix(in srgb, var(--pf-c) 80%, var(--ink)); background: color-mix(in srgb, var(--pf-c) 14%, var(--panel));
}

/* Banners del plan encima del mosaico. */
.pf-dash-banner { margin-bottom: 14px; }
.pf-dash-banner-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pf-dash-banner-fila p { margin: 2px 0 0; }
.pf-dash-banner-acc { display: flex; gap: 8px; flex: 0 0 auto; }
.pf-dash-giro { display: inline-block; line-height: 0; vertical-align: middle; animation: pf-giro 1.6s linear infinite; }
@keyframes pf-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-dash-giro { animation: none; } }
.pf-dash-diff { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.pf-dash-diff > .pf-dash-sub { margin: 0 0 8px; }
.pf-dash-dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pf-dash-dchip {
  padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--pf-tono) 80%, var(--ink)); background: color-mix(in srgb, var(--pf-tono) 14%, var(--panel));
}
.pf-dash-identico { margin: 4px 0 0; font-size: 12px; font-weight: 600; }
.pf-dash-cambio { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; border-bottom: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.pf-dash-cambio:last-child { border-bottom: 0; }
.pf-dash-cambio > strong { width: 72px; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; }
.pf-dash-dias { color: color-mix(in srgb, var(--pf-tono) 80%, var(--ink)); }
.pf-dash-cambio-cli { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* Fichas: excluidas, desgloses, facturable y rendimiento. */
.pf-dash-motivo { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 65%, var(--ink)); }
.pf-dash-seg { margin-bottom: 12px; }
.pf-dash-grupos { display: flex; flex-direction: column; gap: 8px; }
.pf-dash-grupo { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.pf-dash-grupo.is-abierto { border-color: var(--pf-c); }
.pf-dash-grupo.is-actual { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 8%, var(--panel)); }
.pf-dash-grupo-cab { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; font: inherit; color: inherit; }
button.pf-dash-grupo-cab { cursor: pointer; }
.pf-dash-grupo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pf-dash-grupo-fila + .pf-dash-grupo-fila { margin-top: 4px; }
.pf-dash-grupo-fila strong { color: var(--pf-c); }
.pf-dash-grupo-nom { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 0; }
.pf-dash-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--pf-c); }
/* Solo el hueco encima de la barra: la barra es UiMosaico.barra tal cual (B7.8). */
.pf-dash-grupo-barra { display: block; margin-top: 8px; }
.pf-dash-actual { padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; background: var(--pos); color: var(--panel); }
.pf-dash-grupo-ots { max-height: 224px; overflow-y: auto; border-top: 1px solid var(--line); background: var(--panel); }
.pf-dash-grupo-ots > div { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; border-top: 1px solid var(--line); }
.pf-dash-grupo-ots > div:first-child { border-top: 0; }
.pf-dash-grupo-ots strong { color: var(--pf-c); flex: 0 0 auto; }
.pf-dash-grupo-ots span { min-width: 0; flex: 1; }
.pf-dash-grupo-ots span span, .pf-dash-grupo-ots small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-dash-grupo-ots small { color: var(--muted); font-size: 10px; }
.pf-dash-grupo-ots b { flex: 0 0 auto; color: var(--pf-c); }
.pf-dash-grupo-vacio { margin: 0; padding: 8px 12px; }