/* Tablero PAC · Operaciones — lienzo 1920×1080 (la TV 4K lo escala 2×).
   Escala de texto (REQ §7.2): base 18px · mínimo 16px · dato clave 24–28px · KPI 60px.
   Tema claro, tarjetas blancas, acentos PAC (rojo #A51024, lima #B3C944), semáforo estándar.
   Sin hover obligatorio, sin emojis, íconos SVG stroke. */
:root {
  --bg: #eef0f3; --panel: #ffffff; --ink: #111827; --muted: #6b7280; --line: #e3e6ea; --line-2: #cfd4da;
  --pac-red: #A51024; --pac-lime: #B3C944; --pac-lime-ink: #5f6f12;
  --ok: #16a34a; --ok-bg: #dcfce7; --warn: #d97706; --warn-bg: #fef3c7; --bad: #dc2626; --bad-bg: #fee2e2;
  --gris: #9ca3af; --gris-bg: #f3f4f6; --azul: #2563eb; --azul-bg: #dbeafe;
  --f-base: 18px; --f-min: 16px; --f-clave: 24px; --f-titulo: 28px; --f-kpi: 60px;
  --radio: 12px; --sombra: 0 1px 2px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.05);
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); font-size: var(--f-base); line-height: 1.25;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; overflow: hidden;
}
body.modo-escritorio { overflow: auto; }
.ico { width: 1em; height: 1em; vertical-align: -0.15em; flex: none; }

/* ---------- cabecera ---------- */
.top { height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 28px; background: var(--panel); border-bottom: 1px solid var(--line); }
.marca { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.marca-pac { color: var(--pac-red); font-size: 26px; letter-spacing: .08em; }
.marca-sep { width: 1px; height: 26px; background: var(--line-2); }
.marca-txt { color: var(--muted); font-weight: 600; }
.tabs { display: flex; gap: 6px; margin-left: 12px; }
.tab { position: relative; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 20px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.tab.activa { background: var(--ink); color: #fff; }
.tab-pag { font-size: var(--f-min); opacity: .8; }
.tab-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.18); }
.tab-progreso > span { display: block; height: 100%; background: var(--pac-lime); transition: width .9s linear; }
.estado { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: var(--f-base); color: var(--muted); }
.usuario { display: flex; align-items: center; gap: 8px; }
.actualizado { display: flex; align-items: center; gap: 8px; }
.desde { display: flex; align-items: center; gap: 8px; }
.actualizado.caida { color: var(--bad); font-weight: 600; }
.reloj { font-size: var(--f-titulo); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.aviso-caida { display: flex; align-items: center; gap: 12px; background: var(--bad); color: #fff; padding: 10px 28px; font-size: 20px; }

/* ---------- KPIs ---------- */
.kpis { display: flex; align-items: stretch; gap: 14px; padding: 12px 28px 0; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radio); padding: 8px 18px 8px; min-width: 180px; box-shadow: var(--sombra); }
.kpi-valor { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.kpi-de { font-size: 20px; color: var(--muted); font-weight: 600; }
.kpi-label { font-size: var(--f-min); color: var(--muted); margin-top: 4px; white-space: nowrap; }
.kpi.alerta .kpi-valor { color: var(--bad); }
.kpi-interno .kpi-valor { color: var(--muted); }
.filtros { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); flex-wrap: wrap; }
.filtros-grupo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font: inherit; font-size: var(--f-min); padding: 6px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip.cruzado { background: var(--azul); border-color: var(--azul); }
.chip.limpiar { color: var(--pac-red); border-color: var(--pac-red); }
.sel { font: inherit; font-size: var(--f-min); padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); color: var(--ink); max-width: 260px; }

/* ---------- kanban ---------- */
.tablero { flex: 1; display: flex; gap: 12px; padding: 12px 28px 8px; min-height: 0; overflow: hidden; }
body.modo-escritorio .tablero { overflow-x: auto; min-height: calc(100vh - 170px); }
.col { flex: 1 1 0; min-width: 200px; display: flex; flex-direction: column; min-height: 0; background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: var(--radio); }
body.modo-escritorio .col { min-width: 260px; max-width: 360px; }
.col.slim { flex: 0 0 44px; min-width: 44px; background: transparent; border-style: dashed; }
.col.slim .col-cab { writing-mode: vertical-rl; transform: rotate(180deg); border: 0; justify-content: flex-end; padding: 10px 0; gap: 8px; }
.col.slim .col-cuerpo, .col.slim .col-mas { display: none; }
.col-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.col-titulo { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.col-code { font-size: var(--f-base); font-weight: 800; background: var(--azul-bg); color: #1e40af; border-radius: 6px; padding: 0 7px; line-height: 28px; flex: none; }
.col-n { margin-left: auto; font-size: 20px; font-weight: 800; background: var(--ink); color: #fff; border-radius: 999px; padding: 0 10px; min-width: 32px; text-align: center; line-height: 30px; white-space: nowrap; flex: none; }
.col.vacia .col-n { background: var(--gris-bg); color: var(--muted); }
.col-fuera { font-size: var(--f-min); color: var(--muted); white-space: nowrap; }
.col-cuerpo { flex: 1; min-height: 0; overflow: hidden; padding: 10px; display: flex; flex-direction: column; gap: 10px; position: relative; }
body.modo-escritorio .col-cuerpo { overflow-y: auto; }
.col-mas { text-align: center; color: var(--muted); font-size: 20px; font-weight: 700; padding: 6px; border-top: 1px dashed var(--line-2); }
.col-vacia { color: var(--gris); text-align: center; padding: 20px; font-size: 24px; }
.card.oculta { display: none; }

/* tarjeta */
.card { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--line-2); border-radius: 10px; box-shadow: var(--sombra); flex: none; cursor: default; }
body.modo-escritorio .card { cursor: pointer; }
.card-in { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 6px; }
.fila-1 { display: flex; align-items: center; gap: 8px; }
.card-nombre { font-size: var(--f-clave); font-weight: 800; letter-spacing: -.01em; }
.tiempo { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 700; color: var(--ink); background: var(--gris-bg); padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila-2 { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--gris-bg); flex: none; border: 1px solid var(--line); }
.texto { min-width: 0; }
.cliente { font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.producto { font-size: var(--f-base); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--f-min); }
.compromiso { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--f-base); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.compromiso > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.punto { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.sem-verde { color: var(--ok); } .sem-amarillo { color: var(--warn); } .sem-rojo { color: var(--bad); } .sem-gris { color: var(--gris); }
.badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.badge { font-size: var(--f-min); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 6px; background: var(--gris-bg); color: var(--muted); }
.badge-palto { background: var(--pac-lime); color: #1f2a00; }
.badge-eto { background: #ede9fe; color: #5b21b6; } .badge-mto { background: var(--azul-bg); color: #1e40af; }
.badge-mts { background: var(--ok-bg); color: #166534; } .badge-ato { background: #ffedd5; color: #9a3412; }
.badge-interno { background: var(--gris-bg); color: var(--muted); }
.badge-flag { background: #fef9c3; color: #854d0e; text-transform: none; letter-spacing: 0; }
.badge-frenada { background: var(--bad-bg); color: #991b1b; text-transform: none; letter-spacing: 0; }
.ticks { display: inline-flex; gap: 6px; }
.tick { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--gris); font-size: var(--f-min); }
.tick .ico { opacity: .35; } .tick.ok { color: var(--ok); } .tick.ok .ico { opacity: 1; } .tick.parcial { color: var(--warn); }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-left: auto; border: 1px solid var(--line); background: var(--gris-bg); }
.operadores { display: inline-flex; gap: -4px; margin-left: auto; }
.operadores .avatar { margin-left: -8px; width: 34px; height: 34px; border: 2px solid #fff; }
.proximo { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 20px; color: var(--ink); background: var(--gris-bg); padding: 1px 9px; border-radius: 6px; }
.pend { color: var(--muted); font-weight: 600; font-size: var(--f-base); }
.cant { color: var(--muted); font-size: var(--f-min); white-space: nowrap; }
.barra { height: 7px; background: var(--gris-bg); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: currentColor; border-radius: 999px; }
.barra > .sem-ot { background: var(--azul); }
.acciones { display: flex; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--line); }
.btn-mini { font: inherit; font-size: var(--f-min); border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 6px; padding: 3px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.btn-mini:hover { border-color: var(--ink); }

/* borde izquierdo de la tarjeta = semáforo (NP) o estado (OP) */
.card.sem-verde { border-left-color: var(--ok); } .card.sem-amarillo { border-left-color: var(--warn); }
.card.sem-rojo { border-left-color: var(--bad); } .card.sem-gris { border-left-color: var(--line-2); }
.card.op-frenado { border-left-color: var(--bad); } .card.op-terceros { border-left-color: var(--warn); }
.card.op-otec { border-left-color: #7c3aed; } .card.op-centro { border-left-color: var(--azul); }
.card.op-control { border-left-color: var(--pac-lime); } .card.op-cerrado, .card.op-planificado { border-left-color: var(--ok); }
.card.op-marcada { outline: 2px solid #f59e0b; outline-offset: -2px; }

/* filtro: lo que no cumple NO se oculta, va abajo, colapsado y en gris (REQ §6) */
.card.dim { opacity: .55; filter: grayscale(1); border-left-color: var(--line-2) !important; }
.card.dim .fila-2, .card.dim .fila-3, .card.dim .barra, .card.dim .acciones { display: none; }
.card.dim .card-in { padding: 6px 12px; }
.card.dim .card-nombre { font-size: var(--f-base); }
.card.dim .tiempo { font-size: var(--f-min); }

/* ---------- presencia ---------- */
.presencia { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 14px 28px; align-content: start; overflow: hidden; }
body.modo-escritorio .presencia { overflow: auto; }
.persona { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 14px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-height: 250px; }
.foto-wrap { width: 104px; height: 104px; border-radius: 50%; padding: 4px; border: 4px solid var(--gris); margin-bottom: 4px; }
.est-trabajando .foto-wrap { border-color: var(--ok); } .est-libre .foto-wrap { border-color: var(--warn); }
.est-ausente { opacity: .6; } .est-ausente .foto { filter: grayscale(1); }
.foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--gris-bg); }
.p-nombre { font-size: var(--f-clave); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.p-puesto { font-size: var(--f-min); color: var(--muted); min-height: 1.3em; }
.p-ot { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.chip-ot { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-base); font-weight: 800; padding: 4px 12px; border-radius: 999px; border: 2px solid currentColor; }
.chip-ot-centro { font-size: var(--f-min); background: currentColor; border-radius: 4px; padding: 0 6px; }
.chip-ot-centro { color: #fff; position: relative; }
.ot-verde { color: var(--ok); } .ot-ambar { color: var(--warn); } .ot-rojo { color: var(--bad); } .ot-gris { color: var(--gris); }
.ot-libre { color: var(--warn); background: var(--warn-bg); } .ot-ausente { color: var(--muted); background: var(--gris-bg); border-color: var(--gris-bg); }
.p-ot-nombre { font-size: var(--f-min); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.p-avance { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.p-avance-txt { display: flex; justify-content: space-between; font-size: var(--f-min); color: var(--muted); font-weight: 700; }
.p-avance .barra > span { background: currentColor; }
.p-desde { font-size: var(--f-min); color: var(--muted); }
.vacio { grid-column: 1 / -1; color: var(--muted); font-size: var(--f-clave); text-align: center; padding: 60px; }

/* ---------- popover historial ---------- */
.popover { position: fixed; z-index: 50; width: 480px; max-height: 60vh; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radio); box-shadow: 0 12px 32px rgba(17,24,39,.18); display: flex; flex-direction: column; }
.pop-cab { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 20px; }
.pop-cuerpo { overflow: auto; padding: 6px 0; }
.pop-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 14px; font-size: var(--f-min); border-bottom: 1px dashed var(--line); }
.pop-fila.abierta { font-weight: 700; }
.pop-etapa { color: var(--ink); } .pop-fechas { color: var(--muted); font-variant-numeric: tabular-nums; } .pop-dur { font-weight: 700; }

/* ---------- pie ---------- */
.pie { display: flex; justify-content: space-between; align-items: center; padding: 6px 28px 10px; color: var(--muted); font-size: var(--f-min); }
.pie-version { opacity: .7; }

/* ---------- buscador dinámico (escritorio / HDMI): resalta, no oculta ---------- */
.buscador { display: flex; align-items: center; gap: 8px; background: var(--gris-bg); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.buscador input { border: 0; background: transparent; font: inherit; font-size: var(--f-base); color: var(--ink); width: 340px; outline: none; }
.buscador:focus-within { border-color: var(--ink); background: var(--panel); }
.buscador-n { font-size: var(--f-min); font-weight: 700; color: var(--ink); white-space: nowrap; }
.card.hit { border-left-color: var(--pac-lime) !important; box-shadow: 0 0 0 3px var(--pac-lime), var(--sombra); }
.card.hit .card-nombre { background: #f3f8c9; border-radius: 6px; padding: 0 6px; margin-left: -6px; }
.persona.hit { box-shadow: 0 0 0 3px var(--pac-lime), var(--sombra); }
.persona.dim { opacity: .35; filter: grayscale(1); }
.col-n.filtrada { background: var(--pac-lime); color: #1f2a00; font-size: var(--f-min); }
/* ---------- control remoto / teclado ---------- */
.pausa { display: inline-flex; align-items: center; gap: 8px; background: var(--warn-bg); color: #92400e; font-weight: 700; padding: 4px 12px; border-radius: 999px; font-size: var(--f-base); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.tab:focus-visible { outline-color: var(--pac-lime); }