/* ── KPIs ────────────────────────────────────────────────────────────────
   Motor de rentabilidad por proyecto, vista por áreas (Producción · Ejecutivo ·
   RRHH · Tiempos · Ventas · Satisfacción) y panel de gastos. Las alertas viven
   en la ventana de avisos (alertas.js pinta con .notif-item.al de layout.css).
   Solo tokens de base.css; pestañas, chips, tablas, tarjetas y formularios son
   los de base.css («Primitivas de vista»). Los fondos suaves salen de
   color-mix sobre el mismo color del texto, así valen en claro y en oscuro. */
#view-kpis{overflow-y:auto}
#view-kpis .view-wrap{--vw-max:1180px}
@media (min-width:1101px){#view-kpis .view-wrap{padding-right:56px}}   /* los botones flotantes no tapan la última columna */

.kpi-td-nombre{font-weight:500}
.kpi-mini{font-size:11px;color:var(--c-text3)}
.kpi-hr-fuera{color:var(--c-warning);font-weight:600}
.kpi-hr-tit{margin:0 6px;font-size:19px;font-weight:700;letter-spacing:var(--tracking-display);white-space:nowrap;color:var(--c-text)}

/* SVG genérico (Ejecutivo) */
.kpi-svg{width:100%;height:180px;display:block}
.kpi-svg-lbl{fill:var(--c-text3);font-size:11px}
.kpi-svg-val{fill:var(--c-text2);font-size:9px;font-weight:600}
.kpi-svg-donut{width:130px;height:130px;display:block;margin:2px auto}
.kpi-donut-top{fill:var(--c-text);font-size:22px;font-weight:700}
.kpi-donut-bot{fill:var(--c-text3);font-size:10px}
.kpi-gaugewrap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}
.kpi-lg{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--c-text2);margin-top:4px}
.kpi-lg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
/* barras divergentes (crecimiento) */
.kpi-dv{display:grid;grid-template-columns:56px 1fr 1fr 50px;align-items:center;margin-bottom:8px}
.kpi-dv:last-child{margin-bottom:0}
.kpi-dv-l{font-size:11px;color:var(--c-text3);font-variant-numeric:tabular-nums}
.kpi-dv-neg{display:flex;justify-content:flex-end;border-right:1px solid var(--c-border2);padding-right:4px}
.kpi-dv-pos{display:flex;padding-left:4px}
.kpi-dv-bar{height:12px;border-radius:3px;display:block}
.kpi-dv-r{font-size:11px;text-align:right;font-variant-numeric:tabular-nums}

/* ── Panel de gastos (modal-overlay + .modal.kpi-modal, ver fichModal) ── */
.kpi-modal{width:640px}
.kpi-part-nota{padding:2px 0}

/* Presupuesto vs gasto por partida: barra mini en la última columna */
.kpi-part td b{font-weight:600}
.kpi-barra{width:74px;padding-right:12px!important}
.kpi-barra span{display:block;height:5px;border-radius:3px;min-width:2px;transition:width .3s}
.kpi-part tr.kpi-sinpart td{background:color-mix(in srgb,var(--c-warning) 8%,transparent)}
/* la primera celda es sticky y opaca (base.css, sobre --c-bg): aquí vive en el modal, sobre --c-surface */
.tabla-wrap .kpi-part :is(th,td):first-child{background:var(--c-surface)}
.kpi-part tr.kpi-sinpart td:first-child{background:color-mix(in srgb,var(--c-warning) 8%,var(--c-surface))}

/* Jornadas presupuestadas contra reales, bajo el concepto de cada partida */
.kpi-jorfila{font-size:11.5px;font-weight:600;color:var(--c-green);margin-top:3px;font-variant-numeric:tabular-nums}
.kpi-jorfila.cerca{color:var(--c-warning)}
.kpi-jorfila.pasado{color:var(--c-red)}

/* ── Móvil ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px), ((hover: none) and (pointer: coarse) and (max-width: 1400px)) {
  .kpi-hr-tit{font-size:17px}
  /* Partidas: sin la barra y con menos aire, que quepan las tres cifras sin desplazarse */
  .tabla-wrap .kpi-part{min-width:0}
  .kpi-part :is(th,td){padding-left:4px;padding-right:4px}
  .kpi-part :is(th,td):not(:first-child){padding-left:2px;padding-right:2px}
  .kpi-part td:first-child .kpi-mini{white-space:normal}
  .kpi-part :is(th,td):last-child{display:none}
}