.kpi .kq{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:11px;font-weight:700;cursor:help;user-select:none;position:relative}
/* El círculo mide 15px pero en el celular se toca: se agranda el área sensible a 44x44 con un
   pseudo-elemento invisible, sin mover nada del layout. */
.kpi .kq::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.kpi.hashint:hover .kq,.kpi .kq:focus{border-color:var(--accent);color:var(--accent)}
.kpi .ktip{position:absolute;left:12px;right:12px;top:calc(100% + 7px);z-index:30;background:var(--ink);color:#eef4f1;font-size:12px;line-height:1.45;font-weight:400;padding:9px 11px;border-radius:8px;box-shadow:var(--shadow-pop);opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .15s,transform .15s}
.kpi.hashint:hover .ktip,.kpi.hashint:focus-within .ktip,.kpi.tipopen .ktip{opacity:1;transform:translateY(0)}
.kpi .ktip::before{content:"";position:absolute;left:20px;top:-5px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.kpi .ktip b{color:#fff}
/* "?" de ayuda genérico (fuera de los KPI): reemplaza los párrafos explicativos fijos por un
   globo que aparece al pasar el mouse, al tocar en el celular o al enfocar con el teclado.
   Mismo comportamiento accesible que el "?" de los KPI. */
.info{position:relative;display:inline-flex;vertical-align:middle;margin-left:5px}
.idot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:11px;font-weight:700;cursor:help;user-select:none;position:relative}
.idot::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.info:hover .idot,.idot:focus,.info.open .idot{border-color:var(--accent);color:var(--accent);outline:none}
/* display:none cerrado, no solo opacity:0. Un globo absoluto con opacity:0 SIGUE contando para el
   scrollHeight del ancestro que scrollea, y eso le metía scroll fantasma al slide de modo reunión.
   El fade se conserva con allow-discrete + @starting-style; donde no haya soporte, el globo aparece
   sin transición (degradación aceptable: el comportamiento es correcto igual). */
.itip{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:min(340px,78vw);background:var(--ink);color:#eef4f1;font-size:12.5px;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:normal;padding:10px 12px;border-radius:8px;box-shadow:var(--shadow-pop);opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .15s,transform .15s,display .15s allow-discrete}
.info:hover .itip,.info:focus-within .itip,.info.open .itip{display:block;opacity:1;transform:translateY(0)}
@starting-style{ .info:hover .itip,.info:focus-within .itip,.info.open .itip{opacity:0;transform:translateY(-5px)} }
.itip::before{content:"";position:absolute;left:6px;top:-5px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.itip b{color:#fff;font-weight:700}
/* Cerca del borde derecho, el globo se ancla a la derecha para no cortarse. */
.info.r .itip{left:auto;right:0}
.info.r .itip::before{left:auto;right:6px}
/* .u = el globo se abre hacia ARRIBA (lo decide posInfo cuando el "?" está al pie de un contenedor
   que scrollea: colgando hacia abajo generaba scroll fantasma). La flechita pasa al borde de abajo. */
.info.u .itip{top:auto;bottom:calc(100% + 8px);transform:translateY(5px)}
.info.u:hover .itip,.info.u:focus-within .itip,.info.u.open .itip{transform:translateY(0)}
@starting-style{ .info.u:hover .itip,.info.u:focus-within .itip,.info.u.open .itip{transform:translateY(5px)} }
.info.u .itip::before{top:auto;bottom:-5px}
.kpi .val{font-size:27px;font-weight:650;margin-top:5px;color:var(--ink);letter-spacing:-.014em;line-height:1.2}
.kpi .delta{display:inline-flex;align-items:center;align-self:flex-start;gap:4px;font-size:12px;margin-top:7px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);background:var(--brand-bg);color:var(--muted);max-width:100%}
.kpi .delta.up{background:var(--pos-bg);color:#0b7031} .kpi .delta.down{background:var(--neg-bg);color:var(--neg)} .kpi .delta.flat{background:var(--brand-bg);color:var(--muted)} .kpi .delta.warn{background:var(--warn-bg);color:var(--warn)}
.kpi .delta .up{color:var(--pos)} .kpi .delta .down{color:var(--neg)} .kpi .delta .flat{color:var(--muted)}
.kpi.accent{border-left:4px solid var(--accent)}
/* Mismo criterio que .insight y .note (ver 08-varios.css): ancho completo, sin límite. */
.story{background:var(--brand-bg);border-left:4px solid var(--accent);border-radius:10px;padding:12px 14px;margin:14px 0 10px;font-size:14px;line-height:1.5}
.story b{color:var(--brand)}