/* Paleta aproximada a partir de la captura institucional compartida;
valores no extraídos del CSS oficial. */ :root {
    --brand:#08051d;
    --brand-strong:#050316;
    --accent:#bb86f5;
    --accent-secondary:#43c5cb;
    --bg:#08051d;
    --surface:#15102d;
    --text:#f8f6ff;
    --muted:#b6aeca;
    --line:#35294d;
    --sidebar-width:248px;
    --sidebar-small:72px;
    --topbar-height:68px;
    font-family:Inter,Arial,Helvetica,sans-serif;
    color-scheme:dark
}

* {
    box-sizing:border-box
}

html {
    min-width:320px
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text)
}

button,a {
    font:inherit
}

a {
    color:inherit
}

.topbar {
    height:var(--topbar-height);
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    gap:16px;
    padding:0 22px;
    background:var(--surface);
    border-bottom:1px solid var(--line)
}

.icon-button {
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--surface);
    color:var(--text);
    padding:10px 13px;
    cursor:pointer
}

.icon-button:focus-visible,a:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:2px
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.04em
}

.brand img {
    width:auto;
    max-width:140px;
    height:44px;
    object-fit:contain
}

.brand small {
    font-weight:400;
    color:var(--muted);
    letter-spacing:0
}

.environment {
    margin-left:auto;
    color:var(--muted);
    font-size:.8rem
}

.app-shell {
    display:flex;
    min-height:calc(100vh - var(--topbar-height))
}

.sidebar {
    position:sticky;
    top:var(--topbar-height);
    height:calc(100vh - var(--topbar-height));
    width:var(--sidebar-width);
    flex:0 0 var(--sidebar-width);
    background:var(--brand-strong);
    color:var(--text);
    display:flex;
    flex-direction:column;
    transition:width .2s,flex-basis .2s;
    overflow:hidden
}

.sidebar-heading {
    padding:26px 22px 12px;
    font-size:.72rem;
    letter-spacing:.1em;
    color:var(--muted);
    white-space:nowrap
}

.sidebar nav {
    display:grid;
    gap:4px;
    padding:0 10px
}

.sidebar nav a {
    display:flex;
    align-items:center;
    gap:15px;
    padding:13px 15px;
    border-radius:9px;
    text-decoration:none;
    white-space:nowrap;
    color:#eae2f7
}

.sidebar nav a:hover,.sidebar nav a[aria-current=page] {
    background:#bb86f522;
    color:#fff
}

.nav-icon {
    width:24px;
    min-width:24px;
    text-align:center;
    font-size:1.2rem
}

.sidebar-foot {
    margin-top:auto;
    padding:18px 20px;
    color:var(--muted);
    font-size:.75rem
}

.main {
    flex:1;
    min-width:0;
    padding:30px;
    display:flex;
    flex-direction:column
}

.page-header {
    margin-bottom:24px
}

.page-header h1 {
    font-size:clamp(1.5rem,3vw,2rem);
    margin:0 0 7px
}

.page-header p {
    color:var(--muted);
    margin:0
}

.stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}

.card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:13px;
    padding:22px;
    box-shadow:0 5px 18px #00000020
}

.stat-label {
    font-size:.9rem;
    color:var(--muted)
}

.stat-value {
    font-size:1.9rem;
    font-weight:800;
    margin-top:8px
}

.section {
    margin-top:24px
}

.section h2 {
    font-size:1.1rem;
    margin:0 0 12px
}

.notice {
    border-left:4px solid var(--accent);
    padding:16px;
    background:#231639;
    border-radius:7px
}

.footer {
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    margin-top:auto;
    padding-top:22px;
    color:var(--muted);
    font-size:.78rem
}

.collapsed .sidebar {
    width:var(--sidebar-small);
    flex-basis:var(--sidebar-small)
}

.collapsed .sidebar-heading,.collapsed .nav-label {
    visibility:hidden
}

.collapsed .sidebar nav a {
    padding:13px 12px
}

.overlay {
    display:none
}

@media(max-width:1050px) {
    .stats {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width:767px) {
    .topbar {
        padding:0 12px
    }
    .environment {
        display:none
    }
    .main {
        padding:20px 14px
    }
    .sidebar {
        position:fixed;
        top:var(--topbar-height);
        bottom:0;
        left:0;
        height:calc(100dvh - var(--topbar-height));
        width:min(280px,85vw)!important;
        flex-basis:auto!important;
        z-index:25;
        transform:translateX(-100%);
        transition:transform .2s
    }
    .sidebar-heading,.nav-label {
        visibility:visible!important
    }
    .menu-open .sidebar {
        transform:translateX(0)
    }
    .overlay {
        display:none;
        position:fixed;
        inset:var(--topbar-height) 0 0;
        background:#02010dcc;
        z-index:24
    }
    .menu-open .overlay {
        display:block
    }
    .stats {
        grid-template-columns:1fr
    }
    .footer {
        display:grid
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        transition:none!important;
        scroll-behavior:auto!important
    }
}

/* Identidad visual y mejoras de contraste */
.topbar {
    background:var(--brand-strong)
}

.brand small {
    display:block;
    font-size:.72rem;
    font-weight:500
}

.page-header h1 {
    letter-spacing:-.025em
}

.stat-value {
    color:var(--accent)
}

.sidebar nav a[aria-current=page] {
    box-shadow:inset 3px 0 0 var(--accent)
}

.card {
    background:linear-gradient(145deg,var(--surface),#110d27)
}

.notice {
    border-left-color:var(--accent-secondary)
}

::selection {
    background:var(--accent);
    color:var(--brand-strong)
}