/* Estilo del Tablero de Despacho, portado de graficgold-despacho/web/index.html.
 * Acotado a .mod-despacho: aquí las tablas alinean a la derecha y en OTD a la
 * izquierda.
 */

.mod-despacho .tabla-wrap{overflow-x:auto}
.mod-despacho table{width:100%;border-collapse:collapse;font-size:clamp(12px,.92vw,15px);font-variant-numeric:tabular-nums;min-width:820px}
.mod-despacho th{text-align:right;padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);font-size:clamp(9px,.68vw,11px);
   text-transform:uppercase;letter-spacing:.07em;font-weight:600;white-space:nowrap;color:var(--meta)}
.mod-despacho th.izq{text-align:left}
.mod-despacho td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap;vertical-align:top}
.mod-despacho td.izq{text-align:left;white-space:normal}
.mod-despacho tbody tr:last-child td{border-bottom:0}
.mod-despacho .sub{display:block;color:var(--meta);font-size:.8em;font-weight:400;letter-spacing:0}
.mod-despacho .val{font-weight:600}
.mod-despacho .cero{color:var(--rule)}
/* Rojo reservado exclusivamente para lo vencido y para el material que no aparece. */
.mod-despacho tr.vencido td.f, .mod-despacho tr.vencido td.f .sub{color:var(--alarma)}
.mod-despacho tr.hoy td.f{font-weight:600}

/* Buscador y orden. Discretos a propósito: son herramientas, no contenido. */
.mod-despacho .busca{border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);
  font:inherit;font-size:clamp(11px,.8vw,13px);padding:2px 0 3px;width:min(230px,42vw);outline:none}
.mod-despacho .busca:focus{border-bottom-color:var(--ink)}
.mod-despacho .busca::placeholder{color:var(--meta)}
.mod-despacho .herr{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mod-despacho th.orden{cursor:pointer;user-select:none}
.mod-despacho th.orden:hover{color:var(--ink)}
.mod-despacho th.orden::after{content:'';margin-left:5px;opacity:.35}
.mod-despacho th.orden.asc::after{content:'↑';opacity:1}
.mod-despacho th.orden.desc::after{content:'↓';opacity:1}

/* ── Kanban ────────────────────────────────────────────────────────────────
 * La misma verdad que la tabla, leída de otra forma. Sigue siendo monocromo: el
 * rojo está reservado a lo vencido y a lo trabado, igual que en la tabla. Las
 * seis columnas NO se distinguen por color — se distinguen por su encabezado.
 */
.mod-despacho .switch{display:flex;gap:0;margin-bottom:18px}
.mod-despacho .switch button{font:inherit;font-size:13px;background:none;color:var(--meta);
  border:1px solid var(--rule);border-radius:0;padding:6px 16px;cursor:pointer;margin-left:-1px}
.mod-despacho .switch button:first-child{margin-left:0}
.mod-despacho .switch button:hover{color:var(--ink)}
.mod-despacho .switch button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.mod-despacho .switch button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* Seis columnas que no caben en cualquier pantalla: se desliza en horizontal
 * DENTRO de su caja. Apilarlas verticalmente perdería lo único que un Kanban
 * aporta sobre una lista, que es ver el flujo completo de un vistazo. */
.mod-despacho .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:0;overflow-x:auto;margin-top:18px;border-top:1px solid var(--ink)}
.mod-despacho .col{border-right:1px solid var(--rule);padding:14px 12px 20px;min-width:0}
.mod-despacho .col:last-child{border-right:0}
.mod-despacho .col > header{margin-bottom:12px}
.mod-despacho .col h3{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;line-height:1.3}
.mod-despacho .col .cuenta{display:block;font-size:11px;color:var(--meta);margin-top:3px}
/* Una columna sin motor se apaga: sigue ahí para que se vea que la etapa existe,
 * pero no compite por atención con las que sí tienen dato. */
.mod-despacho .col.sinmotor h3{color:var(--meta)}
.mod-despacho .hueca{font-size:11.5px;color:var(--meta);line-height:1.45}

.mod-despacho .tarj{display:grid;gap:2px;border:1px solid var(--ink);border-radius:2px;
  padding:9px 10px;margin-bottom:7px}
.mod-despacho .tarj b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.mod-despacho .tarj .pz{font-size:12px}
.mod-despacho .tarj .ref,.mod-despacho .tarj .por{font-size:11px;color:var(--meta)}
.mod-despacho .tarj.vencida .por{color:var(--alarma);font-weight:600}
.mod-despacho .tarj.trabada{border-color:var(--alarma)}