/* Medical ID visual refresh */
:root {
    --brand: #0877c9;
    --brand-2: #12b6b0;
    --brand-3: #6c63ff;
    --ink: #102033;
    --soft-ink: #5f7187;
    --line: #dfeaf4;
    --surface: #ffffff;
    --surface-soft: #f5faff;
    --danger: #e11d48;
    --success: #0f9f6e;
    --warning: #f59e0b;
    --shadow-soft: 0 18px 55px rgba(19, 75, 123, .10);
    --shadow-lift: 0 24px 70px rgba(16, 48, 84, .16);
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 8%, rgba(18, 182, 176, .15), transparent 28rem),
        radial-gradient(circle at 92% 4%, rgba(8, 119, 201, .17), transparent 26rem),
        linear-gradient(135deg, #f7fbff 0%, #eef8ff 44%, #fbfefe 100%) !important;
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(8, 119, 201, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 119, 201, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 72%);
}

.admin-nav {
    background: rgba(255, 255, 255, .86) !important;
    border-bottom: 1px solid rgba(223, 234, 244, .9) !important;
    box-shadow: 0 10px 30px rgba(31, 75, 114, .06) !important;
}

.nav-container {
    max-width: 1380px !important;
}

.nav-brand {
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}

.nav-brand img {
    height: 42px !important;
    width: auto;
    filter: drop-shadow(0 8px 16px rgba(8, 119, 201, .12));
}

.nav-brand span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-brand span::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 0 5px rgba(18, 182, 176, .12);
}

.nav-links a,
.logout-link {
    border: 1px solid rgba(223, 234, 244, .95) !important;
    border-radius: 12px !important;
    background: rgba(245, 250, 255, .92) !important;
    color: #2c4a61 !important;
    box-shadow: 0 8px 18px rgba(31, 75, 114, .04);
}

.nav-links a:hover,
.logout-link:hover {
    border-color: rgba(8, 119, 201, .22) !important;
    box-shadow: 0 14px 28px rgba(8, 119, 201, .12);
}

.nav-links .active,
.nav-links a.active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
}

.logout-link {
    background: #fff4f5 !important;
    color: #b4233f !important;
}

.container {
    position: relative;
}

.page-top,
.page-header {
    position: relative;
    padding: 10px 0 8px;
}

.page-top h1,
.page-header h1,
.logo-header h1 {
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}

.subtitle {
    color: var(--soft-ink) !important;
}

.badge {
    border: 1px solid rgba(8, 119, 201, .14) !important;
    background: rgba(235, 248, 255, .92) !important;
    color: var(--brand) !important;
}

.card,
.login-card,
.modal-content,
.e-modal-content {
    border: 1px solid rgba(255, 255, 255, .92) !important;
    box-shadow: var(--shadow-soft) !important;
}

.card {
    border-radius: 22px !important;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
}

.section-title {
    color: var(--ink) !important;
    letter-spacing: 0 !important;
}

.section-title::before {
    content: "";
    width: 10px;
    height: 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    display: inline-block;
}

.section-title.red::before {
    background: linear-gradient(180deg, var(--danger), #fb7185);
}

.stats {
    align-items: stretch;
}

.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px !important;
    box-shadow: 0 14px 36px rgba(31, 75, 114, .07);
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(8, 119, 201, .10);
}

.stat-title {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-value {
    line-height: 1;
}

input,
select,
textarea {
    border-color: var(--line) !important;
    background: #fbfdff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

input:hover,
select:hover,
textarea:hover {
    border-color: rgba(8, 119, 201, .35) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px rgba(8, 119, 201, .11) !important;
}

.btn,
.login-btn,
.btn-call {
    border-radius: 12px !important;
    letter-spacing: 0 !important;
}

.btn-primary,
.login-btn,
.btn-call {
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    box-shadow: 0 14px 28px rgba(8, 119, 201, .20) !important;
}

.btn-primary:hover,
.login-btn:hover,
.btn-call:hover {
    box-shadow: var(--shadow-lift) !important;
}

.btn-soft {
    background: #eef6fb !important;
    color: #34546d !important;
}

.btn-danger {
    background: #fff1f2 !important;
    color: #b4233f !important;
}

.btn-success {
    background: #eafaf3 !important;
    color: #087b55 !important;
}

.search-box {
    position: relative;
}

.search-box::before {
    content: "Buscar";
    position: absolute;
    top: -9px;
    left: 15px;
    padding: 0 7px;
    background: #fff;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.patient-row {
    border: 1px solid transparent !important;
    border-bottom-color: #edf3f8 !important;
    border-radius: 16px;
    padding: 18px !important;
    transition: .2s ease;
}

.patient-row:hover {
    background: linear-gradient(135deg, #ffffff, #f7fbff);
    border-color: #e7f0f7 !important;
    box-shadow: 0 12px 30px rgba(31, 75, 114, .07);
}

.qr-thumb {
    background: #fff;
    padding: 5px;
    box-shadow: 0 10px 22px rgba(31, 75, 114, .10);
}

.patient-name {
    color: var(--ink) !important;
}

.patient-meta {
    color: var(--soft-ink) !important;
}

.modal {
    background: rgba(10, 25, 42, .58) !important;
}

.close-modal {
    color: #3a5268;
    transition: .2s;
}

.close-modal:hover {
    transform: rotate(90deg);
}

/* Login */
.login-card {
    max-width: 450px !important;
    border-radius: 26px !important;
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
}

.medical-icon-box {
    border-radius: 20px !important;
}

.footer-text {
    padding-top: 18px;
    border-top: 1px solid #edf3f8;
}

/* Emergency patient view */
.emergency-app {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(180deg, rgba(8,119,201,.22), rgba(18,182,176,.16)) border-box !important;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.e-header {
    background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.22), transparent 12rem),
        linear-gradient(135deg, #e11d48, #b91c1c) !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
}

.e-header h1 {
    letter-spacing: .04em !important;
}

.e-avatar {
    background: linear-gradient(135deg, #fff, #f4fbff) !important;
    color: var(--brand);
}

.e-box,
.e-card,
.e-contact {
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(31, 75, 114, .05);
}

.e-box.red {
    background: linear-gradient(135deg, #fff1f2, #fff7f8) !important;
}

.e-card.critical {
    background: #fff5f6 !important;
}

.e-section-title {
    color: var(--ink) !important;
}

.e-section-title::before {
    content: "";
    width: 8px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--danger), #fb7185);
    display: inline-block;
}

#admin-return-bar {
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

@media (max-width: 700px) {
    body::before {
        background-size: 32px 32px;
    }

    .nav-links a,
    .logout-link {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .card,
    .login-card {
        border-radius: 18px !important;
    }

    .patient-row {
        padding: 15px !important;
    }
}