:root {
    color-scheme: dark;
    --cp-bg: #080b12;
    --cp-surface: #10151f;
    --cp-surface-2: #151c29;
    --cp-surface-3: #1b2332;
    --cp-border: rgba(255, 255, 255, .09);
    --cp-border-strong: rgba(255, 255, 255, .16);
    --cp-text: #f7f8fc;
    --cp-muted: #919bad;
    --cp-primary: #6d7cff;
    --cp-primary-strong: #5365f6;
    --cp-cyan: #31c7e8;
    --cp-green: #37d394;
    --cp-orange: #ffad5a;
    --cp-pink: #ef6fae;
    --cp-red: #ff647c;
    --cp-radius: 22px;
    --cp-radius-sm: 14px;
    --cp-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

html.dark-theme body {
    min-height: 100vh;
    color: var(--cp-text);
    background:
        radial-gradient(circle at 84% -10%, rgba(109, 124, 255, .16), transparent 34rem),
        radial-gradient(circle at 10% 90%, rgba(49, 199, 232, .08), transparent 32rem),
        var(--cp-bg);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header {
    background: rgba(12, 16, 25, .98);
    border-color: var(--cp-border);
    box-shadow: none !important;
}

.sidebar-header {
    height: 74px;
    padding: 0 18px;
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: block;
    filter: none !important;
    border-radius: 14px;
}

.logo-text {
    margin-left: 11px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.brand-plus {
    color: var(--cp-primary);
}

.toggle-icon,
.mobile-toggle-menu {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cp-border);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
}

.sidebar-wrapper .metismenu {
    padding: 10px 12px 24px;
}

.sidebar-wrapper .metismenu .menu-label {
    margin: 20px 12px 8px;
    color: #697386;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}

html.dark-theme .sidebar-wrapper .metismenu a {
    min-height: 52px;
    margin: 4px 0;
    padding: 8px 10px;
    color: #a8b0c0;
    border: 1px solid transparent;
    border-radius: 16px;
    transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease;
}

html.dark-theme .sidebar-wrapper .metismenu a:hover {
    color: var(--cp-text);
    background: rgba(255, 255, 255, .055);
    border-color: var(--cp-border);
    transform: translateX(3px);
}

html.dark-theme .sidebar-wrapper .metismenu .mm-active > a {
    color: #fff;
    background: linear-gradient(135deg, rgba(109, 124, 255, .24), rgba(109, 124, 255, .08));
    border-color: rgba(109, 124, 255, .32);
    box-shadow: inset 3px 0 0 var(--cp-primary);
}

.sidebar-wrapper .metismenu a .parent-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.nav-icon--home { background: linear-gradient(135deg, #6d7cff, #925cff); }
.nav-icon--boletas { background: linear-gradient(135deg, #2bbfe6, #3578f6); }
.nav-icon--print { background: linear-gradient(135deg, #ffad5a, #f07555); }
.nav-icon--files { background: linear-gradient(135deg, #37d394, #1cae89); }
.nav-icon--users { background: linear-gradient(135deg, #ef6fae, #b85cff); }
.nav-icon--roles { background: linear-gradient(135deg, #8b98a9, #586678); }
.nav-icon--plazas { background: linear-gradient(135deg, #f5c451, #e78b3f); }
.nav-icon--sessions { background: linear-gradient(135deg, #53d1bc, #2a8fbf); }

html.dark-theme .topbar {
    height: 74px;
    background: rgba(8, 11, 18, .76);
    border-color: var(--cp-border);
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.topbar .navbar {
    height: 74px;
    padding: 0 22px;
}

.page-wrapper {
    margin-top: 74px;
}

.page-content {
    max-width: 1540px;
    margin: 0 auto;
    padding: 28px 28px 24px;
    animation: cp-page-enter .42s cubic-bezier(.2, .75, .25, 1) both;
}

body.module-leaving .page-content {
    animation: cp-page-leave .16s ease both;
}

@keyframes cp-page-enter {
    from { opacity: 0; transform: translateX(22px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes cp-page-leave {
    to { opacity: 0; transform: translateX(-16px); }
}

.user-box {
    border: 0 !important;
}

.user-box > .nav-link {
    min-height: 48px;
    padding: 7px 14px !important;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
}

.user-symbol {
    width: 34px;
    height: 34px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--cp-primary), #9b5cff);
}

html.dark-theme .card {
    overflow: hidden;
    background: linear-gradient(145deg, rgba(21, 28, 41, .98), rgba(15, 20, 31, .98));
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
}

.card-body {
    padding: 1.35rem;
}

.page-breadcrumb {
    min-height: 52px;
    padding: 0 4px;
}

.breadcrumb-title {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
}

.breadcrumb-item,
.breadcrumb-item.active {
    color: var(--cp-muted) !important;
}

.btn {
    min-height: 42px;
    padding: .58rem 1.08rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(0) scale(.98);
}

.btn-sm {
    min-height: 34px;
    padding: .36rem .72rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-strong));
    border-color: transparent;
    box-shadow: 0 9px 24px rgba(83, 101, 246, .24);
}

.btn-info {
    color: #071016;
    background: linear-gradient(135deg, #63def2, var(--cp-cyan));
    border-color: transparent;
}

.btn-success {
    background: linear-gradient(135deg, #56dfa9, var(--cp-green));
    border-color: transparent;
}

.btn-danger {
    background: linear-gradient(135deg, #ff7e92, var(--cp-red));
    border-color: transparent;
}

.btn-warning {
    color: #181108;
    background: linear-gradient(135deg, #ffc878, var(--cp-orange));
    border-color: transparent;
}

html.dark-theme .btn-outline-primary,
html.dark-theme .btn-outline-secondary {
    color: #dfe3ec;
    background: rgba(255, 255, 255, .035);
    border-color: var(--cp-border-strong);
}

html.dark-theme .form-control,
html.dark-theme .form-select,
html.dark-theme .input-group-text {
    min-height: 46px;
    color: var(--cp-text);
    background-color: rgba(8, 11, 18, .72);
    border-color: var(--cp-border-strong);
    border-radius: 14px;
}

html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus {
    color: #fff;
    background-color: rgba(8, 11, 18, .92);
    border-color: rgba(109, 124, 255, .7);
    box-shadow: 0 0 0 .23rem rgba(109, 124, 255, .13);
}

.form-label {
    color: #b9c0cd;
    font-weight: 650;
}

.form-text,
.text-muted {
    color: var(--cp-muted) !important;
}

html.dark-theme .table {
    --bs-table-bg: transparent;
    --bs-table-color: #dfe3eb;
    --bs-table-border-color: var(--cp-border);
}

.table thead th {
    padding-top: .9rem;
    padding-bottom: .9rem;
    color: #8993a6;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
}

.badge {
    padding: .48rem .72rem;
    border-radius: 999px;
    font-weight: 700;
}

.dropdown-menu {
    padding: .55rem;
    border: 1px solid var(--cp-border) !important;
    border-radius: 16px;
}

.dropdown-item {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 11px;
}

.cp-hero {
    position: relative;
    min-height: 186px;
    margin-bottom: 24px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(109, 124, 255, .22);
    border-radius: 28px;
    background:
        linear-gradient(120deg, rgba(109, 124, 255, .22), rgba(49, 199, 232, .06)),
        var(--cp-surface);
    box-shadow: var(--cp-shadow);
}

.cp-hero::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    top: -105px;
    right: -45px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(109, 124, 255, .55), transparent 68%);
    filter: blur(4px);
}

.cp-kicker {
    margin-bottom: 10px;
    color: #9ca7ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cp-hero h1 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 850;
    letter-spacing: -.055em;
}

.cp-hero p {
    max-width: 620px;
    margin: 12px 0 0;
    color: #a9b2c2;
    font-size: 1rem;
}

.cp-stat-card {
    min-height: 150px;
    border-radius: 22px;
    transition: transform .22s ease, border-color .22s ease;
}

.cp-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, .18);
}

.cp-stat-card .cp-stat-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 26px;
    color: #fff;
}

.cp-stat-card h3 {
    margin: 18px 0 2px;
    font-size: 2rem;
    font-weight: 850;
}

.cp-stat-card p {
    margin: 0;
    color: var(--cp-muted);
    font-weight: 650;
}

.cp-stat--violet .cp-stat-icon { background: linear-gradient(135deg, #6d7cff, #925cff); }
.cp-stat--orange .cp-stat-icon { background: linear-gradient(135deg, #ffb35d, #f26c57); }
.cp-stat--green .cp-stat-icon { background: linear-gradient(135deg, #43d9a0, #1aa98c); }
.cp-stat--cyan .cp-stat-icon { background: linear-gradient(135deg, #42d3ea, #397cf4); }

.controlp-login {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 16%, rgba(109, 124, 255, .28), transparent 28rem),
        radial-gradient(circle at 90% 82%, rgba(49, 199, 232, .14), transparent 30rem),
        var(--cp-bg) !important;
}

.login-shell {
    width: min(1100px, calc(100% - 32px));
    min-height: 650px;
    margin: 32px auto;
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: 32px;
    background: rgba(13, 18, 28, .91);
    box-shadow: 0 36px 100px rgba(0, 0, 0, .48);
    backdrop-filter: blur(22px);
}

.login-story {
    position: relative;
    padding: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(109, 124, 255, .18), rgba(8, 11, 18, .28));
}

.login-story::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    bottom: -160px;
    border: 80px solid rgba(109, 124, 255, .15);
    border-radius: 50%;
}

.login-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-brand .brand-mark {
    width: 68px;
    height: 68px;
    border-radius: 20px;
}

.login-brand-name {
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -.05em;
}

.login-form-panel {
    padding: 58px 52px;
    display: flex;
    align-items: center;
}

.login-form-wrap {
    width: 100%;
}

.login-form-wrap h2 {
    margin-bottom: 8px;
    font-size: 2rem;
    font-weight: 820;
    letter-spacing: -.045em;
}

.login-form-wrap > p {
    margin-bottom: 30px;
    color: var(--cp-muted);
}

.login-field {
    margin-bottom: 18px;
}

.login-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .page-wrapper { margin-top: 74px; }
    .login-shell { grid-template-columns: 1fr; }
    .login-story { min-height: 300px; padding: 38px; }
}

@media (max-width: 620px) {
    .page-content { padding: 20px 14px; }
    .topbar .navbar { padding: 0 14px; }
    .user-info .designattion { display: none; }
    .cp-hero { padding: 24px; min-height: 210px; }
    .login-shell { width: calc(100% - 20px); margin: 10px auto; border-radius: 24px; }
    .login-story { min-height: 250px; padding: 28px; }
    .login-form-panel { padding: 38px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}