/* Estadísticas del Hub (21-oct-2026) — todo prefijado .est- ; responsivo sin librerías. */
#view-estadisticas .est-wrap{padding:22px 32px 70px;}
#estadisticas-controles{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
#estadisticas-controles select{height:38px; padding:0 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); font:inherit; font-size:13px; color:var(--ink); max-width:100%;}
.est-seg{display:inline-flex; background:#eceffa; border-radius:10px; padding:3px;}
.est-seg button{border:0; background:transparent; padding:7px 12px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.est-seg button.on{background:var(--panel); color:var(--accent); box-shadow:0 1px 4px rgba(16,20,37,.12);}
.est-cargando{opacity:.55; transition:opacity .2s; pointer-events:none;}

.est-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-bottom:20px;}
.est-kpi{position:relative; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); animation:estIn .45s ease both;}
.est-kpi:nth-child(2){animation-delay:.05s}.est-kpi:nth-child(3){animation-delay:.1s}.est-kpi:nth-child(4){animation-delay:.15s}
.est-kpi-ico{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;}
.est-kpi-l{font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; padding-right:44px;}
.est-kpi-v{font-size:32px; font-weight:800; letter-spacing:-.02em; margin-top:6px;}
.est-kpi-h{font-size:12px; color:var(--ink-faint); margin-top:2px; line-height:1.4;}
.est-up{color:#0a8f63; font-weight:700;}.est-down{color:#d9480f; font-weight:700;}

.est-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:16px; align-items:start;}
.est-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; animation:estIn .5s ease both; min-width:0;}
.est-card.est-ancha{grid-column:1/-1;}
.est-card header{padding:16px 20px 0;}
.est-card h3{margin:0; font-size:15px; font-weight:800;}
.est-card header p{margin:3px 0 0; font-size:12px; color:var(--ink-faint);}
.est-body{padding:14px 20px 20px;}
@keyframes estIn{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}

.est-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px;}
.est-tile{background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:10px 6px; text-align:center;}
.est-tile-v{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--accent);}
.est-tile-l{font-size:11px; font-weight:700; color:var(--ink-soft);}
.est-tile-s{font-size:10.5px; color:var(--ink-faint);}

.est-dona{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center;}
.est-dona svg{width:160px; height:160px; flex:none;}
.est-dona-n{font-size:24px; font-weight:800; fill:var(--ink);}.est-dona-s{font-size:9px; fill:var(--ink-faint);}
.est-leyenda{list-style:none; margin:0; padding:0; display:grid; gap:8px; flex:1; min-width:170px;}
.est-leyenda li{display:flex; align-items:center; gap:8px; font-size:13px;}
.est-leyenda i{width:11px; height:11px; border-radius:4px; flex:none;}
.est-leyenda span{flex:1;}.est-leyenda b{font-weight:800;}.est-leyenda em{font-style:normal; color:var(--ink-faint); width:38px; text-align:right; font-size:12px;}
.est-leyenda.est-inline{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px;}.est-leyenda.est-inline span{flex:none;}

.est-barras,.est-tend{display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:6px; height:190px; align-items:end;}
.est-bcol,.est-tcol{display:flex; flex-direction:column; align-items:center; height:100%; min-width:0;}
.est-bpista{flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; border-bottom:1px solid var(--border);}
.est-bbar{width:min(70%,34px); background:var(--accent); border-radius:6px 6px 0 0; transition:height .6s cubic-bezier(.2,.8,.2,1); animation:estGrow .7s ease both; transform-origin:bottom;}
.est-bcanc{width:min(30%,14px); background:#f4a3a3; border-radius:5px 5px 0 0;}
.est-bapil{width:min(70%,34px); display:flex; flex-direction:column; border-radius:6px 6px 0 0; overflow:hidden; animation:estGrow .7s ease both; transform-origin:bottom;}
.est-bapil div{width:100%;}
.est-bcol.hl .est-bbar,.est-tcol.hl .est-bbar{box-shadow:0 0 0 3px rgba(109,91,246,.18);}
.est-bval{font-size:11px; font-weight:700; color:var(--ink-soft); height:16px;}
.est-bl{font-size:10.5px; color:var(--ink-faint); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
@keyframes estGrow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.est-nota{font-size:11.5px; color:var(--ink-faint); margin-top:10px;}
.est-sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin:0 4px 0 10px; vertical-align:-1px;}.est-sw:first-child{margin-left:0;}

.est-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.est-calor{display:grid; grid-template-columns:42px repeat(var(--cols),minmax(24px,1fr)); gap:3px; min-width:560px;}
.est-ch{font-size:10px; color:var(--ink-faint); text-align:center;}
.est-cd{font-size:11.5px; font-weight:700; color:var(--ink-soft); display:flex; align-items:center;}
.est-cc{height:26px; border-radius:6px; background:#f0f2fa;}

.est-prog{display:flex; height:16px; border-radius:99px; overflow:hidden; background:#eef0f7; gap:2px;}
.est-prog div{min-width:6px;}
.est-sep{height:16px;}
.est-chips{display:flex; flex-wrap:wrap; gap:8px;}
.est-chips span{background:var(--panel-2); border:1px solid var(--border); border-radius:99px; padding:5px 12px; font-size:12.5px;}.est-chips b{color:var(--accent); margin-left:4px;}

.est-hechos,.est-aten,.est-top{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:9px; font-size:13px; line-height:1.45;}
.est-aten{margin-top:0;}
.est-aten li{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:#f4f5fb;}
.est-aten li i{margin-top:2px; color:var(--ink-faint);}.est-aten li.warn{background:#fff4e0;}.est-aten li.warn i{color:#d97706;}.est-aten li.ok{background:#e9faf3;}.est-aten li.ok i{color:#0a8f63;}
.est-hechos li{padding-left:14px; position:relative;}.est-hechos li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.est-top{margin-top:0;}
.est-top li{display:flex; align-items:center; gap:10px;}
.est-medalla{width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:none;}
.est-top li:nth-child(1) .est-medalla{background:#f59e0b;}.est-top li:nth-child(2) .est-medalla{background:#94a3b8;}.est-top li:nth-child(3) .est-medalla{background:#c2763a;}
.est-top-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.est-tabla{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
.est-tabla th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
.est-tabla td{padding:10px; border-bottom:1px solid #f0f1f7; white-space:nowrap;}
.est-mini{position:relative; min-width:120px; height:22px; background:#eef0f7; border-radius:99px; overflow:hidden;}
.est-mini i{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#6d5bf6,#8b7cff); border-radius:99px;}
.est-mini span{position:relative; padding-left:10px; font-weight:800; font-size:12px; line-height:22px; color:#fff; mix-blend-mode:normal; text-shadow:0 0 3px rgba(0,0,0,.35);}
.est-vacio{color:var(--ink-faint); font-size:13px; text-align:center; padding:18px 0;}
.est-pie{font-size:11.5px; color:var(--ink-faint); margin:18px 2px 0; line-height:1.5;}

@media (max-width:760px){
  #view-estadisticas .est-wrap{padding:14px 14px 96px;}
  .est-tiles{grid-template-columns:repeat(2,1fr);}
  .est-kpi-v{font-size:28px;}
  .est-barras,.est-tend{gap:3px; height:170px;}
  .est-bval{font-size:9.5px;}
  #estadisticas-controles{width:100%;}
  #estadisticas-controles select{flex:1 1 100%;}
  .est-dona{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){.est-kpi,.est-card,.est-bbar,.est-bapil{animation:none;}}

/* Cuadro de pacientes al pasar el cursor / tocar */
[data-k]{cursor:pointer; outline-offset:2px;}
.est-kpi[data-k]:hover,.est-tile[data-k]:hover,.est-bcol[data-k]:hover .est-bpista,.est-leyenda li[data-k]:hover,.est-chips span[data-k]:hover,.est-aten li[data-k]:hover{filter:brightness(.97);}
.est-leyenda li[data-k]:hover,.est-hechos li[data-k]:hover{text-decoration:underline dotted; text-underline-offset:3px;}
.est-chips span[data-k]:hover{border-color:var(--accent);}
[data-k]:focus-visible{outline:2px solid var(--accent); border-radius:8px;}
.est-tip{pointer-events:none; position:fixed; z-index:99990; width:min(300px,calc(100vw - 16px)); background:#101425; color:#eef0fb; border-radius:14px; padding:10px 12px 8px; box-shadow:0 18px 50px -12px rgba(16,20,37,.55); font-size:12.5px; animation:estIn .15s ease both;}
.est-tip-h{display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:6px;}
.est-tip-h b{font-size:12.5px;}.est-tip-h span{background:var(--accent); color:#fff; border-radius:99px; padding:1px 9px; font-weight:800; font-size:12px;}
.est-tip ul{list-style:none; margin:0; padding:0; display:grid; gap:3px; }
.est-tip li{display:flex; justify-content:space-between; gap:10px; padding:3px 0;}
.est-tip li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.est-tip li em{font-style:normal; color:#9aa3c7; font-size:11.5px; white-space:nowrap; flex:none;}
.est-tip-m{color:#9aa3c7; font-size:11.5px; padding:4px 0 2px;}
/* 21-oct-2026: celdas/barras con cuadro de pacientes */
.est-cc[data-k],.est-tcol[data-k],.est-bcanc[data-k]{cursor:pointer;}
.est-cc[data-k]:hover{outline:2px solid #101425; outline-offset:-2px;}
.est-bcanc[data-k]:hover{filter:brightness(.92);}