:root {
    --brand-primary: #0f6cbd;
    --brand-secondary: #00a389;
    --brand-accent: #ffb020;
    --brand-danger: #e74c3c;
    --surface-glass: rgba(255, 255, 255, 0.92);
    --text-main: #1d2b44;
}

html {
    font-size: 15px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    color: var(--text-main);
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
}

.app-gradient-bg {
    min-height: calc(100vh - 114px);
    background: radial-gradient(circle at 15% 20%, rgba(15, 108, 189, 0.28), transparent 42%),
    radial-gradient(circle at 88% 15%, rgba(0, 163, 137, 0.24), transparent 30%),
    linear-gradient(145deg, #f2f7ff 0%, #e9f3ff 36%, #fffdf4 100%);
}

.page-title-glow {
    color: #0f6cbd !important;
    text-shadow: 0 6px 22px rgba(15, 108, 189, 0.25);
    font-weight: 700;
}

.main-sidebar {
    background: linear-gradient(180deg, #172a52 0%, #203765 55%, #1e4b7a 100%);
}

.nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--brand-primary), #27548f);
    box-shadow: 0 8px 18px rgba(15, 108, 189, 0.34);
    border-radius: 0.4rem;
}

.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.app-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 0.7rem 0.85rem;
    overflow: hidden;
}

.app-brand-full-wrap,
.app-brand-mini-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.app-brand-logo-full {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 34px;
    object-fit: contain;
}

.app-brand-mini-wrap {
    display: none;
}

.app-brand-logo-mini {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.sidebar-collapse .app-brand-full-wrap {
    display: none;
}

.sidebar-collapse .app-brand-mini-wrap {
    display: flex;
}

.sidebar-collapse .app-brand-link {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.card {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px rgba(24, 39, 75, 0.08);
}

.card-outline.card-primary {
    border-top: 3px solid var(--brand-primary);
}

.card-outline.card-success {
    border-top: 3px solid var(--brand-secondary);
}

.card-outline.card-warning {
    border-top: 3px solid var(--brand-accent);
}

.card-outline.card-danger {
    border-top: 3px solid var(--brand-danger);
}

.small-box {
    border-radius: 0.75rem;
    overflow: hidden;
}

.small-box .icon {
    top: 0.6rem;
    right: 1rem;
}

.btn-primary {
    background: linear-gradient(90deg, #0f6cbd, #1158a8);
    border-color: #0f6cbd;
}

.btn-success {
    background: linear-gradient(90deg, #00a389, #008b75);
    border-color: #008b75;
}

.btn-warning {
    color: #1f2b3b;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(15, 108, 189, 0.25);
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3c8dbc, #00a389);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.app-user-panel {
    gap: 0.6rem;
    color: #fff;
    border-radius: 0.6rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.app-user-panel:hover,
.app-user-panel:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.06);
}

.app-user-avatar,
.app-user-photo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.app-user-photo {
    display: block;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background-color: rgba(255, 255, 255, 0.08);
}

.app-user-name {
    max-width: 170px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-user-name-secondary {
    color: rgba(255, 255, 255, 0.92);
}

.dashboard-chart-shell {
    position: relative;
    min-height: 320px;
    height: 320px;
}

.dashboard-card-static {
    height: auto;
}

.dashboard-chart-shell canvas {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-donut-shell {
    position: relative;
    min-height: 250px;
    height: 250px;
}

.dashboard-donut-shell canvas {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-state-list {
    max-height: 220px;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .dashboard-chart-shell {
        min-height: 360px;
        height: 360px;
    }

    .dashboard-donut-shell {
        min-height: 280px;
        height: 280px;
    }
}

.card-hover-rise {
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.card-hover-rise:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(22, 57, 99, 0.18);
}

.login-card-animate {
    animation: cardIn 0.45s ease;
}

.login-summary-card {
    border: 0;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 251, 255, 0.98));
    box-shadow: 0 24px 46px rgba(18, 42, 79, 0.14);
    overflow: hidden;
}

.login-summary-card .card-body {
    position: relative;
}

.login-summary-card .card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(15, 108, 189, 0.08), transparent 28%),
        radial-gradient(circle at left bottom, rgba(0, 163, 137, 0.07), transparent 24%);
    pointer-events: none;
}

.login-summary-card .card-body > * {
    position: relative;
    z-index: 1;
}

.login-brand-logo {
    max-width: 180px;
    max-height: 72px;
    object-fit: contain;
}

.login-title {
    color: var(--text-main);
    font-weight: 800;
}

.login-copy {
    color: #6a7d96;
    line-height: 1.55;
}

.login-summary-card label {
    font-weight: 700;
    color: #25466e;
}

.login-summary-card .form-control {
    min-height: 46px;
    border-radius: 0.85rem;
    border-color: #d4e0ee;
    box-shadow: none;
}

.login-summary-card .form-control:focus {
    border-color: rgba(15, 108, 189, 0.35);
    box-shadow: 0 0 0 0.15rem rgba(15, 108, 189, 0.12);
}

.btn-pucesa-primary {
    background: linear-gradient(90deg, var(--brand-primary), #1158a8);
    border: 0;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    min-height: 46px;
    box-shadow: 0 14px 26px rgba(15, 108, 189, 0.22);
}

.btn-pucesa-primary:hover,
.btn-pucesa-primary:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 18px 28px rgba(15, 108, 189, 0.26);
}

.login-links a {
    color: var(--brand-primary);
    font-weight: 600;
}

.login-links a:hover {
    color: #0a4e8d;
    text-decoration: none;
}

.auth-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.process-steps-labels span {
    white-space: nowrap;
    font-size: 0.72rem;
}

.swal2-popup.swal-app-modal {
    border-radius: 1rem;
    border-top: 4px solid var(--brand-primary);
    box-shadow: 0 16px 36px rgba(23, 56, 100, 0.22);
    padding: 1rem 1.1rem 1.15rem;
}

.swal2-title.swal-app-title {
    color: #1d2b44;
    font-size: 1.24rem;
    font-weight: 700;
}

.swal-app-subtitle {
    margin: 0 0 0.6rem;
    text-align: left;
    font-size: 0.86rem;
    color: #5d6c83;
}

.swal-app-label {
    text-align: left;
    font-size: 0.82rem;
    font-weight: 700;
    color: #29466d;
    margin-bottom: 0.16rem;
}

.swal-app-helper {
    text-align: left;
    font-size: 0.78rem;
    color: #6a788c;
}

.swal-app-table thead th {
    background: #eff5ff;
    color: #304e77;
    font-size: 0.8rem;
}

.swal-app-modal .swal2-html-container {
    margin-top: 0.35rem;
}

.swal-app-modal .swal2-input,
.swal-app-modal .swal2-select {
    width: 100%;
    max-width: 100%;
    margin: 0.33rem 0;
}

.swal-app-modal .swal2-actions {
    gap: 0.45rem;
}

.swal-app-modal .btn {
    border-radius: 0.52rem;
    font-weight: 600;
    min-width: 138px;
}

.swal-match-modal {
    border-top-color: var(--brand-secondary);
}

.swal-match-intro {
    text-align: left;
    font-size: 0.85rem;
    color: #4e627f;
    background: linear-gradient(90deg, rgba(15, 108, 189, 0.07), rgba(0, 163, 137, 0.09));
    border: 1px solid rgba(15, 108, 189, 0.15);
    border-radius: 0.7rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.75rem;
}

.swal-match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.7rem;
}

.swal-match-field {
    text-align: left;
}

.swal-match-field-full {
    grid-column: 1 / -1;
}

.swal-match-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2d486d;
    margin-bottom: 0.12rem;
    display: block;
}

.swal-match-helper {
    font-size: 0.76rem;
    color: #63758f;
    margin-top: 0.1rem;
}

.swal-match-modal .swal2-input,
.swal-match-modal .swal2-select {
    border: 1px solid #d7e3f1;
    background: #f8fbff;
    border-radius: 0.55rem;
}

@media (max-width: 640px) {
    .swal-match-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes cardIn {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .content-header .page-title-glow {
        font-size: 1.4rem;
    }

    .small-box h3 {
        font-size: 1.6rem;
    }
}