:root {
    --nav:#0f1b2d;
    --nav2:#13233b;
    --primary:#0d6efd;
    --bg:#f4f7fb;
    --text:#172033;
    --muted:#6b7280;
    --border:#e5eaf1
}

* {
    box-sizing:border-box
}
body {
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif
}
.app-shell {
    min-height:100vh
}
.sidebar {
    width:250px;
    min-height:100vh;
    background:linear-gradient(180deg,var(--nav),#0b1422);
    position:fixed;
    left:0;
    top:0;
    z-index:1040;
    padding:22px 14px;
    transition:.25s
}
.brand {
    color:#fff;
    font-size:24px;
    font-weight:800;
    padding:0 12px 22px;
    display:flex;
    gap:10px;
    align-items:center
}
.brand i {
    color:#5aa0ff
}
.sidebar .nav-link {
    color:#cbd5e1;
    padding:11px 13px;
    border-radius:10px;
    margin:3px 0;
    font-weight:500
}
.sidebar .nav-link:hover,.sidebar .nav-link.active {
    background:#1c3f73;
    color:#fff
}
.sidebar .nav-link i {
    width:24px
}
.app-main {
    margin-left:250px;
    width:calc(100% - 250px);
    min-width:0
}
.topbar {
    height:68px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:1020
}
.content-wrap {
    padding:28px;
    max-width:1700px;
    margin:auto
}
.page-title {
    font-size:1.8rem;
    font-weight:750
}
.card {
    border:1px solid #edf0f5!important;
    border-radius:16px!important;
    box-shadow:0 4px 18px rgba(15,23,42,.045)
}
.table-responsive {
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
}
.table {
    min-width:980px
}
.table>:not(caption)>*>* {
    padding:.9rem .75rem;
    vertical-align:middle
}
.table thead th {
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.035em;
    color:#64748b;
    white-space:nowrap;
    background:#f8fafc
}
.btn {
    border-radius:10px
}
.form-control,.form-select {
    border-radius:10px;
    border-color:#dbe2ea;
    min-height:42px
}
.metric {
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    height:100%
}
.metric-icon {
    width:44px;
    height:44px;
    border-radius:12px;
    background:#eef5ff;
    color:#0d6efd;
    display:grid;
    place-items:center
}
.metric-value {
    font-size:1.75rem;
    font-weight:800
}
.branch-card {
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px
}
.mobile-menu {
    display:none
}
.login-page {
    min-height:100vh;
    background:radial-gradient(circle at 15% 25%,#183b70 0,transparent 28%),linear-gradient(135deg,#081426,#102748);
    display:grid;
    place-items:center;
    padding:24px
}
.login-box {
    width:min(960px,100%);
    display:grid;
    grid-template-columns:1.1fr .9fr;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.28)
}
.login-hero {
    padding:54px;
    color:#fff;
    background:linear-gradient(145deg,#0d2a52,#0d6efd);
    display:flex;
    flex-direction:column;
    justify-content:center
}
.login-form {
    padding:54px
}
.login-logo {
    font-size:32px;
    font-weight:800
}
.login-feature {
    display:flex;
    gap:12px;
    margin-top:22px;
    align-items:center
}
.login-feature i {
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(255,255,255,.14);
    display:grid;
    place-items:center
}

@media(max-width:991.98px) {
    .sidebar {
        transform:translateX(-100%);
        box-shadow:8px 0 30px rgba(0,0,0,.18)
    }
    .sidebar.show {
        transform:translateX(0)
    }
    .app-main {
        margin-left:0;
        width:100%
    }
    .mobile-menu {
        display:inline-flex
    }
    .content-wrap {
        padding:18px
    }
    .topbar {
        padding:0 16px
    }
    .login-box {
        grid-template-columns:1fr
    }
    .login-hero {
        display:none
    }
    .login-form {
        padding:36px 28px
    }
    .employee-toolbar {
        align-items:stretch!important;
        gap:12px;
        flex-direction:column
    }
    .employee-toolbar .btn {
        width:100%
    }
}

@media(max-width:575.98px) {
    .content-wrap {
        padding:14px
    }
    .page-title {
        font-size:1.45rem
    }
    .metric-value {
        font-size:1.45rem
    }
    .topbar .user-role {
        display:none
    }
}

@media print {
    .sidebar,
    .topbar,
    .mobile-menu,
    .btn,
    .modal,
    .swal2-container {
        display: none !important;
    }

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

    .content-wrap {
        padding: 0 !important;
    }

    body,
    .app-shell,
    .app-main {
        background: #fff !important;
    }

    .card {
        box-shadow: none !important;
        break-inside: avoid;
    }
}


/* Dashboard administrativo */
.dashboard-metric,
.dashboard-secondary-metric {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-metric:hover,
.dashboard-secondary-metric:hover,
.branch-card:hover {
    transform: translateY(-2px);
    border-color: #d6e2f1;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}
.dashboard-secondary-metric .metric-value {
    font-size: 1.45rem;
}
.dashboard-progress {
    height: 8px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}
.dashboard-progress .progress-bar {
    border-radius: 999px;
}
.dashboard-empty-state {
    text-align: center;
    padding: 24px 12px;
}
.alert-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.alert-icon-warning {
    background: #fff7e6;
    color: #b7791f;
}
.alert-icon-danger {
    background: #fff0f0;
    color: #c53030;
}
.alert-icon-info {
    background: #edf6ff;
    color: #2563eb;
}
.dashboard-ranking-item {
    padding: 13px 10px;
    border-bottom: 1px solid var(--border);
}
.dashboard-ranking-item:last-child {
    border-bottom: 0;
}
.dashboard-table {
    min-width: 860px;
}
.min-w-0 {
    min-width: 0;
}

@media(max-width:767.98px) {
    .dashboard-secondary-metric .metric-value {
        font-size: 1.25rem;
    }
}