/* ============================================
   KPI CARD COMPONENT - v3.0 Unified System
   Componente unificado para tarjetas de indicadores clave.
   Cubre: Admin, Analytics, Census, Infraestructura, Home.
   
   FUENTE DE VERDAD — TODO nuevo KPI debe usar estas clases.
   
   Encoding: UTF-8 sin BOM
   ============================================ */

/* ==========================================
   1. BASE — .kpi-card
   Layout horizontal (row) por defecto.
   ========================================== */
.kpi-card {
    background: var(--kpi-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--kpi-border);
    padding: var(--spacing-5);
    box-shadow: var(--kpi-shadow);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kpi-card:hover {
    border-color: var(--kpi-border-hover);
    box-shadow: var(--kpi-shadow-hover);
}

/* ==========================================
   2. HEADER — .kpi-card-header
   ========================================== */
.kpi-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

/* ==========================================
   3. ICON — .kpi-icon  /  .kpi-card-icon
   Tamaño por defecto: 36×36. Usar variantes
   --compact (34px), --lg (44px), --xl (48px).
   ========================================== */
.kpi-icon,
.kpi-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    background: var(--outlook-bg-secondary);
    color: var(--outlook-icon-neutral);
    transition: background var(--transition-base), color var(--transition-base);
}

.kpi-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--outlook-text-secondary);
    flex: 1;
}

/* ==========================================
   4. BODY — .kpi-card-body  /  .kpi-content
   Both names accepted for backward compat.
   ========================================== */
.kpi-card-body,
.kpi-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

/* ==========================================
   5. VALUE — .kpi-value
   Tamaño por defecto: 3xl. Variantes compactas
   heredan tamaños menores.
   ========================================== */
.kpi-value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--outlook-text-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ==========================================
   6. LABEL — .kpi-label
   ========================================== */
.kpi-label {
    font-size: var(--font-size-sm);
    color: var(--outlook-text-secondary);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* ==========================================
   7. CHANGE / DELTA — .kpi-change
   ========================================== */
.kpi-change {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.kpi-change-positive,
.kpi-change.positive {
    background-color: rgba(var(--color-success-rgb), 0.1);
    color: var(--color-success);
}

.kpi-change-negative,
.kpi-change.negative {
    background-color: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
}

.kpi-change-neutral,
.kpi-change.neutral {
    background-color: var(--outlook-bg-secondary);
    color: var(--outlook-text-secondary);
}

/* ==========================================
   8. VALUE STATUS VARIANTS
   Para colorear el valor según rango/estado.
   ========================================== */
.kpi-value--good,
.kpi-value.kpi-good {
    color: var(--color-success);
}

.kpi-value--warn,
.kpi-value.kpi-warn {
    color: var(--color-warning);
}

.kpi-value--bad,
.kpi-value.kpi-bad {
    color: var(--color-danger);
}

.kpi-value--zero {
    opacity: 0.4;
}

/* ==========================================
   9. ICON COLOR VARIANTS — SISTEMA UNIFICADO
   
   Dos convenciones soportadas (ambas equivalentes):
     .kpi-icon.icon-blue      (corta — preferida)
     .kpi-icon.kpi-icon-blue  (legacy — retrocompatible)
   
   Todos los colores usan tokens RGB de design-tokens.css.
   ========================================== */

/* --- Blue --- */
.kpi-icon.icon-blue,
.kpi-icon.kpi-icon-blue,
.kpi-card-icon.icon-blue {
    background: rgba(var(--palette-blue-primary-rgb), 0.1);
    color: var(--palette-blue-primary);
}

/* --- Teal --- */
.kpi-icon.icon-teal,
.kpi-icon.kpi-icon-teal,
.kpi-card-icon.icon-teal {
    background: rgba(var(--palette-teal-rgb), 0.1);
    color: var(--palette-teal);
}

/* --- Purple --- */
.kpi-icon.icon-purple,
.kpi-icon.kpi-icon-purple,
.kpi-card-icon.icon-purple {
    background: rgba(var(--palette-purple-rgb), 0.1);
    color: rgb(var(--palette-purple-rgb));
}

/* --- Orange --- */
.kpi-icon.icon-orange,
.kpi-icon.kpi-icon-orange,
.kpi-card-icon.icon-orange {
    background: rgba(var(--palette-orange-rgb), 0.1);
    color: rgb(var(--palette-orange-rgb));
}

/* --- Green --- */
.kpi-icon.icon-green,
.kpi-icon.kpi-icon-green,
.kpi-card-icon.icon-green {
    background: rgba(var(--palette-green-rgb), 0.1);
    color: rgb(var(--palette-green-rgb));
}

/* --- Red --- */
.kpi-icon.icon-red,
.kpi-icon.kpi-icon-red,
.kpi-card-icon.icon-red {
    background: rgba(var(--color-danger-rgb), 0.1);
    color: var(--color-danger);
}

/* --- Water (Infraestructura) --- */
.kpi-icon.icon-water,
.kpi-icon.kpi-icon-water,
.kpi-card-icon.icon-water {
    background: rgba(var(--palette-water-rgb), 0.1);
    color: rgb(var(--palette-water-rgb));
}

/* --- Indigo --- */
.kpi-icon.icon-indigo,
.kpi-icon.kpi-icon-indigo,
.kpi-card-icon.icon-indigo {
    background: rgba(var(--palette-indigo-rgb), 0.1);
    color: rgb(var(--palette-indigo-rgb));
}

/* --- Gray --- */
.kpi-icon.icon-gray,
.kpi-icon.kpi-icon-gray,
.kpi-card-icon.icon-gray {
    background: rgba(var(--palette-gray-neutral-rgb), 0.1);
    color: rgb(var(--palette-gray-neutral-rgb));
}

/* --- Semantic aliases --- */
.kpi-icon.icon-primary { background: rgba(var(--binas-navy-rgb), 0.1); color: var(--color-primary); }
.kpi-icon.icon-success { background: rgba(var(--color-success-rgb), 0.1); color: var(--color-success); }
.kpi-icon.icon-danger  { background: rgba(var(--color-danger-rgb), 0.1);  color: var(--color-danger); }
.kpi-icon.icon-warning { background: rgba(var(--color-warning-rgb), 0.08); color: var(--color-warning); }
.kpi-icon.icon-info    { background: rgba(var(--color-info-rgb), 0.1);    color: var(--color-info); }

/* ==========================================
   10. SIZE VARIANTS
   Controlan tamaños de icon, value, label y padding.
   ========================================== */

/* --- Compact: para strips, paneles y grids densos --- */
.kpi-card--compact,
.kpi-card.kpi-compact {
    padding: var(--spacing-3) var(--spacing-4);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-3);
}

.kpi-card--compact .kpi-icon,
.kpi-card.kpi-compact .kpi-icon,
.kpi-card--compact .kpi-card-icon,
.kpi-card.kpi-compact .kpi-card-icon {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
}

.kpi-card--compact .kpi-value,
.kpi-card.kpi-compact .kpi-value {
    font-size: var(--font-size-lg);
    margin-bottom: 0;
}

.kpi-card--compact .kpi-label,
.kpi-card.kpi-compact .kpi-label {
    font-size: var(--font-size-xs);
}

.kpi-card--compact .kpi-card-header,
.kpi-card.kpi-compact .kpi-card-header {
    margin-bottom: 0;
}

/* --- Admin: row layout with standard sizes (Admin indices) --- */
.kpi-card--admin,
.kpi-card.kpi-admin {
    padding: var(--spacing-md) var(--spacing-lg);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
}

.kpi-card--admin .kpi-icon,
.kpi-card.kpi-admin .kpi-icon,
.kpi-card--admin .kpi-card-icon,
.kpi-card.kpi-admin .kpi-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    font-size: 1.15rem;
}

.kpi-card--admin .kpi-value,
.kpi-card.kpi-admin .kpi-value {
    font-size: 1.5rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.kpi-card--admin .kpi-label,
.kpi-card.kpi-admin .kpi-label {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-card--admin .kpi-card-header,
.kpi-card.kpi-admin .kpi-card-header,
.kpi-card--admin .kpi-card-body,
.kpi-card.kpi-admin .kpi-card-body,
.kpi-card--admin .kpi-content,
.kpi-card.kpi-admin .kpi-content {
    margin-bottom: 0;
}

/* --- Large: para iconos grandes (Home, Census hero) --- */
.kpi-card--lg,
.kpi-card.kpi-lg {
    padding: var(--spacing-5) var(--spacing-6);
}

.kpi-card--lg .kpi-icon,
.kpi-card.kpi-lg .kpi-icon,
.kpi-card--lg .kpi-card-icon,
.kpi-card.kpi-lg .kpi-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
}

.kpi-card--lg .kpi-value,
.kpi-card.kpi-lg .kpi-value {
    font-size: var(--font-size-2xl);
}

/* --- XL: para dashboard hero cards --- */
.kpi-card--xl,
.kpi-card.kpi-xl {
    padding: var(--spacing-6);
}

.kpi-card--xl .kpi-icon,
.kpi-card.kpi-xl .kpi-icon,
.kpi-card--xl .kpi-card-icon,
.kpi-card.kpi-xl .kpi-card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

.kpi-card--xl .kpi-value,
.kpi-card.kpi-xl .kpi-value {
    font-size: var(--font-size-3xl);
}

/* ==========================================
   11. LAYOUT VARIANTS
   ========================================== */

/* --- Centered: valor centrado (analytics) --- */
.kpi-card--centered,
.kpi-card.kpi-centered {
    text-align: center;
    align-items: center;
}

.kpi-card--centered .kpi-card-body,
.kpi-card.kpi-centered .kpi-card-body {
    align-items: center;
}

.kpi-card--centered .kpi-label,
.kpi-card.kpi-centered .kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: var(--font-size-xs);
}

/* --- Benchmark: centered + compact (analytics benchmarking) --- */
.kpi-card--benchmark,
.kpi-card.kpi-benchmark {
    text-align: center;
    align-items: center;
    padding: var(--spacing-3);
}

.kpi-card--benchmark .kpi-card-body,
.kpi-card.kpi-benchmark .kpi-card-body,
.kpi-card--benchmark .kpi-content,
.kpi-card.kpi-benchmark .kpi-content {
    align-items: center;
}

.kpi-card--benchmark .kpi-value,
.kpi-card.kpi-benchmark .kpi-value {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-1);
}

.kpi-card--benchmark .kpi-label,
.kpi-card.kpi-benchmark .kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: var(--font-size-xs);
}

/* --- Vertical: icon arriba, valor abajo (Census) --- */
.kpi-card--vertical,
.kpi-card.kpi-vertical {
    align-items: center;
    text-align: center;
}

.kpi-card--vertical .kpi-card-header,
.kpi-card.kpi-vertical .kpi-card-header {
    flex-direction: column;
    align-items: center;
}

.kpi-card--vertical .kpi-icon,
.kpi-card.kpi-vertical .kpi-icon {
    margin-bottom: var(--spacing-3);
}

/* --- Horizontal Flat: icon + info en línea sin borde (strips) --- */
.kpi-card--flat,
.kpi-card.kpi-flat {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: var(--spacing-3) var(--spacing-4);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-3);
}

.kpi-card--flat:hover {
    border-color: transparent;
    box-shadow: none;
}

/* ==========================================
   12. INTERACTIVE VARIANT — .kpi-card--selectable
   Para KPIs clickeables que filtran datos (Census).
   ========================================== */
.kpi-card--selectable,
.kpi-card.kpi-selectable {
    cursor: pointer;
    position: relative;
}

.kpi-card--selectable::before,
.kpi-card.kpi-selectable::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--palette-blue-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: height var(--transition-base);
}

.kpi-card--selectable.active::before,
.kpi-card.kpi-selectable.active::before {
    height: 60%;
}

.kpi-card--selectable.active,
.kpi-card.kpi-selectable.active {
    border-color: rgba(var(--palette-blue-primary-rgb), 0.3);
    background: rgba(var(--palette-blue-primary-rgb), 0.04);
}

/* ==========================================
   13. ROW / GRID CONTAINER — .kpi-row
   Grid responsivo para agrupar KPI cards.
   ========================================== */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--kpi-gap);
}

/* Variantes de densidad de grid */
.kpi-row--narrow {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.kpi-row--admin {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.kpi-row--wide {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.kpi-row--fixed-4 {
    grid-template-columns: repeat(4, 1fr);
}

.kpi-row--fixed-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ==========================================
   14. SUB-VALUE / UNIT — .kpi-subvalue, .kpi-unit
   Información auxiliar debajo del valor.
   ========================================== */
.kpi-subvalue {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    margin-top: var(--spacing-1);
}

.kpi-unit {
    font-size: var(--font-size-xs);
    color: var(--outlook-text-tertiary);
    font-weight: var(--font-weight-normal);
    margin-left: var(--spacing-1);
}

/* ==========================================
   15. SKELETON / LOADING — .kpi-card--skeleton
   ========================================== */
.kpi-card--skeleton .kpi-icon,
.kpi-card--skeleton .kpi-value,
.kpi-card--skeleton .kpi-label {
    background: var(--outlook-bg-secondary);
    color: transparent;
    border-radius: var(--radius-sm);
    animation: kpiSkeletonPulse 1.5s ease-in-out infinite;
}

.kpi-card--skeleton .kpi-value {
    width: 60%;
    min-height: 1.5rem;
}

.kpi-card--skeleton .kpi-label {
    width: 80%;
    min-height: 0.875rem;
}

@keyframes kpiSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==========================================
   16. RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .kpi-card {
        padding: var(--spacing-4);
    }

    .kpi-value {
        font-size: var(--font-size-2xl);
    }

    .kpi-change {
        font-size: var(--font-size-sm);
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-row--fixed-4,
    .kpi-row--fixed-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kpi-row {
        grid-template-columns: 1fr;
    }
}