/**
 * NexaSuite ERP Enterprise v10.0 — KPI cards (minimal enterprise · glass dark sutil).
 * Iconos libres, sin cajas ni glow. Solo refinamiento visual.
 */

/* —— Tokens (solo color de acento por variante) —— */
html[data-theme="obsidian-lux"],
body.crud-admin-saas,
body.reportes-dashboard-saas,
body:has(.header-panel),
body:has(#panelCitasTable) {
    --nexa-kpi-cyan: #38bdf8;
    --nexa-kpi-blue: #60a5fa;
    --nexa-kpi-green: #4ade80;
    --nexa-kpi-red: #f87171;
    --nexa-kpi-orange: #fb923c;
    --nexa-kpi-purple: #a78bfa;
    --nexa-kpi-pink: var(--cta-text, var(--erp-cta-text, #ff5c7a));
    --nexa-kpi-gold: var(--accent-primary, #c4a574);
    --nexa-kpi-slate: #94a3b8;
    --nexa-kpi-icon-color: var(--nexa-kpi-blue);
    --nexa-kpi-value-color: var(--text-primary, #f1f5f9);
}

/* —— Grids (sin cambios de columnas) —— */
.saas-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
}

@media (min-width: 576px) {
    .saas-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .saas-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .saas-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .saas-grid-4 {
        grid-template-columns: 1fr;
    }
}

html[data-theme="obsidian-lux"] .reportes-top-kpis,
html[data-theme="obsidian-lux"] .reportes-top-kpis.saas-grid,
html[data-theme="obsidian-lux"] .reportes-bottom-kpis,
html[data-theme="obsidian-lux"] .nexa-kpi-grid.reportes-top-kpis {
    gap: 0.85rem !important;
}

html[data-theme="obsidian-lux"] .reportes-top-kpis .reportes-kpi-card,
html[data-theme="obsidian-lux"] .reportes-bottom-kpis .reportes-kpi-card {
    padding: 1.1rem 1.15rem !important;
    min-height: 0 !important;
}

/* —— Shell: glass neutro, sin barra superior ni glow de acento —— */
html[data-theme="obsidian-lux"] .reportes-kpi-card,
html[data-theme="obsidian-lux"] .ops-kpi-card,
html[data-theme="obsidian-lux"] .dashboard-card,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .reportes-premium-toolbar,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .reportes-premium-hero,
body.crud-admin-saas .reportes-kpi-card,
body.reportes-dashboard-saas .reportes-kpi-card,
body.reportes-premium-saas.reportes-dashboard-saas .report-card-premium,
body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-toolbar,
body.reportes-premium-saas.reportes-dashboard-saas .reportes-premium-hero,
body.reportes-premium-saas .report-card-premium,
body.reportes-premium-saas .reportes-premium-toolbar,
body.reportes-premium-saas .reportes-premium-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 1.1rem 1.2rem !important;
    min-height: 0 !important;
    height: auto;
    border-radius: var(--radius-md, 12px) !important;
    border: 1px solid var(--border-primary, rgba(148, 163, 184, 0.16)) !important;
    background: color-mix(in srgb, var(--bg-card, #1a2332) 92%, transparent) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease;
    overflow: visible;
}

/* Sin líneas/barras coloridas superiores */
html[data-theme="obsidian-lux"] .reportes-kpi-card::before,
html[data-theme="obsidian-lux"] .ops-kpi-card::before,
html[data-theme="obsidian-lux"] .dashboard-card::before {
    content: none !important;
    display: none !important;
}

html[data-theme="obsidian-lux"] .reportes-kpi-card:hover,
html[data-theme="obsidian-lux"] .ops-kpi-card:hover,
html[data-theme="obsidian-lux"] .dashboard-card:hover,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium:hover,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium.is-active,
body.reportes-premium-saas .report-card-premium:hover,
body.reportes-premium-saas .report-card-premium.is-active {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--border-strong, rgba(148, 163, 184, 0.28)) 100%, transparent) !important;
    background: color-mix(in srgb, var(--bg-card-hover, #222d3d) 88%, transparent) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}

/* —— Cabecera: icono arriba, limpio —— */
html[data-theme="obsidian-lux"] .reportes-kpi-card-head,
html[data-theme="obsidian-lux"] .ops-kpi-card-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.15rem !important;
}

html[data-theme="obsidian-lux"] .reportes-kpi-card-head .reportes-kpi-label {
    order: 2;
    width: 100%;
}

html[data-theme="obsidian-lux"] .reportes-kpi-ico,
html[data-theme="obsidian-lux"] .ops-kpi-ico {
    order: 1;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 0 0.15rem !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0.92 !important;
    color: var(--nexa-kpi-icon-color) !important;
}

/* —— Tipografía —— */
html[data-theme="obsidian-lux"] .reportes-kpi-label,
html[data-theme="obsidian-lux"] .ops-kpi-label,
html[data-theme="obsidian-lux"] .dashboard-card-label {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: var(--text-muted, #64748b) !important;
    margin: 0 !important;
}

html[data-theme="obsidian-lux"] .reportes-kpi-value,
html[data-theme="obsidian-lux"] .ops-kpi-value,
html[data-theme="obsidian-lux"] .dashboard-card-money {
    font-size: clamp(1.4rem, 2.2vw, 1.72rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.12 !important;
    color: var(--nexa-kpi-value-color) !important;
    margin: 0 !important;
}

html[data-theme="obsidian-lux"] .reportes-kpi-sub,
html[data-theme="obsidian-lux"] .historial-kpi-sub,
html[data-theme="obsidian-lux"] .ops-kpi-meta,
html[data-theme="obsidian-lux"] .dashboard-card-meta {
    font-size: 0.72rem !important;
    line-height: 1.35;
    color: var(--text-muted, #64748b) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Reportes PDF — tipografía catálogo = KPI dashboard */
html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium__title,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium__title.text-dark,
body.reportes-premium-saas .report-card-premium__title,
body.reportes-premium-saas .report-card-premium__title.text-dark {
    color: var(--nexa-kpi-value-color, #f1f5f9) !important;
}

html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium__desc,
html[data-theme="obsidian-lux"] body.reportes-premium-saas .report-card-premium .text-muted,
body.reportes-premium-saas .report-card-premium__desc,
body.reportes-premium-saas .report-card-premium .text-muted {
    color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="obsidian-lux"] body.reportes-premium-saas .reportes-premium-toolbar .form-label,
body.reportes-premium-saas .reportes-premium-toolbar .form-label {
    color: var(--text-muted, #94a3b8) !important;
}

html[data-theme="obsidian-lux"] .ops-kpi-value--money {
    font-size: clamp(1.2rem, 2vw, 1.45rem) !important;
}

/* Valores: neutros con tinte sutil (no neón en números) */
html[data-theme="obsidian-lux"] .reportes-kpi-value--blue {
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-blue) 35%, var(--text-primary, #f1f5f9));
}

html[data-theme="obsidian-lux"] .reportes-kpi-value--green {
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-green) 38%, var(--text-primary, #f1f5f9));
}

html[data-theme="obsidian-lux"] .reportes-kpi-value--red {
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-red) 40%, var(--text-primary, #f1f5f9));
}

html[data-theme="obsidian-lux"] .reportes-kpi-value--violet {
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-purple) 35%, var(--text-primary, #f1f5f9));
}

/* —— Solo color de icono por variante —— */
html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-info,
html[data-theme="obsidian-lux"] .ops-kpi-card--info {
    --nexa-kpi-icon-color: var(--nexa-kpi-cyan);
}

html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-success,
html[data-theme="obsidian-lux"] .ops-kpi-card--success {
    --nexa-kpi-icon-color: var(--nexa-kpi-green);
}

html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-danger,
html[data-theme="obsidian-lux"] .ops-kpi-card--danger {
    --nexa-kpi-icon-color: var(--nexa-kpi-red);
}

html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-warning,
html[data-theme="obsidian-lux"] .ops-kpi-card--warn {
    --nexa-kpi-icon-color: var(--nexa-kpi-orange);
}

html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-distribution,
html[data-theme="obsidian-lux"] .ops-kpi-card--violet {
    --nexa-kpi-icon-color: var(--nexa-kpi-purple);
}

html[data-theme="obsidian-lux"] .ops-kpi-card--money {
    --nexa-kpi-icon-color: var(--nexa-kpi-gold);
}

html[data-theme="obsidian-lux"] .ops-kpi-card--alert {
    --nexa-kpi-icon-color: var(--nexa-kpi-pink);
}

html[data-theme="obsidian-lux"] .ops-kpi-card--neutral {
    --nexa-kpi-icon-color: var(--nexa-kpi-slate);
}

html[data-theme="obsidian-lux"] .dashboard-card--hoy {
    --nexa-kpi-icon-color: var(--nexa-kpi-orange);
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-orange) 40%, var(--text-primary, #f1f5f9));
}

html[data-theme="obsidian-lux"] .dashboard-card--semana {
    --nexa-kpi-icon-color: var(--nexa-kpi-cyan);
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-cyan) 35%, var(--text-primary, #f1f5f9));
}

html[data-theme="obsidian-lux"] .dashboard-card--quincena {
    --nexa-kpi-icon-color: var(--nexa-kpi-purple);
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-purple) 35%, var(--text-primary, #f1f5f9));
}

html[data-theme="obsidian-lux"] .dashboard-card--mes {
    --nexa-kpi-icon-color: var(--nexa-kpi-green);
    --nexa-kpi-value-color: color-mix(in srgb, var(--nexa-kpi-green) 38%, var(--text-primary, #f1f5f9));
}

/* Sin bordes top legacy de panel-citas */
html[data-theme="obsidian-lux"] .ops-kpi-card--info,
html[data-theme="obsidian-lux"] .ops-kpi-card--success,
html[data-theme="obsidian-lux"] .ops-kpi-card--money,
html[data-theme="obsidian-lux"] .ops-kpi-card--danger,
html[data-theme="obsidian-lux"] .ops-kpi-card--violet,
html[data-theme="obsidian-lux"] .ops-kpi-card--warn,
html[data-theme="obsidian-lux"] .ops-kpi-card--alert,
html[data-theme="obsidian-lux"] .ops-kpi-card--neutral {
    border-top: none !important;
}

html[data-theme="obsidian-lux"] .reportes-kpi-ico,
html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-info .reportes-kpi-ico,
html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-success .reportes-kpi-ico,
html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-danger .reportes-kpi-ico,
html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-distribution .reportes-kpi-ico,
html[data-theme="obsidian-lux"] .reportes-kpi-card--accent-warning .reportes-kpi-ico {
    color: var(--nexa-kpi-icon-color) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="obsidian-lux"] .reportes-top-kpis .reportes-kpi-value,
html[data-theme="obsidian-lux"] .reportes-kpi-value--blue,
html[data-theme="obsidian-lux"] .reportes-kpi-value--green,
html[data-theme="obsidian-lux"] .reportes-kpi-value--red,
html[data-theme="obsidian-lux"] .reportes-kpi-value--violet {
    color: var(--nexa-kpi-value-color, var(--text-primary)) !important;
}

@media (max-width: 575.98px) {
    html[data-theme="obsidian-lux"] .reportes-kpi-ico,
    html[data-theme="obsidian-lux"] .ops-kpi-ico {
        font-size: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="obsidian-lux"] .reportes-kpi-card:hover,
    html[data-theme="obsidian-lux"] .ops-kpi-card:hover,
    html[data-theme="obsidian-lux"] .dashboard-card:hover {
        transform: none;
    }
}