@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;600&display=swap');
:root{
  --azul:#1f3b73; --azul2:#2b5bb0; --verde:#137a3a; --rojo:#b02020;
  --amar:#b8860b; --gris:#f4f6fa; --borde:#c7d0e0;
}
*{ box-sizing:border-box; }
body{ font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; margin:0; background:var(--gris); color:#1a2230; }
header{ background:var(--azul); color:#fff; padding:14px 20px; }
header h1{ font-size:18px; margin:0; }
header p{ margin:4px 0 0; font-size:12px; opacity:.85; }
header a{ color:#bcd3ff; font-size:12px; }
.wrap{ max-width:1000px; margin:18px auto; padding:0 14px; }
.card{ background:#fff; border-radius:10px; padding:18px; box-shadow:0 1px 4px rgba(0,0,0,.08); margin-bottom:16px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:760px){ .grid{ grid-template-columns:1fr; } }
h2{ margin:0 0 8px; font-size:16px; color:var(--azul); }
label{ display:block; font-size:12px; font-weight:600; color:#465; margin:10px 0 3px; }
input,select{ width:100%; padding:9px 10px; border:1px solid var(--borde); border-radius:7px; font-size:14px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; }
button{ margin-top:14px; border:0; padding:11px 16px; border-radius:8px; font-weight:700; cursor:pointer; background:var(--azul2); color:#fff; }
button.ghost{ background:#eef2f8; color:var(--azul); }
button.warn{ background:#f6eaea; color:var(--rojo); }
.muted{ color:#889; font-size:12px; }
.qr{ text-align:center; margin-top:12px; }
.qr svg,.qr img{ width:200px; height:200px; }
.url{ word-break:break-all; background:#f0f4fb; border:1px dashed #a9bbdb; padding:8px; border-radius:7px; font-size:12px; }
pre.json{ background:#0f1830; color:#cfe3ff; padding:12px; border-radius:8px; font-size:12px; overflow:auto; max-height:260px; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
td,th{ padding:6px 8px; border-bottom:1px solid #e3e8f0; text-align:left; }
th{ color:#556; font-size:11px; text-transform:uppercase; }
.verdict{ border-radius:10px; padding:18px; margin-top:6px; }
.v-ok{ background:#e7f6ec; border:1px solid var(--verde); }
.v-bad{ background:#fdeaea; border:1px solid var(--rojo); }
.v-warn{ background:#fff6e0; border:1px solid var(--amar); }
.v-title{ font-size:20px; font-weight:800; margin:0 0 10px; }
.v-ok .v-title{ color:var(--verde); } .v-bad .v-title{ color:var(--rojo); } .v-warn .v-title{ color:#8a6400; }
.badge{ display:inline-block; border-radius:20px; padding:2px 10px; font-size:11px; background:#dfe7f5; color:#2a3f6b; }
.pin{ font-size:12px; color:#556; margin-top:8px; }

/* ===== Baccitector: topbar + menú hamburguesa + badges ===== */
.topbar{ display:flex; align-items:center; gap:12px; background:linear-gradient(180deg,#070b14,#0c1322); border-bottom:1px solid rgba(255,255,255,.08); padding:11px 16px; position:relative; }
.topbar .hamb{ background:rgba(255,255,255,.12); border:0; color:#fff; font-size:18px; line-height:1; cursor:pointer; margin:0; padding:9px 13px; border-radius:9px; transition:background .15s, transform .15s; }
.topbar .hamb:hover{ background:rgba(255,255,255,.26); transform:translateY(-1px); }
.brand{ font-family:Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:.4px; font-size:21px; color:#fff; }
.brand .dot{ color:#5fd0ff; }
.brandlink{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand-img{ height:46px; display:block; }
.brand-sub{ font-family:'Kanit','Segoe UI',sans-serif; font-weight:300; font-size:11.5px; letter-spacing:2.4px; text-transform:uppercase; color:#9fb0cc; border-left:1px solid rgba(255,255,255,.18); padding-left:13px; line-height:1.3; }
@media(max-width:620px){ .brand-img{ height:38px; } .brand-sub{ display:none; } }
.spacer{ flex:1; }
.badge-letter{ font-family:Helvetica,Arial,sans-serif; font-weight:800; display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; border-radius:9px; padding:0 9px; font-size:15px; letter-spacing:.5px; }
.badge-A{ background:#e11d1d; color:#fff; }
.badge-PE{ background:#2b5bb0; color:#fff; }
.badge-PP{ background:#eef1f6; color:#0e1b34; }
.badge-CA{ background:#137a3a; color:#fff; }
/* badges cohesivos con el tema oscuro (todos mergean; el módulo actual y el hover van celeste) */
.badge-letter{ background:rgba(255,255,255,.07) !important; color:#9fb0cc !important; border:1px solid rgba(255,255,255,.14); font-weight:700; }
.topbar > .badge-letter,
.menu a:hover .badge-letter,
.menu a.active .badge-letter{ background:rgba(95,208,255,.15) !important; color:#5fd0ff !important; border-color:rgba(95,208,255,.34); }
/* iconos de línea inline al estilo del index */
svg.bi{ width:15px; height:15px; vertical-align:-2px; margin-right:7px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.menu{ position:absolute; top:60px; left:14px; background:#fff; border-radius:12px; box-shadow:0 14px 38px rgba(0,0,0,.30); overflow:hidden; min-width:264px; z-index:3000; display:none; }
.menu.open{ display:block; animation:menuIn .18s cubic-bezier(.2,.8,.2,1); }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-8px) scale(.97);} to{ opacity:1; transform:none; } }
.menu a{ display:flex; align-items:center; gap:12px; padding:13px 16px; color:#12213f; text-decoration:none; border-bottom:1px solid #eef2f8; font-weight:600; transition:background .12s, padding-left .12s; }
.menu a:last-child{ border-bottom:0; }
.menu a:hover{ background:#f4f7fd; padding-left:20px; }
.menu a.active{ background:#eaf1ff; }
.subbar{ background:#fff; border-bottom:1px solid var(--borde); padding:10px 18px; color:#556; font-size:13px; }

/* ===== animaciones "onda" ===== */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
.fadeup{ animation:fadeUp .4s ease both; }
@keyframes pulse{ 0%{ transform:scale(.9); opacity:.7;} 70%{ transform:scale(2.6); opacity:0;} 100%{ opacity:0; } }
@keyframes dash{ to{ stroke-dashoffset:-1000; } }
.trace{ stroke-dasharray:9 11; animation:dash 22s linear infinite; }
.pulse-dot{ width:16px; height:16px; background:#e11d1d; border:3px solid #fff; border-radius:50%; position:relative; box-shadow:0 1px 6px rgba(0,0,0,.4); }
.pulse-dot::after{ content:''; position:absolute; inset:-5px; border-radius:50%; background:#e11d1d; animation:pulse 1.8s ease-out infinite; z-index:-1; }
.num-dot{ width:26px; height:26px; border-radius:50%; background:#2b5bb0; color:#fff; font-family:Helvetica,Arial,sans-serif; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.35); }
.num-dot.susp{ background:#e11d1d; }

/* ===== alertas: chips + timeline ===== */
.cols{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.chip{ display:block; width:100%; text-align:left; border:1px solid var(--borde); border-left:4px solid #e11d1d; background:#fff; border-radius:10px; padding:10px 12px; margin-bottom:9px; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.chip:hover{ transform:translateX(3px); box-shadow:0 5px 16px rgba(0,0,0,.1); }
.chip.sel{ background:#fff5f5; box-shadow:0 6px 18px rgba(225,29,29,.20); border-left-color:#7a0000; }
.chip b{ color:#12213f; }
.tl-item{ position:relative; padding:4px 0 16px 22px; border-left:2px solid #dfe6f0; margin-left:10px; animation:fadeUp .35s ease both; }
.tl-item:last-child{ border-left-color:transparent; }
.tl-item::before{ content:''; position:absolute; left:-9px; top:4px; width:14px; height:14px; border-radius:50%; background:#2b5bb0; border:2px solid #fff; box-shadow:0 0 0 2px #2b5bb0; }
.tl-item.susp::before{ background:#e11d1d; box-shadow:0 0 0 2px #e11d1d; }
.tl-n{ font-family:Helvetica,Arial,sans-serif; font-weight:800; color:#12213f; }
.flag{ display:inline-block; background:#fdeaea; color:#b02020; border-radius:12px; padding:1px 8px; font-size:11px; font-weight:700; margin-left:6px; }
.kpi{ display:inline-block; background:#fdeaea; color:#b02020; border-radius:20px; padding:4px 14px; font-weight:800; font-size:14px; }
#mapa{ flex:2 1 420px; min-height:540px; border-radius:12px; }
.col-list{ flex:1 1 240px; max-height:560px; overflow:auto; }
.col-panel{ flex:1 1 260px; max-height:560px; overflow:auto; }