:root{
  --navy:#12141F; --navy-2:#1C1F2E; --bg:#F2F2F4; --card:#fff;
  --lima:#C6F135; --violeta:#8B72F6; --texto:#1A1C25; --gris:#6B6F80;
  --linea:#E3E4E9; --ok:#0E8FA0; --alerta:#E04B3E; --amarillo:#E9A93C;
  --s1:#6C4EF0; --s2:#E04B3E; --s3:#0E8FA0; --s4:#7C9A0E;
  --r:14px; --sombra:0 1px 2px rgba(18,20,31,.06), 0 8px 24px rgba(18,20,31,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.02em}
h1{font-size:1.45rem}h2{font-size:1.05rem}h3{font-size:.95rem}

/* ---------- layout ---------- */
.app{display:flex;min-height:100vh}
.side{width:246px;flex:0 0 246px;background:var(--navy);color:#fff;padding:18px 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:6px 8px 20px}
.logo{width:34px;height:34px;border-radius:9px;background:var(--lima);color:var(--navy);
  display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.marca b{font-size:1.12rem;letter-spacing:-.03em}
.marca span{display:block;font-size:.68rem;color:#8A8FA3;font-weight:500;letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  color:#A9ADBF;font-size:.875rem;font-weight:500;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:var(--navy-2);color:#fff}
.nav a.on .ic{color:var(--lima)}
.ic{width:18px;text-align:center;font-size:1rem;opacity:.95}
.nav .grupo{font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:#5B6076;
  padding:16px 11px 6px;font-weight:700}
.side-pie{margin-top:18px;padding:12px 11px;border-top:1px solid rgba(255,255,255,.08);
  font-size:.72rem;color:#6E7488}

.main{flex:1;min-width:0;padding:22px 26px 60px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.topbar .sub{color:var(--gris);font-size:.82rem;margin-top:2px}
.hamb{display:none}

/* ---------- tarjetas ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.card{background:var(--card);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sombra)}
.card.pad0{padding:0;overflow:hidden}
.card h2,.card h3{margin-bottom:2px}
.card .nota{color:var(--gris);font-size:.78rem;margin-bottom:12px}
.kpi .et{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);font-weight:600}
.kpi .val{font-size:1.65rem;font-weight:700;letter-spacing:-.03em;margin-top:4px}
.kpi .val.sm{font-size:1.3rem}
.kpi .pie{font-size:.76rem;color:var(--gris);margin-top:3px}
.up{color:var(--s4);font-weight:650}.down{color:var(--alerta);font-weight:650}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:600;background:#EFEFF3;color:var(--gris)}
.chip.ok{background:#E4F5F1;color:#0B7C6B}
.chip.mal{background:#FCEAE8;color:#B4291B}
.chip.av{background:#FDF3E2;color:#96631A}
.chip.vio{background:#EFEBFE;color:#5B3FD6}
.chip.lima{background:#EDF9CE;color:#4E6B0A}

/* ---------- tablas ---------- */
.tablabox{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.84rem;min-width:520px}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);
  font-weight:700;padding:9px 12px;border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid #F1F1F5;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFAFC}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mut{color:var(--gris)}

/* ---------- barras ---------- */
.barra{height:7px;border-radius:4px;background:#EDEDF1;overflow:hidden;min-width:60px}
.barra i{display:block;height:100%;border-radius:4px;background:var(--s1)}
.lista-barra{display:flex;flex-direction:column;gap:11px}
.lb{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center}
.lb .n{font-size:.82rem;font-weight:550}
.lb .v{font-size:.82rem;font-variant-numeric:tabular-nums;font-weight:600}
.lb .barra{grid-column:1/-1}

/* ---------- grafico de linea ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart polyline{fill:none;stroke:var(--s1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.chart polygon{fill:url(#deg)}
.ejes{display:flex;justify-content:space-between;font-size:.66rem;color:var(--gris);margin-top:6px}

/* ---------- kanban ---------- */
.kan{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.kcol{flex:0 0 236px;background:#EAEAEF;border-radius:12px;padding:10px}
.kcol h3{font-size:.78rem;display:flex;justify-content:space-between;align-items:center}
.kcol .tot{font-size:.7rem;color:var(--gris);margin:2px 0 9px}
.klead{background:#fff;border-radius:9px;padding:9px 10px;margin-bottom:7px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.klead b{font-size:.8rem;display:block}
.klead .m{font-size:.7rem;color:var(--gris);margin-top:2px}
.klead .f{display:flex;justify-content:space-between;align-items:center;margin-top:7px}

/* ---------- heatmap ---------- */
.heat{display:grid;grid-template-columns:auto repeat(7,1fr);gap:3px;font-size:.68rem;min-width:400px}
.heat .h{color:var(--gris);text-align:right;padding-right:6px;line-height:24px}
.heat .d{color:var(--gris);text-align:center;font-weight:600}
.heat .c{height:24px;border-radius:5px;background:var(--s1);display:grid;place-items:center;
  color:#fff;font-size:.64rem;font-weight:600}

/* ---------- chat ---------- */
.chatbox{display:flex;flex-direction:column;height:calc(100vh - 190px);min-height:420px}
.msgs{flex:1;overflow-y:auto;padding:6px 2px 14px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:min(680px,86%);padding:11px 14px;border-radius:14px;font-size:.88rem;white-space:pre-wrap}
.msg.yo{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:#fff;box-shadow:var(--sombra);border-bottom-left-radius:5px}
.msg b{font-weight:700}
.tools{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tool{font-size:.66rem;background:#EFEBFE;color:#5B3FD6;padding:2px 8px;border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.escribir{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--linea)}
.escribir input{flex:1}
.sug{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.sug button{background:#fff;border:1px solid var(--linea);color:var(--gris);font-size:.76rem;
  padding:6px 11px;border-radius:999px;cursor:pointer}
.sug button:hover{border-color:var(--violeta);color:var(--violeta)}

/* burbujas whatsapp */
.wa{background:#EBE5DD;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px;
  max-height:460px;overflow-y:auto}
.wa .b{max-width:82%;padding:8px 11px;border-radius:10px;font-size:.82rem;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa .b.in{background:#fff;align-self:flex-start;border-top-left-radius:3px}
.wa .b.out{background:#DCF8C6;align-self:flex-end;border-top-right-radius:3px}

/* ---------- formularios ---------- */
input,select,textarea,.btn{font:inherit;font-size:.86rem}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--linea);border-radius:9px;
  background:#fff;color:var(--texto);outline:none}
input:focus,select:focus{border-color:var(--violeta);box-shadow:0 0 0 3px rgba(139,114,246,.15)}
label{display:block;font-size:.74rem;font-weight:600;color:var(--gris);margin-bottom:5px}
.campo{margin-bottom:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;
  border-radius:10px;border:0;background:var(--navy);color:#fff;font-weight:600;cursor:pointer}
.btn:hover{background:#22263A}
.btn.lima{background:var(--lima);color:var(--navy)}
.btn.gris{background:#fff;color:var(--texto);border:1px solid var(--linea)}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filtros .campo{margin:0;min-width:150px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;background:#E7E7EC;padding:4px;border-radius:11px;margin-bottom:14px;
  overflow-x:auto}
.tabs button{border:0;background:transparent;padding:7px 13px;border-radius:8px;font-size:.8rem;
  font-weight:600;color:var(--gris);cursor:pointer;white-space:nowrap}
.tabs button.on{background:#fff;color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.panel{display:none}.panel.on{display:block}

/* ---------- movil / escaner ---------- */
.mov-hero{background:linear-gradient(160deg,var(--navy),#282D45);color:#fff;border-radius:16px;
  padding:20px;margin-bottom:14px}
.mov-hero h1{font-size:1.25rem}
.mov-hero p{color:#A9ADBF;font-size:.83rem;margin:5px 0 0}
.accion{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:16px;
  box-shadow:var(--sombra);margin-bottom:11px}
.accion .em{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;
  background:#EFEBFE;flex:0 0 46px}
.accion b{display:block;font-size:.95rem}
.accion span{font-size:.78rem;color:var(--gris)}
.accion .fl{margin-left:auto;color:var(--gris)}
#video{width:100%;border-radius:14px;background:#000;aspect-ratio:4/3;object-fit:cover;display:block}
.visor{position:relative;margin-bottom:12px}
.mira{position:absolute;inset:18% 8%;border:2px solid var(--lima);border-radius:12px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.25);pointer-events:none}
.foto-prev{width:100%;border-radius:14px;display:block;margin-bottom:12px}
.aviso{padding:11px 13px;border-radius:10px;font-size:.82rem;margin-bottom:12px}
.aviso.ok{background:#E4F5F1;color:#0B6E60}
.aviso.mal{background:#FCEAE8;color:#A8271A}
.aviso.info{background:#EFEBFE;color:#4B33C0}

.pie-demo{margin-top:26px;padding:13px 16px;background:#E9E9EE;border-radius:11px;
  font-size:.74rem;color:var(--gris);line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g-2-1,.g-1-2,.g3{grid-template-columns:1fr}
}
@media (max-width:820px){
  .side{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:.22s;
    box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.abierto .side{transform:none}
  body.abierto .velo{display:block}
  .velo{display:none;position:fixed;inset:0;background:rgba(18,20,31,.45);z-index:50}
  .main{padding:14px 14px 90px;width:100%}
  .hamb{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;
    background:#fff;border:1px solid var(--linea);font-size:1.1rem;cursor:pointer;flex:0 0 40px}
  .g2,.g4{grid-template-columns:1fr}
  h1{font-size:1.18rem}
  .kpi .val{font-size:1.4rem}
  .card{padding:14px}
  .topbar{position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:20;margin:-14px 0 12px}
  .chatbox{height:calc(100vh - 230px)}
}
/* barra inferior solo en movil */
.tabbar{display:none}
@media (max-width:820px){
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;
    border-top:1px solid var(--linea);z-index:40;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;text-align:center;font-size:.62rem;color:var(--gris);padding:4px 2px;font-weight:600}
  .tabbar a i{display:block;font-style:normal;font-size:1.15rem;margin-bottom:1px}
  .tabbar a.on{color:var(--violeta)}
}