/* ============================================================================
   MTMP 360 — TARJETAS DE KPI (familia .kpi-*)
   UX-DS-06.03 · extraído de wwwroot/css/project-detail-hero-2026.css:185-243
   ----------------------------------------------------------------------------
   POR QUÉ SE MUEVE
   Estas reglas vivían en la hoja del hero del detalle de proyecto, cargada con un <link> DENTRO
   de Pages/ProjectDetail.razor — es decir, en UNA sola pantalla de toda la plataforma. El tablero
   de Module 2 (oleada 1 de este goal) tiene que pintar sus paneles de resumen con el mismo
   lenguaje, y no podía mientras el CSS fuera page-local. Aquí queda disponible para cualquier
   módulo.

   ⚠ POR QUÉ ESTE ARCHIVO **NO** ENTRA A UN @layer — y no es pereza
   Se carga con un <link> suelto desde Pages/_Layout.cshtml, deliberadamente FUERA del sistema de
   capas de design-system/index.css. La razón es de cascada y es la única forma de cumplir el AC5
   ("el render de ProjectDetail no cambia"):

     · Un estilo NO-layered gana a CUALQUIER @layer. Lo dice el propio index.css en su nota de
       cascada, y es la regla de CSS: entre declaraciones normales, lo no-layered tiene la
       prioridad más alta.
     · Hoy `.kpi-*` llega justamente así —no-layered— y en ProjectDetail convive en el MISMO
       elemento con `.mtmp-card` (`<div class="kpi-card mtmp-card">`), que sí vive en
       `layer(tokens)`. El `padding`, el `margin-bottom` y el `display:flex` de `.kpi-card` se
       resuelven hoy con esa ventaja.
     · Meter estas reglas a `layer(components)` las volvería perdedoras frente a todo lo
       no-layered que aún queda (las ~20 hojas de app con <link> suelto y el CSS scoped de
       Blazor), y eso mueve el render del detalle de proyecto. Que es exactamente lo prohibido.

   Plegar esta familia a la cascada es deuda legítima y está anotada: es la misma deuda que
   index.css declara en su punto 3a para el resto de las hojas sueltas. Pero es OTRA story — aquí
   el contrato firmado es paridad visual.

   ── SOBRE LOS CUATRO COLORES CRUDOS DE .kpi-icon--green / --amber ────────────────────────────
   `#d1fae5 #065f46 #fef3c7 #92400e` se mueven VERBATIM. Tokenizarlos cambiaría el color en
   pantalla, y este goal es re-skin sin cambio de color no decidido. No son `#hex` NUEVOS: son los
   mismos que ya estaban, en otro archivo. (Y no entran al barrido de TokenSweepTests, que recorre
   solo hojas scoped `*.razor.css` — ni el origen ni el destino de esta extracción lo son.)
   ============================================================================ */

.kpi-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    margin-bottom: 0;
}

.kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--mtmp-radius-md, 12px);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.kpi-icon--blue   { background: var(--mtmp-soft-sky, #D8F1FF); color: var(--mtmp-primary, #117BFF); }
.kpi-icon--green  { background: #d1fae5; color: #065f46; }
.kpi-icon--amber  { background: #fef3c7; color: #92400e; }
.kpi-icon--purple { background: var(--mtmp-violet-glow, #E9DDFF); color: var(--mtmp-secondary, #6E3BFF); }

/* UX-DS-06.04 — dos tonos que la familia no traía y que el tablero de Module 2 sí necesita: sus
   paneles de resumen cuentan eventos en rojo ("Tool Down") y en gris ("Spare Parts"). Se declaran
   como ALIAS del diccionario de roles —cero hex nuevo, FD-07— en vez de repetir el patrón de los
   cuatro crudos de arriba, que se movieron verbatim solo porque ya existían. */
.kpi-icon--red  { background: var(--state-danger-bg);  color: var(--state-danger-fg); }
.kpi-icon--gray { background: var(--state-neutral-bg); color: var(--state-neutral-fg); }

.kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mtmp-text-gray, #6B7A90);
}

.kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--mtmp-dark-text, #1D2C48);
    font-variant-numeric: tabular-nums;
}

.kpi-caption {
    font-size: 0.72rem;
    color: var(--mtmp-text-gray, #6B7A90);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-caption--warn {
    color: var(--mtmp-warning, #F5A623);
    font-weight: 600;
}