/* ====================================================================
   Wardian · Centro de Monitoreo — tema (seguridad / institucional)
   Pensado para uso de jornada completa por personal con formación básica:
   alto contraste, tipografía grande, botones amplios, jerarquía clara.
   ==================================================================== */
:root{
  --bg:#0a1020; --bg-2:#0c1426; --panel:#101a30; --panel-2:#0d1526;
  --surface:#16233f; --line:#22314f; --line-soft:#1a2740;
  --ink:#eef2fb; --ink-soft:#9fb0cc; --ink-dim:#6b7c9c;
  --accent:#3b82f6; --accent-2:#2563eb; --accent-soft:#bfdbfe; --cyan:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b; --error:#ef4444; --info:#0ea5e9;
  --crit:#ef4444; --alta:#f97316; --media:#eab308; --baja:#38bdf8;
  --radius:14px; --radius-sm:10px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}



*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin:0}
h2{font-size:1.1rem;font-weight:700;margin:0 0 6px}
a{color:inherit;text-decoration:none}
.muted{color:var(--ink-soft)}

/* Marca */
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.25rem;color:#fff}
.brand .ring{width:28px;height:28px;flex:none}
.brand small{display:block;font-size:.56rem;font-weight:800;letter-spacing:.22em;color:var(--cyan);margin-top:-2px}
.brand-lg{font-size:1.6rem;justify-content:center;margin-bottom:18px}
.brand-lg .ring{width:38px;height:38px}
.brand-lg small{font-size:.62rem;letter-spacing:.26em}

/* ---------- Login ---------- */
.login-body{display:grid;place-items:center;min-height:100vh;
  background:radial-gradient(900px 500px at 80% -10%,rgba(59,130,246,.18),transparent 60%),
  radial-gradient(700px 500px at 0% 110%,rgba(14,165,233,.14),transparent 55%),
  linear-gradient(180deg,var(--bg),var(--bg-2))}
.login-wrap{width:min(410px,92vw)}
.login-card{background:rgba(16,26,48,.9);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:20px;padding:36px 32px;box-shadow:var(--shadow)}
.login-card h1{font-size:1.5rem;text-align:center}
.login-sub{text-align:center;color:var(--ink-soft);margin:.3rem 0 1.4rem;font-size:.95rem}
.login-foot{text-align:center;color:var(--ink-dim);font-size:.8rem;margin-top:18px}

/* ---------- Campos / botones ---------- */
.field{margin-bottom:15px}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:6px;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#0b1426;color:var(--ink);font:inherit;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;
  font-weight:700;font-size:1rem;padding:13px 22px;border-radius:12px;border:1px solid transparent;
  transition:transform .12s,box-shadow .12s,background .15s}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 12px 30px -10px rgba(59,130,246,.55)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--accent);color:#fff}
.btn-danger{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.45);color:#fca5a5}
.btn-danger:hover{background:rgba(239,68,68,.22)}
.btn-block{width:100%}
.btn-sm{padding:9px 14px;font-size:.9rem}
.alert-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fecaca;
  padding:12px 14px;border-radius:var(--radius-sm);font-size:.92rem;font-weight:600;margin-bottom:14px}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;height:62px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;background:rgba(10,16,32,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar-right{display:flex;align-items:center;gap:14px}
.user{color:var(--ink-soft);font-weight:600;font-size:.92rem}
.badge{display:inline-flex;align-items:center;font-size:.74rem;font-weight:800;letter-spacing:.04em;
  padding:5px 12px;border-radius:999px;text-transform:uppercase}
.badge-rol{background:rgba(59,130,246,.16);color:var(--accent-soft);border:1px solid rgba(59,130,246,.4)}
.btn-logout{font-weight:700;font-size:.88rem;color:var(--ink-soft);border:1px solid var(--line);
  padding:9px 15px;border-radius:999px;transition:.15s}
.btn-logout:hover{color:#fff;border-color:var(--error)}

/* ---------- Shell (sidebar + content) ---------- */
.shell{display:flex;min-height:calc(100vh - 62px)}
.side{width:256px;flex:none;background:var(--panel-2);border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.side-link{padding:13px 15px;border-radius:var(--radius-sm);color:var(--ink-soft);font-weight:600;font-size:.98rem;transition:.12s}
.side-link:hover{background:var(--surface);color:#fff}
.side-link.active{background:rgba(59,130,246,.14);color:var(--accent-soft);border:1px solid rgba(59,130,246,.32)}
.side-sep{margin:10px 8px 4px;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.content{flex:1;padding:28px 30px;max-width:1700px;width:100%;margin:0 auto}
.content-full{max-width:none;padding:20px 22px}
@media(max-width:860px){.side{display:none}.content{padding:18px 14px}}

/* ---------- Encabezado de página ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:14px;flex-wrap:wrap}
.page-head .sub{color:var(--ink-soft);font-size:.92rem;margin-top:2px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}

.flash{padding:13px 16px;border-radius:10px;font-weight:600;margin-bottom:16px;font-size:.95rem}
.flash-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#86efac}
.flash-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5}
.flash-info{background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.4);color:#7dd3fc}
.flash code{background:rgba(255,255,255,.1);padding:2px 7px;border-radius:6px;font-size:.92em}

/* ---------- Tarjetas / formularios ---------- */
.mod-grid{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start}
@media(max-width:960px){.mod-grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h2{font-size:1.05rem;margin-bottom:16px}
.form-stack{display:flex;flex-direction:column;gap:13px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.hint{font-size:.85rem;color:var(--ink-soft);margin-top:5px}

/* ---------- Tablas ---------- */
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim);
  font-weight:800;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel-2)}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr:hover{background:#0e1830}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .center{text-align:center}
.tbl .sub{color:var(--ink-dim);font-size:.8rem;margin-top:1px}
.tbl tr.is-baja{opacity:.5}
.tbl .actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.empty{padding:34px;text-align:center;color:var(--ink-dim)}

/* ---------- Chips / estados ---------- */
.chip{display:inline-flex;align-items:center;font-size:.74rem;font-weight:800;padding:4px 10px;border-radius:99px;text-transform:capitalize}
.chip-on,.est-activo,.est-asignado,.est-activa{background:rgba(34,197,94,.15);color:#86efac}
.chip-off,.est-baja{background:var(--surface);color:var(--ink-dim)}
.est-stock{background:rgba(56,189,248,.15);color:#7dd3fc}
.est-suspendido,.est-suspendida,.est-reparacion{background:rgba(245,158,11,.15);color:#fcd34d}
.chip-mono{background:rgba(59,130,246,.12);color:var(--accent-soft);font-family:ui-monospace,monospace}
.dot-state{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem}
.dot-state::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.st-on{color:var(--ok)} .st-off{color:var(--ink-dim)}

/* Vencimiento de saldo (chips) */
.venc{display:inline-block;font-weight:700;font-size:.85rem;padding:3px 9px;border-radius:7px;white-space:nowrap}
.venc-ok{color:var(--ink-soft)}
.venc-soon{color:#fcd34d;background:rgba(245,158,11,.16)}
.venc-bad{color:#fca5a5;background:rgba(239,68,68,.18)}

/* Notas técnicas (runbook) */
.nota{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.nota-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.nota-head h2{font-size:1.12rem;color:var(--accent-soft);margin:0}
.nota-head .actions{display:flex;gap:6px;align-items:center}
.nota-cont{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;line-height:1.55;color:var(--ink);background:#0b1426;border:1px solid var(--line-soft);border-radius:10px;padding:14px 15px;overflow-x:auto}
.nota-foot{font-size:.78rem;margin-top:9px}

.btn-x{background:transparent;border:1px solid var(--line);color:var(--ink-soft);width:34px;height:34px;border-radius:8px;cursor:pointer;font-weight:700;line-height:1}
.btn-x:hover{border-color:var(--error);color:var(--error)}

/* Listas de items dentro de un modal (protegidas, balizas).
   La clase se usaba en las vistas pero no estaba definida: los items se
   apilaban sin caja y el boton de quitar caia debajo del texto. */
.lista{display:flex;flex-direction:column;gap:8px}
.lista-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px}
.lista-item > div{min-width:0;flex:1 1 auto}
.lista-item .sub{margin-top:3px}
.lista-item form{margin:0;flex:0 0 auto;display:flex}
.lista-item code{font-size:.86rem;color:var(--ink-soft)}

/* ---------- Dashboards ---------- */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px}
.stat{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;text-decoration:none;color:var(--ink);transition:border-color .14s,transform .14s,box-shadow .14s}
.stat:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.stat .k{display:block;color:var(--ink-dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.stat .v{display:block;font-size:2.1rem;font-weight:800;line-height:1}
.stat .v small{font-size:.74rem;font-weight:700;color:var(--ink-soft)}
.stat .s{display:block;color:var(--ink-soft);font-size:.85rem;margin-top:7px}
.stat.alarm{border-color:rgba(239,68,68,.5);background:linear-gradient(180deg,rgba(239,68,68,.1),var(--panel))}
.stat.alarm .v{color:#fca5a5}
.stat.warn-b{border-color:rgba(245,158,11,.5)} .stat.warn-b .v{color:#fcd34d}
.dash-sub{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);margin:0 0 12px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.quick{position:relative;display:block;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-decoration:none;color:var(--ink);transition:border-color .14s,transform .14s}
.quick:hover{border-color:var(--accent);transform:translateY(-2px)}
.quick h3{margin:0 0 6px;font-size:1.05rem}
.quick p{margin:0;color:var(--ink-soft);font-size:.88rem}

/* ---------- Prioridades ---------- */
.prio-crit{color:var(--crit)} .prio-alta{color:var(--alta)} .prio-media{color:var(--media)} .prio-baja{color:var(--baja)}
.prio-falsa_alarma{color:#9ca3af}

/* ====================================================================
   Consola del operador (alertas en tiempo real)
   ==================================================================== */
.console{display:grid;grid-template-columns:380px 1fr;gap:16px;height:calc(100vh - 110px)}
@media(max-width:900px){.console{grid-template-columns:1fr;height:auto}}
.queue{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
.queue-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}
.queue-head h1{font-size:1.3rem}
.queue-sub{padding:0 16px 12px;color:var(--ink-soft);font-size:.88rem;border-bottom:1px solid var(--line)}
.queue-sub #queue-count{color:#fff;font-weight:800}
.ws-state{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.85rem;color:var(--ok)}
.ws-state .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.ws-state.off{color:var(--warn)} .ws-state.off .dot{background:var(--warn);box-shadow:none}
/* Barra de espera: cuántas alertas no tomó nadie y hace cuánto espera la más
   vieja. Escala de color por antigüedad, porque el problema no es que haya
   alertas sino que lleven tiempo sin que nadie las mire. */
.espera{display:flex;align-items:baseline;gap:9px;margin:0 12px 2px;padding:9px 13px;
  border-radius:10px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.4)}
.espera .n{font-weight:800;font-size:1.15rem;color:var(--warn);font-variant-numeric:tabular-nums}
.espera .txt{font-weight:700;font-size:.86rem;color:var(--warn)}
.espera .vieja{margin-left:auto;font-size:.84rem;color:var(--ink-soft)}
.espera .vieja b{font-variant-numeric:tabular-nums;color:var(--ink)}
.espera.viejo{background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.5)}
.espera.viejo .n,.espera.viejo .txt{color:var(--alta)}
.espera.critico{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.6)}
.espera.critico .n,.espera.critico .txt{color:var(--crit)}

/* Espera vencida en una tarjeta concreta. El umbral depende de la prioridad:
   un minuto en una crítica es distinto de un minuto en una media. */
.alert-card.espera-1{border-color:rgba(249,115,22,.55)}
.alert-card.espera-2{border-color:rgba(239,68,68,.7)}
.ac-top .cron.espera-1{color:var(--alta);font-weight:700}
.ac-top .cron.espera-2{color:var(--crit);font-weight:800}

.queue-list{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:11px}
.q-empty{padding:30px 12px;text-align:center;color:var(--ink-dim)}

.alert-card{background:#0e1830;border:1px solid var(--line);border-left:6px solid var(--media);border-radius:12px;padding:13px 14px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.alert-card:hover{border-color:var(--accent)}
.alert-card.active{outline:2px solid var(--accent);outline-offset:-1px}
.alert-card.p-critica{border-left-color:var(--crit)}
.alert-card.p-alta{border-left-color:var(--alta)}
.alert-card.p-media{border-left-color:var(--media)}
.alert-card.p-baja{border-left-color:var(--baja)}
.alert-card.taken{opacity:.7}
.alert-card.breach{animation:breach 1s infinite}
@keyframes breach{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.6)}}
.ac-top{display:flex;align-items:center;gap:8px}
.ac-top .tipo{font-weight:800;font-size:.85rem;letter-spacing:.02em}
.ac-top .reps{background:rgba(239,68,68,.22);color:#fecaca;font-weight:800;font-size:.7rem;padding:2px 7px;border-radius:99px}
.ac-top .cron{margin-left:auto;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:.85rem}
.alert-card .who{font-weight:700;margin-top:5px;font-size:1.02rem}
.alert-card .meta{color:var(--ink-soft);font-size:.86rem}
.ac-foot{margin-top:10px}
.btn-mini{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:0;font-weight:800;font-size:.82rem;padding:8px 16px;border-radius:99px;cursor:pointer}
.taken-by{font-size:.82rem;color:var(--ink-dim)}

.detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
.detail-empty{height:100%;min-height:320px;display:grid;place-items:center;color:var(--ink-dim);text-align:center;gap:8px;padding:40px}
.d-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);border-left:6px solid var(--media)}
.d-head.p-critica{border-left-color:var(--crit)} .d-head.p-alta{border-left-color:var(--alta)}
.d-head.p-media{border-left-color:var(--media)} .d-head.p-baja{border-left-color:var(--baja)}
.d-tipo{font-weight:800;font-size:1.35rem;margin-right:10px}
.prio-pill{text-transform:uppercase;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px;border:1px solid}
.prio-critica.prio-pill{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.4)}
.prio-alta.prio-pill{background:rgba(249,115,22,.16);color:#fdba74;border-color:rgba(249,115,22,.4)}
.prio-media.prio-pill{background:rgba(234,179,8,.16);color:#fde047;border-color:rgba(234,179,8,.4)}
.prio-baja.prio-pill{background:rgba(56,189,248,.16);color:#7dd3fc;border-color:rgba(56,189,248,.4)}
.d-cron{color:var(--ink-soft);font-size:.92rem;white-space:nowrap}
.d-cron b{color:#fff;font-variant-numeric:tabular-nums}
.d-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 22px}
@media(max-width:1100px){.d-grid{grid-template-columns:1fr}}
.ficha{background:#0e1830;border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:14px}
.ficha h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--cyan);margin:0 0 10px}
.ficha-head{display:flex;gap:13px;align-items:center;margin-bottom:6px}
.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1e3a64,#16233f);display:grid;place-items:center;font-weight:800;color:var(--accent-soft);overflow:hidden;text-transform:uppercase;flex:none}
.avatar.av-mini{width:38px;height:38px;font-size:.78rem}
.avatar img{width:100%;height:100%;object-fit:cover}
.ficha-name{font-weight:800;font-size:1.1rem}
.ficha-row{font-size:.92rem;margin-top:9px}
.ficha-row>span{display:block;color:var(--ink-dim);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.ficha-row.med{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:9px;padding:10px}
.contacto{display:flex;flex-direction:column;background:#0b1426;border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--ink)}
.contacto span{color:var(--cyan);font-weight:700;font-size:1rem}
.map{height:300px;border-radius:12px;overflow:hidden;margin-bottom:14px;background:#0b1426;position:relative}
.map-none{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-dim)}
.leaflet-container{background:#0b1426}
.acciones{margin-bottom:14px;display:flex;flex-direction:column;gap:12px}
/* Antes era una fila sola con la etiqueta y los botones al hilo: en la columna
   angosta del detalle se partía en cualquier lado. Ahora la etiqueta tiene
   ancho fijo y los botones envuelven ordenados debajo de sí mismos. */
.prio-row{font-size:.86rem;color:var(--ink-soft);display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.prio-lbl{flex:0 0 72px;padding-top:7px;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;color:var(--ink-dim)}
.prio-btns{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.prio-btn{text-transform:capitalize;border:1px solid var(--line);background:#0b1426;color:var(--ink-soft);border-radius:99px;padding:6px 12px;font-weight:700;font-size:.8rem;cursor:pointer}
.prio-btn.prio-critica.on{background:var(--crit);border-color:var(--crit);color:#fff}
.prio-btn.prio-alta.on{background:var(--alta);border-color:var(--alta);color:#241803}
.prio-btn.prio-media.on{background:var(--media);border-color:var(--media);color:#241803}
.prio-btn.prio-baja.on{background:var(--baja);border-color:var(--baja);color:#06243a}
/* Falsa alarma no es un grado de urgencia sino el veredicto de la verificación:
   se distingue en gris para que no se lea como una prioridad más. */
.prio-btn.prio-falsa_alarma.on{background:#4b5563;border-color:#6b7280;color:#fff}
.prio-falsa_alarma.prio-pill{background:rgba(107,114,128,.18);color:#d1d5db;border-color:rgba(107,114,128,.45)}
.alert-card.p-falsa_alarma{border-left-color:#6b7280;opacity:.62}
.d-head.p-falsa_alarma{border-left-color:#6b7280}
.acciones textarea{width:100%;background:#0b1426;border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px 13px;font:inherit;font-size:1rem;resize:vertical}
.act-row{display:flex;gap:10px}
.act-row .btn{flex:1}
.locked{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.32);color:var(--accent-soft);border-radius:10px;padding:14px;text-align:center;font-weight:700}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.88rem}
.timeline .tl-t{color:var(--ink-dim);font-variant-numeric:tabular-nums;margin-right:4px}

/* Toast / sonido visual */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:#16233f;border:1px solid var(--line);color:#fff;padding:14px 22px;border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.25s;z-index:1200;max-width:90vw;font-weight:600;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.crit{border-color:var(--crit);background:#3a1418}

/* Estado del servicio (admin) */
.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.health-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;border-left-width:5px}
.hc-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hc-dot{width:11px;height:11px;border-radius:50%;flex:none}
.hc-title{font-weight:700;font-size:.92rem;color:var(--ink-soft)}
.hc-val{font-size:1.5rem;font-weight:800;line-height:1.1}
.hc-sub{color:var(--ink-dim);font-size:.84rem;margin-top:4px}
.s-ok{border-left-color:var(--ok)} .s-ok .hc-dot{background:var(--ok)}
.s-warn{border-left-color:var(--warn)} .s-warn .hc-dot{background:var(--warn)}
.s-err{border-left-color:var(--error)} .s-err .hc-dot{background:var(--error)}
.s-off{border-left-color:var(--ink-dim)} .s-off .hc-dot{background:var(--ink-dim)}

/* Checklists (asignar operadores a grupos / permisos) */
.checklist{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px;background:#0b1426;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.chk{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.95rem}
.chk:hover{background:var(--surface)}
.chk input{width:18px;height:18px;accent-color:var(--accent);flex:none}

/* Modales */
.modal{position:fixed;inset:0;background:rgba(5,8,15,.74);display:grid;place-items:center;z-index:1100;padding:20px;backdrop-filter:blur(2px)}
.modal[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;width:min(440px,94vw);box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal-card.lg{width:min(620px,95vw)}
.modal-card h3{margin:0 0 18px;font-size:1.15rem}
.modal-actions{display:flex;gap:10px;margin-top:8px}
.modal-actions .btn{flex:1}
.hide{display:none!important}
.back{color:var(--ink-soft);margin-right:6px}
.back:hover{color:var(--accent-soft)}

/* Batería en carga: el operador tiene que poder distinguir de un vistazo
   "baja y la están cargando" de "baja y sigue bajando". */
.chg { color: var(--ok); font-weight: 600; font-size: .85em; white-space: nowrap; }

/* ===========================================================================
   Semáforo de casos — un solo juego de colores para mapa, listado y reporte.
   =========================================================================== */
.sem{font-weight:700;font-size:.78rem}
.sem-rojo{color:#ef4444} .sem-naranja{color:#f97316} .sem-amarillo{color:#eab308}
.sem-verde{color:#22c55e} .sem-gris{color:#6b7280}

/* --- Mapa en vivo --- */
.mapa-leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-soft)}
/* Va acotado a .mapa-leyenda: una clase suelta llamada .lg choca con
   .modal-card.lg y convierte cualquier modal grande en una fila horizontal. */
.mapa-leyenda .lg{display:inline-flex;align-items:center;gap:6px}
.mapa-leyenda .lg::before{content:'';width:10px;height:10px;border-radius:99px;background:currentColor}
.mapa-leyenda .lg-rojo{color:#ef4444} .mapa-leyenda .lg-naranja{color:#f97316}
.mapa-leyenda .lg-amarillo{color:#eab308} .mapa-leyenda .lg-verde{color:#22c55e}
.mapa-leyenda .lg-gris{color:#6b7280}

.mapa-wrap{display:grid;grid-template-columns:300px 1fr;gap:14px;height:calc(100vh - 190px);min-height:460px}
@media(max-width:900px){.mapa-wrap{grid-template-columns:1fr;height:auto}}
.mapa-lista{background:#0e1830;border:1px solid var(--line);border-radius:12px;overflow-y:auto}
.mapa-canvas{border:1px solid var(--line);border-radius:12px;overflow:hidden}
#m-map{width:100%;height:100%;min-height:420px}

.mi{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer}
.mi:hover{background:rgba(59,130,246,.08)}
.mi.on{background:rgba(59,130,246,.16)}
.mi-dot{flex:0 0 10px;width:10px;height:10px;border-radius:99px;margin-top:5px}
.mi-rojo .mi-dot{background:#ef4444} .mi-naranja .mi-dot{background:#f97316}
.mi-amarillo .mi-dot{background:#eab308} .mi-verde .mi-dot{background:#22c55e}
.mi-gris .mi-dot{background:#6b7280}
.mi-nom{font-weight:700;font-size:.9rem}
.mi-est{font-size:.78rem;color:var(--ink-soft)}

.mp{font-size:.85rem;color:#0b1426}
.mp-foto{width:52px;height:52px;border-radius:8px;object-fit:cover;float:right;margin-left:8px}
.mp-nom{font-weight:800;font-size:.95rem}
.mp-est{font-weight:700;margin:2px 0 5px}
.mp-row{color:#374151}
.mp-warn{color:#b45309;font-weight:600}
.mp-acc{margin-top:7px;padding-top:6px;border-top:1px solid #e5e7eb}

/* --- Reporte de alertas --- */
.filtros{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filtros label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--ink-soft)}
.filtros input,.filtros select{background:#0b1426;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:8px 10px;font:inherit}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.kpi{background:#0e1830;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.kpi .k{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);margin-bottom:5px}
.kpi b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.kpi-mal{color:#ef4444}
.tbl-wrap{overflow-x:auto}
.nowrap{white-space:nowrap}
.mini-foto{width:34px;height:34px;border-radius:7px;object-fit:cover;display:block}
.mini-none{background:#1e293b}
.btn-mini{padding:4px 9px;font-size:.75rem}
.inline{display:inline}
.req{color:#ef4444}
.d-ubic{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:.86rem}
.d-ubic a{color:var(--accent-soft);font-weight:700}

/* ===========================================================================
   Ficha del caso — columna lateral
   La versión anterior encadenaba todo en listas corridas: con seis alertas ya
   era un párrafo y no se distinguía una de otra de un vistazo.
   =========================================================================== */
.cuenta{display:inline-block;min-width:19px;padding:1px 6px;border-radius:99px;
  background:rgba(59,130,246,.22);color:var(--accent-soft);font-size:.72rem;
  font-weight:800;text-align:center;vertical-align:middle;margin-left:5px}

/* Alertas: tarjeta por alerta, con franja de color y scroll propio. El scroll
   es lo que impide que la columna crezca sin fin y empuje todo lo de abajo. */
.al-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;
  padding-right:4px;margin:-2px}
.al-list::-webkit-scrollbar{width:8px}
.al-list::-webkit-scrollbar-thumb{background:#22304d;border-radius:99px}
.al-card{background:#0b1426;border:1px solid var(--line);border-left:4px solid var(--media);
  border-radius:9px;padding:9px 11px;margin:2px}
.al-card.al-crit{border-left-color:var(--crit)} .al-card.al-alta{border-left-color:var(--alta)}
.al-card.al-media{border-left-color:var(--media)} .al-card.al-baja{border-left-color:var(--baja)}
.al-card.al-falsa_alarma{border-left-color:#6b7280;opacity:.7}
.al-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.al-top b{font-size:.9rem}
.al-bot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.al-bot time{color:var(--ink-dim);font-size:.76rem;font-variant-numeric:tabular-nums}

/* Comentarios: el autor arriba y en negrita. En un expediente, quién hizo cada
   cosa importa tanto como qué se hizo. */
.ev-list{display:flex;flex-direction:column;gap:9px;max-height:340px;overflow-y:auto;padding-right:4px;margin:-2px}
.ev-list::-webkit-scrollbar{width:8px}
.ev-list::-webkit-scrollbar-thumb{background:#22304d;border-radius:99px}
.ev-card{background:#0b1426;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin:2px}
.ev-card.ev-auto{border-style:dashed;opacity:.85}
.ev-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ev-top b{font-size:.86rem}
.ev-top time{color:var(--ink-dim);font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-tipo{display:inline-block;margin-top:4px;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-dim);background:#131f38;border-radius:5px;padding:2px 7px}
.ev-txt{margin-top:5px;font-size:.87rem;line-height:1.4;color:var(--ink-soft);
  word-break:break-word;overflow-wrap:anywhere}

/* Compartir ubicación: ahora en modal, no ocupando media página */
.ue-listo{background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.32);
  border-radius:10px;padding:12px;margin-top:6px}
.ue-listo input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}
.ue-lista{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
.d-vivo-out{margin-top:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.d-vivo-out input{flex:1 1 220px;min-width:0;background:#0b1426;border:1px solid var(--line);
  border-radius:8px;color:var(--ink);padding:8px 10px;font:inherit;font-size:.82rem}

/* Cierre de caso: la advertencia tiene que verse antes que el botón */
.alerta-dura{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.34);
  border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:.9rem;line-height:1.5}
.alerta-dura b{color:#fca5a5}
.alerta-dura div{color:var(--ink-soft);margin-top:3px}
.cc-cod{font-size:.86rem;color:var(--ink-soft);margin-bottom:6px}
.cc-cod b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.15rem;
  letter-spacing:.22em;color:#fff;background:#0b1426;border:1px solid var(--line);
  border-radius:7px;padding:3px 9px;margin:0 3px}
#cc-codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.25rem;
  letter-spacing:.28em;text-align:center}

/* Foto junto al nombre en la ficha del caso */
.ph-quien{display:flex;align-items:center;gap:14px;min-width:0}
.ph-foto{width:60px;height:60px;border-radius:12px;object-fit:cover;flex:0 0 60px;
  border:1px solid var(--line);background:#1e293b}

/* Destaca por unos segundos lo que acaba de cambiar en vivo. Sin esto, un valor
   que se actualiza solo pasa desapercibido justo cuando importa. */
@keyframes destello-kf {
  0%   { background:rgba(59,130,246,.42); }
  100% { background:transparent; }
}
.destello { animation: destello-kf 2.2s ease-out 1; border-radius:6px }
@media (prefers-reduced-motion: reduce) { .destello { animation:none } }

/* ===========================================================================
   Comunicaciones de una alerta (bitácora + envío asistido)
   =========================================================================== */
.com-log{display:flex;flex-direction:column;gap:7px;max-height:190px;overflow-y:auto;margin-bottom:10px}
.com-i{background:#0b1426;border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:8px;padding:8px 10px;font-size:.82rem}
.com-ok{border-left-color:var(--ok,#22c55e)}
.com-mal{border-left-color:#ef4444}
.com-pend{border-left-color:#eab308}
.com-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.com-top b{word-break:break-all}
.com-est{text-transform:uppercase;font-size:.66rem;letter-spacing:.05em;color:var(--ink-dim)}
.com-sub{color:var(--ink-dim);font-size:.76rem;margin-top:2px}
.com-err{color:#fca5a5}

.com-det summary{cursor:pointer;font-weight:700;font-size:.86rem;color:var(--accent-soft);
  padding:7px 0;user-select:none}
.com-dest{display:flex;flex-direction:column;gap:2px;max-height:130px;overflow-y:auto;
  border:1px solid var(--line);border-radius:8px;padding:6px;background:#0b1426;margin-bottom:8px}
.com-extra{display:flex;gap:7px;margin-bottom:8px}
.com-extra input{flex:1;min-width:0}
.com-det input,.com-det select,.com-det textarea{background:#0b1426;border:1px solid var(--line);
  border-radius:8px;color:var(--ink);padding:8px 10px;font:inherit;font-size:.85rem;width:100%}
.com-det textarea{margin:8px 0;resize:vertical;line-height:1.45}
.com-det select{width:auto}

/* Advertencia sobre el radio de restricción. No bloquea nada: el radio lo fija
   un juzgado. Declara con qué confianza puede medirse, que es distinto. */
.av-radio{border-radius:10px;padding:12px 15px;font-size:.87rem;line-height:1.5;margin-top:8px}
.av-radio b{display:block;margin-bottom:3px}
.av-critico{background:rgba(239,68,68,.11);border:1px solid rgba(239,68,68,.36);color:#fecaca}
.av-critico b{color:#fca5a5}
.av-atencion{background:rgba(234,179,8,.10);border:1px solid rgba(234,179,8,.34);color:#fde68a}
.av-atencion b{color:#fde047}

/* ===========================================================================
   Personas protegidas · tarjetas bajo el mapa
   Estaban en la columna lateral y cada una se partía en cinco líneas: son el
   otro extremo de la medida y se leen junto con el mapa, no al costado.
   =========================================================================== */
.prot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.prot-card{background:#0b1426;border:1px solid var(--line);border-left:4px solid #22c55e;
  border-radius:10px;padding:12px 14px}
.prot-card.prot-sinpos{border-left-color:#ef4444}
.prot-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.prot-top b{font-size:.96rem}
.prot-est{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;white-space:nowrap}
.prot-est.on{color:var(--ok,#22c55e)}
.prot-est.off{color:var(--ink-dim)}

/* Dos columnas: etiqueta angosta y valor. Así el valor nunca queda en una
   columna de 40 px envolviéndose letra por letra. */
.prot-datos{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:.86rem;align-items:baseline}
.prot-datos .k{color:var(--ink-dim);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap}
.prot-datos a{color:var(--accent-soft);font-weight:700}
.prot-datos i{color:var(--ink-dim)}
.bat-baja{color:#fde047;font-weight:700}
.bat-crit{color:#fca5a5;font-weight:800}

/* Alerta de un equipo sin caso: el operador la abre y no encuentra ficha. Sin
   esta explicación parece un error del sistema en vez de lo que es. */
.d-sincaso{margin:0 22px 14px;background:rgba(234,179,8,.10);border:1px solid rgba(234,179,8,.34);
  border-radius:10px;padding:12px 15px;font-size:.87rem;line-height:1.5;color:#fde68a}
.d-sincaso b{display:block;margin-bottom:3px;color:#fde047}