:root{
  --navy:#0a2d59;--navy-2:#123f72;--blue:#246fd6;--blue-2:#5da8ff;--cyan:#22b8cf;
  --green:#18a957;--red:#e64b55;--amber:#f2a51a;--ink:#14233c;--muted:#66758b;
  --line:#dce5ef;--line-2:#eaf0f6;--bg:#f4f7fb;--card:#fff;--shadow:0 10px 30px rgba(19,52,90,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#eef5fb 0,#f7f9fc 280px,#f4f7fb 100%);color:var(--ink)}
button,input,select{font:inherit}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:24px clamp(18px,4vw,52px);background:linear-gradient(120deg,var(--navy),#0d4179 60%,#12639a);color:#fff;box-shadow:0 8px 30px rgba(8,41,77,.18)}
.brand{display:flex;align-items:center;gap:16px}.brand-mark{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-weight:900;letter-spacing:.5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22)}
.topbar h1{margin:0;font-size:clamp(26px,3vw,42px);line-height:1.05;letter-spacing:-.02em}.topbar p{margin:7px 0 0;color:#dbeafe;font-size:15px}.top-meta{text-align:right;font-size:12px;color:#cfe5ff}.top-meta strong{display:block;color:#fff;font-size:14px;margin-top:3px}
.section-nav{position:sticky;top:0;z-index:30;display:flex;gap:6px;padding:8px clamp(18px,4vw,52px);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.section-nav a{color:#36506d;text-decoration:none;font-size:13px;font-weight:700;padding:9px 12px;border-radius:9px}.section-nav a:hover{background:#edf4fb;color:var(--navy)}
.page{max-width:1880px;margin:auto;padding:18px}.panel{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.anchor-section{scroll-margin-top:64px;margin-bottom:18px}.eyebrow{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:3px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:8px 2px 10px}.section-heading h2{margin:0;font-size:19px}.range-label{font-size:12px;color:var(--muted)}
.filters{padding:16px;margin-bottom:18px}.filter-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.filter-title h2{margin:0;font-size:17px}.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:10px}.filters label{font-size:12px;font-weight:750;color:#3a4b62}.filters input,.filters select{width:100%;height:42px;margin-top:6px;border:1px solid #cbd7e5;border-radius:10px;background:#fff;color:#14233c;padding:0 11px;outline:none;transition:.18s}.filters input:focus,.filters select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,111,214,.12)}
.ghost-btn,.primary-btn{border:0;border-radius:10px;height:38px;padding:0 14px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}.ghost-btn{background:#edf4fb;color:var(--navy)}.ghost-btn:hover{background:#e2eef9}.primary-btn{background:var(--navy);color:white;box-shadow:0 6px 16px rgba(10,45,89,.18)}.primary-btn:hover{transform:translateY(-1px)}
.filter-summary{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;min-height:24px}.chip{font-size:11px;font-weight:700;color:#36506d;background:#f0f5fa;border:1px solid #dde8f3;border-radius:999px;padding:5px 9px}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;min-height:122px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}.kpi:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(19,52,90,.11)}.kpi:after{content:"";position:absolute;inset:auto -18px -30px auto;width:88px;height:88px;border-radius:50%;background:#edf4fb}.kpi.good:after{background:#e6f6ec}.kpi.bad:after{background:#feedef}.kpi.warn:after{background:#fff4df}.kpi span{display:block;color:#526176;font-size:12px;font-weight:700;position:relative;z-index:1}.kpi strong{display:block;font-size:31px;letter-spacing:-.02em;margin-top:8px;position:relative;z-index:1}.kpi small{display:block;font-size:12px;color:var(--muted);margin-top:4px;position:relative;z-index:1}.kpi.good{border-top:4px solid var(--green)}.kpi.bad{border-top:4px solid var(--red)}.kpi.warn{border-top:4px solid var(--amber)}
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.insight{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 13px;box-shadow:0 5px 18px rgba(19,52,90,.04)}.insight-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto}.insight strong{display:block;font-size:12px}.insight span{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}
.grid{display:grid;gap:14px;margin-bottom:14px}.grid-main{grid-template-columns:2fr 1fr 1.18fr}.grid-quality{grid-template-columns:1fr 1.65fr}.chart-card{padding:14px;min-height:338px}.chart-card canvas{max-height:285px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}.card-head h3{margin:0;font-size:15px}.card-head span{font-size:11px;color:var(--muted)}.wide{min-width:0}.heatmap-card{padding:14px;min-width:0}.legend-scale{display:flex;align-items:center;gap:7px}.legend-scale i{display:inline-block;width:80px;height:8px;border-radius:999px;background:linear-gradient(90deg,#edf5ff,#1f78e8)}
.table-wrap{overflow:auto;max-width:100%;border-radius:10px}table{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px}th{position:sticky;top:0;background:#eef4fb;color:#33455d;z-index:3;font-weight:800}th,td{padding:7px 8px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}th:first-child,td:first-child{text-align:left;position:sticky;left:0;z-index:2;background:#fff}.detail th:first-child,.detail td:first-child{min-width:185px}.detail tbody tr:nth-child(even) td{background:#f8fbfe}.detail tbody tr:nth-child(even) td:first-child{background:#f8fbfe}.detail td.total{font-weight:900;color:var(--navy)}
.heatmap th:first-child,.heatmap td:first-child{min-width:185px}.heatmap td.cell{text-align:center;font-weight:800;border-left:1px solid #fff;border-bottom:1px solid #fff}.heat-0{background:#f7fafc;color:#94a3b8}.heat-1{background:#e9f3ff;color:#315c89}.heat-2{background:#d8ebff;color:#2a5a8c}.heat-3{background:#c2e0ff;color:#225b94}.heat-4{background:#a9d2ff;color:#164f8d}.heat-5{background:#8fc4fc;color:#12497f}.heat-6{background:#72b2f5;color:#0c3e71}.heat-7{background:#58a0eb;color:#fff}.heat-8{background:#3f8de2;color:#fff}.heat-9{background:#287bd9;color:#fff}.heat-10{background:#1469ce;color:#fff}
.quality-table-card{padding:14px;min-width:0}.quality-table th:first-child,.quality-table td:first-child{min-width:180px}.quality-rate{display:flex;align-items:center;justify-content:flex-end;gap:8px}.quality-track{width:72px;height:7px;background:#e9eef4;border-radius:99px;overflow:hidden}.quality-fill{height:100%;border-radius:99px;background:var(--green)}.quality-fill.warn{background:var(--amber)}.quality-fill.bad{background:var(--red)}
.detail-panel{padding:14px}.detail-head{margin-bottom:8px}.status{margin-top:14px;background:#fff6e8;border:1px solid #f4d39a;color:#8c5412;padding:12px 14px;border-radius:12px;font-size:13px}.footer{display:flex;justify-content:space-between;gap:14px;padding:20px clamp(18px,4vw,52px);font-size:11px;color:#6f7f92;border-top:1px solid var(--line);background:#eef3f8}
.loading{position:fixed;inset:0;background:rgba(244,247,251,.92);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--navy);transition:opacity .25s}.loading.hidden{opacity:0;pointer-events:none}.spinner{width:32px;height:32px;border:3px solid #dbe7f3;border-top-color:var(--blue);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.anchor-section,.filters{animation:fadeUp .35s ease both}.anchor-section:nth-of-type(2){animation-delay:.04s}.anchor-section:nth-of-type(3){animation-delay:.08s}.anchor-section:nth-of-type(4){animation-delay:.12s}
@media(max-width:1300px){.filter-grid{grid-template-columns:repeat(3,1fr)}.kpis{grid-template-columns:repeat(3,1fr)}.grid-main,.grid-quality{grid-template-columns:1fr 1fr}.grid-main .wide{grid-column:1/-1}.insights{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.topbar{align-items:flex-start;flex-direction:column}.top-meta{text-align:left}.section-nav{overflow:auto}.filter-grid{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:1fr 1fr}.grid-main,.grid-quality{grid-template-columns:1fr}.insights{grid-template-columns:1fr}.page{padding:10px}.footer{flex-direction:column}.brand-mark{display:none}}
@media(max-width:520px){.filter-grid,.kpis{grid-template-columns:1fr}.filter-title{align-items:flex-start;gap:10px}.topbar h1{font-size:25px}.section-nav a{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* UX v4 */
.filter-help{margin:5px 0 0;color:var(--muted);font-size:12px;font-weight:500}
.period-presets{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.preset-btn{border:1px solid #d7e2ee;background:#f8fbfe;color:#37516f;border-radius:999px;padding:7px 11px;font-size:11.5px;font-weight:800;cursor:pointer;transition:.18s}
.preset-btn:hover{border-color:#9fc0e6;background:#eef6ff}.preset-btn.active{background:#e8f2ff;border-color:#8eb8ea;color:#0e4e96;box-shadow:inset 0 0 0 1px rgba(36,111,214,.08)}
.filter-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:11px}.filter-footer .filter-summary{margin-top:0}.filtered-total{font-size:12px;color:var(--navy);background:#eaf3ff;border:1px solid #cfe2f7;padding:7px 10px;border-radius:10px;white-space:nowrap}
.heatmap-card .table-wrap{max-height:520px}.heatmap th,.heatmap td{min-width:45px}.heatmap th:first-child,.heatmap td:first-child{min-width:220px;max-width:220px;overflow:hidden;text-overflow:ellipsis}.heatmap th:nth-last-child(-n+2),.heatmap td:nth-last-child(-n+2){position:sticky;z-index:2;background:#f4f8fc;font-weight:900;color:var(--navy)}.heatmap th:nth-last-child(2),.heatmap td:nth-last-child(2){right:70px;min-width:70px}.heatmap th:last-child,.heatmap td:last-child{right:0;min-width:70px}.heatmap td.heat-total,.heatmap td.heat-average{background:#f4f8fc!important}
#resumen{margin-top:2px}
@media(max-width:820px){.filter-footer{align-items:flex-start;flex-direction:column}.filtered-total{align-self:stretch;text-align:center}.period-presets{overflow:auto;flex-wrap:nowrap;padding-bottom:2px}.preset-btn{white-space:nowrap}}