:root{--cream:#fbf7f2;--nude:#ead8ce;--rose:#f1dfe1;--dust:#c58f9a;--dust2:#b07783;--clay:#8b6664;--ink:#4d3f3e;--muted:#786968;--line:#eaded7;--soft:#f6ebe5;--ok:#4f8a6e;--warn:#b5663f;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:ui-rounded,"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);font-size:15px;line-height:1.45}
h1,h2,h3{line-height:1.2;margin:0 0 8px}
button,.btn{font:inherit;border:0;border-radius:999px;min-height:42px;padding:9px 18px;font-weight:700;color:var(--ink);background:var(--nude);cursor:pointer}
button:hover{filter:brightness(.97)}
button:disabled{opacity:.5;cursor:default}
.primary{background:var(--dust);color:#fff}
.ghost{background:transparent;border:1px solid var(--line)}
.danger{background:#f6dedb;color:#8a3b31}
input,select,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid #decfc7;border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--dust);outline-offset:1px}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 0}
label input,label select,label textarea{margin-top:4px;font-weight:400}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.hidden{display:none!important}
.err{color:#9b3d33;font-size:14px;min-height:20px;margin:8px 0 0}

/* ---------- ingreso ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.login-hero{background:linear-gradient(150deg,#f4e8df,#efdadd);padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.login-hero img{width:120px;height:120px;border-radius:50%;background:#fff;object-fit:contain;margin-bottom:18px}
.login-hero h1{font-size:40px;margin-bottom:10px}
.login-hero p{font-size:17px;max-width:460px}
.login-hero ul{padding-left:18px;margin:18px 0 0;max-width:460px}
.login-hero li{margin:6px 0}
.login-side{display:flex;align-items:center;justify-content:center;padding:32px 20px}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:999px;padding:4px;margin-bottom:16px}
.tabs button{background:transparent;min-height:38px}
.tabs button.on{background:#fff;box-shadow:0 1px 4px #8b666422}
.demo{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.demo button{width:100%;margin-top:6px;text-align:left;border-radius:14px;background:var(--soft);font-weight:600}
.demo button span{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.firma{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}
@media(max-width:820px){
  .login{grid-template-columns:1fr}
  .login-side{order:-1;padding:16px;align-items:flex-start}
  .login-hero{padding:26px 16px}
  .login-hero h1{font-size:28px}
  .login-hero img{width:72px;height:72px}
}

/* ---------- panel ---------- */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top-in{max-width:1180px;margin:auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.top img{width:40px;height:40px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line)}
.top b{font-size:16px}
.top .sp{flex:1}
.wrap{max-width:1180px;margin:auto;padding:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.kpi b{display:block;font-size:28px}
.kpi span{font-size:13px;color:var(--muted)}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar h2{margin:0;flex:1}
.bar input{max-width:240px}
table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid #f3ebe6;vertical-align:middle}
tr.fila{cursor:pointer}
tr.fila:hover td{background:#fdf8f5}
.tag{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;background:var(--soft)}
.tag.inf{background:#e1f2ee;color:#2f6b5e}
.tag.alerta{background:#fbe3d9;color:var(--warn)}
.tag.bien{background:#e3f0e8;color:var(--ok)}
.spark{display:flex;gap:3px;align-items:flex-end;height:26px}
.spark i{display:block;width:9px;border-radius:3px;background:var(--dust);min-height:2px}
.spark i.cero{background:#eaded7}
.pct{font-weight:800}
.pct.bajo{color:var(--warn)}
.cards-m{display:none}
.det-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.det-head h2{margin:0;flex:1}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.chartbox{height:190px}
.linechart{width:100%;height:180px;overflow:visible}
.gridline{stroke:#eaded7;stroke-width:1}
.chartline{fill:none;stroke:var(--dust);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chartline.escape{stroke:var(--clay)}
.chartline.resp{stroke:#8fb7aa}
.chartdot{fill:#fff;stroke:var(--dust);stroke-width:3}
.chartdot.escape{stroke:var(--clay)}
.chartdot.resp{stroke:#8fb7aa}
.chartlabel{font-size:10px;fill:#786968;text-anchor:middle}
.chartvalue{font-size:10px;font-weight:800;fill:#4d3f3e;text-anchor:middle}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}
.entry{padding:10px 12px;border-radius:14px;background:var(--soft);margin-top:8px;font-size:14px}
.chips label{display:inline-flex;align-items:center;gap:6px;background:var(--soft);border-radius:999px;padding:6px 12px;margin:4px 4px 0 0;font-weight:600}
.chips input{width:auto;margin:0}
.modal{position:fixed;inset:0;background:#4d3f3e66;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal .card{max-width:480px;width:100%}
.codigo{font-family:ui-monospace,Consolas,monospace;font-size:26px;letter-spacing:.08em;text-align:center;background:var(--soft);border-radius:14px;padding:14px;margin:10px 0}
.enlace{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all;background:#fff;border:1px dashed var(--line);border-radius:10px;padding:8px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.solo-print{display:none}
@media(max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  table.tabla{display:none}
  .cards-m{display:block}
  .pm{border:1px solid var(--line);border-radius:16px;padding:12px;margin-top:10px;background:#fff}
  .pm .l1{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .wrap{padding:16px}
  .top-in{padding:10px 16px}
  .bar input{max-width:none}
  .grid3{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.grid2,.grid3{grid-template-columns:1fr}}
@media print{
  .top,.no-print,.bar button,.acciones{display:none!important}
  .solo-print{display:block}
  body{background:#fff}
  .card{border:0;padding:0}
  .cols{grid-template-columns:1fr}
}
.chartbar{fill:var(--dust)}
.chartbar.escape{fill:var(--clay)}
.metaline{stroke:#8fb7aa;stroke-width:2;stroke-dasharray:6 5}
.metatext{font-size:10px;fill:#4f8a6e;text-anchor:end;font-weight:700}