:root{
  --ground:#F5F7F9; --surface:#FFFFFF; --surface-2:#EDF1F4;
  --ink:#101820; --muted:#5D6D7B; --line:#D9E1E7;
  --accent:#0E5C6B; --accent-ink:#FFFFFF; --accent-soft:#DCEDF1;
  --rojo:#C0392B; --rojo-soft:#FBE7E4;
  --ambar:#B87A0A; --ambar-soft:#FBF0DA;
  --neutro-chip:#EEF2F5;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:6px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C1116; --surface:#141D25; --surface-2:#1B2731;
    --ink:#E2E9EF; --muted:#8B9CAB; --line:#27343E;
    --accent:#3FA8BC; --accent-ink:#08191D; --accent-soft:#123039;
    --rojo:#E8695A; --rojo-soft:#3A1D19;
    --ambar:#E0A63C; --ambar-soft:#33270F;
    --neutro-chip:#1E2A34;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1116; --surface:#141D25; --surface-2:#1B2731;
  --ink:#E2E9EF; --muted:#8B9CAB; --line:#27343E;
  --accent:#3FA8BC; --accent-ink:#08191D; --accent-soft:#123039;
  --rojo:#E8695A; --rojo-soft:#3A1D19;
  --ambar:#E0A63C; --ambar-soft:#33270F;
  --neutro-chip:#1E2A34;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.envoltura{max-width:1600px;margin:0 auto;padding:20px 22px 48px}

/* ---------- cabecera ---------- */
.cabecera{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:18px}
.cabecera h1{
  font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em;
}
.sello{
  font-family:var(--mono);font-size:10.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:100px;padding:3px 9px;
}
.sello b{color:var(--ink);font-weight:500}
.espaciador{flex:1}

/* ---------- pestanas ---------- */
.pestanas{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:var(--r);border:1px solid var(--line)}
.pestanas button{
  font:600 12px/1 var(--sans);color:var(--muted);background:none;border:0;
  padding:7px 16px;border-radius:4px;cursor:pointer;transition:background .12s,color .12s;
}
.pestanas button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.pestanas button:hover:not([aria-selected="true"]){color:var(--ink)}

/* ---------- paneles ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel > h2{
  font:600 10px/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0;padding:10px 12px 8px;
}

.rejilla{display:grid;gap:12px;margin-bottom:12px}
.rejilla.superior{grid-template-columns:minmax(280px,1.05fr) minmax(420px,2fr)}
@media (max-width:1080px){.rejilla.superior{grid-template-columns:1fr}}

/* ---------- ejecutivos ---------- */
.ejecutivos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 12px 12px}
@media (max-width:520px){.ejecutivos{grid-template-columns:repeat(2,1fr)}}
.ejecutivo{
  font:500 12px/1.25 var(--sans);color:var(--ink);text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:9px 10px;cursor:pointer;transition:border-color .12s,background .12s;
  display:flex;justify-content:space-between;align-items:center;gap:6px;
}
.ejecutivo:hover{border-color:var(--accent)}
.ejecutivo[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ejecutivo .n{font-family:var(--mono);font-size:10.5px;opacity:.65;font-variant-numeric:tabular-nums}

/* ---------- medidores de semaforo ---------- */
.medidores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 12px}
@media (max-width:900px){.medidores{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.medidores{grid-template-columns:1fr}}
.medidor{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.medidor h3{
  font:600 9.5px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0;padding:8px 9px 7px;background:var(--surface-2);
}
.tramos{display:flex}
/* `color` explicito: los <button> NO heredan el color del texto, los
   navegadores les dan el del sistema (negro). Sin esto, el contador de
   "sin marca" -- que suele ser el numero mas grande del semaforo -- queda
   negro sobre el fondo oscuro y no se lee. */
.tramo{
  flex:1;border:0;border-left:1px solid var(--line);background:var(--surface);
  color:var(--ink);
  padding:8px 4px 9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:background .12s;
}
.tramo:first-child{border-left:0}
.tramo:hover{background:var(--surface-2)}
.tramo .n{font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.tramo .e{font:500 9px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tramo[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}
.tramo.rojo .n{color:var(--rojo)}
.tramo.ambar .n{color:var(--ambar)}
.punto{width:9px;height:9px;border-radius:50%;display:inline-block}
.punto.rojo{background:var(--rojo)}
.punto.ambar{background:var(--ambar)}
.punto.vacio{border:1.5px solid var(--line);background:none}

/* ---------- estado y total ---------- */
.fila-estado{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:760px){.fila-estado{grid-template-columns:1fr}}
.estados{display:flex;gap:6px;padding:0 12px 12px;flex-wrap:wrap}
.estado{
  flex:1;min-width:120px;font:500 12px/1.2 var(--sans);
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:9px 11px;cursor:pointer;text-align:left;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:8px;transition:border-color .12s;
}
.estado:hover{border-color:var(--accent)}
.estado[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.estado .n{font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;opacity:.7}
.total{display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
.total .n{font:600 34px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.total .e{font:500 9.5px/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ---------- controles ---------- */
.controles{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 12px 12px}
label.campo{display:flex;flex-direction:column;gap:4px}
label.campo > span{font:600 9.5px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
select,input[type="date"],input[type="search"]{
  font:400 12px/1 var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:7px 8px;min-width:130px;
}
input[type="search"]{min-width:190px}
.limpiar{
  font:600 11px/1 var(--sans);color:var(--accent);background:none;
  border:1px solid var(--accent);border-radius:4px;padding:7px 12px;cursor:pointer;align-self:flex-end;
}
.limpiar:hover{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- tabla ---------- */
.marco-tabla{overflow:auto;max-height:62vh;border-top:1px solid var(--line)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:11.5px}
thead th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);
  font:600 9.5px/1.2 var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
tbody tr:hover td{background:var(--surface-2)}
td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px}
td.ancho{white-space:normal;min-width:190px;max-width:280px}
.celda{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}
.pastilla{
  display:inline-block;font:500 10px/1 var(--sans);padding:3px 7px;border-radius:100px;
  background:var(--neutro-chip);color:var(--muted);white-space:nowrap;
}
.pastilla.atrasado{background:var(--rojo-soft);color:var(--rojo);font-weight:600}
.pastilla.sin{background:var(--ambar-soft);color:var(--ambar);font-weight:600}
.pastilla.origen-simplgo{background:var(--accent-soft);color:var(--accent);font-weight:600}
.vacia{padding:40px 12px;text-align:center;color:var(--muted);font-size:12px}

/* ---------- matriz ---------- */
.rejilla.matriz{grid-template-columns:minmax(0,2.1fr) minmax(260px,1fr)}
@media (max-width:1080px){.rejilla.matriz{grid-template-columns:1fr}}
.barra-fondo{position:relative}
.barra-fondo::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;
  width:var(--w,0%);background:var(--accent-soft);border-radius:2px;
}
.barra-fondo > *{position:relative}
tfoot td{
  font-weight:600;border-top:1px solid var(--line);background:var(--surface-2);padding:7px 9px;
}
.nota{padding:10px 12px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}
.oculto{display:none}