/* PLANNER — tablero de pedidos de ORION dentro de AURORA
   ---------------------------------------------------------------------------
   Es el CSS del tablero de static/css/orion.css con las clases renombradas a
   pl-*. NO se carga orion.css en AURORA: ese fichero redefine :root entero
   (fondos, textos, --blue) y repintaría la aplicación completa.

   Paleta: todo sale de las variables de AURORA. El acento de ORION (--or, que
   allí es naranja) aquí es --blue, que en AURORA es el naranja de la marca en
   los dos temas. El «almacén» iba en azul de verdad para no confundirse con el
   muelle: aquí ese azul es --nav-sec, el único azul real de la interfaz.
   --pl-hot es la temperatura del producto: magnitud física, no alarma. */

.pl-scope {
  --pl-acc: var(--blue);
  --pl-acc-dim: var(--blue-dim);
  --pl-acc-soft: var(--blue-bg);
  --pl-azul: var(--nav-sec);
  --pl-hot: #ff7a45;
  --pl-hot-dim: #b8431a;
}
:root[data-theme="light"] .pl-scope { --pl-hot: #c2410c; --pl-hot-dim: #7c2d12; }

.pl-top { padding: 22px 28px 12px; flex-shrink: 0; }
.pl-top .mod-head { margin-bottom: 0; }
.pl-estado { font-size: 1.15rem; color: var(--text2); white-space: nowrap; }
.pl-dim { color: var(--text2); }

.pl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; font-size: 1.15rem; font-weight: 500;
  border-radius: var(--radius); cursor: pointer; font-family: var(--font-ui);
  background: var(--pl-acc); border: 1px solid var(--pl-acc); color: #fff;
  transition: filter .12s, background .12s; white-space: nowrap;
}
.pl-btn:hover { filter: brightness(1.08); }
.pl-btn:disabled { opacity: .5; cursor: default; filter: none; }
.pl-btn.ghost { background: none; color: var(--text1); border-color: var(--border); }
.pl-btn.ghost:hover { color: var(--text0); border-color: var(--border2); background: var(--bg2); }

/* ── Indicadores ───────────────────────────────────────────────────────── */
.pl-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; padding: 0 28px 14px; flex-shrink: 0;
}
.pl-kpi {
  background: var(--bg1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.pl-kpi-l {
  font-size: 1rem; color: var(--text2); text-transform: uppercase;
  letter-spacing: .06em; display: flex; align-items: center; gap: 5px;
}
.pl-kpi-v { font-size: 2.4rem; font-weight: 600; color: var(--text0); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pl-kpi-d { font-size: 1.05rem; color: var(--text2); }
.pl-kpi.acc { border-color: var(--pl-acc-dim); background: var(--pl-acc-soft); }
.pl-kpi.acc .pl-kpi-v { color: var(--pl-acc); }
.pl-kpi.warn { border-color: var(--amber); background: var(--amber-bg); }
.pl-kpi.warn .pl-kpi-v { color: var(--amber); }
.pl-kpi.bad { border-color: var(--red); background: var(--red-bg); }
.pl-kpi.bad .pl-kpi-v { color: var(--red); }

/* ── Filtros ───────────────────────────────────────────────────────────── */
.pl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 28px 12px; flex-shrink: 0; }
.pl-bar .finput { width: auto; min-width: 130px; }
.pl-bar #pl-q { min-width: 240px; }
.pl-sep { flex: 1; }

/* ── Tablero ───────────────────────────────────────────────────────────── */
/* Scroll horizontal y no columnas apiladas: el valor está en ver el flujo
   entero de un vistazo. */
.pl-board {
  display: flex; gap: 12px; align-items: flex-start;
  overflow-x: auto; padding: 0 28px 22px; flex: 1; min-height: 0;
}
.pl-col {
  flex: 0 0 250px; display: flex; flex-direction: column; min-height: 0;
  max-height: 100%; background: var(--bg1);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.pl-col-h { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pl-col-h i { color: var(--text2); font-size: 1.4rem; }
.pl-col-t { font-size: 1.15rem; font-weight: 600; color: var(--text0); }
.pl-col-n {
  margin-left: auto; font-size: 1.05rem; font-family: var(--font-mono);
  background: var(--bg3); color: var(--text1); border-radius: 10px; padding: 1px 7px;
}
.pl-col-b { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.pl-col-vacio { padding: 14px 6px; color: var(--text2); font-size: 1.05rem; text-align: center; }
.pl-col.hot { border-color: var(--pl-acc-dim); }
.pl-col.hot .pl-col-h i, .pl-col.hot .pl-col-n { color: var(--pl-acc); }
/* AQUI ESTUVO LA COLUMNA «BLOQUEADO» (.pl-col.blocked), retirada el
   22/09/2026: un pedido bloqueado no ha avanzado a ninguna etapa, sigue
   recibido, y sacarlo aparte contaba dos veces lo mismo. La marca se mudo a la
   tarjeta y al contador de la cabecera de Recibido. */
.pl-col-bloq {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 1.05rem; font-family: var(--font-mono); color: var(--red);
}
.pl-col-bloq i { color: var(--red) !important; font-size: 1.2rem !important; }
.pl-col-bloq + .pl-col-n { margin-left: 7px; }

.pl-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-left: 3px solid var(--text2);
  border-radius: var(--radius); padding: 9px 10px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s, transform .08s;
}
.pl-card:hover { border-color: var(--border2); transform: translateX(1px); }
.pl-card.p-alta { border-left-color: var(--amber); }
.pl-card.p-urgente { border-left-color: var(--pl-acc); }
.pl-card.late { border-left-color: var(--red); }
/* Bloqueado: el borde no basta —lo usa ya la prioridad— asi que lleva etiqueta
   propia arriba del todo, encima del cliente, y su motivo debajo. */
.pl-card.bloq { border-color: var(--red); background: rgba(248,81,73,.06); }
.pl-card-bloq {
  display: inline-flex; align-items: center; gap: 4px; margin: 5px 0 1px;
  font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--red);
}
.pl-card-bloq i { font-size: 1.2rem; }
.pl-card-h { display: flex; align-items: baseline; gap: 6px; }
.pl-card-c { font-size: 1.05rem; font-family: var(--font-mono); color: var(--pl-acc); }
.pl-card-d { margin-left: auto; font-size: 1rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.pl-card-d.urge { color: var(--red); font-weight: 600; }
.pl-card-cli { font-size: 1.2rem; color: var(--text0); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-p { font-size: 1.05rem; color: var(--text1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card-f { display: flex; align-items: center; gap: 6px; font-size: 1rem; color: var(--text2); }
.pl-card-f i { font-size: 1.2rem; }
.pl-card-motivo { font-size: 1rem; color: var(--red); line-height: 1.35; border-top: 1px dashed var(--border2); padding-top: 4px; }

.pl-muelle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .95rem; font-family: var(--font-mono); border-radius: 10px;
  padding: 1px 6px; background: var(--bg3); color: var(--text2);
}
.pl-muelle.ok { background: var(--green-bg); color: var(--green); }
.pl-muelle.mid { background: var(--amber-bg); color: var(--amber); }
.pl-muelle.bad { background: var(--red-bg); color: var(--red); }
.pl-muelle.alm { background: var(--bg3); color: var(--pl-azul); }
.pl-muelle.alm.bad { background: var(--red-bg); color: var(--red); }

.pl-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 1rem; border-radius: 10px; padding: 1px 8px;
  background: var(--bg3); color: var(--text1); white-space: nowrap;
}
.pl-tag.ok { background: var(--green-bg); color: var(--green); }
.pl-tag.rotura { background: var(--red-bg); color: var(--red); }
.pl-tag.acc { background: var(--pl-acc-soft); color: var(--pl-acc); }

.pl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 20px; color: var(--text2); text-align: center; width: 100%;
}
.pl-empty i { font-size: 3.4rem; opacity: .5; }
.pl-empty-t { font-size: 1.4rem; color: var(--text0); }

/* ── Ficha lateral del pedido ──────────────────────────────────────────── */
.pl-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--bg1); border-left: 1px solid var(--border2);
  box-shadow: -18px 0 44px rgba(0,0,0,.34);
  display: flex; flex-direction: column; z-index: 960;
  transform: translateX(100%); transition: transform .2s ease;
}
.pl-drawer.open { transform: translateX(0); }
.pl-drawer-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pl-drawer-h h3 { margin: 0; font-size: 1.5rem; color: var(--text0); font-weight: 600; font-family: var(--font-mono); }
.pl-drawer-b { flex: 1; overflow-y: auto; padding: 16px 18px 26px; }
.pl-drawer-back {
  position: fixed; inset: 0; background: rgba(4,9,20,.5); z-index: 959;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pl-drawer-back.open { opacity: 1; pointer-events: auto; }

.pl-sec { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); margin: 18px 0 7px; font-weight: 600; }
.pl-sec:first-child { margin-top: 0; }
.pl-kv { display: grid; grid-template-columns: 108px 1fr; gap: 5px 10px; font-size: 1.15rem; margin: 0; }
.pl-kv dt { color: var(--text2); }
.pl-kv dd { margin: 0; color: var(--text0); }
.pl-acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.pl-step { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 1.15rem; }
.pl-step:last-child { border-bottom: none; }
.pl-step i { font-size: 1.6rem; color: var(--pl-acc); flex-shrink: 0; margin-top: 1px; }
.pl-step.off i { color: var(--text2); }
.pl-step.bad i { color: var(--red); }
.pl-step.warn i { color: var(--amber); }
.pl-step-t { color: var(--text0); }
.pl-step-d { color: var(--text2); font-size: 1.05rem; }

.pl-evt { display: flex; gap: 8px; font-size: 1.1rem; padding: 6px 0; color: var(--text1); }
.pl-evt time { color: var(--text2); font-family: var(--font-mono); font-size: 1rem; flex-shrink: 0; }

.pl-table { width: 100%; border-collapse: collapse; font-size: 1.15rem; }
.pl-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text1); }
.pl-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.pl-table .cod { font-family: var(--font-mono); color: var(--pl-acc); }

/* Etapas del lote. --gt-lbl es el ancho de la columna de nombres: la marca de
   «línea libre» se coloca con un calc() que la usa, desde el JS. */
.pl-gantt {
  --gt-lbl: 124px;
  position: relative; display: flex; flex-direction: column; gap: 3px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.pl-gt-fila { display: grid; grid-template-columns: var(--gt-lbl) 1fr; gap: 8px; align-items: center; }
.pl-gt-l { font-size: 1.05rem; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-gt-pista { position: relative; height: 17px; background: var(--bg3); border-radius: 4px; }
.pl-gt-barra { position: absolute; top: 0; bottom: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pl-gt-barra b { font-family: var(--font-mono); font-size: .9rem; font-weight: 500; color: #fff; opacity: .9; }
.pl-gt-barra.bloq { background: var(--pl-acc); }
.pl-gt-barra.pas { background: repeating-linear-gradient(115deg, var(--pl-hot) 0 5px, var(--pl-hot-dim) 5px 10px); }
.pl-gt-marca { position: absolute; top: 6px; bottom: 6px; width: 0; border-left: 1px dashed var(--text1); }
.pl-gt-pie { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 1rem; color: var(--text2); }
.pl-gt-leg { display: inline-flex; align-items: center; gap: 5px; }
.pl-gt-p { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.pl-gt-p.bloq { background: var(--pl-acc); }
.pl-gt-p.pas { background: var(--pl-hot); }
.pl-gt-txt { margin-top: 6px; font-size: 1.1rem; color: var(--text1); line-height: 1.5; }
.pl-gt-txt b { color: var(--text0); font-family: var(--font-mono); }

/* ── Alta de pedido ────────────────────────────────────────────────────── */
.pl-modal-back {
  position: fixed; inset: 0; background: rgba(4,9,20,.62); z-index: 970;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.pl-modal-back.open { display: flex; }
.pl-modal {
  background: var(--bg1); border: 1px solid var(--border2);
  border-radius: var(--radius-lg); width: 460px; max-width: 100%;
  max-height: 90vh; display: flex; flex-direction: column;
}
.pl-modal-h { display: flex; align-items: center; gap: 9px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.pl-modal-h h3 { margin: 0; font-size: 1.5rem; color: var(--text0); font-weight: 600; }
.pl-modal-h i { color: var(--pl-acc); font-size: 1.8rem; }
.pl-modal-b { padding: 16px 18px; overflow-y: auto; display: grid; gap: 11px; }
.pl-modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
.pl-field { display: flex; flex-direction: column; gap: 4px; }
.pl-field label { font-size: 1.05rem; color: var(--text2); }
.pl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pl-err { font-size: 1.1rem; color: var(--red); min-height: 1.3em; }

@media (max-width: 860px) {
  .pl-top { padding: 16px 14px 10px; }
  .pl-kpis, .pl-bar, .pl-board { padding-left: 14px; padding-right: 14px; }
  .pl-col { flex-basis: 210px; }
  .pl-bar #pl-q { min-width: 0; flex: 1 1 100%; }
  .pl-row2 { grid-template-columns: 1fr; }
}

/* Última sincronización con DOSIK (13/10/2026), junto a su botón. */
.pl-sync-info { font-size: 1.05rem; color: var(--text2); max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El botón de la demo (planner_demo.js): que se vea, es lo que se enseña. */
.pl-btn-demo { background: var(--blue); color: #fff; border-color: var(--blue); }
.pl-btn-demo:hover { filter: brightness(1.1); color: #fff; }

/* ── Vista Gantt (14/10/2026, static/js/planner_gantt.js) ─────────────────
   Una fila por línea, una barra por orden. Los colores son de ETAPA (qué
   máquina), no de estado: el estado ya lo cuenta el tablero. Tamaños pensados
   para leerse sin acercarse a la pantalla (la primera versión, con barras de
   14 px y letra de 9, «está muy pequeñito»). */
.pl-scope {
  --plg-tras: #7f8896; --plg-mol: #c08a1e; --plg-pre: #8f73d6; --plg-mez: var(--blue);
  --plg-gran: #3b82c4; --plg-granel: #2e9e74; --plg-otra: #8a8a8a;
  --plg-lbl: 230px;
}
:root[data-theme="light"] .pl-scope {
  --plg-tras: #6b7280; --plg-mol: #a16207; --plg-pre: #7c5cc4; --plg-gran: #2563a8; --plg-granel: #19805a;
}
.pl-seg {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0;
}
.pl-seg button {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  font-size: 1.2rem; font-family: var(--font-ui); background: none; border: 0;
  color: var(--text1); cursor: pointer; white-space: nowrap;
}
.pl-seg button + button { border-left: 1px solid var(--border); }
.pl-seg button:hover { background: var(--bg2); color: var(--text0); }
.pl-seg button.on { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.pl-seg button i { font-size: 1.35rem; }

.pl-gantt { flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px 22px; display: flex; flex-direction: column; gap: 12px; }
.plg-mandos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plg-rango { font-size: 1.3rem; font-weight: 600; color: var(--text0); font-variant-numeric: tabular-nums; min-width: 230px; text-align: center; }
.plg-ley { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 1.2rem; color: var(--text1); }
.plg-ley-i { display: inline-flex; align-items: center; gap: 7px; }
.plg-ley-i .ti { font-size: 1.4rem; color: var(--text1); }
.plg-c { width: 13px; height: 13px; border-radius: 3px; display: inline-block; flex-shrink: 0; background: var(--plg-otra); }
.plg-c-tarde { background: transparent !important; box-shadow: inset 0 0 0 2px var(--red); }
.plg-c-pred { background: transparent !important; border: 2px dashed var(--text0); }
.plg-nota { font-size: 1.15rem; color: var(--text2); line-height: 1.5; }
.plg-gira { animation: plg-gira 1s linear infinite; display: inline-block; }
@keyframes plg-gira { to { transform: rotate(360deg); } }
.plg-err i { color: var(--red); opacity: 1; }
.pl-gantt .pl-empty .pl-btn i { font-size: 1.3rem; opacity: 1; }

/* Planificar: la cola a la izquierda, el plan a la derecha */
.plg-dos { display: grid; grid-template-columns: 1fr; gap: 14px; min-height: 0; }
.plg-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pls-cola, .pls-barra { display: none; }
.pl-gantt.plg-sec .plg-dos { grid-template-columns: 380px 1fr; align-items: start; }
.pl-gantt.plg-sec .pls-cola { display: flex; }
.pl-gantt.plg-sec .pls-barra { display: flex; }
.pl-gantt:not(.plg-sec) .pls-param { display: none !important; }

.plg-caja { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.plg-gantt { position: relative; }
.plg-fila { display: grid; grid-template-columns: var(--plg-lbl) 1fr; border-bottom: 1px solid var(--border); }
.plg-fila:last-child { border-bottom: 0; }
.plg-l {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; min-width: 0;
  font-size: 1.25rem; font-weight: 500; color: var(--text0); border-right: 1px solid var(--border); background: var(--bg1);
  position: relative; z-index: 2;
}
.plg-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plg-l small { margin-left: auto; font-family: var(--font-mono); font-size: 1.05rem; color: var(--text2); }
.plg-l .ti { color: var(--text1); font-size: 1.45rem; }
.plg-cab .plg-l { border-right-color: transparent; }
.plg-eje { position: relative; height: 32px; }
.plg-tick {
  position: absolute; top: 8px; transform: translateX(-50%); font-size: 1.1rem;
  font-family: var(--font-mono); color: var(--text1); white-space: nowrap;
}
.plg-tick.dia { color: var(--text0); font-weight: 700; transform: none; padding-left: 5px; font-size: 1.2rem; }
.plg-cuerpo { position: relative; }
.plg-fondo { position: absolute; top: 0; bottom: 0; left: var(--plg-lbl); right: 0; pointer-events: none; }
.plg-fondo i { position: absolute; top: 0; bottom: 0; width: 0; }
.plg-hora { border-left: 1px dashed var(--border); }
.plg-dia { border-left: 1px solid var(--border2); }
.plg-ahora { border-left: 2px solid var(--red); z-index: 3; }
.plg-ahora b {
  position: absolute; top: 3px; left: 4px; font-size: 1.05rem; font-weight: 600; white-space: nowrap;
  color: var(--red); background: var(--bg1); padding: 0 4px; border-radius: 3px;
}
.plg-pista { position: relative; }
.plg-b {
  position: absolute; height: 24px; border-radius: 4px; cursor: pointer; overflow: hidden;
  background: var(--plg-otra); color: #fff; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
  transition: opacity .15s, box-shadow .15s;
}
.plg-b em {
  font-style: normal; font-size: 1.12rem; font-weight: 500; line-height: 24px; padding: 0 6px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plg-b:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--text1); z-index: 2; }
.e-tras { background: var(--plg-tras) !important; }
.e-mol { background: var(--plg-mol) !important; }
.e-pre { background: var(--plg-pre) !important; }
.e-mez, .e-fab { background: var(--plg-mez) !important; }
.e-gran { background: var(--plg-gran) !important; }
.e-granel { background: var(--plg-granel) !important; }
.plg-b.e-enfr, .plg-c.e-enfr {
  background: repeating-linear-gradient(135deg, var(--plg-mez) 0 3px, transparent 3px 7px) !important;
  box-shadow: inset 0 0 0 1px var(--plg-mez); opacity: .8;
}
.plg-b.e-cambio, .plg-c.e-cambio {
  background: repeating-linear-gradient(135deg, var(--text2) 0 3px, transparent 3px 7px) !important;
  box-shadow: inset 0 0 0 1px var(--text2); opacity: .8;
}
.plg-b.e-esp { height: 3px; margin-top: 10px; background: var(--text2) !important; box-shadow: none; border-radius: 1px; }
.plg-c.e-esp { height: 3px; background: var(--text2) !important; }
/* Llega tarde: borde rojo, sin cambiar el color de la etapa */
.plg-b.tarde { box-shadow: inset 0 0 0 2px var(--red); }
/* La predicción: un contorno discontinuo encima del plan, sin relleno */
.plg-b.pred {
  background: transparent !important; box-shadow: none; border: 2px dashed var(--text0);
  opacity: .9; z-index: 3; pointer-events: none;
}
.plg-b.pred.tarde { border-color: var(--red); }
.plg-camion {
  position: absolute; top: 6px; transform: translateX(-50%); cursor: pointer;
  font-size: 1.7rem; color: var(--text1); line-height: 1; z-index: 1;
}
.plg-camion:hover { color: var(--text0); }
/* Elegida una barra: su referencia se queda y el resto se apaga. */
.plg-gantt.con-sel .plg-b:not(.pred), .plg-gantt.con-sel .plg-camion { opacity: .22; }
.plg-gantt.con-sel .plg-b.rel, .plg-gantt.con-sel .plg-camion.rel { opacity: .9; }
.plg-gantt.con-sel .plg-b.sel:not(.pred), .plg-gantt.con-sel .plg-camion.sel {
  opacity: 1; box-shadow: 0 0 0 3px var(--text0); z-index: 2;
}

.plg-det {
  background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.plg-det-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 1.35rem; }
.plg-det-h b { color: var(--text0); }
.plg-det-h .pl-dim { font-size: 1.15rem; }
.plg-det-rel { font-size: 1.15rem; color: var(--text1); display: flex; align-items: center; gap: 6px; }
.plg-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; }
.plg-dato { display: flex; flex-direction: column; gap: 3px; }
.plg-dato > span { font-size: 1.02rem; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; }
.plg-dato b { font-size: 1.3rem; color: var(--text0); font-weight: 500; font-variant-numeric: tabular-nums; }
.plg-det-ped { font-size: 1.2rem; color: var(--text1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plg-det-ped b { color: var(--text0); }

/* ── La cola de pedidos (planner_secuencia.js) ───────────────────────────── */
.pls-cola {
  flex-direction: column; background: var(--bg1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 0;
  max-height: calc(100vh - 230px); min-height: 320px;
}
.pls-cab { padding: 12px 14px 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.pls-t { font-size: 1.25rem; color: var(--text1); }
.pls-t b { color: var(--text0); }
.pls-ord { font-size: 1.1rem; color: var(--text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pls-ord button {
  font: inherit; font-size: 1.1rem; padding: 3px 9px; border-radius: 12px; cursor: pointer;
  background: var(--bg2); color: var(--text1); border: 1px solid var(--border);
}
.pls-ord button:hover { color: var(--text0); border-color: var(--border2); }
.pls-lista { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.pls-ped {
  display: grid; grid-template-columns: 18px 30px 1fr auto; align-items: center; gap: 6px;
  padding: 8px 8px 8px 4px; border-radius: var(--radius); background: var(--bg2);
  border: 1px solid transparent; border-left: 3px solid var(--plg-mez); cursor: grab;
}
.pls-ped:hover { border-color: var(--border2); border-left-color: var(--plg-mez); }
.pls-ped:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pls-ped.tarde { border-left-color: var(--red); }
.pls-ped.sel { border-color: var(--text1); background: var(--bg3); }
.pls-ped.arrastrando { opacity: .35; }
.pls-lista.arrastrando, .pls-lista.arrastrando .pls-ped { cursor: grabbing; user-select: none; }
.pls-lista { touch-action: pan-x; }
.pls-asa { color: var(--text2); font-size: 1.3rem; display: flex; }
.pls-n { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text2); text-align: right; }
.pls-m { min-width: 0; }
.pls-l1 { font-size: 1.2rem; color: var(--text0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-l1 b { font-weight: 600; }
.pls-l2 { font-size: 1.05rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pls-e { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pls-est, .pls-pred {
  font-size: 1.02rem; font-family: var(--font-mono); padding: 1px 7px; border-radius: 10px; white-space: nowrap;
  background: var(--bg3); color: var(--text1);
}
.pls-est.ok { background: var(--green-bg); color: var(--green); }
.pls-est.tarde { background: var(--red-bg); color: var(--red); }
.pls-pred { background: none; border: 1px dashed var(--border2); display: inline-flex; align-items: center; gap: 2px; }
.pls-pred.ok { color: var(--green); }
.pls-pred.tarde { color: var(--red); }
.pls-sitio { height: 4px; border-radius: 2px; background: var(--blue); margin: 1px 0; }
.pls-tarde { color: var(--red); }

/* Indicadores y parámetros */
.pls-barra { align-items: stretch; gap: 10px; }
.pls-kpis { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pls-k {
  background: var(--bg1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 9px 12px; display: flex; flex-direction: column; gap: 2px;
}
.pls-k > span:first-child { font-size: 1.02rem; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; }
.pls-k b { font-size: 1.6rem; color: var(--text0); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pls-kp { font-size: 1.2rem; color: var(--text1); font-style: normal; display: inline-flex; align-items: center; gap: 3px; }
.pls-d { font-size: 1.05rem; font-family: var(--font-mono); font-weight: 600; }
.pls-d.bien { color: var(--green); }
.pls-d.mal { color: var(--red); }
#pls-btn-param { align-self: center; }
#pls-btn-param.on { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.pls-param {
  background: var(--bg1); border: 1px solid var(--blue-dim); border-radius: var(--radius-lg);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 12px;
}
.pls-param-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.25rem; color: var(--text0); }
.pls-param-h .pl-dim { font-size: 1.1rem; }
.pls-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
.pls-campo { display: flex; flex-direction: column; gap: 4px; font-size: 1.1rem; color: var(--text2); }
.pls-campo > span { text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; }
.pls-campo small { font-size: 1rem; color: var(--text2); }
.pls-campo .finput { width: 100%; font-size: 1.2rem; }
.pls-par { display: flex; align-items: center; gap: 6px; }
.pls-par em { font-style: normal; color: var(--text1); font-size: 1.15rem; }
.pls-lineas { display: flex; flex-direction: column; gap: 3px; font-size: 1.15rem; color: var(--text0); }
.pls-lineas label, .pls-chk { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; color: var(--text0); text-transform: none; letter-spacing: 0; }

@media (max-width: 1100px) {
  .pl-gantt.plg-sec .plg-dos { grid-template-columns: 1fr; }
  .pls-cola { position: static; max-height: 360px; }
}
@media (max-width: 760px) {
  .pl-scope { --plg-lbl: 140px; }
  .pl-gantt { padding: 0 12px 16px; }
  .plg-rango { min-width: 0; }
}