:root {
    --azul: #1f3864;
    --azul-2: #2e5597;
    --fondo: #f3f5f9;
    --borde: #e3e7ef;
}

body { background: var(--fondo); font-size: .925rem; color: #1d2433; }
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px; flex-shrink: 0; background: var(--azul); color: #cfd8ea;
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .marca { display: flex; gap: .75rem; align-items: center; padding: 1.25rem 1.25rem 1rem; color: #fff; }
.sidebar .marca i { font-size: 1.8rem; }
.sidebar .marca small { display: block; font-size: .75rem; color: #9fb0d0; }
.sidebar nav { padding: .5rem; flex: 1; overflow-y: auto; }
.sidebar nav a {
    display: flex; gap: .65rem; align-items: center; color: #cfd8ea; text-decoration: none;
    padding: .55rem .8rem; border-radius: .45rem; margin-bottom: 2px;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar nav a.activo { background: #fff; color: var(--azul); font-weight: 600; }
.pie-sidebar { font-size: .72rem; color: #8597bb; padding: 1rem 1.25rem; }

.contenido { flex: 1; min-width: 0; }
.topbar {
    display: flex; align-items: center; gap: .75rem; background: #fff; border-bottom: 1px solid var(--borde);
    padding: .75rem 1.5rem; position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }

.card { border: 1px solid var(--borde); border-radius: .6rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--borde); font-weight: 600; }

.kpi { padding: 1rem 1.1rem; }
.kpi .etq { font-size: .78rem; color: #5b6578; text-transform: uppercase; letter-spacing: .02em; }
.kpi .val { font-size: 1.45rem; font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: .78rem; color: #6b7487; }
.kpi.destacado { background: var(--azul); color: #fff; }
.kpi.destacado .etq, .kpi.destacado .sub { color: #c4d0e8; }
.kpi.destacado .val { color: #fff; }

.filtros .form-label { font-size: .75rem; color: #5b6578; margin-bottom: .2rem; }
.table { font-size: .84rem; }
.table thead th { background: #f7f9fc; color: #3c465a; font-weight: 600; white-space: nowrap; position: sticky; top: 0; }
.table thead th[data-orden] { cursor: pointer; }
.table thead th[data-orden]:hover { color: var(--azul-2); }
.tabla-scroll { max-height: 62vh; overflow: auto; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-box { position: relative; height: 300px; }
.chart-box.alto { height: 360px; }
.badge-nivel-ALTO { background: #dc3545; }
.badge-nivel-MEDIO { background: #fd7e14; }
.badge-nivel-BAJO { background: #198754; }
.cargando { opacity: .5; pointer-events: none; }
.linea-tiempo { border-left: 2px solid var(--borde); padding-left: 1rem; }
.linea-tiempo .item { position: relative; margin-bottom: .75rem; }
.linea-tiempo .item::before {
    content: ""; position: absolute; left: -1.38rem; top: .3rem; width: .65rem; height: .65rem;
    border-radius: 50%; background: var(--azul-2);
}

.login-fondo { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #1f3864, #2e5597); }
.login-caja { background: #fff; width: min(400px, calc(100% - 32px)); padding: 2rem; border-radius: .8rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.login-icono { font-size: 2.6rem; color: var(--azul); }

@media (max-width: 575.98px) {
    .kpi .val { font-size: 1.1rem; }
    .kpi { padding: .8rem; }
}
@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: -260px; z-index: 50; transition: left .2s; }
    .sidebar.abierto { left: 0; }
    .topbar { padding: .6rem 1rem; }
}
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
}