/* =========================================================
   Indicadores Clave de Desempeño (KPIs) — tabla del piloto.
   Las filas las genera js/kpis.js desde data/kpis.json.
   ========================================================= */
.tabla-kpi {
  overflow: hidden;
  border-top: 5px solid var(--color-acento);
  /* Cada fila sube en cascada (base.css); el recorte las hace emerger. */
  --desplazamiento-reveal: 0 48px;
  --duracion-cascada: var(--t-lista);
}

.tabla-kpi__desplazar {
  overflow-x: auto;
}

.tabla-kpi table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0 var(--esp-2);
  padding: var(--esp-3) var(--esp-5) var(--esp-5);
}

.tabla-kpi th {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--color-linea);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-acento);
}

.tabla-kpi td {
  padding: var(--esp-4);
  font-size: var(--texto-sm);
  transition: background var(--t-media);
}

.tabla-kpi tbody tr:nth-child(odd) td {
  background: var(--color-superficie-alt);
}

.tabla-kpi tbody tr:hover td {
  background: var(--color-acento-suave);
}

.tabla-kpi td:first-child {
  border-radius: var(--radio-sm) 0 0 var(--radio-sm);
}

.tabla-kpi td:last-child {
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
}

.kpi__categoria {
  display: inline-block;
  min-width: 130px;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--radio-pill);
  background: var(--color-acento-suave);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-acento);
}

.kpi__indicador {
  font-weight: 700;
  color: var(--color-tinta);
}

.kpi__numero {
  margin-right: var(--esp-2);
}

.kpi__meta {
  color: var(--color-tenue);
}

.kpi__meta--destacada {
  display: inline-block;
  padding: var(--esp-1) var(--esp-4);
  border-radius: var(--radio-sm);
  background: var(--color-acento);
  font-weight: 700;
  color: var(--color-blanco);
}

.kpi__demo {
  font-weight: 700;
  color: var(--color-tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla-kpi__nota {
  padding: 0 var(--esp-5) var(--esp-5);
  font-size: var(--texto-xs);
  color: var(--color-tenue);
}