/*
 * Patron canonico de KPI dashboard (dashboard-card + kpi-stat-card + accent-*).
 * Fuente de verdad: Front/docs/style-guide/kpis.md — sus valores ganan ante
 * cualquier drift encontrado en las paginas.
 *
 * Las paginas de AccessControl (Observations, Credentials, AccessLogs,
 * WorkerImport, TerminalStatus, VehicleBadges, Visits) y cualquier pagina
 * nueva que use este patron NO deben redefinir estos selectores en su propio
 * <style> — solo anadir variantes namespaced/propias (p.ej. .obs-*, .vis-*).
 */

:root {
    --kpi-primary: var(--atlas-blue-600);
    --kpi-success: var(--atlas-emerald-500);
    --kpi-warning: var(--atlas-amber-500);
    --kpi-danger:  var(--atlas-red-500);
    --kpi-info:    var(--atlas-blue-500);
    --kpi-orange:  var(--atlas-orange-500);
    --card-bg:        var(--atlas-white);
    --body-bg:        var(--atlas-gray-100);
    --text-primary:   var(--atlas-gray-900);
    --text-secondary: var(--atlas-gray-500);
}

.dashboard-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    box-shadow: var(--atlas-shadow-1);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
    overflow: hidden;          /* CRITICO: necesario para que ::after no se salga */
}

.dashboard-card:hover {
    box-shadow: var(--atlas-shadow-2);
    transform: translateY(-2px);
}

.kpi-stat-card {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;        /* CRITICO: para que ::after se ancle dentro */
    overflow: hidden;
}

.kpi-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-color);
    opacity: 0.8;
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-bg);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.kpi-content { flex: 1; }

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.accent-primary { --accent-color: var(--kpi-primary); --accent-bg: var(--atlas-color-primary-soft); }
.accent-success { --accent-color: var(--kpi-success); --accent-bg: rgba(16, 185, 129, 0.1); }
.accent-warning { --accent-color: var(--kpi-warning); --accent-bg: rgba(245, 158, 11, 0.1); }
.accent-danger  { --accent-color: var(--kpi-danger);  --accent-bg: rgba(239, 68, 68, 0.1); }
/* Extra: no documentada en kpis.md, pero usada en 5/7 paginas AccessControl */
.accent-info    { --accent-color: var(--kpi-info);    --accent-bg: rgba(59, 130, 246, 0.1); }

.compliance-bar-wrapper { margin-top: 0.5rem; }
.compliance-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--atlas-gray-200);
    overflow: hidden;
}
.compliance-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.compliance-bar-fill.green  { background: var(--kpi-success); }
.compliance-bar-fill.orange { background: var(--kpi-warning); }
.compliance-bar-fill.red    { background: var(--kpi-danger); }

/* ── Dashboard shell (no cubierto por kpis.md, tomado de Credentials.razor) ── */
.asset-dashboard  { background: var(--body-bg); min-height: 100%; padding: 1.5rem; }
.dashboard-banner { background: var(--atlas-white); padding: 1.25rem 2rem; border-radius: 12px; box-shadow: var(--atlas-shadow-1); display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; border-left: 5px solid var(--kpi-primary); }
.banner-title     { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.banner-subtitle  { font-size: .875rem; color: var(--text-secondary); margin-top: .2rem; }
.master-card      { border-radius: 12px; overflow: hidden; }

/* ── KPI click-to-filter (consistente en AccessLogs/Observations/WorkerImport) ── */
.kpi-clickable    { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kpi-clickable:hover { box-shadow: var(--atlas-shadow-3) !important; transform: translateY(-1px); }
.kpi-active-filter { box-shadow: 0 0 0 2px var(--accent-color) inset !important; }