/*
 * kpi-unified.css
 * Unifica el estilo de todas las tarjetas KPI del CGC al formato HSEQ.
 * fondo blanco · border-top color · sombra · tipografía consistente
 * No modificar los módulos individuales — este archivo es la fuente única.
 */

/* ── Variables de color compartidas ────────────────────────── */
:root {
  --kpi-radius: 10px;
  --kpi-pad: 12px 14px;
  --kpi-gap: 3px;
  --kpi-lbl-size: 10px;
  --kpi-val-size: 28px;
  --kpi-sub-size: 10px;
  --kpi-gold: #e8a020;
  --kpi-blue: #2176ae;
  --kpi-teal: #1195a7;
}

/* ══════════════════════════════════════════════════════════════
   1. CLASES GLOBALES — .kpi, .alert-card
   (usadas por RRHH Spot, Herramientas, CEIM, app.bundle)
   ══════════════════════════════════════════════════════════════ */
.kpi {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--border) !important;
  border-radius: var(--kpi-radius) !important;
  padding: var(--kpi-pad) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--kpi-gap) !important;
  box-shadow: var(--shadow) !important;
}
.kpi.k-green  { border-top-color: var(--green)   !important; }
.kpi.k-bad    { border-top-color: var(--bad)      !important; }
.kpi.k-warn   { border-top-color: #d97706         !important; }
.kpi.k-blue   { border-top-color: var(--kpi-blue) !important; }
.kpi.k-gold   { border-top-color: var(--kpi-gold) !important; }
.kpi.k-teal   { border-top-color: var(--kpi-teal) !important; }
.kpi.k-muted  { border-top-color: var(--muted)    !important; }

.kpi-label, .kpi-lbl {
  font-size: var(--kpi-lbl-size) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-weight: 700 !important;
}
.kpi-val {
  font-size: var(--kpi-val-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--text);
}
.kpi-sub {
  font-size: var(--kpi-sub-size) !important;
  color: rgba(15,23,42,.45) !important;
  margin-top: 2px !important;
}

/* alert-card (RRHH Base) */
.alert-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--border) !important;
  border-radius: var(--kpi-radius) !important;
  padding: var(--kpi-pad) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--kpi-gap) !important;
  box-shadow: var(--shadow) !important;
}
.alert-card.red   { border-top-color: var(--bad) !important; }
.alert-card.amber { border-top-color: #d97706    !important; }
.alert-card.green { border-top-color: var(--ok)  !important; }
.alert-count {
  font-size: var(--kpi-val-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.alert-card.red   .alert-count { color: var(--bad) !important; }
.alert-card.amber .alert-count { color: #d97706    !important; }
.alert-card.green .alert-count { color: var(--ok)  !important; }
.alert-label {
  font-size: var(--kpi-lbl-size) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  color: var(--muted) !important;
}
.alert-sub {
  font-size: var(--kpi-sub-size) !important;
  color: rgba(15,23,42,.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   2. EDP — clases .kpi .top .val .name .hint .progress
   ══════════════════════════════════════════════════════════════ */
#mod-edp .kpi {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--kpi-blue) !important;
  border-radius: var(--kpi-radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 12px 14px !important;
}
#mod-edp .kpi .name {
  font-size: var(--kpi-lbl-size) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-weight: 700 !important;
}
#mod-edp .kpi .val {
  font-size: var(--kpi-val-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}
#mod-edp .kpi .hint {
  font-size: var(--kpi-sub-size) !important;
  color: rgba(15,23,42,.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   3. EERR — clases .eerr-kpi .label .val .sub
   ══════════════════════════════════════════════════════════════ */
#mod-eerr .eerr-kpi {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--border) !important;
  border-radius: var(--kpi-radius) !important;
  padding: var(--kpi-pad) !important;
  box-shadow: var(--shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--kpi-gap) !important;
}
#mod-eerr .eerr-kpi.k-green { border-top-color: var(--green)   !important; }
#mod-eerr .eerr-kpi.k-bad   { border-top-color: var(--bad)     !important; }
#mod-eerr .eerr-kpi.k-warn  { border-top-color: #d97706        !important; }
#mod-eerr .eerr-kpi.k-blue  { border-top-color: var(--kpi-blue)!important; }
#mod-eerr .eerr-kpi .label {
  font-size: var(--kpi-lbl-size) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-weight: 700 !important;
}
#mod-eerr .eerr-kpi .val {
  font-size: var(--kpi-val-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#mod-eerr .eerr-kpi .sub {
  font-size: var(--kpi-sub-size) !important;
  color: rgba(15,23,42,.45) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. CONFIGURACIÓN — clases .cfg-kpi .cfg-kpi-label .cfg-kpi-val
   ══════════════════════════════════════════════════════════════ */
#mod-configuracion .cfg-kpi {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--kpi-blue) !important;
  border-radius: var(--kpi-radius) !important;
  padding: var(--kpi-pad) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--kpi-gap) !important;
  box-shadow: var(--shadow) !important;
}
#mod-configuracion .cfg-kpi-label {
  font-size: var(--kpi-lbl-size) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-weight: 700 !important;
}
#mod-configuracion .cfg-kpi-val {
  font-size: var(--kpi-val-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#mod-configuracion .cfg-kpi-sub {
  font-size: var(--kpi-sub-size) !important;
  color: rgba(15,23,42,.45) !important;
  margin-top: 2px !important;
}

/* ══════════════════════════════════════════════════════════════
   5. HSEQ — ya tiene el estilo correcto, solo normalizamos
   ══════════════════════════════════════════════════════════════ */
#mod-hseq .kpi {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--border) !important;
  border-radius: var(--kpi-radius) !important;
  padding: var(--kpi-pad) !important;
  box-shadow: var(--shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--kpi-gap) !important;
}
#mod-hseq .kpi.k-gold  { border-top-color: var(--kpi-gold) !important; border-left: none !important; }
#mod-hseq .kpi.k-green { border-top-color: var(--green)    !important; border-left: none !important; }
#mod-hseq .kpi.k-blue  { border-top-color: var(--kpi-blue) !important; border-left: none !important; }
#mod-hseq .kpi.k-amber { border-top-color: #d97706         !important; border-left: none !important; }
#mod-hseq .kpi.k-red   { border-top-color: var(--bad)      !important; border-left: none !important; }
#mod-hseq .kpi.k-teal  { border-top-color: var(--kpi-teal) !important; border-left: none !important; }
#mod-hseq .kpi-lbl {
  font-size: var(--kpi-lbl-size) !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  font-weight: 700 !important;
}
#mod-hseq .kpi-val {
  font-size: var(--kpi-val-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#mod-hseq .kpi-sub {
  font-size: var(--kpi-sub-size) !important;
  color: rgba(15,23,42,.45) !important;
}