/* Visiterol — panel de actividad */
@font-face{font-family:Poppins;src:url(../siteadmin/woff2/poppins-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(../siteadmin/woff2/poppins-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../siteadmin/woff2/open-sans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../siteadmin/woff2/open-sans-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Open Sans';src:url(../siteadmin/woff2/open-sans-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  --page:#1B1A28; --card:#25233A; --card-2:#2E2B47; --line:#3A3757;
  --ink:#F3F1FA; --ink-2:#ADA7C4; --ink-3:#8E88A8;
  --brand:#BA29F4; --brand-soft:#C77DFF;
  /* series validadas sobre #25233A (dark) */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --good:#0ca30c; --warn:#fab219; --crit:#d03b3b;
  --grid:#332F4E; --axis:#413D63;
  --r:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:'Open Sans',system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Poppins,system-ui,sans-serif;font-weight:600;margin:0;line-height:1.2}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 22px}
.num{font-variant-numeric:tabular-nums}

/* ---- cabecera ---- */
.top{position:sticky;top:0;z-index:40;background:rgba(27,26,40,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:72px;flex-wrap:wrap}
.top img{height:44px}
.top h1{font-size:17px;margin-right:auto}
.top h1 small{display:block;font:400 12px 'Open Sans';color:var(--ink-3);margin-top:2px}
.pill{display:inline-flex;align-items:center;gap:7px;background:#3A1620;color:#FF8FA3;
  border:1px solid #5C2231;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:#FF3B5C;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.stamp{font-size:12px;color:var(--ink-3)}

/* ---- filtros ---- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:20px 0 6px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:var(--ink-2);font:600 13px 'Open Sans';
  padding:6px 14px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff}
select{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font:600 13px 'Open Sans';cursor:pointer}
select:focus{outline:2px solid var(--brand);outline-offset:1px}
.reset{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;
  padding:8px 14px;font:600 13px 'Open Sans';cursor:pointer}
.reset:hover{border-color:var(--brand);color:var(--ink)}
.scope{font-size:12.5px;color:var(--ink-3);margin-left:auto}

/* ---- rejilla ---- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:16px 0 20px}
.panels{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding-bottom:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.card h2{font-size:14.5px;display:flex;align-items:center;gap:8px}
.card h2 span{font:400 12px 'Open Sans';color:var(--ink-3);margin-left:auto}
.c4{grid-column:span 4}.c6{grid-column:span 6}.c8{grid-column:span 8}.c12{grid-column:span 12}

/* ---- tarjetas KPI ---- */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .lbl{font-size:12px;color:var(--ink-3);letter-spacing:.02em}
.kpi .val{font-family:Poppins;font-size:clamp(22px,2.4vw,29px);margin:2px 0 4px;font-variant-numeric:tabular-nums}
.delta{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.delta.up{color:#3FD07E}.delta.down{color:#FF7A7A}.delta.flat{color:var(--ink-3)}
.kpi svg{margin-top:8px;display:block;width:100%;height:34px;overflow:visible}

/* ---- gráficos ---- */
.chart{width:100%;display:block;overflow:visible}
.gridline{stroke:var(--grid);stroke-width:1}
.axis{stroke:var(--axis);stroke-width:1}
.tick{fill:var(--ink-3);font-size:10.5px;font-family:'Open Sans';font-variant-numeric:tabular-nums}
.dlabel{fill:var(--ink);font:700 11px 'Open Sans';font-variant-numeric:tabular-nums}
.bar{transition:opacity .12s}
.bar:hover{opacity:.78;cursor:pointer}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:2px 0 10px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}

/* barras horizontales en HTML */
.hbars{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.hb{border:0;background:transparent;color:inherit;font:inherit;width:100%;text-align:left;display:grid;grid-template-columns:104px 1fr 62px;gap:10px;align-items:center;cursor:pointer;
  border-radius:7px;padding:2px 4px;transition:background .12s}
.hb:hover{background:var(--card-2)}
.hb[aria-pressed=true]{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--brand)}
.hb .nm{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .track{display:block;background:#302D4B;border-radius:5px;height:14px;overflow:hidden}
.hb .fill{display:block;height:100%;border-radius:0 5px 5px 0;background:var(--s1);transition:width .5s cubic-bezier(.3,.9,.3,1)}
.hb .v{text-align:right;font:700 12.5px 'Open Sans';font-variant-numeric:tabular-nums}
.hb .v small{display:block;font-weight:400;font-size:10.5px;color:var(--ink-3)}

/* ---- tabla ---- */
.tablewrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
table{width:100%;min-width:560px;border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums}
th{text-align:right;font:700 11.5px 'Open Sans';color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th:hover{color:var(--ink)}
th[data-dir]::after{content:' ▾';color:var(--brand-soft)}
th[data-dir=asc]::after{content:' ▴'}
td{padding:9px 8px;border-bottom:1px solid #2C2945;font-size:13px;text-align:right}
tbody tr:hover{background:var(--card-2)}
.who{display:flex;align-items:center;gap:9px;text-align:left}
.ini{width:26px;height:26px;border-radius:50%;background:#3A2050;color:var(--brand-soft);
  display:grid;place-items:center;font:700 10px 'Open Sans';flex:0 0 auto}
.who small{display:block;color:var(--ink-3);font-size:11px}
.chipv{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:700}

/* ---- feed ---- */
.feed{list-style:none;margin:10px 0 0;padding:0;max-height:330px;overflow:hidden}
.feed li{display:grid;grid-template-columns:16px 1fr auto;gap:10px;padding:9px 0;
  border-bottom:1px solid #2C2945;font-size:12.5px;color:var(--ink-2);animation:slide .45s ease}
@keyframes slide{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.feed b{color:var(--ink);font-weight:600}
.feed time{color:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums}
.ic{width:16px;height:16px;border-radius:5px;display:grid;place-items:center;font-size:9px;margin-top:2px}

/* ---- tooltip ---- */
#tip{position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .1s;
  background:#100F1A;border:1px solid var(--line);border-radius:9px;padding:9px 12px;
  font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:250px;font-variant-numeric:tabular-nums}
#tip b{font-family:Poppins;font-size:13px;display:block;margin-bottom:3px}
#tip .row{display:flex;gap:10px;justify-content:space-between}
#tip i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px}

footer{border-top:1px solid var(--line);padding:26px 0;color:var(--ink-3);font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

@media(max-width:1080px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .c4,.c6,.c8{grid-column:span 12}
}
@media(max-width:640px){
  .wrap{padding:0 14px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .scope{margin-left:0;flex:1 0 100%}
  .hb{grid-template-columns:86px 1fr 54px}
  table{font-size:12px;min-width:420px}
  .hide-s{display:none}
  .top h1{font-size:15px;flex:1 0 100%;margin:0}
  .filters{gap:8px}
}