/* ===========================================================================
   kpis.css · Repositorio de KPIs de OverData
   Tarjetas de KPI (acordeón) + mini-visuales de ejemplo. Depende de landing.css
   (usa sus variables --b/--bd/--ink/--muted/--line/--tint). Versionar con ?v=N.
   =========================================================================== */

/* ---- índice de áreas ---- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:860px){.areas{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.areas{grid-template-columns:1fr}}
.acard{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 18px 40px -32px rgba(1,69,125,.4);transition:transform .15s,box-shadow .15s}
a.acard:hover{transform:translateY(-4px);box-shadow:0 26px 52px -28px rgba(1,69,125,.5)}
.acard .ic{width:44px;height:44px;border-radius:12px;background:var(--tint);display:grid;place-items:center;font-size:1.3rem;margin-bottom:14px}
.acard h3{font-size:1.1rem;margin:0 0 6px}
.acard p{color:var(--muted);font-size:.9rem;margin:0}
.acard .n{color:var(--b);font-weight:700;font-size:.85rem;margin-top:12px}

/* ---- nota de marco/norma ---- */
.frw{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:18px}
.frw .fl{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.frw span.chip{background:var(--tint);color:var(--bd);font-weight:700;font-size:.74rem;padding:.32em .7em;border-radius:20px}

/* ---- tarjeta KPI (acordeón) ---- */
.kcard{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;background:#fff;box-shadow:0 14px 34px -30px rgba(1,69,125,.5)}
.kcard>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;padding:15px 18px}
.kcard>summary::-webkit-details-marker{display:none}
.kcard>summary:hover{background:#f8fbfe}
.ktag{background:var(--b);color:#fff;font-weight:800;font-size:.72rem;padding:.32em .62em;border-radius:7px;letter-spacing:.02em;flex:none;min-width:34px;text-align:center}
.kname{font-weight:800;color:var(--ink);font-size:1.02rem;line-height:1.2}
.kunit{color:var(--muted);font-size:.74rem;font-weight:700;background:#eef2f7;padding:.2em .6em;border-radius:20px;flex:none}
.kmarco{margin-left:auto;color:var(--b);font-size:.68rem;font-weight:700;background:var(--tint);padding:.3em .65em;border-radius:20px;white-space:nowrap;flex:none}
.kchev{color:var(--b);font-size:.9rem;transition:transform .2s;flex:none}
.kcard[open] .kchev{transform:rotate(180deg)}
.kcard[open]>summary{background:var(--tint);border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--b)}
.kbody{padding:16px 18px 18px}
.kgrid{display:grid;grid-template-columns:1.08fr 1fr;gap:24px}
@media(max-width:760px){.kgrid{grid-template-columns:1fr;gap:14px}.kmarco{display:none}}
.kblock{margin-bottom:15px}
.kblock:last-child{margin-bottom:0}
.klbl{display:inline-block;background:var(--tint);color:var(--bd);font-weight:800;font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;padding:.34em .72em;border-radius:6px;margin-bottom:8px}
.kblock p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.kchips{display:flex;flex-wrap:wrap;gap:6px}
.kchips span{background:#f1f5f9;color:var(--ink);font-size:.76rem;padding:.3em .62em;border-radius:7px;border:1px solid var(--line)}
.kformula{background:var(--bd);color:#eaf2fb;border-radius:10px;padding:12px 15px;font-size:.84rem;font-weight:600;line-height:1.45;font-variant-numeric:tabular-nums}
.kviz{background:#f8fbfe;border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.kex{margin:12px 0 0;color:var(--muted);font-size:.82rem;line-height:1.45}

/* ---- mini-visuales ---- */
.vmeter .vm-top{display:flex;align-items:baseline;gap:7px;margin-bottom:10px}
.vm-val{font-size:1.8rem;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.vm-unit{color:var(--muted);font-size:.82rem;font-weight:700}
.vm-obj{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:700;background:#eef2f7;padding:.26em .66em;border-radius:20px}
.vm-track{position:relative;height:11px;background:#e9eef4;border-radius:7px;margin-bottom:20px}
.vm-fill{position:absolute;left:0;top:0;height:100%;border-radius:7px}
.vm-mark{position:absolute;top:-3px;width:2px;height:17px;background:#334;border-radius:2px}
.vm-mark b{position:absolute;top:19px;left:50%;transform:translateX(-50%);font-size:.6rem;color:#445;white-space:nowrap;font-weight:700}
.vnum .vn-val{font-size:2.1rem;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.vnum .vn-unit{font-size:.9rem;font-weight:700;color:var(--muted);margin-left:7px}
.vnum .vn-note{color:var(--muted);font-size:.82rem;margin-top:8px}
.vbars{display:flex;align-items:flex-end;gap:9px;height:118px;margin-bottom:6px}
.vbars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.vbars .bv{font-size:.64rem;font-weight:800;color:var(--ink);margin-bottom:4px;font-variant-numeric:tabular-nums}
.vbars .bb{width:100%;border-radius:5px 5px 0 0;min-height:4px}
.vbars .bl{font-size:.58rem;color:var(--muted);margin-top:5px;text-align:center;line-height:1.1}
.vdona{display:flex;align-items:center;gap:18px}
.dn{position:relative;width:122px;height:122px;border-radius:50%;flex:none}
.dn-h{position:absolute;inset:25px;background:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:var(--ink);text-align:center;line-height:1;padding:0 5px;overflow:hidden}
.dn-h span{display:block;font-size:.5rem;font-weight:600;color:var(--muted);margin-top:3px;line-height:1.08;max-width:100%}
.dn-leg{display:grid;gap:9px;font-size:.82rem;color:var(--ink)}
.dn-leg span{display:inline-flex;align-items:center;gap:8px}
.dn-leg i{width:11px;height:11px;border-radius:3px;flex:none}
.vline{width:100%;height:auto;display:block}
.vline-cap{color:var(--muted);font-size:.74rem;margin-top:8px;display:flex;gap:14px;flex-wrap:wrap}
.vline-cap b{font-weight:700}