@font-face{
  font-family:'DM Sans';
  src:url('https://cdn.maskapital.mx/aniversario/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap;
}
:root{
  --mk-blue:#0031a7; --mk-navy:#002885; --mk-orange:#ff8c00; --mk-orange-2:#ffc376; --mk-gray:#808080;
  --mk-blue-rgb:24,34,90; --mk-orange-rgb:255,159,35; --mk-gray-rgb:128,128,128;

  --bg:#f6f6f6; --card:#fff; --text:#002885; --muted:#808080; --border:#e6e6e7;
  --ok:#16a34a; --warn:#c26c6c; --bad:#631414; --info:#1d40c0;
  --shadow:0 10px 28px rgba(0,0,0,.08);
  --radius:14px; --radius2:10px;
  --font:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body.mk{
  margin:0; font-family:var(--font);
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(var(--mk-blue-rgb),.08), transparent 50%),
    radial-gradient(900px 600px at 80% 10%, rgba(var(--mk-orange-rgb),.12), transparent 45%),
    var(--bg);
  color:var(--text);
}
a{color:var(--mk-blue); text-decoration:none}
a:hover{text-decoration:underline}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(230,230,231,.95);
}
.topbar .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; gap:10px;
}
.brand{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.brand .logo{
  width:42px;height:42px;border-radius:12px;
  background: linear-gradient(135deg,var(--mk-blue),var(--mk-navy));
  box-shadow:0 10px 18px rgba(var(--mk-blue-rgb),.18);
}
.brand .title{font-weight:900; letter-spacing:.2px}
.brand .sub{font-size:12px; color:var(--muted)}
.brand .badge{
  font-size:12px; padding:2px 8px; border-radius:999px;
  border:1px solid rgba(var(--mk-blue-rgb),.20);
  color:var(--mk-blue);
  background:rgba(var(--mk-blue-rgb),.06);
}

.actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(230,230,231,.95);
  background:rgba(255,255,255,.78);
  color:var(--muted);
}
.dot{width:10px;height:10px;border-radius:999px;background:var(--mk-gray)}
.dot.green{background:var(--ok)}
.dot.orange{background:var(--mk-orange)}
.dot.red{background:var(--bad)}

.shell{
  display:grid;
  grid-template-columns: 300px 1fr;
  min-height: calc(100dvh - 64px);
}
.sidebar{
  background:rgba(255,255,255,.78);
  border-right:1px solid rgba(230,230,231,.95);
  padding:14px;
  position:sticky; top:64px;
  height:calc(100dvh - 64px);
  overflow:auto;
}
.sidebrand{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.ce{
  width:42px;height:42px;border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--mk-blue),var(--mk-navy));
  color:#fff; font-weight:900;
}
.sb{font-weight:900}
.sm{font-size:12px; color:var(--muted)}

.menu{display:flex; flex-direction:column; gap:8px}
.menu-item{
  border:1px solid rgba(230,230,231,.95);
  background:rgba(255,255,255,.88);
  padding:10px 12px;
  border-radius:12px;
  display:flex; align-items:center; gap:10px;
  cursor:pointer;
  color:var(--text);
  font-weight:800;
  text-align:left;
}
.menu-item i{width:18px; color:rgba(var(--mk-blue-rgb),.85)}
.menu-item:hover{border-color:rgba(var(--mk-blue-rgb),.25)}
.menu-item.active{
  background:rgba(var(--mk-blue-rgb),.07);
  border-color:rgba(var(--mk-blue-rgb),.25);
}
.sidefoot{margin-top:14px}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); margin:6px 0}
.kv b{color:var(--text)}
.content{padding:14px; max-width: 1700px}
@media(max-width:1200px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:relative; top:auto; height:auto}
}

.card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(230,230,231,.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.sub{box-shadow:none}
.card .hd{
  padding:12px 14px;
  border-bottom:1px solid rgba(230,230,231,.80);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card .hd .h{font-weight:900}
.card .bd{padding:14px}

.grid3{display:grid; grid-template-columns: 420px 1fr 420px; gap:14px}
@media(max-width:1400px){ .grid3{grid-template-columns: 1fr} }

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media(max-width:900px){ .grid2{grid-template-columns:1fr} }

.label{font-size:12px; color:var(--muted); margin:0 0 6px 2px}
.input{
  width:100%;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(230,230,231,.95);
  background:#fff;
  outline:none;
  color:var(--text);
  font-size:14px;
}
textarea.input{min-height:180px; resize:vertical}
.input.small{padding:7px 10px; font-size:12px; border-radius:10px}
.input:focus{
  border-color:rgba(var(--mk-blue-rgb),.35);
  box-shadow:0 0 0 4px rgba(var(--mk-blue-rgb),.10);
}
.sep{height:1px; background:rgba(230,230,231,.95); margin:10px 0}

.btn{
  appearance:none; border:none; cursor:pointer;
  padding:10px 12px; border-radius:12px;
  font-weight:900; font-size:13px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(230,230,231,.95);
  box-shadow:0 8px 18px rgba(0,0,0,.05);
  color:var(--text);
}
.btn:hover{transform:translateY(-1px); border-color:rgba(var(--mk-blue-rgb),.22)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--mk-blue); border-color:transparent; color:#fff}
.btn.orange{background:var(--mk-orange); border-color:transparent; color:#fff}
.btn.danger{border-color:rgba(99,20,20,.22); color:var(--bad)}
.btn.small{padding:7px 10px; border-radius:10px; font-size:12px}
.btn.block{width:100%}

.kpi{
  padding:12px; border-radius:12px;
  border:1px solid rgba(230,230,231,.95);
  background:rgba(255,255,255,.88);
}
.kpi .t{font-size:12px; color:var(--muted)}
.kpi .n{font-size:28px; font-weight:900; margin-top:6px}
.kpi .s{font-size:12px; color:var(--muted)}

.feed{
  display:flex; flex-direction:column; gap:10px;
  max-height: 260px;
  overflow:auto;
  padding-right:6px;
}
.msg{
  border-radius: 14px;
  border:1px solid rgba(230,230,231,.95);
  background:rgba(255,255,255,.92);
  padding:10px 12px;
}
.msg .meta{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11px; color:var(--muted);
  margin-bottom:6px;
}
.msg .txt{white-space:pre-wrap; font-size:13px; line-height:1.28}
.msg.signal{border-left:4px solid rgba(var(--mk-orange-rgb),.90)}
.msg.topic{border-left:4px solid rgba(var(--mk-blue-rgb),.85)}
.msg.warn{border-left:4px solid rgba(var(--mk-gray-rgb),.70)}

.svgWrap{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(230,230,231,.95);
  overflow:hidden;
  background:
    radial-gradient(800px 500px at 40% 30%, rgba(var(--mk-blue-rgb),.08), transparent 55%),
    radial-gradient(700px 450px at 70% 30%, rgba(var(--mk-orange-rgb),.10), transparent 60%),
    rgba(255,255,255,.65);
}
#svg{width:100%; height:560px; display:block}
.coreT{font-family:DM Sans; font-weight:900; font-size:12px; fill:rgba(0,40,133,.9)}
.coreS{font-family:DM Sans; font-weight:800; font-size:10px; fill:rgba(128,128,128,.95)}

.node-group{cursor:pointer}
.node-circle{filter:url(#softGlow)}
.node-group:hover .node-circle{stroke:rgba(var(--mk-orange-rgb),1); stroke-width:3px}
.node-text{fill:var(--text); font-size:12px; font-weight:900; text-anchor:middle; pointer-events:none}
.node-sub{fill:var(--muted); font-size:10px; font-weight:800; text-anchor:middle; pointer-events:none}
.node-link{stroke:rgba(var(--mk-blue-rgb),.35); stroke-width:1; opacity:.55}
.related-link{stroke:rgba(var(--mk-orange-rgb),.9); stroke-width:1.6; stroke-dasharray:4; opacity:.85; animation:dash-flow 1s linear infinite}
@keyframes dash-flow{to{stroke-dashoffset:-8}}

.list{display:flex; flex-direction:column; gap:8px}
.item{
  padding:10px 10px; border-radius:12px;
  border:1px solid rgba(230,230,231,.95);
  background:rgba(255,255,255,.88);
}
.item:hover{border-color:rgba(var(--mk-blue-rgb),.25)}
.item .row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.item .sub{font-size:12px; color:var(--muted); margin-top:4px}

.console{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(230,230,231,.95);
  border-radius:12px;
  padding:12px;
  max-height: 560px;
  overflow:auto;
  font-family: ui-monospace,Consolas,monospace;
  font-size:12px;
  color: rgba(0,40,133,.95);
}

.hidden{display:none !important}
.audio{width:100%; margin-top:10px}

/* Tabs */
.tab{display:none}
.tab.show{display:block}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; place-items:center; padding:16px; z-index:200}
.modal[aria-hidden="false"]{display:grid}
.modal-card{width:min(720px,95vw); background:rgba(255,255,255,.96); border:1px solid rgba(230,230,231,.95); border-radius:14px; box-shadow:var(--shadow)}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid rgba(230,230,231,.80)}
.modal-head .h{font-weight:900}
.modal-body{padding:12px 16px}
.modal-foot{display:flex; justify-content:end; gap:8px; padding:12px 16px; border-top:1px solid rgba(230,230,231,.80)}
.icon-btn{background:transparent; border:0; font-size:18px; cursor:pointer; color:var(--muted)}
.icon-btn:hover{color:var(--text)}

.mono{font-family: ui-monospace,Consolas,monospace; font-size:12px; min-height:260px}
.small{font-size:12px; color:var(--muted)}