:root  {
    
    --navy:#0b1739;
    
    --primary:#2563eb;
    
    --bg:#f4f7fb;
    
    --text:#172033;
    
    --muted:#70809a;
    
    --sidebar:270px

}

*  {
    
    box-sizing:border-box

}

body  {
    
    margin:0;
    
    background:var(--bg);
    
    color:var(--text);
    
    font-family:Inter,
system-ui,
"Segoe UI",
sans-serif

}

.app-shell  {
    
    display:flex;
    
    min-height:100vh

}

.sidebar  {
    
    position:fixed;
    
    inset:0 auto 0 0;
    
    width:var(--sidebar);
    
    background:linear-gradient(180deg,
var(--navy),
#071027);
    
    color:#fff;
    
    display:flex;
    
    flex-direction:column;
    
    z-index:1040;
    
    transition:transform .25s

}

.sidebar-brand  {
    
    height:82px;
    
    display:flex;
    
    align-items:center;
    
    gap:12px;
    
    padding:0 24px;
    
    color:#fff;
    
    text-decoration:none;
    
    font-size:1.35rem;
    
    font-weight:750

}

.sidebar-brand small,
.login-page h1 span  {
    
    color:#71a1ff

}

.brand-mark  {
    
    width:42px;
    
    height:42px;
    
    display:grid;
    
    place-items:center;
    
    border-radius:13px;
    
    background:linear-gradient(135deg,
#3b82f6,
#1d4ed8);
    
    color:#fff;
    
    font-size:1.25rem;
    
    box-shadow:0 8px 22px #2563eb55

}

.sidebar-nav  {
    
    padding:12px;
    
    overflow-y:auto;
    
    flex:1

}

.nav-label  {
    
    padding:18px 13px 7px;
    
    color:#7181a5;
    
    font-size:.68rem;
    
    font-weight:700;
    
    letter-spacing:.12em;
    
    text-transform:uppercase

}

.sidebar .nav-link  {
    
    display:flex;
    
    align-items:center;
    
    gap:13px;
    
    color:#aebbd4;
    
    border-radius:10px;
    
    padding:11px 13px;
    
    margin:3px 0

}

.sidebar .nav-link:hover,
.sidebar .nav-link.active  {
    
    color:#fff;
    
    background:#ffffff14

}

.sidebar .nav-link.active  {
    
    box-shadow:inset 3px 0 #4f8cff

}

.sidebar-footer  {
    
    padding:20px 24px;
    
    color:#7483a4;
    
    font-size:.8rem;
    
    border-top:1px solid #ffffff0d

}

.app-main  {
    
    margin-left:var(--sidebar);
    
    min-height:100vh;
    
    display:flex;
    
    flex-direction:column;
    
    width:calc(100% - var(--sidebar))

}

.topbar  {
    
    height:82px;
    
    background:#ffffffdd;
    
    backdrop-filter:blur(10px);
    
    border-bottom:1px solid #e7ecf3;
    
    display:flex;
    
    align-items:center;
    
    padding:0 30px;
    
    position:sticky;
    
    top:0;
    
    z-index:1020

}

.topbar h1  {
    
    font-size:1.15rem;
    
    margin:0;
    
    font-weight:700

}

.sidebar-toggle  {
    
    font-size:1.5rem;
    
    margin-right:12px;
    
    display:none

}

.user-menu  {
    
    display:flex;
    
    align-items:center;
    
    gap:10px;
    
    border:0

}

.user-avatar  {
    
    width:36px;
    
    height:36px;
    
    border-radius:50%;
    
    display:grid;
    
    place-items:center;
    
    background:#dbeafe;
    
    color:#1d4ed8;
    
    font-weight:800

}

.content  {
    
    padding:30px;
    
    flex:1

}

.app-footer  {
    
    padding:16px 30px;
    
    color:var(--muted);
    
    font-size:.8rem

}

.metric-card,
.panel-card  {
    
    background:#fff;
    
    border:1px solid #e8edf5;
    
    border-radius:16px;
    
    box-shadow:0 5px 18px #17203308

}

.metric-card  {
    
    padding:20px;
    
    display:flex;
    
    align-items:center;
    
    gap:15px

}

.metric-card span  {
    
    display:block;
    
    color:var(--muted);
    
    font-size:.8rem

}

.metric-card strong  {
    
    display:block;
    
    font-size:1.65rem

}

.metric-icon  {
    
    width:48px;
    
    height:48px;
    
    border-radius:14px;
    
    display:grid;
    
    place-items:center;
    
    font-size:1.25rem

}

.metric-icon.blue  {
    
    background:#dbeafe;
    
    color:#2563eb

}

.metric-icon.green  {
    
    background:#dcfce7;
    
    color:#16a34a

}

.metric-icon.amber  {
    
    background:#fef3c7;
    
    color:#d97706

}

.metric-icon.purple  {
    
    background:#f3e8ff;
    
    color:#9333ea

}

.empty-state  {
    
    text-align:center;
    
    padding:42px 20px

}

.empty-state>i  {
    
    font-size:3rem;
    
    color:#7ca5f8

}

.empty-state h3,
.empty-state h2  {
    
    font-size:1.15rem;
    
    margin:14px 0 7px

}

.empty-state p  {
    
    color:var(--muted);
    
    max-width:500px;
    
    margin:0 auto 20px

}

.status-list  {
    
    list-style:none;
    
    padding:0;
    
    margin:0

}

.status-list li  {
    
    display:flex;
    
    gap:11px;
    
    align-items:center;
    
    padding:11px 0;
    
    border-bottom:1px solid #eef1f6

}

.status-list i  {
    
    color:#22c55e

}

.status-list .pending  {
    
    color:var(--muted)

}

.status-list .pending i  {
    
    color:#cbd5e1

}

.login-page  {
    
    background:radial-gradient(circle at 20% 10%,
#1e3a72 0,
transparent 38%),
linear-gradient(145deg,
#071027,
#102653)

}

.login-card  {
    
    border-radius:22px

}

.login-page .brand-mark  {
    
    display:grid

}

.form-control,
.input-group-text  {
    
    padding:.72rem .85rem;
    
    border-color:#dfe5ee

}

.btn-primary  {
    
    background:#2563eb;
    
    border-color:#2563eb

}

.sidebar-backdrop  {
    
    display:none

}

/* Barra lateral retráctil en escritorio */
.sidebar,
.app-main  {
    transition:width .25s ease, margin-left .25s ease, transform .25s ease
}

.sidebar-toggle  {
    display:inline-grid;
    place-items:center
}

@media(min-width:993px)  {
    body.sidebar-collapsed .sidebar  {
        width:78px
    }

    body.sidebar-collapsed .app-main  {
        margin-left:78px;
        width:calc(100% - 78px)
    }

    body.sidebar-collapsed .sidebar-brand  {
        justify-content:center;
        padding:0
    }

    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .nav-link-text,
    body.sidebar-collapsed .sidebar-footer-text,
    body.sidebar-collapsed .nav-label  {
        display:none
    }

    body.sidebar-collapsed .sidebar-nav  {
        padding:12px 10px
    }

    body.sidebar-collapsed .sidebar .nav-link  {
        justify-content:center;
        gap:0;
        padding:13px
    }

    body.sidebar-collapsed .sidebar .nav-link i  {
        font-size:1.2rem
    }

    body.sidebar-collapsed .sidebar-footer  {
        display:flex;
        justify-content:center;
        padding:20px 0
    }
}

@media(max-width:992px)  {
    
    .sidebar  {
    
    transform:translateX(-100%)

}

.sidebar-open .sidebar  {
    
    transform:none

}

.sidebar-backdrop  {
    
    position:fixed;
    
    inset:0;
    
    background:#07102799;
    
    z-index:1030

}

.sidebar-open .sidebar-backdrop  {
    
    display:block

}

.app-main  {
    
    margin-left:0;
    
    width:100%

}

.sidebar-toggle  {
    
    display:block

}

.content  {
    
    padding:20px

}

.topbar  {
    
    padding:0 18px

}

}