:root {
    --primary: #0e3e6d;
    --primary-dark: #092f54;
    --brand: #0e3e6d;
    --accent: #58b9ee;
    --background: #f6f6ff;
    --surface: #ffffff;
    --surface-muted: #edf5fb;
    --border: #d6e3ef;
    --line: #d6e3ef;
    --text: #0e3e6d;
    --ink: #0e3e6d;
    --muted: #52677d;
}

body {
    color: var(--ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
    background:
        linear-gradient(rgba(246, 246, 255, .93), rgba(246, 246, 255, .97)),
        url('../../images/laboratorio%20Grande.jpeg') center / cover fixed !important;
}

.brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--brand) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -.03em;
    text-decoration: none;
    text-transform: none !important;
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 7px 10px rgba(14, 62, 109, .17));
}

.mfa-card,
body > .card,
.panel {
    border-color: rgba(14, 62, 109, .14) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 30px 80px rgba(14, 62, 109, .15) !important;
}

.mfa-card,
body > .card {
    padding: clamp(26px, 5vw, 42px) !important;
}

h1 {
    color: var(--ink);
    letter-spacing: -.035em;
}

.input,
.digit,
.digit-input {
    border-color: var(--line) !important;
    border-radius: 10px !important;
}

.input:focus,
.digit:focus,
.digit-input:focus {
    border-color: var(--accent) !important;
    outline-color: rgba(88, 185, 238, .22) !important;
}

.btn,
.button {
    border-radius: 12px !important;
}

.primary,
.btn-primary {
    color: #fff !important;
    background: var(--brand) !important;
}

.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark) !important;
}

.requirements,
.summary {
    background: var(--surface-muted) !important;
}

.panel .header {
    padding-top: 24px;
}

.panel .brand {
    margin-bottom: 14px;
}

.access-card,
.metric,
.notice {
    border-radius: 14px !important;
}

.swal2-popup {
    border-radius: 22px !important;
    color: var(--ink) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.swal2-confirm {
    border-radius: 12px !important;
    background: var(--brand) !important;
}

.swal2-cancel {
    border-radius: 12px !important;
}

@media (max-width: 520px) {
    .brand-mark {
        width: 40px;
        height: 40px;
    }
}