@font-face{font-family:'IBM Plex Sans';src:url(/estatico/fuentes/IBMPlexSans.woff2) format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/estatico/fuentes/IBMPlexMono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/estatico/fuentes/IBMPlexMono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --fondo:#f3f4f7;--tinta:#1b2333;--marino:#13254a;--suave:#5b6475;--borde:#e1e4ea;--linea:#eceef2;
  --enlace:#1f4fa8;--hover:#f6f8fb;--sel:#eef2f9;
  --ok:#2f9a5c;--ok-bg:#e3f4ea;--ok-fg:#1d6b3f;
  --warn:#d9a21b;--warn-bg:#fbf1d6;--warn-fg:#7d5800;
  --mal:#d64034;--mal-bg:#fbe3e1;--mal-fg:#a1241b;
  --gris:#8a909c;--gris-bg:#eceef2;--gris-fg:#4a505c;
  --peligro:#b0182e;--mono:'IBM Plex Mono',ui-monospace,Consolas,monospace
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:14px/1.5 'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--enlace)}
code,.mono{font-family:var(--mono);font-size:12px}
code{background:#f1f3f6;padding:1px 6px;border-radius:4px}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(214,64,52,.45)}70%{box-shadow:0 0 0 10px rgba(214,64,52,0)}100%{box-shadow:0 0 0 0 rgba(214,64,52,0)}}

/* ── barra superior y pestañas ───────────────────────────────────────── */
.top{background:var(--marino);color:#fff}
.top-in{max-width:1440px;margin:0 auto;padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.marca strong{font-size:16px;font-weight:600}
.marca span{color:#9aa8c4;font-size:15px}
.quien{display:flex;align-items:center;gap:14px;font-size:13px}
.quien form{margin:0}
.tabs{background:#fff;border-bottom:1px solid var(--borde)}
.tabs-in{max-width:1440px;margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto}
.tabs a{display:block;padding:12px 14px;color:var(--suave);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--tinta)}
.tabs a.activa{color:var(--marino);border-bottom-color:var(--marino);font-weight:600}
.tabs .cuenta{margin-left:auto;font-weight:400;color:var(--suave);font-size:12px;padding:13px 0;white-space:nowrap}

main{max-width:1440px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.js .panel-tab{display:none}
.js .panel-tab.visible{display:flex}
.panel-tab{flex-direction:column;gap:20px}
#monitor{display:flex;flex-direction:column;gap:20px}

/* ── tarjetas ────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--borde);border-radius:8px}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--linea)}
.card-head h2{margin:0;font-size:17px;font-weight:600}
.card-head h2 small{font-size:12px;color:var(--suave);font-weight:400;margin-left:8px}
.card-body{padding:18px}
.sub{margin:2px 0 0;color:var(--suave);font-size:12.5px}
.nota{font-size:12px;color:var(--suave)}

/* ── cifras ──────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kpi .k{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:28px;font-weight:600;line-height:1.15}
.kpi.ok{border-top:3px solid var(--ok)}.kpi.ok .v{color:#227a48}
.kpi.warn{border-top:3px solid var(--warn)}.kpi.warn .v{color:#9a6c00}
.kpi.mal{border-top:3px solid var(--mal)}.kpi.mal .v{color:#b4291f}
.kpi.gris{border-top:3px solid var(--gris)}.kpi.gris .v{color:var(--gris-fg)}
.kpi .v.mono{font-family:var(--mono);font-size:24px}

/* ── controles ───────────────────────────────────────────────────────── */
.controles{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.segm{display:flex;gap:4px;background:#f1f3f6;border-radius:6px;padding:3px}
.segm button{border:0;border-radius:4px;padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer;background:transparent;color:var(--suave)}
.segm button.activo{background:#fff;color:var(--tinta);box-shadow:0 1px 2px rgba(0,0,0,.1)}
input,textarea,select{font:inherit;font-size:13px;padding:7px 10px;border:1px solid #d3d7df;border-radius:6px;background:#fff;color:var(--tinta);width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid #bcd0f2;outline-offset:0;border-color:#9bb6e6}
input[type=checkbox]{width:auto}
#buscar{width:220px}
label{display:block;font-size:12px;color:var(--suave);margin:12px 0 4px}
button,.btn{border:0;border-radius:6px;padding:8px 14px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;background:var(--marino);color:#fff}
button.claro{background:#e9edf4;color:var(--marino)}
button.borde{background:#fff;color:var(--tinta);border:1px solid #d3d7df}
button.peligro{background:var(--peligro)}
button:disabled{opacity:.45;cursor:not-allowed}

/* ── pastillas ───────────────────────────────────────────────────────── */
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500;white-space:nowrap}
.p-linea,.p-ok,.p-al-dia{background:var(--ok-bg);color:var(--ok-fg)}
.p-retraso,.p-aviso,.p-pendiente{background:var(--warn-bg);color:var(--warn-fg)}
.p-sin-contacto,.p-mal{background:var(--mal-bg);color:var(--mal-fg)}
.p-nunca,.p-suspendida,.p-gris,.p-sin-soporte{background:var(--gris-bg);color:var(--gris-fg)}
.punto{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gris)}
.c-linea .punto,.c-linea .pantalla i{background:var(--ok)}
.c-retraso .punto,.c-retraso .pantalla i{background:var(--warn)}
.c-sin-contacto .punto,.c-sin-contacto .pantalla i{background:var(--mal)}
.punto.c-linea{background:var(--ok)}.punto.c-retraso{background:var(--warn)}.punto.c-sin-contacto{background:var(--mal)}
.ver-ok{color:#227a48}.ver-va{color:#9a6c00}

/* ── vista mosaico ───────────────────────────────────────────────────── */
.mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:18px}
.tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px 14px;border-radius:8px;border:1px solid var(--borde);background:#fff;text-align:center;min-width:0}
.tile:hover{background:var(--hover)}
.tile:focus-visible{outline:2px solid var(--enlace);outline-offset:2px}
.tile.c-sin-contacto{background:#fff7f6}
.tile.susp{background:#f7f8fa}
.equipo{display:flex;flex-direction:column;align-items:center}
.pantalla{width:74px;height:50px;border-radius:5px;background:#1d2738;border:4px solid var(--gris);display:flex;align-items:center;justify-content:center}
.pantalla i{width:12px;height:12px;border-radius:50%;background:var(--gris)}
.c-linea .pantalla{border-color:var(--ok)}
.c-retraso .pantalla{border-color:var(--warn)}
.c-sin-contacto .pantalla{border-color:var(--mal)}
.c-sin-contacto .pantalla i{animation:pulso 1.6s infinite}
.susp .pantalla{border-color:var(--gris)}.susp .pantalla i{background:var(--gris);animation:none}
.pie1{width:10px;height:7px;background:#9aa2b0}.pie2{width:36px;height:4px;border-radius:2px;background:#9aa2b0}
.tile .nom{font-weight:600;font-size:14px}
.tile .dom{font-size:12px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.tile .fila{display:flex;gap:6px;align-items:center;font-size:11.5px;flex-wrap:wrap;justify-content:center}
.tile .hace{font-size:11.5px;color:var(--suave)}

/* ── tablas ──────────────────────────────────────────────────────────── */
.tabla-env{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:#f6f7f9;color:var(--suave);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;text-align:left;font-weight:500;padding:10px 8px}
td{padding:10px 8px;border-top:1px solid var(--linea);vertical-align:top}
th:first-child,td:first-child{padding-left:18px}
th:last-child,td:last-child{padding-right:18px}
tr.clic{cursor:pointer}
tr.clic:hover{background:var(--hover)}
td .nota{margin-top:2px}
.vacio{padding:40px;text-align:center;color:var(--suave);font-size:14px}

/* ── problemas ───────────────────────────────────────────────────────── */
.prob{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;padding:10px 18px;border-top:1px solid #f0f1f4;font-size:13px;cursor:pointer}
.prob:first-of-type{border-top:0}
.prob:hover{background:var(--hover)}
.prob .pill{justify-self:start}
.sin-prob{padding:18px;color:#227a48;font-size:13.5px}

/* ── panel lateral ───────────────────────────────────────────────────── */
#velo{position:fixed;inset:0;background:rgba(19,37,74,.25);z-index:10}
#cajon{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100%;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.12);display:flex;flex-direction:column;overflow-y:auto;z-index:11}
.js #detalles{display:none}
.det{display:flex;flex-direction:column;min-height:100%}
#detalles .det{background:#fff;border:1px solid var(--borde);border-radius:8px;margin-top:12px}
.det-head{padding:18px 20px;border-bottom:1px solid var(--linea);display:flex;gap:14px;align-items:center}
.det-head .pantalla{width:48px;height:34px;border-width:3px;flex-shrink:0}
.det-head .pantalla i{width:9px;height:9px}
.det-head .t{flex:1;min-width:0}
.det-head .t div{font-weight:600;font-size:17px}
.cerrar{background:#f1f3f6;color:var(--tinta);border-radius:4px;width:30px;height:30px;padding:0;font-size:18px;line-height:1;align-items:center;justify-content:center;flex-shrink:0}
.no-js-oculto{display:none}.js .no-js-oculto{display:inline-flex}
dl.datos{margin:0;padding:16px 20px;display:grid;grid-template-columns:110px 1fr;gap:10px 12px;font-size:13px}
dl.datos dt{color:var(--suave)}
dl.datos dd{margin:0;min-width:0;overflow-wrap:anywhere}
.det-acc{margin-top:auto;padding:16px 20px;border-top:1px solid var(--linea)}
.det-acc h3{margin:0 0 4px;font-size:13px}
.det-acc form{display:flex;flex-direction:column;gap:8px}
.det-acc label{margin:4px 0 0}

/* ── avisos, otras secciones ─────────────────────────────────────────── */
.aviso-caja{padding:11px 14px;border-radius:8px;font-size:13px}
.aviso-caja.bien{background:var(--ok-bg);color:var(--ok-fg)}
.aviso-caja.mal{background:var(--mal-bg);color:var(--mal-fg)}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.check{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:13px;color:var(--tinta)}
details summary{cursor:pointer;color:var(--enlace);font-size:13px;margin-top:14px}
.acciones{display:flex;gap:6px;flex-wrap:wrap}
.acciones form{margin:0}

/* ── entrada ─────────────────────────────────────────────────────────── */
.entrada{min-height:100vh;display:grid;place-items:center;padding:16px}
.entrada form{background:#fff;border:1px solid var(--borde);border-radius:10px;padding:28px;width:100%;max-width:360px}
.entrada h1{font-size:18px;margin:0}
.entrada p{margin:2px 0 14px;color:var(--suave);font-size:13px}
.entrada button{width:100%;margin-top:18px}

@media(max-width:820px){
  .rejilla{grid-template-columns:1fr}
  main{padding:16px}
  .top-in,.tabs-in{padding:0 16px}
  .marca span{display:none}
  #buscar{width:100%}
  .prob{grid-template-columns:1fr;gap:4px}
  .kpis{grid-template-columns:1fr 1fr}
  .quien span{display:none}
  .segm{flex-wrap:wrap}
  .controles,.controles>*{width:100%}
  .tabs .cuenta{display:none}
}