/* ── Variables ── */
:root {
    --sb-w: 230px;
    --sb-bg: #1e293b;
    --sb-text: #94a3b8;
    --sb-active: #3b82f6;
    --body-bg: #f1f5f9;
}

/* ── Reset / base ── */
body { background: var(--body-bg); }

/* ── Login ── */
.login-body  { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card  { width:100%; max-width:400px; }

/* ── Layout ── */
.sidebar {
    position: fixed; top:0; left:0; height:100vh; width:var(--sb-w);
    background: var(--sb-bg); display:flex; flex-direction:column;
    overflow-y: auto; z-index:100;
}
.sb-brand {
    padding: 1.1rem 1rem;
    font-weight:700; font-size:.9rem; color:#fff;
    border-bottom:1px solid #334155; letter-spacing:.02em;
}
.sb-nav { list-style:none; padding:.5rem 0; margin:0; flex:1; }
.sb-nav a {
    display:flex; align-items:center; gap:.5rem;
    padding:.55rem 1rem; color:var(--sb-text); text-decoration:none;
    font-size:.88rem; border-radius:5px; margin:.1rem .5rem;
    transition:background .15s,color .15s;
}
.sb-nav a:hover  { background:#334155; color:#e2e8f0; }
.sb-nav a.active { background:var(--sb-active); color:#fff; }
.sb-footer {
    padding:.85rem 1rem; border-top:1px solid #334155;
    font-size:.78rem; color:#64748b;
}
.sb-footer strong { display:block; color:#94a3b8; margin-bottom:.25rem; }
.sb-footer a { color:#64748b; text-decoration:none; }
.sb-footer a:hover { color:#e2e8f0; }

.main { margin-left:var(--sb-w); padding:1.75rem; min-height:100vh; }
.page-hdr { margin-bottom:1.5rem; }
.page-hdr h1 { font-size:1.35rem; font-weight:700; margin:0; }
.page-hdr p  { color:#64748b; margin:0; font-size:.9rem; }

/* ── Tarjetas métricas ── */
.metric-card { border:none; border-radius:10px; }
.metric-card .metric-val { font-size:2rem; font-weight:700; line-height:1; }
.metric-card .metric-lbl { font-size:.8rem; color:#64748b; margin-top:.2rem; }

/* ── Tabla ── */
.tbl-wrap { overflow-x:auto; }
.table th  { font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; font-weight:600; }
.table td  { font-size:.88rem; vertical-align:middle; }

/* ── Badge status ── */
.badge-activo   { background:#dcfce7; color:#166534; }
.badge-inactivo { background:#fee2e2; color:#991b1b; }