/* NovaChat Analytics · estilos (v1)
   Todo lo que se pinta con el color principal lee --pri / --pri-hover / --sobre-pri:
   Mi perfil cambia esas variables por usuario (guia §116.2). Los colores con
   significado (ok, alerta, error) NO se personalizan. */
:root{
  --pri:#2563EB; --pri-hover:#1D4ED8; --sobre-pri:#FFFFFF; --pri-suave:#E6EEFD;
  --side:#1C2636; --side-2:#2A3650; --side-txt:#FFFFFF; --side-dim:#8E9AB0; --marca:#38BDF8; --tinta-marca:#131E28;
  --bg:#F4F6F5; --card:#FFFFFF; --line:#E1E6E3; --txt:#1F2A24; --dim:#66736B;
  --ok:#1E8E3E; --ok-bg:#E6F4EA; --warn:#B26A00; --warn-bg:#FFF4E0; --err:#C62828; --err-bg:#FDECEA;
  --info:#3E6FB0; --info-bg:#E8F0FB;
  --r:10px; --sombra:0 1px 2px rgba(16,24,20,.06),0 2px 8px rgba(16,24,20,.05);
  --font:'Montserrat',-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:13.5px;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--pri)}
h1,h2,h3{margin:0;color:var(--txt)}
button,input,select,textarea{font:inherit}

/* ── Acceso ─────────────────────────────────────────────── */
.acceso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:#F6F9F7;
  background-image:radial-gradient(circle at 0% 100%,rgba(46,125,79,.10),transparent 40%),radial-gradient(circle at 100% 0%,rgba(59,130,182,.10),transparent 45%)}
.acceso .caja{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px;max-width:400px;width:100%;box-shadow:0 18px 40px rgba(20,35,27,.10)}
.marca{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.marca img{height:64px;width:auto}
.marca b{display:block;font-size:16px}.marca small{color:var(--dim)}

/* ── Formularios y botones ──────────────────────────────── */
label{display:block;font-size:12px;font-weight:600;color:var(--dim);margin:12px 0 5px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--txt)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri-suave);border-color:var(--pri)}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:8px;padding:9px 15px;font-weight:600;cursor:pointer;
  background:var(--pri);color:var(--sobre-pri);white-space:nowrap}
.btn:hover{background:var(--pri-hover)}
.btn:disabled{opacity:.55;cursor:default}
.btn.sec{background:#fff;color:var(--txt);border:1px solid var(--line)}
.btn.sec:hover{background:#F1F4F2}
.btn.peligro{background:var(--err);color:#fff}
.btn.chico{padding:5px 10px;font-size:12px}
.btn.ancho{width:100%;justify-content:center;margin-top:18px}
.aviso{padding:11px 13px;border-radius:8px;margin:12px 0;font-size:13px;line-height:1.5}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}.aviso.err{background:var(--err-bg);color:var(--err)}
.aviso.warn{background:var(--warn-bg);color:var(--warn)}.aviso.info{background:var(--info-bg);color:var(--info)}

/* ── Estructura del portal ──────────────────────────────── */
.portal{display:flex;min-height:100vh}
.lateral{width:248px;flex:0 0 248px;background:var(--side);color:var(--side-txt);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.lateral .cab{padding:22px 18px 18px;border-bottom:1px solid rgba(255,255,255,.07);text-align:center}
.lateral .cab img{display:block;height:62px;width:auto;margin:0 auto 10px}
.lateral .cab small{display:block;color:var(--side-dim);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:600}
.menu{flex:1;overflow-y:auto;padding:10px 0 14px}
.menu::-webkit-scrollbar{width:6px}.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.menu .grupo{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--side-dim);padding:16px 22px 6px;font-weight:700}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 10px;padding:10px 12px;border-radius:10px;
  color:var(--side-txt);text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.1px;transition:background .15s}
.menu a:hover{background:rgba(255,255,255,.06)}
.menu a.activo{background:var(--side-2);box-shadow:inset 3px 0 0 var(--marca)}
.menu a .tag{font-size:9.5px;font-weight:700;letter-spacing:.4px;color:#fff;padding:2px 8px;border-radius:10px;
  background:linear-gradient(90deg,#0EA5E9,#4F46E5);box-shadow:0 2px 6px rgba(14,165,233,.35)}
.lateral .pie{padding:12px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:var(--side-dim)}
.contenido{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 26px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.barra h1{font-size:17px}
.barra .usr{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--dim)}
.burger{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--txt)}
.vista{padding:22px 26px 40px;max-width:1400px;width:100%}

/* ── Tarjetas, KPIs y tablas ────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sombra);padding:18px;margin-bottom:18px}
.card h2{font-size:14.5px;margin-bottom:12px}
.card .sub{color:var(--dim);font-size:12px;margin:-6px 0 12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.kpi{background:#fff;border:2px solid #E7ECEA;border-radius:14px;padding:22px 16px 20px;text-align:center;
  box-shadow:0 2px 6px rgba(20,35,27,.04);transition:box-shadow .2s,transform .2s;position:relative}
.kpi:hover{box-shadow:0 8px 20px rgba(20,35,27,.08);transform:translateY(-1px)}
.kpi small{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#5F6B66;font-weight:600}
.kpi b{display:block;font-family:'Montserrat',sans-serif;font-weight:700;font-size:30px;line-height:1.1;margin:12px 0 8px;color:var(--txt);font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:#7A8680}
/* Acento superior de color (como las tarjetas de precio del reporte actual) */
.kpi.acento{border-top:4px solid var(--acento,#1A9A5E)}
.kpi.a-ok{--acento:#1A9A5E}.kpi.a-info{--acento:#5B9BD5}.kpi.a-warn{--acento:#F39C12}.kpi.a-err{--acento:#E74C3C}
.k-ok b{color:#2E9E5B}.k-info b{color:#5B9BD5}.k-warn b{color:#F39C12}.k-err b{color:#E74C3C}
/* Medidor semicircular */
.medidor{display:block;margin:10px auto 0;width:150px;height:84px}
.medidor + b{margin-top:-34px;font-size:22px}
.kpi b.largo{font-size:24px;word-break:break-word}
.tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
th{background:#F5F7F6;text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #EEF1EF;vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.total td{font-weight:700;background:#FAFBFA}
.chip{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;background:#EEF1EF;color:var(--dim)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.err{background:var(--err-bg);color:var(--err)}.chip.info{background:var(--info-bg);color:var(--info)}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.filtros > div{min-width:160px}
.filtros label{margin-top:0}
.acciones{display:flex;flex-wrap:wrap;gap:8px}
.vacio{padding:28px;text-align:center;color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pendiente{text-align:center;padding:50px 20px}
.pendiente b{display:block;font-size:16px;margin-bottom:8px}
.cargando{padding:40px;text-align:center;color:var(--dim)}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--pri);border-radius:50%;margin:0 auto 10px;animation:g .8s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
.paleta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.paleta button{width:34px;height:34px;border-radius:8px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}

/* ── Ventanas ───────────────────────────────────────────── */
.modal-fondo{position:fixed;inset:0;background:rgba(10,15,12,.5);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{background:#fff;border-radius:12px;max-width:540px;width:100%;max-height:92vh;overflow:auto;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal h3{font-size:16px;margin-bottom:6px}
.modal .pie-modal{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.checks label{display:flex;gap:8px;align-items:center;margin:0;font-weight:500;color:var(--txt)}
.checks input{width:auto}

/* ── Celular ────────────────────────────────────────────── */
@media (max-width:900px){
  .lateral{position:fixed;left:-260px;z-index:40;transition:left .2s}
  .lateral.abierto{left:0;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .burger{display:block}
  .barra{padding:12px 16px}
  .vista{padding:16px}
  .grid2{grid-template-columns:1fr}
  .barra .usr span{display:none}
}

/* ══════════════ Variante: barra de modulos SUPERIOR (estilo Corvet) ══════════════
   <body data-diseno="superior">. El mismo MENU de portal.js se dibuja como pestañas;
   los grupos con config:true van al desplegable «Configuración ▾». */
body[data-diseno="superior"] .portal{flex-direction:column}
body[data-diseno="superior"] .lateral{display:none}
.superior{display:none}
body[data-diseno="superior"] .superior{display:flex;align-items:center;gap:4px;height:60px;padding:0 20px;background:var(--side);color:#fff;position:sticky;top:0;z-index:20}
.superior .s-logo{display:flex;align-items:center;gap:10px;padding-right:18px;margin-right:6px;border-right:1px solid rgba(255,255,255,.12)}
.superior .s-logo img{height:32px;width:auto}
.superior .s-tabs{display:flex;align-items:stretch;height:100%;overflow-x:auto;scrollbar-width:none}
.superior .s-tabs::-webkit-scrollbar{display:none}
.superior a,.superior .s-config > button{display:flex;align-items:center;gap:6px;padding:0 14px;height:100%;color:#fff;text-decoration:none;font:600 12.5px 'Montserrat',sans-serif;
  background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;opacity:.85}
.superior a:hover,.superior .s-config > button:hover{opacity:1;background:rgba(255,255,255,.05)}
.superior a.activo{opacity:1;border-bottom-color:var(--marca)}
.superior a .tag{font-size:9px;font-weight:700;color:#fff;padding:1px 7px;border-radius:10px;background:linear-gradient(90deg,#0EA5E9,#4F46E5)}
.superior .s-config{position:relative;height:100%}
.superior .s-panel{display:none;position:absolute;top:60px;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:8px;z-index:30}
.superior .s-config.abierto .s-panel{display:block}
.superior .s-panel a{height:auto;padding:10px 12px;color:var(--txt);border:0;border-radius:8px;opacity:1}
.superior .s-panel a:hover,.superior .s-panel a.activo{background:var(--pri-suave);color:var(--txt)}
.superior .s-der{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:rgba(255,255,255,.8)}
body[data-diseno="superior"] .barra .usr{display:none}
body[data-diseno="superior"] .burger{display:none}
.barra-movil{display:none}
@media (max-width:900px){
  body[data-diseno="superior"] .superior .s-tabs,body[data-diseno="superior"] .superior .s-config{display:none}
  body[data-diseno="superior"] .barra-movil{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--side);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .barra-movil button{flex:1;background:none;border:0;color:rgba(255,255,255,.75);font:600 11px 'Montserrat',sans-serif;padding:8px 4px;border-radius:8px}
  .barra-movil button.activo{color:#fff;background:var(--side-2)}
  body[data-diseno="superior"] .vista{padding-bottom:90px}
  .hoja-mas{position:fixed;inset:auto 0 0 0;z-index:40;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);padding:14px 10px calc(76px + env(safe-area-inset-bottom))}
  .hoja-mas a{display:block;padding:12px 14px;color:var(--txt);text-decoration:none;font-weight:600;border-radius:10px}
  .hoja-mas a:hover{background:var(--pri-suave)}
}

/* ── NovaChat: graficas, mapa de calor y avisos ─────────── */
.grafica{width:100%;overflow-x:auto}
.grafica svg{display:block;min-width:560px;width:100%;height:auto}
.leyenda{display:flex;gap:16px;font-size:12px;color:var(--dim);margin:6px 0 0}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.calor{border-collapse:separate;border-spacing:2px;font-size:10.5px;min-width:620px}
.calor td,.calor th{padding:0;border:0;background:none;text-align:center;font-weight:600}
.calor td.c{width:24px;height:22px;border-radius:4px}
.calor th{font-size:9.5px;color:var(--dim);text-transform:none;letter-spacing:0}
.progreso{height:10px;border-radius:6px;background:#E3E8EC;overflow:hidden;margin:8px 0}
.progreso i{display:block;height:100%;border-radius:6px;background:var(--pri)}
.progreso i.alto{background:#F39C12}.progreso i.lleno{background:#E74C3C}
.banda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.seg{display:inline-flex;background:#F1F4F2;border-radius:9px;padding:3px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;font-weight:600;cursor:pointer;color:var(--dim)}
.seg button.on{background:#fff;color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
pre.json{background:#0F172A;color:#E2E8F0;padding:12px;border-radius:8px;font-size:11.5px;max-height:360px;overflow:auto;white-space:pre-wrap}

/* ── Guía de uso en cada pantalla (v6) ───────────────────────────────────── */
.guia-q{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--pri);
  font:700 13px/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
.guia-q:hover{background:var(--pri-suave);border-color:var(--pri)}
.guia-q[hidden]{display:none}
#guia-panel{display:none;position:fixed;inset:0;z-index:300}
#guia-panel .guia-fondo{position:absolute;inset:0;background:rgba(10,20,40,.35)}
#guia-panel .guia-caja{position:absolute;top:0;right:0;bottom:0;width:min(860px,96vw);background:var(--card);
  display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.18)}
#guia-panel .guia-cab{display:flex;gap:8px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
#guia-panel .guia-cab b{font-size:16px;margin-right:auto}
#guia-panel .guia-cab input{max-width:280px;margin:0}
#guia-panel .guia-cuerpo{flex:1;display:flex;min-height:0}
#guia-panel .guia-indice{width:200px;border-right:1px solid var(--line);overflow:auto;padding:8px 0;flex-shrink:0}
#guia-panel .guia-indice a{display:block;padding:8px 14px;color:var(--txt);text-decoration:none;font-size:13px;border-left:3px solid transparent}
#guia-panel .guia-indice a:hover{background:var(--bg)}
#guia-panel .guia-indice a.on{background:var(--pri-suave);font-weight:600;border-left-color:var(--pri)}
.guia-texto{flex:1;overflow:auto;padding:14px 22px 30px;font-size:13.5px;line-height:1.6}
.guia-texto h3{margin:0 0 6px;font-size:17px}
.guia-texto h4{margin:16px 0 4px;color:var(--pri);font-size:13.5px}
.guia-texto ul{padding-left:18px;margin:4px 0}
.guia-texto li{margin:4px 0}
.guia-resumen{color:var(--dim);margin:0 0 6px}
.guia-donde{font-size:11.5px;color:var(--dim);margin-top:2px}
.card.guia-texto{overflow:visible}
@media (max-width:640px){
  #guia-panel .guia-caja{width:100vw}
  #guia-panel .guia-cab{flex-wrap:wrap}
  #guia-panel .guia-cab input{max-width:none;flex:1 1 100%;order:3}
  #guia-panel .guia-indice{width:120px}
  #guia-panel .guia-indice a{padding:8px 10px;font-size:12px}
}

/* ── v8: compartir tablero ─────────────────────────────────────────────── */
.compartir-q{padding:3px 10px;font-size:12px}
.compartir-q[hidden]{display:none}
.copiar{display:flex;gap:8px;margin-top:10px}
.copiar input{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#F6F9F7}

/* ── v8: vista publica (ver.html) ──────────────────────────────────────── */
body.publico{background:var(--bg)}
.pub-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 26px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.pub-marca{display:flex;align-items:center;gap:12px}
.pub-marca img{height:40px;width:auto}
.pub-cuenta{font-weight:700;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-size:12px;border-left:1px solid var(--line);padding-left:12px}
.pub-cuenta:empty{display:none}
.pub-titulo{display:flex;align-items:center;gap:12px}
.pub-titulo h1{font-size:19px}
.pub-vivo{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#128C7E;background:#E7F8EE;border-radius:12px;padding:3px 10px;text-transform:uppercase;letter-spacing:.05em}
.pub-vivo i{width:8px;height:8px;border-radius:50%;background:#25D366;animation:pubLatido 2s infinite}
.pub-vivo.cargando-dato i{background:#F9A825}
@keyframes pubLatido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.pub-hora{font-size:12px;color:var(--dim)}
.pub-cuerpo .vista{margin:0 auto}
.pub-pie{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 26px 22px;font-size:11.5px;color:var(--dim);max-width:1400px;margin:0 auto}
body.pub-fin .pub-vivo,body.pub-fin .pub-hora{display:none}
.pub-cerrado{max-width:520px;margin:40px auto;text-align:center;padding:30px}
.pub-cerrado b{display:block;font-size:17px;margin-bottom:8px}
.pub-cerrado p{color:var(--dim);line-height:1.5}
/* Solo lectura: sin filtros de periodo ni acciones; los enlaces internos no navegan */
body.publico .card:has(#f-aplicar){display:none}
body.publico #vista a[href^="#"]{pointer-events:none;color:inherit;text-decoration:none}
body.publico #vista button:disabled,body.publico #vista input:disabled,body.publico #vista select:disabled{cursor:default}
body.publico #vista button[data-borrar],body.publico #vista #p-csv,body.publico #vista #p-limpiar,body.publico #vista #p-hist{display:none}
@media (max-width:700px){.pub-cab{padding:12px 16px}.pub-titulo h1{font-size:16px}.pub-pie{padding:12px 16px}}
body.publico #vista input:disabled,body.publico #vista select:disabled{background:#F6F9F7;color:var(--txt);opacity:1}
.modal a.btn,a.btn{text-decoration:none}
/* v9: top de agentes */
.puesto{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:var(--pri-suave);color:var(--pri);font-size:11px;font-weight:700;margin-right:10px}
.barra-ag{display:inline-block;width:110px;height:6px;border-radius:3px;background:#EEF1EF;margin-right:10px;vertical-align:middle;overflow:hidden}
.barra-ag i{display:block;height:100%;background:var(--pri);border-radius:3px}
@media (max-width:700px){.barra-ag{display:none}}
.num-ag{display:inline-block;min-width:56px;text-align:right}