/* ============================================================
   AGENDA.CSS - Estilos específicos de Agendar
   Depende de: ../../shared/base.css
   ============================================================ */

/* ==================== PALETA AGENDAR ==================== */
body.app-layout--agendar {
    --color-primary: #8FAE45;
    --color-primary-hover: #7C9A38;
    --color-secondary: #3C8E95;
    --color-secondary-hover: #2F7A80;
    --color-icon-green: #9DB55B;
    --color-icon-green-bg: #EEF3E3;
    --color-icon-blue: #6FAFB3;
    --color-icon-blue-bg: #E6F1F2;
    --color-button-outline: #E7EAED;
    --color-text: #1F2933;
    --color-brand: #86A942;
    --grad-primary: linear-gradient(135deg, #9FBE56, #7F9E3C);
    --grad-secondary: linear-gradient(135deg, #4DA7AD, #2E7C83);
}

/* Header explicit styling (after neutral preflight) */
header {
    background-color: #fff;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

header .header-container {
    padding: 1rem 0;
}

/* ==================== PROGRESS BAR ==================== */
.progress-bar-wrapper {
    margin-bottom: 1.5rem;
}

.progress-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 500px;
    margin: 0 auto;
}

.progress-step {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--gray-200);
    background: white;
    color: var(--gray-400);
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px white;
    position: relative;
}

.progress-step.active,
.progress-step.completed {
    background-color: #009ca6 !important;
    color: #fff !important;
    border-color: #009ca6 !important;
}

.progress-step.pending {
    background-color: #fff !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
}

.progress-line-segment {
    flex: 1;
    height: 2px;
    background: var(--gray-200);
    min-width: 20px;
}

.step-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-400);
    margin-top: 4px;
    white-space: nowrap;
    text-align: center;
}

.step-text.active {
    color: var(--primary);
    font-weight: 600;
}

/* ==================== WIZARD CARD ==================== */
.wizard-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.wizard-content-area {
    /* Simple wrapper - no flex constraints */
}

/* ==================== STEP CONTAINERS ==================== */
.submodal {
    display: none;
}

.submodal.active {
    display: block;
    animation: fadeInUp 0.4s ease;
}

/* ==================== STEP BODY & FOOTER ==================== */
.step-scroll-body {
    padding: 1.5rem;
}

.step-nav-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

#step4-heading {
    scroll-margin-top: 6rem;
}

/* ==================== PASO 1: CATEGORÍA ==================== */
.step1-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 10px 0 40px 0;
    overflow-y: auto;
}

/* (Legacy category-btn rules removed — all styling now in block ~4100+) */

/* ==================== OVERRIDES VISUALES BASE ==================== */
body.app-layout--agendar {
    background: #ffffff !important;
}

body.app-layout--agendar .wizard-card,
body.app-layout--agendar .wizard-content-area,
body.app-layout--agendar .step-scroll-body {
    background: transparent !important;
    box-shadow: none !important;
}

body.app-layout--agendar .wizard-card {
    border: none !important;
}

body.app-layout--agendar .step-nav-footer,
body.app-layout--agendar .sticky-legal-group,
body.app-layout--agendar .legal-consent-container {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* (Legacy per-ID color/hover rules removed — see category card block) */

.step1-universal-search-card {
    border: none;
    background: transparent;
    border-radius: 1.5rem;
    box-shadow: none;
    padding: 1.25rem;
}

.step1-universal-search-header {
    text-align: center;
    margin-bottom: 1rem;
}

.step1-universal-search-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a2332;
    line-height: 1.2;
}

.step1-universal-search-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: #a5bf00;
    margin: 10px auto 0;
    border-radius: 2px;
}

.step1-universal-search-box {
    position: relative;
}

.step1-universal-control-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.step1-universal-control-text {
    color: #334155;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
}

.step1-universal-step-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: #e2e8f0;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45);
}

.step1-universal-step-chip--muted {
    background: #e5e7eb;
    color: #4b5563;
}

.step1-universal-search-input-wrap {
    position: relative;
}

.ame-info-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(143, 174, 69, 0.2);
    border-radius: 1.6rem;
    padding: 1.2rem;
    background:
        radial-gradient(circle at top right, rgba(60, 142, 149, 0.14), transparent 34%),
        linear-gradient(135deg, rgba(243, 248, 233, 0.98) 0%, rgba(255, 255, 255, 0.98) 52%, rgba(232, 243, 244, 0.98) 100%);
    box-shadow: 0 18px 34px rgba(31, 41, 51, 0.08);
}

.ame-info-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
}

.ame-info-panel__hero,
.ame-info-panel__meta-card,
.ame-info-panel__services {
    position: relative;
    z-index: 1;
}

.ame-info-panel__hero {
    padding: 1.15rem;
    border-radius: 1.35rem;
    background: linear-gradient(145deg, rgba(143, 174, 69, 0.16), rgba(255, 255, 255, 0.94) 42%, rgba(60, 142, 149, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ame-info-panel__hero-main {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
}

.ame-info-panel__icon-shell,
.ame-info-panel__meta-icon,
.ame-info-panel__service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 1rem;
}

.ame-info-panel__icon-shell {
    width: 3.4rem;
    height: 3.4rem;
    background: var(--grad-primary);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(143, 174, 69, 0.28);
    font-size: 1.15rem;
}

.ame-info-panel__hero-copy {
    min-width: 0;
}

.ame-info-panel__eyebrow {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

.ame-info-panel__title {
    margin: 0.35rem 0 0;
    font-size: 1.45rem;
    line-height: 1.1;
    font-weight: 800;
    color: #1a2332;
}

.ame-info-panel__intro {
    margin: 0.55rem 0 0;
    max-width: 56rem;
    font-size: 0.96rem;
    line-height: 1.65;
    color: #4b5563;
}

.ame-info-panel__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.ame-info-panel__badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(143, 174, 69, 0.22);
    color: #2d4b14;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 16px rgba(31, 41, 51, 0.05);
}

.ame-info-panel__alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(255, 248, 235, 0.96), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.ame-info-panel__alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    font-size: 0.95rem;
}

.ame-info-panel__alert-title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b45309;
}

.ame-info-panel__alert-text {
    margin: 0.25rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #5b4a2b;
}

.ame-info-panel__meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ame-info-panel__meta-card {
    display: flex;
    gap: 0.9rem;
    min-width: 0;
    padding: 1rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(221, 225, 230, 0.9);
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.05);
}

.ame-info-panel__meta-icon {
    width: 2.8rem;
    height: 2.8rem;
    background: linear-gradient(135deg, rgba(60, 142, 149, 0.14), rgba(143, 174, 69, 0.18));
    color: var(--secondary);
    font-size: 1rem;
}

.ame-info-panel__meta-label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary);
}

.ame-info-panel__meta-title {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.55;
    font-weight: 700;
    color: #1f2937;
}

.ame-info-panel__list {
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.55;
}

.ame-info-panel__list li {
    position: relative;
    padding-left: 1rem;
}

.ame-info-panel__list li::before {
    content: "";
    position: absolute;
    top: 0.52rem;
    left: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(143, 174, 69, 0.13);
}

.ame-info-panel__contact-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.ame-info-panel__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: fit-content;
    min-height: 2.3rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: rgba(60, 142, 149, 0.08);
    color: var(--secondary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ame-info-panel__contact-link:hover {
    transform: translateY(-1px);
    background: rgba(60, 142, 149, 0.12);
    color: #25696f;
}

.ame-info-panel__services {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(221, 225, 230, 0.82);
    box-shadow: 0 12px 24px rgba(31, 41, 51, 0.05);
}

.ame-info-panel__services-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.9rem;
}

.ame-info-panel__services-copy {
    margin: 0;
    max-width: 34rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #6b7280;
}

.ame-info-panel__services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.95rem;
}

.ame-info-panel__service-card {
    display: flex;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.95rem;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ame-info-panel__service-icon {
    width: 2.35rem;
    height: 2.35rem;
    background: rgba(143, 174, 69, 0.12);
    color: var(--primary);
    font-size: 0.95rem;
}

.ame-info-panel__service-title {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 800;
    color: #1f2937;
}

.ame-info-panel__service-text {
    margin: 0.32rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5f6b7a;
}

@media (max-width: 1023px) {
    .ame-info-panel__services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ame-info-panel {
        padding: 1rem 0.95rem;
        border-radius: 1.35rem;
    }

    .ame-info-panel__hero,
    .ame-info-panel__services,
    .ame-info-panel__meta-card {
        padding: 0.95rem;
    }

    .ame-info-panel__hero-main,
    .ame-info-panel__meta-card {
        gap: 0.8rem;
    }

    .ame-info-panel__title {
        font-size: 1.2rem;
    }

    .ame-info-panel__intro,
    .ame-info-panel__alert-text,
    .ame-info-panel__meta-title,
    .ame-info-panel__service-text,
    .ame-info-panel__services-copy {
        font-size: 0.88rem;
    }

    .ame-info-panel__badges {
        gap: 0.45rem;
    }

    .ame-info-panel__badge {
        min-height: 1.9rem;
        padding: 0.42rem 0.72rem;
        font-size: 0.74rem;
    }

    .ame-info-panel__alert {
        grid-template-columns: 1fr;
    }

    .ame-info-panel__meta-grid,
    .ame-info-panel__services-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ame-info-panel__services-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ame-info-panel__contact-link {
        width: 100%;
        justify-content: flex-start;
    }
}

.step1-universal-search-input {
    width: 100%;
    min-height: 56px;
    border-radius: 1rem;
    border: 1.5px solid rgba(148, 163, 184, 0.38);
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    font-size: 0.98rem;
    line-height: 1.4;
    padding: 0.95rem 4.75rem 0.95rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.step1-universal-search-input:focus {
    outline: none;
    border-color: rgba(0, 142, 169, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 142, 169, 0.12);
    background-color: #ffffff;
}

.step1-universal-search-input--compact-placeholder::placeholder {
    font-size: 0.84rem;
    line-height: 1.25;
}

.step1-universal-search-icon,
.step1-universal-search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
}

.step1-universal-search-icon {
    right: 0.65rem;
    color: var(--primary);
    pointer-events: none;
}

.step1-universal-search-clear {
    right: 2.95rem;
    border: 0;
    background: rgba(148, 163, 184, 0.12);
    color: #526071;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.step1-universal-search-clear:hover {
    background: rgba(0, 142, 169, 0.12);
    color: var(--primary);
}

.step1-universal-search-dropdown {
    position: absolute;
    top: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    z-index: 30;
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.agenda-search-results-dropdown:not(.hidden),
.step1-universal-search-dropdown:not(.hidden) {
    max-height: min(28rem, 62vh);
    z-index: 70;
}

.step1-universal-search-status {
    padding: 0.95rem 1rem;
    font-size: 0.92rem;
    color: #5f6b7a;
}

.agenda-search-results-list,
.step1-universal-search-results {
    max-height: min(22rem, 50vh);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    touch-action: pan-y;
}

.step1-universal-search-group + .step1-universal-search-group {
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.step1-universal-search-group-title {
    margin: 0;
    padding: 0.85rem 1rem 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.step1-universal-result-btn {
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(241, 245, 249, 0.95);
    background: transparent;
    cursor: pointer;
    padding: 0.9rem 1rem;
    text-align: left;
    transition: background-color 0.2s ease;
}

.step1-universal-result-btn:first-child {
    border-top: 0;
}

.step1-universal-result-btn:hover,
.step1-universal-result-btn:focus-visible {
    outline: none;
    background: rgba(0, 142, 169, 0.06);
}

.step1-universal-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
}

.step1-universal-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.step1-universal-result-badge--consulta {
    background: rgba(0, 142, 169, 0.12);
    color: #007a8f;
}

.step1-universal-result-badge--imagen {
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
}

.step1-universal-result-badge--laboratorio {
    background: rgba(165, 191, 0, 0.18);
    color: #6d8300;
}

.step1-universal-result-badge--tipo {
    background: rgba(71, 85, 105, 0.08);
    color: #475569;
}
.step1-universal-result-badge--quickaccess {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.step1-universal-result-title {
    display: block;
    color: #111827;
    font-size: 0.97rem;
    font-weight: 800;
    line-height: 1.35;
}

.step1-universal-result-subtitle {
    display: block;
    margin-top: 0.28rem;
    color: #5f6b7a;
    font-size: 0.85rem;
    line-height: 1.45;
}

.step1-universal-filter-group {
    margin-top: 1rem;
}

.step1-universal-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.step1-universal-filter-head--guided {
    align-items: flex-start;
}

.step1-universal-filter-heading {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.step1-universal-filter-label-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.step1-universal-filter-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.step1-universal-filter-optional {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.2rem 0.58rem;
    background: rgba(148, 163, 184, 0.14);
    color: #526071;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.step1-universal-filter-hint {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

.step1-universal-filter-reset {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.step1-universal-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.step1-universal-pill-grid--scroll {
    max-height: 10.5rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.step1-universal-pill {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.94);
    color: #334155;
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.step1-universal-pill:hover,
.step1-universal-pill:focus-visible {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(0, 142, 169, 0.35);
    color: #0f172a;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

.step1-universal-pill.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 12px 20px rgba(0, 142, 169, 0.2);
}

.step1-universal-pill.is-muted {
    opacity: 0.55;
}

.step1-universal-pill.is-loading {
    border-style: dashed;
    color: #64748b;
    cursor: progress;
}

.step1-universal-empty {
    padding: 0.85rem 0.25rem 0;
    color: #64748b;
    font-size: 0.88rem;
}

@media (max-width: 640px) {
    .step1-universal-control-label {
        align-items: flex-start;
    }

    .step1-universal-control-text {
        font-size: 0.88rem;
    }

    .step1-universal-filter-hint {
        font-size: 0.78rem;
    }
}

.exam-review-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.exam-review-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(3px);
}

.exam-review-modal__dialog {
    position: relative;
    isolation: isolate;
    z-index: 1;
    width: min(1480px, calc(100vw - 1rem));
    height: min(96vh, 1120px);
    max-height: calc(100vh - 1rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 142, 169, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(0, 142, 169, 0.1), transparent 26%),
        radial-gradient(circle at top left, rgba(165, 191, 0, 0.08), transparent 22%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
}

.exam-review-modal__dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    z-index: 2;
    background: linear-gradient(90deg, #009ca6 0%, #00b4c4 48%, #a5bf00 100%);
}

.exam-review-modal__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.65rem 1.75rem 1.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(239, 251, 252, 0.92), rgba(255, 255, 255, 0.98)),
        radial-gradient(circle at top right, rgba(0, 142, 169, 0.1), transparent 34%);
}

.exam-review-modal__copy {
    min-width: 0;
    flex: 1 1 420px;
}

.exam-review-modal__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 142, 169, 0.78);
}

.exam-review-modal__title {
    margin: 0.45rem 0 0;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    color: #1f2937;
}

.exam-review-modal__subtitle {
    margin: 0.55rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

.exam-review-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.exam-review-modal__secondary-btn,
.exam-review-modal__close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    color: #334155;
    transition: all 0.2s ease;
}

.exam-review-modal__secondary-btn {
    border-color: rgba(0, 142, 169, 0.12);
    background: linear-gradient(135deg, #009ca6, #00b4c4);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 142, 169, 0.18);
}

.exam-review-modal__secondary-btn:hover {
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(0, 142, 169, 0.28);
    transform: translateY(-1px);
}

.exam-review-modal__close-btn:hover {
    border-color: rgba(0, 142, 169, 0.38);
    color: var(--primary);
    box-shadow: 0 8px 24px rgba(0, 142, 169, 0.12);
}

.exam-review-options {
    display: grid;
    gap: 1rem;
}

.exam-review-options--menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: 2rem 1.75rem 2.25rem;
    align-content: center;
    min-height: 420px;
}

.exam-review-options--header {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: #f8fafc;
}

.exam-review-option {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 190px;
    width: 100%;
    overflow: hidden;
    padding: 4.35rem 1.35rem 1.35rem;
    border: 1px solid rgba(0, 142, 169, 0.18);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: left;
    color: #0f172a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.exam-review-option::before {
    content: "";
    position: absolute;
    top: 1.15rem;
    left: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.exam-review-option::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -30px;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    opacity: 0.18;
    filter: blur(2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.exam-review-option:hover {
    border-color: rgba(0, 142, 169, 0.42);
    color: var(--primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 18px 38px rgba(0, 142, 169, 0.14);
    transform: translateY(-3px);
}

.exam-review-option:hover::after {
    opacity: 0.26;
    transform: scale(1.06);
}

.exam-review-option[data-review-exam-option="lab"] {
    border-color: rgba(165, 191, 0, 0.24);
    background: linear-gradient(180deg, rgba(251, 253, 243, 0.98), #ffffff 100%);
}

.exam-review-option[data-review-exam-option="lab"]::before {
    content: "Lab";
    background: rgba(165, 191, 0, 0.16);
    color: #7c8d00;
}

.exam-review-option[data-review-exam-option="lab"]::after {
    background: radial-gradient(circle, rgba(165, 191, 0, 0.4) 0%, rgba(165, 191, 0, 0) 72%);
}

.exam-review-option[data-review-exam-option="lab"]:hover {
    border-color: rgba(165, 191, 0, 0.46);
    color: #7c8d00;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 18px 38px rgba(165, 191, 0, 0.16);
}

.exam-review-option[data-review-exam-option="scanner"]::before {
    content: "TAC";
    background: rgba(0, 142, 169, 0.12);
    color: #007f96;
}

.exam-review-option[data-review-exam-option="scanner"]::after {
    background: radial-gradient(circle, rgba(0, 180, 196, 0.32) 0%, rgba(0, 180, 196, 0) 72%);
}

.exam-review-option[data-review-exam-option="resonance"]::before {
    content: "RM";
    background: rgba(0, 142, 169, 0.12);
    color: #007f96;
}

.exam-review-option[data-review-exam-option="resonance"]::after {
    background: radial-gradient(circle, rgba(0, 142, 169, 0.34) 0%, rgba(0, 142, 169, 0) 72%);
}

.exam-review-option--active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(0, 142, 169, 0.98), rgba(0, 180, 196, 0.95));
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 142, 169, 0.22);
}

.exam-review-option[data-review-exam-option="lab"].exam-review-option--active {
    border-color: #a5bf00;
    background: linear-gradient(135deg, #a5bf00, #8ea700);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(165, 191, 0, 0.24);
}

.exam-review-option--active::before {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

.exam-review-option--active::after {
    opacity: 0.28;
}

.exam-review-option--mail {
    border-style: dashed;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.exam-review-option--mail::before {
    content: "Correo";
    background: rgba(71, 85, 105, 0.1);
    color: #334155;
}

.exam-review-option--mail::after {
    background: radial-gradient(circle, rgba(148, 163, 184, 0.28) 0%, rgba(148, 163, 184, 0) 72%);
}

.exam-review-option--mail:hover {
    border-color: rgba(71, 85, 105, 0.3);
    color: #334155;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 18px 38px rgba(71, 85, 105, 0.12);
}

.exam-review-options--header .exam-review-option {
    min-height: 64px;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 0.85rem;
    font-size: 0.79rem;
    letter-spacing: 0.02em;
    text-align: center;
    border-radius: 18px;
    box-shadow: none;
}

.exam-review-options--header .exam-review-option::before,
.exam-review-options--header .exam-review-option::after {
    display: none;
}

.exam-review-iframe-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.2rem 1.35rem 1.35rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(238, 246, 248, 0.92)),
        radial-gradient(circle at top right, rgba(0, 142, 169, 0.08), transparent 32%);
}

.exam-review-iframe {
    width: 100%;
    height: 100%;
    min-height: 560px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 20px;
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 34px rgba(15, 23, 42, 0.08);
}

body.exam-review-modal-open {
    overflow: hidden;
}

@media (max-width: 960px) {
    .exam-review-modal {
        padding: 0.75rem;
    }

    .exam-review-modal__toolbar {
        padding: 1.2rem;
    }

    .exam-review-options--menu {
        grid-template-columns: 1fr;
    }

    .exam-review-options--header {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .exam-review-modal__actions {
        width: 100%;
        justify-content: stretch;
    }

    .exam-review-modal__secondary-btn,
    .exam-review-modal__close-btn {
        flex: 1 1 100%;
    }

    .exam-review-modal__dialog {
        width: calc(100vw - 1rem);
        height: calc(100vh - 1rem);
        max-height: calc(100vh - 1rem);
        border-radius: 20px;
    }

    .exam-review-options--menu {
        min-height: 0;
        padding: 1.25rem 1rem 1.5rem;
    }

    .exam-review-option {
        min-height: 160px;
        padding: 4rem 1.1rem 1.1rem;
    }

    .exam-review-options--header {
        grid-template-columns: 1fr;
        padding: 0.9rem 1rem;
    }

    .exam-review-iframe-panel {
        padding: 0.9rem 1rem 1rem;
    }

    .exam-review-iframe {
        min-height: 0;
    }
}

/* Botones de selección en Paso 2 (Laboratorio) */
/* Revision de examenes: simplificacion visual a columna de botones */
.exam-review-modal__dialog {
    width: min(560px, calc(100vw - 1rem));
    height: auto;
    max-height: calc(100vh - 1rem);
    border-radius: 22px;
    border: 1px solid rgba(0, 156, 166, 0.16);
    background: #ffffff;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
}

.exam-review-modal__dialog::before {
    height: 4px;
    background: #009ca6;
}

.exam-review-modal__toolbar {
    gap: 0.75rem;
    padding: 1.4rem 1.5rem 0.8rem;
    border-bottom: none;
    background: #ffffff;
}

.exam-review-modal__title {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.exam-review-modal__subtitle {
    margin-top: 0.45rem;
}

.exam-review-modal__actions {
    flex: 0 0 auto;
}

.exam-review-options,
.exam-review-options--menu,
.exam-review-options--header {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    margin: 0;
    padding: 0 1.5rem 1.5rem;
    min-height: 0;
    align-content: initial;
}

.exam-review-option,
.exam-review-option[data-review-exam-option="lab"],
.exam-review-options--header .exam-review-option,
.exam-review-option--mail {
    min-height: 0;
    width: 100%;
    padding: 0.95rem 1.15rem;
    border: 1px solid rgba(0, 156, 166, 0.12);
    border-radius: 14px;
    background: #009ca6;
    box-shadow: 0 10px 22px rgba(0, 156, 166, 0.16);
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    color: #ffffff;
}

.exam-review-option::before,
.exam-review-option::after,
.exam-review-options--header .exam-review-option::before,
.exam-review-options--header .exam-review-option::after {
    display: none !important;
    content: none;
}

.exam-review-option:hover,
.exam-review-option[data-review-exam-option="lab"]:hover,
.exam-review-option[data-review-exam-option="lab"]:focus-visible,
.exam-review-option:focus-visible,
.exam-review-option--mail:hover,
.exam-review-options--header .exam-review-option:hover,
.exam-review-options--header .exam-review-option:focus-visible {
    border-color: rgba(0, 140, 149, 0.14);
    background: #008c95;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 156, 166, 0.24);
    transform: translateY(-1px);
    outline: none;
}

.exam-review-option--active,
.exam-review-option[data-review-exam-option="lab"].exam-review-option--active {
    border-color: rgba(0, 140, 149, 0.14);
    background: #008c95;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(0, 156, 166, 0.24);
}

@media (max-width: 640px) {
    .exam-review-modal__dialog {
        width: calc(100vw - 1rem);
        height: auto;
        max-height: calc(100vh - 1rem);
        border-radius: 18px;
    }

    .exam-review-modal__toolbar {
        padding: 1.15rem 1rem 0.7rem;
    }

    .exam-review-modal__actions {
        width: auto;
    }

    .exam-review-modal__close-btn {
        flex: 0 0 auto;
    }

    .exam-review-options,
    .exam-review-options--menu,
    .exam-review-options--header {
        padding: 0 1rem 1rem;
    }

    .exam-review-option,
    .exam-review-options--header .exam-review-option,
    .exam-review-option--mail {
        padding: 0.9rem 1rem;
        font-size: 0.9rem;
    }
}

.lab-booking-mode-btn {
    transition: all 0.2s ease;
}

.lab-booking-mode-btn.lab-booking-mode-btn--idle {
    background-color: #ffffff !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-700) !important;
}

.lab-booking-mode-btn.lab-booking-mode-btn--idle:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, white) !important;
    color: var(--primary) !important;
}

.lab-booking-mode-btn.lab-booking-mode-btn--active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(0, 142, 169, 0.18) !important;
}

.lab-booking-mode-btn.lab-booking-mode-btn--active:hover,
.lab-booking-mode-btn.lab-booking-mode-btn--active:focus,
.lab-booking-mode-btn.lab-booking-mode-btn--active * {
    color: #ffffff !important;
}

.lab-booking-mode-btn.lab-booking-mode-btn--disabled {
    background-color: var(--gray-100) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-400) !important;
    box-shadow: none !important;
}

.lab-subcategory-btn {
    background-color: transparent !important;
    border: 2px solid var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.lab-subcategory-btn:hover,
.lab-subcategory-btn.selected {
    background-color: var(--primary) !important;
    color: white !important;
}

.lab-branch-btn {
    background-color: transparent !important;
    border: 2px solid var(--inst-green) !important;
    color: var(--inst-green) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.lab-branch-btn:hover,
.lab-branch-btn.selected {
    background-color: var(--inst-green) !important;
    color: white !important;
}

.lab-exam-pill {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.lab-exam-pill .lab-cart-remove-btn,
.lab-exam-pill .lab-step4-remove-btn {
    color: white !important;
}

.lab-exam-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.lab-loading-skeleton-card {
    border: 1px solid var(--gray-200);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.lab-loading-skeleton-block {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background-color: rgba(248, 250, 252, 0.94);
}

.lab-loading-skeleton-line,
.lab-loading-skeleton-chip,
.lab-loading-skeleton-input,
.lab-loading-skeleton-button,
.lab-loading-skeleton-icon {
    position: relative;
    overflow: hidden;
    background-color: #e5e7eb;
}

.lab-loading-skeleton-line::after,
.lab-loading-skeleton-chip::after,
.lab-loading-skeleton-input::after,
.lab-loading-skeleton-button::after,
.lab-loading-skeleton-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.24) 22%,
        rgba(255, 255, 255, 0.58) 52%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.8s infinite;
}

.lab-loading-skeleton-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
}

.lab-loading-skeleton-line {
    height: 0.78rem;
    border-radius: 9999px;
}

.lab-loading-skeleton-line--label {
    width: 5.5rem;
}

.lab-loading-skeleton-line--title {
    width: min(16rem, 70%);
    height: 1rem;
}

.lab-loading-skeleton-line--body {
    width: min(24rem, 92%);
}

.lab-loading-skeleton-line--body-short {
    width: min(18rem, 66%);
}

.lab-loading-skeleton-button {
    height: 3.6rem;
    border-radius: 1rem;
}

.lab-loading-skeleton-input {
    height: 3rem;
    border-radius: 0.9rem;
}

.lab-loading-skeleton-chip {
    height: 2rem;
    border-radius: 9999px;
}

.step-title {
    margin-bottom: 24px !important;
}

.step-title h2 {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
}

.step-title p {
    font-size: 0.875rem !important;
}

.category-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (min-width: 640px) {
    .category-buttons-container {
        flex-direction: row;
    }
}

/* (Legacy .category-btn base/hover — overridden by .category-buttons-inline block) */

.category-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.08;
    gap: 0.02rem;
}

.category-title-line {
    display: block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}

.category-btn svg {
    width: 24px !important;
    height: 24px !important;
}

.category-btn .category-title {
    font-size: 0.62rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
    padding: 0 0.15rem !important;
}

/* Legacy — overridden by design system block below */
.category-buttons-inline .category-btn {
    flex: 1 1 0% !important;
    width: 0 !important;
    max-width: 100%;
}

.category-examples {
    list-style: disc;
    padding-left: 1rem;
    width: 100%;
    max-width: 220px;
}

.category-examples li {
    line-height: 1.2;
}

/* (Legacy .category-btn.selected / ::before / per-ID rules removed) */

#imaging-group-chips .imaging-group-chip-selected,
#imaging-group-chips .imaging-group-chip-selected:hover,
#imaging-group-chips .imaging-group-chip-selected:focus-visible {
    background-color: #009ca6 !important;
    border-color: #009ca6 !important;
    color: #fff !important;
}

#imaging-group-section,
#imaging-group-inline-section,
#imaging-exam-guided-section,
#lab-branch-section {
    scroll-margin-top: 6rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

#imaging-group-section.imaging-step-highlight,
#imaging-group-inline-section.imaging-step-highlight {
    border-color: #009ca6 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f2fcfc 100%);
    box-shadow:
        0 0 0 3px rgba(0, 156, 166, 0.18),
        0 18px 34px rgba(0, 156, 166, 0.12);
}

.imaging-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.imaging-mode-card {
    appearance: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    min-height: 11.1rem;
    padding: 0.7rem;
    border: 1px solid rgba(31, 41, 51, 0.08);
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(111, 175, 179, 0.08) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.06);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.imaging-mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(143, 174, 69, 0.12), transparent 38%),
        radial-gradient(circle at top left, rgba(111, 175, 179, 0.14), transparent 42%);
    opacity: 0.75;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.imaging-mode-card:hover,
.imaging-mode-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(31, 41, 51, 0.1);
    border-color: rgba(60, 142, 149, 0.22);
    outline: none;
}

.imaging-mode-card.is-selected {
    border-color: rgba(60, 142, 149, 0.3);
    background:
        linear-gradient(180deg, rgba(111, 175, 179, 0.12) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, #ffffff 0%, #f3f9f9 100%);
    box-shadow: 0 18px 36px rgba(60, 142, 149, 0.15);
}

.imaging-mode-card.is-selected::before {
    opacity: 1;
}

.imaging-mode-card__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.8rem;
    height: 100%;
}

.imaging-mode-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    aspect-ratio: 228.8 / 132;
    min-height: 6.35rem;
    padding: 0.55rem;
    border: 1px solid rgba(60, 142, 149, 0.08);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #fbfdfd 0%, #f3f7f7 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.imaging-mode-card__media::after {
    content: "";
    position: absolute;
    inset: 0.6rem;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.imaging-mode-card__media--image {
    align-items: stretch;
    padding: 0.35rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
}

.imaging-mode-card__media--image::after {
    display: none;
}

.imaging-mode-card__image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.95rem;
    box-shadow: 0 12px 24px rgba(31, 41, 51, 0.1);
}

.imaging-mode-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 4.9rem;
    height: 4.9rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(111, 175, 179, 0.16);
    background: linear-gradient(135deg, rgba(230, 241, 242, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
    color: var(--color-secondary);
    font-size: 2.3rem;
    box-shadow: 0 12px 24px rgba(60, 142, 149, 0.12);
}

.imaging-mode-card:nth-child(3n) .imaging-mode-card__icon {
    border-color: rgba(157, 181, 91, 0.18);
    background: linear-gradient(135deg, rgba(238, 243, 227, 0.98) 0%, rgba(255, 255, 255, 1) 100%);
    color: var(--color-brand);
    box-shadow: 0 12px 24px rgba(143, 174, 69, 0.12);
}

.imaging-mode-card.is-selected .imaging-mode-card__icon {
    border-color: rgba(60, 142, 149, 0.22);
    color: #2f7a80;
    box-shadow: 0 14px 28px rgba(60, 142, 149, 0.16);
}

.imaging-mode-card__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.5rem;
    max-width: 100%;
    color: var(--color-text);
    font-size: 0.91rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    white-space: normal;
    padding: 0 0.25rem 0.15rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
    .imaging-mode-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .imaging-mode-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
    }

    .imaging-mode-card {
        min-height: 11.35rem;
    }

    .imaging-mode-card__media {
        min-height: 6.65rem;
    }

    .imaging-mode-card__icon {
        width: 5.15rem;
        height: 5.15rem;
        font-size: 2.45rem;
    }
}

@media (max-width: 639px) {
    body.step1-universal-search-floating-open {
        overflow: hidden;
    }

    .imaging-mode-card {
        min-height: 10.2rem;
        padding: 0.6rem;
        border-radius: 1.3rem;
    }

    .imaging-mode-card__media {
        min-height: 5.7rem;
        border-radius: 1.05rem;
    }

    .imaging-mode-card__icon {
        width: 4.25rem;
        height: 4.25rem;
        font-size: 2rem;
    }

    .imaging-mode-card__title {
        min-height: 2.3rem;
        font-size: 0.83rem;
        line-height: 1.2;
        -webkit-line-clamp: 4;
    }

    .step1-universal-search-dropdown {
        top: calc(100% + 0.15rem);
        border-radius: 1rem;
    }

    .step1-universal-search-box.is-mobile-floating {
        z-index: 180;
    }

    .step1-universal-search-box.is-mobile-floating .step1-universal-control-label {
        display: none;
    }

    .step1-universal-search-box.is-mobile-floating .step1-universal-search-input-wrap {
        position: fixed;
        top: var(--step1-universal-floating-top, 0.5rem);
        left: var(--step1-universal-floating-side-gap, 0.75rem);
        right: var(--step1-universal-floating-side-gap, 0.75rem);
        z-index: 180;
        padding: 0.35rem;
        border-radius: 1.25rem;
        background: rgba(248, 250, 252, 0.94);
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(12px);
    }

    .step1-universal-search-box.is-mobile-floating .step1-universal-search-dropdown {
        position: fixed;
        top: calc(
            var(--step1-universal-floating-top, 0.5rem) +
            var(--step1-universal-floating-input-height, 56px) +
            0.7rem
        );
        left: var(--step1-universal-floating-side-gap, 0.75rem);
        right: var(--step1-universal-floating-side-gap, 0.75rem);
        max-height: var(--step1-universal-floating-results-height, 18rem);
        z-index: 179;
        border-radius: 1.1rem;
        box-shadow: 0 22px 40px rgba(15, 23, 42, 0.18);
    }

    .step1-universal-search-box.is-mobile-floating .step1-universal-search-status,
    .step1-universal-search-box.is-mobile-floating .step1-universal-search-results,
    .step1-universal-search-box.is-mobile-floating .agenda-search-results-list {
        max-height: var(--step1-universal-floating-results-height, 18rem);
    }

    .step1-universal-search-status {
        padding: 0.8rem 0.9rem;
    }

    .step1-universal-search-group + .step1-universal-search-group {
        border-top: 0;
    }

    .step1-universal-search-group-title {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .step1-universal-search-group > .step1-universal-result-btn:first-of-type {
        border-top: 0;
    }

    .step1-universal-result-btn {
        padding: 0.8rem 0.9rem;
    }

    #imaging-universal-results,
    #imaging-exam-results {
        margin-top: 0.2rem !important;
    }
}

.category-btn-disabled {
    cursor: not-allowed;
    opacity: 0.82;
}

.category-btn-disabled .category-disabled-note {
    letter-spacing: 0.01em;
}

/* Camera button (file upload) */
.camera { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.camera-dark { background: linear-gradient(135deg, #5568d3 0%, #653d8f 100%); }

/* ==================== PASO 2: CALENDARIO Y ESPECIALIDAD ==================== */
.step2-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

@media (min-width: 768px) {
    .step2-grid {
        flex-direction: row;
        align-items: flex-start;
    }
}

.calendar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selection-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ios-scroll-area {
    -webkit-overflow-scrolling: touch;
}

/* Calendario */
.calendar-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
}

.calendar-header {
    background: linear-gradient(135deg, var(--inst-blue) 0%, var(--inst-blue-dark) 100%);
    color: #fff;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.calendar-nav-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.75rem;
}

.calendar-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.calendar-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    padding: 4px;
    background-color: #f1f5f9;
}

.calendar-weekday {
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    color: #64748b;
    padding: 6px 0;
    text-transform: uppercase;
    background: #fff;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 2px solid transparent;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
}

.calendar-day:hover:not(.disabled):not(.other-month) {
    background-color: #f9fafb;
}

/* Bloqueo de calendario (cuando TODAS está desmarcada y no hay sucursales elegidas) */
#calendar-container.calendar-locked .agenda-calendar {
    opacity: 0.65;
    pointer-events: none;
}

#calendar-container.calendar-locked .calendar-day {
    cursor: not-allowed;
}

#calendar-container.calendar-locked .calendar-day:hover:not(.disabled):not(.other-month) {
    background-color: #fff;
}

.calendar-day.selected {
    background-color: #a3cf34;
    color: #fff;
    border-color: #a3cf34;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(163, 207, 52, 0.3);
    transform: scale(1.05);
}

.calendar-day.today {
    background-color: rgba(0, 139, 163, 0.1);
    border-color: #008ba3;
    color: #008ba3;
}

.calendar-day.disabled {
    color: #9ca3af;
    cursor: not-allowed;
    text-decoration: line-through;
    background-color: #f3f4f6;
}

.calendar-day.other-month {
    color: #9ca3af;
    background-color: #f3f4f6;
}

/* Calendario más compacto en desktop (mantener móvil intacto) */
@media (min-width: 1024px) {
    /* Centrar y angostar calendario en desktop (estilo móvil adaptado a web) */
    #calendar-container {
        display: flex;
        justify-content: center;
    }

    .agenda-calendar {
        width: 100% !important;
        max-width: 390px;
        padding: 0.5rem !important;
    }

    .agenda-calendar #cal-prev-month,
    .agenda-calendar #cal-next-month {
        width: 28px;
        height: 28px;
    }

    .agenda-calendar #cal-month-year-display {
        font-size: 0.95rem;
    }

    /* Reducir aire del header (en HTML usa utilidades de margen) */
    .agenda-calendar > .flex {
        margin-bottom: 0.65rem !important;
    }

    .agenda-calendar .calendar-weekdays {
        gap: 2px !important;
        margin-bottom: 0.3rem !important;
    }

    .agenda-calendar .calendar-weekday {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .agenda-calendar #calendar-grid {
        gap: 2px !important;
    }

    .agenda-calendar .calendar-day {
        height: 28px;
        font-size: 0.75rem;
        border-radius: 0.55rem;
    }
}

/* ==================== NUEVO FLUJO STEP 2/3 (RESPONSIVE) ==================== */
@media (max-width: 1023px) {
    /* En móvil, el calendario vive en Paso 3 */
    #step2-calendar-block {
        display: none !important;
    }

    /* Excepción: al elegir un profesional desde el buscador,
       el calendario debe permanecer en Paso 2 sobre las horas. */
    #step2-calendar-block.specific-professional-step2-active {
        display: block !important;
    }

    /* Inline Paso 3 solo en desktop */
    #step2-inline-step3 {
        display: none !important;
    }

    /* Mantener visible el CTA principal en móvil */
    #btn-continue-desktop:not(.hidden) {
        display: inline-flex !important;
    }
}

@media (min-width: 1024px) {
    /* En desktop, Paso 3 dedicado no se usa para cambiar fecha */
    #step3-calendar-block {
        display: none !important;
    }

    #btn-go-step-3-mobile {
        display: none !important;
    }
}

/* Acordeón filtros */
#filters-accordion-toggle,
#lab-selection-toggle,
#attachment-accordion-toggle {
    display: none !important;
}

#filters-accordion-content.hidden,
#lab-selection-content.hidden,
#attachment-accordion-content.hidden {
    display: block !important;
}

/* Permitir que dropdown de especialidad salga del acordeón (evita clipping por overflow-hidden) */
#filters-accordion.accordion-dropdown-open,
#lab-selection-accordion.accordion-dropdown-open {
    overflow: visible !important;
}

/* Acordeón selección Laboratorio */
#lab-selection-accordion {
    transition: all 0.3s ease;
}

#lab-selection-toggle {
    outline: none;
}

#lab-selection-summary {
    transition: color 0.2s ease;
}

#lab-selection-icon {
    transition: transform 0.3s ease;
}

#lab-selection-content.hidden {
    display: block !important;
}

.universal-search-input::placeholder {
    color: #9ca3af;
}

.agenda-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.universal-search-input.universal-search-input--overlay-visible::placeholder {
    color: transparent;
}

.universal-search-overlay {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1.25;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
}

.universal-search-overlay-base {
    flex: 0 0 auto;
    min-width: 0;
}

.universal-search-overlay-suffix {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    text-decoration: underline;
}

.lab-subcategory-btn.selected,
.lab-branch-btn.selected {
    border-color: var(--secondary) !important;
    background-color: rgba(200, 215, 53, 0.1) !important;
    color: var(--secondary-dark) !important;
}

/* Carrusel de sucursales (móvil Paso 3) */
.branch-carousel-track {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.branch-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Select de especialidades */
#specialty-select {
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

#specialty-select:focus {
    border-color: #008ba3;
    box-shadow: 0 0 0 3px rgba(0, 139, 163, 0.1);
    outline: none;
}

/* Resumen de selección */
#selected-info-display {
    animation: fadeInUp 0.3s ease;
}
#selected-info-text {
    line-height: 1.5;
}

/* ==================== PASO 3: SUCURSALES ==================== */
.step3-header {
    flex-shrink: 0;
    margin-bottom: 12px !important;
}

.step3-header h2 {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
}

.step3-header p {
    font-size: 0.875rem !important;
}

/* ==================== PASO 4: CONFIRMACIÓN ==================== */
.confirmation-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 12px;
}

.confirmation-fields {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 1024px) {
    .step4-split-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: start;
    }
}

.confirmation-card {
    padding: 16px !important;
    background: linear-gradient(145deg, #f8fafc, #ffffff);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
}

.confirmation-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.confirmation-item:last-child {
    border-bottom: none;
}

.confirmation-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-right: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Selects e inputs */
#step4-benefit-select,
#step4-prestacion-select {
    transition: all 0.2s ease;
    border: 1px solid #d1d5db;
}

#step4-benefit-select:focus,
#step4-prestacion-select:focus {
    border-color: #008b9e;
    box-shadow: 0 0 0 3px rgba(0, 139, 158, 0.1);
    outline: none;
}

#step4-prestacion-select {
    border-width: 2px;
    border-color: #008b9e;
}

.step4-indicacion-card {
    display: none !important;
    margin-top: 1rem;
    border: 2px solid #b5533b;
    border-radius: 1rem;
    background: #fff1dd;
    padding: 1rem 1.125rem;
    box-shadow: 0 10px 24px rgba(181, 83, 59, 0.08);
}

.step4-indicacion-card__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: #d97634;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.step4-indicacion-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.step4-indicacion-card__title {
    margin: 0;
    color: #7f2f1c;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.step4-indicacion-card__status {
    flex-shrink: 0;
    color: #9a3412;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.step4-indicacion-card__message {
    margin-top: 0.85rem;
    color: #111111;
    font-size: 0.94rem;
    line-height: 1.65;
    white-space: pre-line;
}

.step4-indicacion-card__attachments {
    margin-top: 1rem;
}

.step4-indicacion-card__attachments-label {
    margin: 0 0 0.7rem;
    color: #7f2f1c;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.step4-indicacion-card__attachments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.step4-indicacion-card__attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid rgba(127, 47, 28, 0.16);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.68);
    padding: 0.8rem 0.9rem;
}

.step4-indicacion-card__attachment-name {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

.step4-indicacion-card__attachment-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.step4-indicacion-card__attachment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.65rem 0.95rem;
    border-radius: 0.8rem;
    border: 1px solid #b5533b;
    background: #b5533b;
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.step4-indicacion-card__attachment-btn:hover,
.step4-indicacion-card__attachment-btn:focus-visible {
    background: #954229;
    border-color: #954229;
    box-shadow: 0 8px 18px rgba(149, 66, 41, 0.18);
    outline: none;
    transform: translateY(-1px);
}

.step4-indicacion-card__attachment-btn.is-secondary {
    background: #ffffff;
    color: #9a3412;
}

.step4-indicacion-card__attachment-btn.is-secondary:hover,
.step4-indicacion-card__attachment-btn.is-secondary:focus-visible {
    background: #fff3eb;
    color: #7f2f1c;
}

@media (max-width: 767px) {
    .step4-indicacion-card {
        padding: 0.95rem;
    }

    .step4-indicacion-card__header,
    .step4-indicacion-card__attachment-item {
        flex-direction: column;
        align-items: stretch;
    }

    .step4-indicacion-card__status {
        white-space: normal;
    }

    .step4-indicacion-card__attachment-actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .step4-indicacion-card__attachment-btn {
        width: 100%;
    }
}

/* ==================== RUT (Paso 4) ==================== */
#rut-input {
    width: 100%;
    padding: 12px 16px !important;
    padding-right: 50px !important;
    border: 2px solid #d1d5db;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#rut-input:focus {
    border-color: var(--inst-blue);
    box-shadow: 0 0 0 3px rgba(0, 142, 169, 0.2);
    outline: none;
}

#rut-input.valid {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

#rut-input.invalid {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

#rut-input.warning {
    border-color: #f59e0b !important;
    background-color: rgba(245, 158, 11, 0.05) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

#rut-status {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

#rut-status i {
    font-size: 1.25rem;
    line-height: 1;
}

.text-green-500 { color: #10b981 !important; }
.text-red-500 { color: #ef4444 !important; }
.text-yellow-500 { color: #f59e0b !important; }

/* ==================== REGISTRO INLINE (Paso 4) ==================== */
.inline-registration-panel {
    margin-top: 1.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: slideInDown 0.4s ease-out;
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.inline-registration-header {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--inst-blue) 0%, #00728a 100%);
    position: relative;
    border-bottom: 0;
}

.inline-registration-header::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66-3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-40-39c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zm50 38c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM40 5c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM70 20c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM80 80c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM40 67c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1zM20 35c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    pointer-events: none;
}

.inline-registration-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inline-registration-title i {
    font-size: 1.25rem;
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.2);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    backdrop-filter: blur(4px);
}

.inline-registration-subtitle {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    max-width: 90%;
}

.inline-registration-form {
    padding: 1.5rem;
    background: #ffffff;
}

.inline-registration-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .inline-registration-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.inline-registration-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 800;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inline-registration-input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1.15rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 1rem;
    background: #fdfdfd;
    color: var(--gray-800);
    font-size: 0.95rem;
    line-height: 1.5;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.inline-registration-input:hover {
    border-color: var(--gray-300);
    background: #fff;
}

.inline-registration-input:focus {
    border-color: var(--inst-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 142, 169, 0.1);
    transform: translateY(-1px);
}

.inline-registration-input.is-invalid {
    border-color: #ef4444 !important;
    background: #fff5f5 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

.inline-registration-input.is-readonly {
    background: var(--gray-50);
    color: var(--gray-500);
    border-color: var(--gray-200);
    cursor: not-allowed;
    opacity: 0.8;
}

.inline-registration-phone {
    display: flex;
    align-items: stretch;
}

.inline-registration-prefix {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 3.75rem;
    padding: 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
    color: var(--inst-blue);
    background: var(--blue-50);
    border: 1.5px solid var(--gray-200);
    border-right: 0;
    border-radius: 1rem 0 0 1rem;
}

.inline-registration-phone-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.inline-registration-help {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--gray-500);
    font-style: italic;
}

.inline-registration-field-error {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.2;
    color: #dc2626;
    font-weight: 600;
}

.inline-registration-error {
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(239, 68, 68, 0.2);
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.8rem;
    line-height: 1.4;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.inline-registration-error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.1rem;
}

.inline-registration-actions {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.inline-registration-btn {
    padding: 0.85rem 1.5rem;
    border-radius: 1rem;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
}

.inline-registration-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.inline-registration-btn-secondary {
    background: #ffffff;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-600);
}

.inline-registration-btn-secondary:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.inline-registration-btn-primary {
    background: var(--inst-blue);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 142, 169, 0.25);
}

.inline-registration-btn-primary:hover:not(:disabled) {
    background: #00728a;
    box-shadow: 0 6px 15px rgba(0, 142, 169, 0.35);
    transform: translateY(-1px);
}

@media (min-width: 768px) {
    .inline-registration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==================== PASO 5: ÉXITO ==================== */
.success-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 10px;
}

.success-icon {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 16px !important;
    background: rgba(165, 191, 0, 0.2) !important;
    animation: successPulse 0.5s ease;
}

.success-icon svg {
    width: 40px !important;
    height: 40px !important;
    color: var(--inst-green) !important;
}

/* ==================== FOOTER STICKY ==================== */
.step-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 0 0 0;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.btn-next,
.btn-back {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
}

.btn-next {
    background: linear-gradient(135deg, var(--inst-green) 0%, var(--inst-green-dark) 100%);
    color: #fff !important;
    transition: all 0.3s ease;
}

.btn-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(165, 191, 0, 0.3);
}

.btn-next:disabled {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    cursor: not-allowed;
}

/* ==================== TEXTOS ESPECÍFICOS ==================== */
#confirm-specialty,
#final-specialty,
#final-rut,
#conf-modal-rut {
    color: var(--inst-blue) !important;
}

button[onclick="handleBookingProcess()"] {
    background: var(--inst-green) !important;
    box-shadow: 0 4px 6px rgba(165, 191, 0, 0.2) !important;
}

button[onclick="handleBookingProcess()"]:hover {
    background: var(--inst-green-dark) !important;
}

#btn-restart {
    background: var(--inst-blue) !important;
}

#btn-restart:hover {
    background: var(--inst-blue-dark) !important;
}

/* ==================== COLORES EXTRA (usados en HTML) ==================== */
.text-amber-500 { color: #f59e0b; }
.text-purple-500 { color: #8b5cf6; }
.text-pink-500 { color: #ec4899; }
.text-accent-green { color: #a3cb38; }

.bg-blue-50 { background-color: #eff6ff; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-pink-50 { background-color: #fdf2f8; }

/* ==================== ANIMATIONS ==================== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6;
}

.skeleton-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes successPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==================== RESPONSIVE ==================== */

/* Dispositivos muy pequeños (menos de 360px) */
@media (max-width: 359px) {
    .calendar-day {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 0.65rem !important;
    }
}

@media (max-width: 479px) {
    .wizard-card {
        border-radius: var(--radius);
    }

    .progress-bar-inner { gap: 0; }
    .progress-step { width: 26px; height: 26px; font-size: 11px; }
    .step-text { font-size: 9px; }

    .step-scroll-body { padding: 0.75rem; }
    .step-nav-footer { padding: 0.5rem 0.75rem; }

    .category-buttons-container {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .category-btn {
        padding: 12px 8px !important;
        font-size: 0.875rem !important;
        min-height: 100px !important;
    }

    .step1-content {
        justify-content: flex-start !important;
        padding-top: 5px !important;
        padding-bottom: 20px !important;
    }

    .step-title {
        margin-bottom: 12px !important;
    }

    .step-title h2 {
        font-size: 1.2rem !important;
    }

    .step-title p {
        font-size: 0.75rem !important;
    }

    .calendar-container {
        max-width: 100% !important;
    }

    .calendar-day {
        min-height: 32px !important;
        max-height: 32px !important;
        font-size: 0.75rem !important;
        height: 32px;
    }

    .step-footer {
        padding: 8px 0 0 0 !important;
    }

    .btn-next,
    .btn-back {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }

    .confirmation-card {
        padding: 12px !important;
    }

    #confirmation-modal > div {
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .medico-name {
        font-size: 13px !important;
    }

    .medico-especialidad {
        font-size: 12px !important;
    }

    .horas-container .text-xs {
        font-size: 11px !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .step-scroll-body {
        padding: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .selection-section {
        flex: 1 !important;
    }
}

@media (max-width: 768px) {
    #step-text-3 {
        display: none !important;
    }
    #step-text-3-mobile {
        display: block !important;
    }
}
@media (min-width: 769px) {
    #step-text-3-mobile {
        display: none !important;
    }
    #step-text-3 {
        display: block !important;
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    .hora-btn {
        padding: 10px 14px !important;
        font-size: 14px !important;
        min-height: 40px !important;
        min-width: 70px !important;
    }

    .hora-select-more {
        padding: 10px 12px !important;
        font-size: 13px !important;
        min-height: 40px !important;
        height: auto !important;
    }

    .calendar-day {
        min-height: 40px !important;
    }

    .medico-card {
        padding: 14px !important;
    }

    .category-btn:hover,
    .hora-btn:hover {
        transform: none !important;
    }

    .flex.flex-wrap.gap-2 {
        gap: 8px !important;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .wizard-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .step-footer,
    .step-nav-footer,
    .progress-bar-wrapper {
        display: none !important;
    }
}


/* ==================== MODO PROFESIONAL ESPECÍFICO ==================== */

.lab-exam-cart-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.lab-exam-cart-scroll-btn {
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.95rem;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: #8FAE45 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(143, 174, 69, 0.24) !important;
}

.lab-exam-cart-scroll-btn i {
    font-size: 0.8rem;
    color: inherit;
}

.lab-exam-cart-scroll-btn:hover:not(:disabled),
.lab-exam-cart-scroll-btn:focus-visible:not(:disabled) {
    background: #7d9b36 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(143, 174, 69, 0.32) !important;
}

.lab-quick-wins-header-after-cart {
    margin-top: 1.15rem;
}

.specific-professional-step2-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.specific-professional-step2-subtitle-prefix,
.specific-professional-step2-specialty {
    color: #64748b;
    font-weight: 600;
}

.specific-professional-step2-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.32rem 0.85rem;
    border-radius: 9999px;
    background: #8FAE45;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 22px rgba(143, 174, 69, 0.2);
}

.step2-advanced-search-label,
#lab-branch-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.28rem 0.75rem;
    border-radius: 9999px;
    background: #6b7280;
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: var(--transition-fast);
}

#step2-calendar-layout {
    display: block;
}

#advanced-search-box.specific-professional-branches-active {
    border-color: rgba(0, 156, 166, 0.12);
    background:
        radial-gradient(circle at top right, rgba(0, 156, 166, 0.06), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

#advanced-search-box.specific-professional-branches-active .step2-advanced-search-label {
    background: #6b7280;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(100, 116, 139, 0.18);
}

#advanced-search-box.specific-professional-branches-active #branches-checkbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

#advanced-search-box.specific-professional-branches-active #branches-checkbox-container>.border-t {
    display: none;
}

#advanced-search-box.specific-professional-branches-active #branches-checkbox-container>div:not(.border-t) {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#advanced-search-box.specific-professional-branches-active #branches-checkbox-container>div:not(.border-t):hover {
    border-color: rgba(0, 156, 166, 0.24);
    box-shadow: 0 10px 22px rgba(0, 156, 166, 0.08);
    transform: translateY(-1px);
}

#advanced-search-box.specific-professional-branches-active #selected-branches-summary {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.95rem;
    background: rgba(0, 156, 166, 0.05);
    color: #0f766e;
    font-size: 0.8rem;
}

#step2-calendar-block.specific-professional-step2-active #step2-calendar-layout {
    display: grid;
    grid-template-columns: minmax(21.5rem, 23.75rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

#step2-calendar-block.specific-professional-step2-active {
    border-color: rgba(0, 156, 166, 0.14);
    background:
        radial-gradient(circle at top right, rgba(0, 156, 166, 0.05), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

#step2-calendar-block.specific-professional-step2-active #calendar-host-step2 {
    min-width: 0;
    position: sticky;
    top: 0.75rem;
    align-self: start;
}

#specific-professional-inline-panel {
    min-width: 0;
}

.specific-professional-inline-placeholder__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 156, 166, 0.1);
    color: #009ca6;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.specific-professional-inline-placeholder__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.specific-professional-inline-placeholder__body {
    margin-top: 0.75rem;
    color: #475569;
    line-height: 1.65;
    max-width: 34rem;
}

.specific-professional-inline-placeholder__hint {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border-radius: 9999px;
    background: rgba(0, 156, 166, 0.08);
    color: #0f766e;
    font-size: 0.82rem;
    font-weight: 700;
    width: fit-content;
}

.specific-professional-inline-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(0, 156, 166, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    padding: 1.25rem;
}

.specific-professional-inline-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding-bottom: 0.15rem;
}

.specific-professional-inline-hero__icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 156, 166, 0.1);
    color: #009ca6;
    font-size: 1.15rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.specific-professional-inline-hero__copy {
    min-width: 0;
}

.specific-professional-inline-hero__eyebrow {
    display: block;
    margin: 0 0 0.18rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.specific-professional-inline-hero__name {
    margin: 0;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 0.42rem 0.95rem 0.48rem;
    border-radius: 9999px;
    background: #8FAE45;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    box-shadow: 0 8px 20px rgba(143, 174, 69, 0.22);
}

.specific-professional-inline-hero__subtitle {
    margin: 0.22rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.specific-professional-inline-hero__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.55rem 0.8rem;
    border-radius: 9999px;
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.specific-professional-inline-hero__status.is-active {
    background: rgba(0, 156, 166, 0.1);
    color: #0f766e;
}

.specific-professional-inline-hero__status.is-empty {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.specific-professional-inline-hero__status.is-loading {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.specific-professional-inline-placeholder,
.specific-professional-inline-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 14.5rem;
    padding: 1.5rem;
    border: 1px dashed rgba(0, 156, 166, 0.12);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.78);
}

.specific-professional-inline-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.specific-professional-inline-meta-card {
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(0, 156, 166, 0.14);
    background: rgba(255, 255, 255, 0.92);
}

.specific-professional-inline-meta-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.specific-professional-inline-meta-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.45;
}

.specific-professional-inline-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 1.15rem;
}

.specific-professional-inline-card__toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.specific-professional-inline-card__toolbar-copy {
    min-width: 0;
}

.specific-professional-inline-card__helper {
    margin-top: 0.3rem;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.5;
}

.specific-professional-inline-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.45rem 0.75rem;
    border-radius: 9999px;
    background: rgba(0, 156, 166, 0.08);
    color: #0f766e;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.specific-professional-inline-card__hours-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.specific-professional-hours-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.9rem;
}

.specific-professional-hours-group {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.98));
    padding: 0.95rem 1rem;
}

.specific-professional-hours-group.is-selected {
    border-color: rgba(0, 156, 166, 0.24);
    box-shadow: 0 10px 22px rgba(0, 156, 166, 0.08);
}

.specific-professional-hours-group__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.8rem;
}

.specific-professional-hours-group__copy {
    min-width: 0;
}

.branch-card-eyebrow,
.specific-professional-hours-group__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.45rem;
    padding: 0.18rem 0.7rem;
    border-radius: 9999px;
    background: #009ca6;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    box-shadow: 0 8px 18px rgba(0, 156, 166, 0.18);
}

.specific-professional-hours-group__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
}

.specific-professional-hours-group__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.35rem 0.65rem;
    border-radius: 9999px;
    background: rgba(0, 156, 166, 0.08);
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.specific-professional-hours-group__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.specific-professional-hours-group__selected {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.specific-professional-hours-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.specific-professional-hours-group__more {
    margin-top: 0.75rem;
}

.specific-professional-hours-group__toggle {
    width: 100%;
    margin-top: 0.85rem;
    min-height: 2.8rem;
    border: 0;
    border-radius: 0.9rem;
    background: rgba(0, 156, 166, 0.08);
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.specific-professional-hours-group__toggle:hover,
.specific-professional-hours-group__toggle:focus-visible {
    background: rgba(0, 156, 166, 0.14);
    color: #0b8295;
    outline: none;
}

.specific-professional-hours-group__actions {
    margin-top: 0.95rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.specific-professional-hours-group__continue {
    width: 100%;
}

.specific-professional-inline-card__hours {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.specific-professional-inline-card__hours .hour-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.specific-professional-hour-btn {
    width: 100%;
    min-width: 0;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.01em;
    line-height: 1;
}

.specific-professional-inline-card__actions {
    margin-top: 1.15rem;
}

.specific-professional-inline-card__continue {
    width: 100%;
    min-height: 3rem;
    border-radius: 0.95rem;
    border: 2px solid transparent;
    background: var(--inst-blue);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    box-shadow: 0 10px 24px rgba(0, 156, 166, 0.18);
}

.specific-professional-inline-card__continue:hover,
.specific-professional-inline-card__continue:focus-visible {
    background: #0b8295;
    transform: translateY(-1px);
    outline: none;
}

.specific-professional-inline-card__continue i {
    margin-left: 0.45rem;
}

/* Calendario filtrado - días disponibles */
#calendar-grid-specific .calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 40px;
}

#calendar-grid-specific .calendar-day.other-month {
    background: transparent;
}

#calendar-grid-specific .calendar-day.disabled {
    background-color: #f9fafb;
    color: #d1d5db;
    cursor: not-allowed;
}

#calendar-grid-specific .calendar-day.available {
    background-color: #ecfdf5;
    color: #059669;
    border: 2px solid #10b981;
    cursor: pointer;
}

#calendar-grid-specific .calendar-day.available:hover {
    background-color: #d1fae5;
    transform: scale(1.05);
}

#calendar-grid-specific .calendar-day.selected {
    background-color: #009ca6 !important;
    color: white !important;
    border-color: #009ca6 !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 156, 166, 0.4);
}

#calendar-grid-specific .calendar-day.today {
    position: relative;
}

#calendar-grid-specific .calendar-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
}

/* Botones de hora en modo específico */
.hour-btn {
    transition: all 0.2s ease;
}

.hour-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 156, 166, 0.2);
}

.hour-btn.selected {
    background-color: #009ca6 !important;
    color: white !important;
    border-color: #009ca6 !important;
}

/* Card del profesional en modo específico */
.specific-professional-card {
    border: 2px solid rgba(0, 156, 166, 0.3);
    border-radius: 16px;
    padding: 24px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.specific-professional-card .prof-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.specific-professional-card .prof-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 156, 166, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009ca6;
    font-size: 24px;
}

.specific-professional-card .prof-info h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.specific-professional-card .prof-info p {
    color: #6b7280;
    font-size: 14px;
}

/* Indicador de modo específico */
.specific-mode-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #009ca6 0%, #006e82 100%);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Info box en modo específico */
.specific-info-box {
    background: #eff6ff;
    border-left: 4px solid #009ca6;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
}

.specific-info-box i {
    color: #009ca6;
    margin-right: 8px;
}

@media (max-width: 1023px) {
    .lab-exam-cart-actions {
        justify-content: stretch;
    }

    .lab-exam-cart-scroll-btn {
        width: 100%;
    }

    #step2-calendar-block.specific-professional-step2-active #step2-calendar-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .specific-professional-inline-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .specific-professional-inline-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .specific-professional-inline-hero__status {
        grid-column: 1 / -1;
        justify-self: flex-start;
    }

    .specific-professional-hours-stack {
        grid-template-columns: 1fr;
    }

    .specific-professional-hours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .specific-professional-step2-subtitle {
        gap: 0.4rem;
    }

    .specific-professional-step2-pill {
        max-width: 100%;
        text-align: center;
    }

    #advanced-search-box.specific-professional-branches-active #branches-checkbox-container {
        grid-template-columns: 1fr;
    }

    .specific-professional-inline-meta {
        grid-template-columns: 1fr;
    }

    .specific-professional-hours-group {
        position: relative;
        overflow: hidden;
        padding: 0.9rem;
        border-color: rgba(var(--branch-accent-rgb, 8, 145, 178), 0.3);
        background:
            linear-gradient(180deg, rgba(var(--branch-accent-rgb, 8, 145, 178), 0.14) 0%, rgba(255, 255, 255, 0.98) 28%, #ffffff 100%);
        box-shadow:
            0 14px 30px rgba(15, 23, 42, 0.08),
            0 0 0 1px rgba(var(--branch-accent-rgb, 8, 145, 178), 0.08);
    }

    .specific-professional-hours-group::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 5px;
        background: rgba(var(--branch-accent-rgb, 8, 145, 178), 0.92);
    }

    .specific-professional-hours-group.is-selected {
        box-shadow:
            0 16px 34px rgba(15, 23, 42, 0.11),
            0 0 0 1px rgba(var(--branch-accent-rgb, 8, 145, 178), 0.16);
    }

    .specific-professional-hours-group__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid rgba(var(--branch-accent-rgb, 8, 145, 178), 0.14);
    }

    .specific-professional-hours-group__title {
        color: var(--branch-accent-text);
    }

    .specific-professional-hours-group__count {
        background: rgba(var(--branch-accent-rgb, 8, 145, 178), 0.12);
        border: 1px solid rgba(var(--branch-accent-rgb, 8, 145, 178), 0.24);
        color: var(--branch-accent-text);
    }

    .specific-professional-hours-group__selected {
        background: rgba(var(--branch-accent-rgb, 8, 145, 178), 0.9);
        color: #ffffff;
    }

    .specific-professional-hours-group__count {
        white-space: normal;
    }
}

/* ==================== MOBILE UI POLISH ==================== */
.label-mobile {
    display: none;
}

.label-desktop {
    display: inline;
}

.branch-carousel-nav {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfeff 100%);
    border: 1px solid #bae6fd;
    border-radius: 0.9rem;
    padding: 0.65rem;
    position: sticky;
    top: 78px;
    z-index: 18;
}

.branch-carousel-help {
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
    color: #0f766e;
    font-weight: 700;
    margin-bottom: 0.55rem;
}

.branch-carousel-nav-row {
    display: grid;
    grid-template-columns: minmax(128px, 1fr) minmax(0, 1fr) minmax(128px, 1fr);
    gap: 0.5rem;
    align-items: center;
}

.branch-carousel-status {
    min-width: 0;
}

.branch-carousel-btn {
    min-height: 42px;
    border-radius: 0.75rem;
    padding: 0.5rem 0.7rem;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.18s ease;
}

.branch-carousel-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.branch-carousel-btn:active:not(:disabled) {
    transform: translateY(0);
}

.branch-carousel-btn-prev {
    background: #ffffff;
    color: #0f766e;
    border-color: #67e8f9;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.14);
}

.branch-carousel-btn-next {
    background: linear-gradient(135deg, #009ca6 0%, #006e82 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 14px rgba(0, 156, 166, 0.35);
}

.branch-carousel-btn-next:not(:disabled) {
    animation: branchCarouselPulse 1.8s ease-in-out infinite;
}

.branch-carousel-btn-arrow {
    font-size: 16px;
    line-height: 1;
}

.branch-carousel-btn-disabled,
.branch-carousel-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}

@keyframes branchCarouselPulse {
    0%,
    100% {
        box-shadow: 0 6px 14px rgba(0, 156, 166, 0.35);
    }
    50% {
        box-shadow: 0 8px 18px rgba(0, 156, 166, 0.5);
    }
}

@media (max-width: 767px) {
    .label-mobile {
        display: inline !important;
    }

    .label-desktop {
        display: none !important;
    }

    main.container {
        padding-top: 0.75rem !important;
        padding-bottom: 1rem !important;
    }

    header .header-container {
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.65rem 0;
    }

    header .logo-img {
        width: 104px;
        max-height: 52px;
    }

    header .tagline {
        display: none;
    }

    .wizard-card {
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        overflow: hidden;
    }

    .step-scroll-body {
        padding: 0.9rem !important;
    }

    #modal-step-1 .step-scroll-body,
    #modal-step-2 .step-scroll-body,
    #modal-step-3 .step-scroll-body,
    #modal-step-4 .step-scroll-body {
        padding-bottom: 0.75rem !important;
    }

    #modal-step-1 h1,
    #modal-step-2 h1,
    #modal-step-3 h1 {
        font-size: 1.2rem !important;
        line-height: 1.25;
        margin-bottom: 0.35rem !important;
    }

    #modal-step-1 .text-center > p,
    #modal-step-2 .text-center > p,
    #modal-step-3 .text-center > p {
        line-height: 1.35;
    }

    .step-nav-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        align-items: stretch;
        padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom)) !important;
    }

    .step-nav-footer > * {
        min-width: 0;
    }

    #btn-back-step-2,
    #btn-go-step-3-mobile,
    #btn-back-step-3,
    #btn-next-step-3,
    #btn-back-step-4,
    #btn-next-step-4 {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 0.7rem 0.6rem !important;
        font-size: 0.75rem !important;
        border-radius: 0.75rem;
        letter-spacing: 0.01em;
        gap: 0.35rem !important;
    }

    #btn-back-step-3 i,
    #btn-next-step-3 i,
    #btn-back-step-4 i,
    #btn-next-step-4 i,
    #btn-back-step-2 i,
    #btn-go-step-3-mobile i {
        font-size: 0.8rem !important;
        margin: 0 !important;
    }

    .category-btn {
        min-height: 74px !important;
        border-radius: 0.9rem !important;
    }

    #btn-category-ame,
    #btn-category-consulta,
    #btn-category-examen,
    #btn-category-pabellones,
    #btn-category-revision-examenes {
        height: auto !important;
        min-height: 74px !important;
        justify-content: center !important;
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    .category-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    .category-btn .category-title {
        font-size: 0.62rem !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        padding: 0 0.15rem;
        gap: 0.02rem;
    }

    .category-btn .category-examples {
        max-width: 184px;
        padding-left: 0.9rem;
    }

    .category-btn .category-examples li {
        font-size: 10px;
        line-height: 1.16;
    }

    #btn-category-ame .category-title,
    #btn-category-consulta .category-title,
    #btn-category-examen .category-title,
    #btn-category-pabellones .category-title,
    #btn-category-revision-examenes .category-title {
        font-size: 0.62rem !important;
    }

    #filters-accordion {
        border-radius: 1rem;
    }

    #filters-accordion-toggle {
        padding: 0.85rem !important;
    }

    #filters-accordion-content {
        padding: 0.85rem !important;
        padding-top: 0.25rem !important;
        gap: 1rem !important;
    }

    #specialty-container label,
    #advanced-search-box .text-sm {
        font-size: 0.8rem !important;
    }

    #especialidad {
        font-size: 0.9rem !important;
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
    }

    #branches-checkbox-container {
        gap: 0.5rem 0.75rem !important;
        margin-top: 0.6rem !important;
    }

    #selected-branches-summary {
        font-size: 11px !important;
        line-height: 1.3;
    }

    #step2-calendar-block,
    #step3-calendar-block {
        border-radius: 1rem !important;
        padding: 0.85rem !important;
        margin-bottom: 0.9rem !important;
    }

    #calendar-container {
        max-width: 100% !important;
    }

    #step3-branches-container {
        margin-top: 0.25rem;
    }

    .branch-carousel-nav {
        border-radius: 0.85rem;
        padding: 0.55rem;
        top: 62px;
    }

    .branch-carousel-help {
        font-size: 11px;
        margin-bottom: 0.45rem;
    }

    .branch-carousel-nav-row {
        grid-template-columns: minmax(96px, 1fr) minmax(0, 1fr) minmax(96px, 1fr);
        gap: 0.35rem;
    }

    .branch-carousel-btn {
        min-height: 44px;
        padding: 0.45rem 0.55rem;
        border-radius: 0.7rem;
        font-size: 11px;
    }

    .branch-carousel-btn-arrow {
        font-size: 14px;
    }

    .branch-carousel-indicator {
        font-size: 10px !important;
    }

    .branch-carousel-title {
        font-size: 12px !important;
    }

    .branch-carousel-track {
        gap: 0.55rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .branch-carousel-slide {
        width: 96% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #step3-branches-container .sucursal-card,
    #step2-branches-container .sucursal-card {
        border-radius: 0.95rem !important;
    }

    #step3-branches-container .hora-btn,
    #step2-branches-container .hora-btn {
        min-height: 40px !important;
        padding: 0.5rem 0.65rem !important;
    }

    #step3-branches-container .hora-select-more,
    #step2-branches-container .hora-select-more {
        min-height: 40px !important;
        padding: 0.45rem 0.6rem !important;
        border-radius: 0.65rem;
    }

    #modal-step-4 .grid {
        gap: 0.9rem !important;
    }

    #modal-step-4 .w-8.h-8 svg {
        width: 20px !important;
        height: 20px !important;
    }

    #modal-step-4 .text-base {
        font-size: 0.95rem !important;
    }

    #modal-step-4 label {
        font-size: 0.82rem !important;
    }

    #file-upload-container {
        padding: 0.95rem !important;
    }

    #file-upload-placeholder p {
        margin-bottom: 0.35rem !important;
    }

    #browse-file-btn,
    #take-photo-btn {
        padding: 0.5rem 0.65rem !important;
        font-size: 0.75rem !important;
    }

    footer {
        padding: 1rem 0;
    }

    .footer-text {
        font-size: 0.72rem;
        line-height: 1.45;
    }
}

/* ==================== TAILWIND-LIKE FINE TUNE ==================== */
:root {
    --ui-card-radius: 0.875rem;
    --ui-control-height: 2.875rem;
    --ui-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent);
}

.wizard-card {
    border: 1px solid var(--gray-100);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.step-scroll-body {
    padding: 1.25rem;
}

.step-nav-footer {
    border-top: 1px solid var(--gray-200);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    gap: 0.75rem;
}

#filters-accordion,
#step2-calendar-block,
#step3-calendar-block,
#step2-inline-step3,
#selected-info-display {
    border-color: var(--gray-200) !important;
    border-radius: 1rem !important;
    box-shadow: var(--shadow-sm) !important;
}

#filters-accordion-toggle {
    min-height: 4rem;
    padding: 1rem 1.25rem !important;
}

#filters-accordion-title {
    letter-spacing: -0.01em;
}

/* (Legacy .category-btn radius/hover/selected — overridden by .category-buttons-inline block) */

#especialidad,
#step4-benefit-select,
#step4-prestacion-select,
#rut-input {
    height: var(--ui-control-height);
    border: 1px solid var(--gray-300) !important;
    border-radius: 0.75rem !important;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: none;
}

#rut-input {
    padding-right: 2.75rem !important;
}

#especialidad:focus,
#step4-benefit-select:focus,
#step4-prestacion-select:focus,
#rut-input:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--ui-focus-ring) !important;
}

#especialidad-dropdown {
    border: 1px solid var(--gray-200) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-lg) !important;
}

.especialidad-option {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.especialidad-option:hover,
.especialidad-option:focus {
    background: var(--gray-50) !important;
    color: var(--gray-800) !important;
}

#branches-checkbox-container > div {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    transition: var(--transition-fast);
}

#branches-checkbox-container > div:hover {
    border-color: var(--gray-200);
    background: var(--gray-50) !important;
}

#branch-all,
.branch-checkbox {
    accent-color: var(--primary);
}

.calendar-container {
    border: 1px solid var(--gray-200);
    border-radius: var(--ui-card-radius);
    box-shadow: var(--shadow-sm);
}

.calendar-header {
    background: var(--inst-blue);
}

.calendar-nav-btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.calendar-day {
    border-radius: 0.625rem;
    font-weight: 600;
}

.calendar-day.selected {
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.65),
        var(--shadow-sm);
}

#step2-branches-container .sucursal-card,
#step3-branches-container .sucursal-card {
    border: 2px solid rgba(0, 156, 166, 0.2) !important;
    border-radius: var(--ui-card-radius) !important;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

#step2-branches-container .sucursal-card.recommended-branch,
#step3-branches-container .sucursal-card.recommended-branch {
    border-color: var(--primary) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 156, 166, 0.2);
    z-index: 5;
}

#step2-branches-container .sucursal-card:hover,
#step3-branches-container .sucursal-card:hover {
    border-color: var(--primary-light) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

#step2-branches-container .medicos-container > .bg-white,
#step3-branches-container .medicos-container > .bg-white {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
}

#step2-branches-container .sucursal-card,
#step3-branches-container .sucursal-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#step2-branches-container .medicos-container,
#step3-branches-container .medicos-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#step2-branches-container .doctor-card,
#step3-branches-container .doctor-card {
    margin-bottom: 0 !important;
}

@media (min-width: 1024px) {
    #step2-branches-container .medicos-container,
    #step3-branches-container .medicos-container {
        max-height: var(--branch-visible-height, 22rem);
        overflow-y: auto;
        padding-right: 0.35rem;
        scrollbar-gutter: stable;
    }

    #step2-branches-container .medicos-container::-webkit-scrollbar,
    #step3-branches-container .medicos-container::-webkit-scrollbar {
        width: 5px;
    }

    #step2-branches-container .medicos-container::-webkit-scrollbar-track,
    #step3-branches-container .medicos-container::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 9999px;
    }

    #step2-branches-container .medicos-container::-webkit-scrollbar-thumb,
    #step3-branches-container .medicos-container::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 9999px;
    }

    #step2-branches-container .medicos-container::-webkit-scrollbar-thumb:hover,
    #step3-branches-container .medicos-container::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

.hora-btn,
.hour-btn {
    min-height: 2.375rem !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 0.625rem !important;
    font-size: 0.8125rem !important;
    line-height: 1 !important;
    transition: var(--transition-fast);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.hora-btn:hover,
.hour-btn:hover {
    transform: translateY(-1px);
}

.hora-btn.bg-primary,
.hour-btn.bg-primary,
.hora-btn.selected,
.hour-btn.selected {
    background: var(--inst-blue) !important;
    color: #ffffff !important;
    border-color: var(--inst-blue) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent),
        var(--shadow-sm);
}

.hora-btn.bg-primary:hover,
.hour-btn.bg-primary:hover,
.hora-btn.bg-primary:focus-visible,
.hour-btn.bg-primary:focus-visible,
.hora-btn.selected:hover,
.hour-btn.selected:hover,
.hora-btn.selected:focus-visible,
.hour-btn.selected:focus-visible {
    background: var(--inst-blue) !important;
    color: #ffffff !important;
    border-color: var(--inst-blue) !important;
}

.hora-select-more {
    min-height: 2.5rem !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: 0.75rem !important;
    color: var(--gray-700) !important;
    font-weight: 600;
    background: #fff;
}

#btn-back-step-2,
#btn-back-step-3,
#btn-back-step-4 {
    min-height: 2.875rem;
    border-color: var(--gray-300) !important;
    color: var(--gray-700) !important;
    box-shadow: var(--shadow-sm) !important;
}

#btn-back-step-2:hover,
#btn-back-step-3:hover,
#btn-back-step-4:hover {
    background: var(--gray-50) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-400) !important;
}

#btn-go-step-3-mobile,
#btn-continue-desktop,
#btn-next-step-3,
#btn-next-step-4 {
    min-height: 2.875rem;
    border-radius: 0.75rem !important;
    letter-spacing: 0.01em;
    border: 2px solid transparent !important;
    position: relative;
    box-shadow: var(--shadow-md) !important;
    transition:
        box-shadow 0.18s ease,
        transform 0.18s ease,
        filter 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

#btn-go-step-3-mobile:disabled,
#btn-continue-desktop:disabled,
#btn-next-step-3:disabled,
#btn-next-step-4:disabled {
    opacity: 1;
    cursor: not-allowed !important;
    filter: grayscale(0.06);
}

#btn-go-step-3-mobile.action-btn-waiting,
#btn-continue-desktop.action-btn-waiting,
#btn-next-step-3.action-btn-waiting,
#btn-next-step-4.action-btn-waiting {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
    border-color: #7b8798 !important;
    color: #f8fafc !important;
    filter: saturate(0.72);
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

#btn-go-step-3-mobile.action-btn-ready,
#btn-continue-desktop.action-btn-ready,
#btn-next-step-3.action-btn-ready,
#btn-next-step-4.action-btn-ready {
    border-color: color-mix(in srgb, var(--primary) 45%, white) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent),
        var(--shadow-lg) !important;
}

/* Botones de continuar: habilitado = azul institucional, hover = invertido */
#btn-go-step-3-mobile:not(:disabled),
#btn-continue-desktop:not(:disabled),
#btn-next-step-3:not(:disabled) {
    background: var(--inst-blue) !important;
    color: #ffffff !important;
    border-color: var(--inst-blue) !important;
}

#btn-go-step-3-mobile:not(:disabled):hover,
#btn-continue-desktop:not(:disabled):hover,
#btn-next-step-3:not(:disabled):hover,
#btn-go-step-3-mobile:not(:disabled):focus-visible,
#btn-continue-desktop:not(:disabled):focus-visible,
#btn-next-step-3:not(:disabled):focus-visible {
    background: #ffffff !important;
    color: var(--inst-blue) !important;
    border-color: var(--inst-blue) !important;
}

#btn-go-step-3-mobile:not(:disabled) i,
#btn-continue-desktop:not(:disabled) i,
#btn-next-step-3:not(:disabled) i {
    color: inherit !important;
}

/* Paso 4 confirmar: habilitado = verde institucional, hover = invertido */
#btn-next-step-4:not(:disabled) {
    background: var(--inst-green) !important;
    color: #ffffff !important;
    border-color: var(--inst-green) !important;
}

#btn-next-step-4:not(:disabled):hover,
#btn-next-step-4:not(:disabled):focus-visible {
    background: #ffffff !important;
    color: var(--inst-green) !important;
    border-color: var(--inst-green) !important;
}

#btn-next-step-4:not(:disabled) i {
    color: inherit !important;
}

#btn-next-step-4.action-btn-ready {
    border-color: color-mix(in srgb, var(--inst-green) 55%, white) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--inst-green) 24%, transparent),
        var(--shadow-lg) !important;
}

#btn-go-step-3-mobile.action-btn-ready::before,
#btn-continue-desktop.action-btn-ready::before,
#btn-next-step-3.action-btn-ready::before,
#btn-next-step-4.action-btn-ready::before,
#btn-go-step-3-mobile.action-btn-waiting::before,
#btn-continue-desktop.action-btn-waiting::before,
#btn-next-step-3.action-btn-waiting::before,
#btn-next-step-4.action-btn-waiting::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 0.35rem;
}

#btn-go-step-3-mobile.action-btn-ready::before,
#btn-continue-desktop.action-btn-ready::before,
#btn-next-step-3.action-btn-ready::before,
#btn-next-step-4.action-btn-ready::before {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
    animation: actionReadyPulse 1.2s ease-in-out infinite;
}

#btn-go-step-3-mobile.action-btn-waiting::before,
#btn-continue-desktop.action-btn-waiting::before,
#btn-next-step-3.action-btn-waiting::before,
#btn-next-step-4.action-btn-waiting::before {
    background: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

/* Botones de acción principales - Mejora de Contraste y Hover */
#btn-go-step-3-mobile,
#btn-continue-desktop,
#btn-next-step-3,
#btn-next-step-4 {
    background-color: var(--inst-green);
    color: #ffffff !important;
    border: none;
    transition: all 0.3s ease;
    font-weight: 800;
}

#btn-go-step-3-mobile:hover:not(:disabled),
#btn-continue-desktop:hover:not(:disabled),
#btn-next-step-3:hover:not(:disabled),
#btn-next-step-4:hover:not(:disabled) {
    background-color: var(--inst-green-dark) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Botón Volver - Mejora de visibilidad */
#btn-back-step-3,
#btn-back-step-4 {
    background-color: #ffffff;
    color: var(--gray-700) !important;
    border: 1.5px solid var(--gray-300) !important;
    font-weight: 600;
}

#btn-back-step-3:hover:not(:disabled),
#btn-back-step-4:hover:not(:disabled) {
    background-color: var(--gray-50) !important;
    border-color: var(--gray-400) !important;
    color: var(--gray-900) !important;
}

@keyframes actionReadyPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.16);
    }
}

/* SweetAlert botones institucionales */
.swal-success-actions,
.swal-csj-actions {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.35rem 0.35rem;
}

.swal-csj-actions-padded {
    padding: 1rem 1rem 0;
}

.swal-success-btn,
.swal-csj-btn {
    flex: 1;
    min-height: 2.625rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
    font-weight: 700;
    font-size: 0.84rem;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.swal-success-btn-primary,
.swal-csj-btn-primary {
    background: var(--inst-blue) !important;
    color: #ffffff !important;
    border-color: var(--inst-blue) !important;
}

.swal-success-btn-primary:hover,
.swal-success-btn-primary:focus-visible,
.swal-csj-btn-primary:hover,
.swal-csj-btn-primary:focus-visible {
    background: #ffffff !important;
    color: var(--inst-blue) !important;
    border-color: var(--inst-blue) !important;
}

.swal-success-btn-secondary,
.swal-csj-btn-secondary {
    background: #ffffff !important;
    color: var(--gray-700) !important;
    border-color: var(--gray-300) !important;
}

.swal-success-btn-secondary:hover,
.swal-success-btn-secondary:focus-visible,
.swal-csj-btn-secondary:hover,
.swal-csj-btn-secondary:focus-visible {
    background: var(--gray-50) !important;
    color: var(--gray-800) !important;
    border-color: var(--gray-400) !important;
}

.swal-csj-btn-success {
    background: var(--inst-green) !important;
    color: #ffffff !important;
    border-color: var(--inst-green) !important;
}

.swal-csj-btn-success:hover,
.swal-csj-btn-success:focus-visible {
    background: #ffffff !important;
    color: var(--inst-green) !important;
    border-color: var(--inst-green) !important;
}

/* Botón X del modal de éxito */
.swal-csj-close-btn.swal2-close {
    position: absolute !important;
    top: 0.9rem !important;
    right: 0.9rem !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    font-size: 1.2rem !important;
    color: var(--gray-400) !important;
    border-radius: 9999px !important;
    background: var(--gray-100) !important;
    border: 1.5px solid var(--gray-200) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
}

.swal-csj-close-btn.swal2-close:hover,
.swal-csj-close-btn.swal2-close:focus-visible {
    background: var(--gray-200) !important;
    color: var(--gray-600) !important;
}

.attachment-accordion {
    border: 0;
    border-radius: var(--ui-card-radius);
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.attachment-accordion.is-required {
    border-color: color-mix(in srgb, var(--inst-green) 45%, var(--gray-200));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--inst-green) 16%, transparent),
        var(--shadow-sm);
}

.attachment-accordion-toggle {
    width: 100%;
    border: 0;
    background: #fff;
    color: var(--gray-800);
    padding: 0.8rem 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.18s ease;
}

.attachment-accordion-toggle:hover {
    background: var(--gray-50);
}

.attachment-accordion-toggle.is-locked {
    cursor: default;
}

.attachment-accordion-toggle.is-locked:hover {
    background: #fff;
}

.attachment-accordion-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.attachment-accordion-title-wrap > svg {
    flex-shrink: 0;
    color: var(--primary);
}

.attachment-accordion-title {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-800);
}

.attachment-accordion-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.18rem 0.5rem;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.attachment-accordion-badge.is-optional {
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
}

.attachment-accordion-badge.is-required {
    color: #365314;
    background: #ecfccb;
    border: 1px solid #bef264;
}

.attachment-accordion-chevron {
    color: var(--gray-500);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.attachment-accordion-toggle.is-open .attachment-accordion-chevron {
    transform: rotate(180deg);
}

.attachment-accordion-content {
    border-top: 1px solid var(--gray-200);
    padding: 0.85rem 0.95rem 0.95rem;
    background: #fff;
}

.attachment-accordion-helper {
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--gray-600);
    margin-bottom: 0.65rem;
}

.attachment-accordion.is-required .attachment-accordion-helper {
    color: #3f6212;
}

#file-upload-container {
    border-color: var(--gray-300) !important;
    border-radius: var(--ui-card-radius) !important;
    background: #fff;
}

#file-upload-container:hover {
    box-shadow: var(--shadow-sm);
}

.branch-carousel-nav {
    border-radius: 1rem;
    border-color: #bae6fd;
    box-shadow: var(--shadow-sm);
}

.branch-carousel-btn {
    min-height: 2.875rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.branch-carousel-btn-next:not(:disabled) {
    animation: none;
}

.recommended-branch-card {
    position: relative;
    overflow: hidden;
    border-width: 2px !important;
    border-color: var(--inst-green) !important;
    background: #f6f9e8;
    box-shadow:
        0 0 0 1px rgba(165, 191, 0, 0.28),
        0 8px 16px rgba(165, 191, 0, 0.14),
        var(--shadow-md) !important;
}

.recommended-branch-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--inst-green);
}

.recommended-branch-card::after {
    content: none;
}

.recommended-branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.62rem;
    border-radius: 9999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #3f6212;
    background: #dcfce7;
    border: 1px solid #86efac;
    line-height: 1;
    flex-shrink: 0;
}

.recommended-branch-hint {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1.25;
    color: #3f6212;
    font-weight: 700;
}

.recommended-branch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #16a34a;
    border: 1px solid #16a34a;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.18);
}

.recommended-doctor-card {
    border-width: 2px !important;
    border-color: var(--inst-green) !important;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(165, 191, 0, 0.28),
        var(--shadow-sm);
}

.branch-carousel-indicator {
    display: inline-flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    padding: 0.08rem 0.5rem;
    border-radius: 9999px;
    transition: var(--transition-fast);
}

.branch-carousel-indicator-recommended {
    color: #3f6212 !important;
    background: #f7fee7;
    border: 1px solid #bef264;
}

.branch-theme-default {
    --branch-accent-rgb: 8, 145, 178;
    --branch-accent-text: #0f172a;
}

.branch-theme-casa-matriz {
    --branch-accent-rgb: 8, 145, 178;
    --branch-accent-text: #0c4a5a;
}

.branch-theme-labs {
    --branch-accent-rgb: 217, 119, 6;
    --branch-accent-text: #7c2d12;
}

.branch-theme-villa-alegre {
    --branch-accent-rgb: 22, 163, 74;
    --branch-accent-text: #14532d;
}

.branch-theme-san-clemente {
    --branch-accent-rgb: 37, 99, 235;
    --branch-accent-text: #1e3a8a;
}

#modal-step-4 .bg-gray-50.rounded-xl {
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 767px) {
    .step-scroll-body {
        padding: 0.95rem !important;
    }

    #step1-universal-search-section {
        padding-top: 0.425rem;
    }

    .step-nav-footer {
        gap: 0.55rem;
    }

    #btn-back-step-2,
    #btn-go-step-3-mobile,
    #btn-back-step-3,
    #btn-next-step-3,
    #btn-back-step-4,
    #btn-next-step-4 {
        min-height: 2.875rem;
        font-size: 0.78rem !important;
        padding: 0.7rem 0.65rem !important;
    }

    .category-btn .category-title {
        font-size: 0.62rem !important;
    }

    .category-btn .category-examples li {
        font-size: 0.68rem;
        line-height: 1.2;
    }

    #especialidad,
    #step4-benefit-select,
    #step4-prestacion-select,
    #rut-input {
        font-size: 0.9rem;
    }

    .branch-carousel-btn {
        font-size: 0.7rem;
        min-height: 2.75rem;
    }

    .recommended-branch-pill {
        font-size: 0.56rem;
        padding: 0.16rem 0.38rem;
    }

    .recommended-branch-hint {
        font-size: 0.62rem;
    }

    #step3-branches-container.branch-mobile-stack-container {
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        margin-top: 0.3rem;
    }

    .branch-mobile-stack-card {
        position: relative;
        overflow: hidden;
        border-color: rgba(var(--branch-accent-rgb), 0.3) !important;
        background:
            linear-gradient(180deg, rgba(var(--branch-accent-rgb), 0.14) 0%, rgba(255, 255, 255, 0.98) 26%, #fff 100%);
        box-shadow:
            0 14px 30px rgba(15, 23, 42, 0.08),
            0 0 0 1px rgba(var(--branch-accent-rgb), 0.08);
    }

    .branch-mobile-stack-card::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 5px;
        background: rgba(var(--branch-accent-rgb), 0.92);
    }

    .branch-mobile-stack-card-recommended {
        box-shadow:
            0 16px 34px rgba(15, 23, 42, 0.11),
            0 0 0 1px rgba(var(--branch-accent-rgb), 0.15);
    }

    .branch-mobile-stack-header {
        padding-bottom: 0.35rem;
        margin-bottom: 0.85rem;
        border-bottom: 1px solid rgba(var(--branch-accent-rgb), 0.14);
    }

    .branch-mobile-stack-title {
        color: var(--branch-accent-text) !important;
        letter-spacing: -0.01em;
    }

    .branch-mobile-stack-date {
        margin-top: 0.2rem;
        font-size: 0.72rem;
        line-height: 1.25;
        color: rgba(15, 23, 42, 0.72);
        font-weight: 600;
    }

    .branch-mobile-stack-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin-bottom: 0.8rem;
    }

    .branch-mobile-stack-badge {
        display: inline-flex;
        align-items: center;
        min-height: 1.7rem;
        padding: 0.3rem 0.6rem;
        border-radius: 999px;
        background: rgba(var(--branch-accent-rgb), 0.12);
        border: 1px solid rgba(var(--branch-accent-rgb), 0.24);
        color: var(--branch-accent-text);
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .branch-mobile-stack-badge-recommended {
        background: rgba(var(--branch-accent-rgb), 0.9);
        border-color: rgba(var(--branch-accent-rgb), 0.9);
        color: #fff;
    }

    .branch-mobile-stack-doctors {
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
    }

    .branch-mobile-stack-doctors .doctor-card {
        margin-bottom: 0 !important;
        border: 1px solid rgba(var(--branch-accent-rgb), 0.18) !important;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .branch-mobile-stack-doctors .doctor-card[data-recommended-doctor="1"] {
        border-color: rgba(var(--branch-accent-rgb), 0.42) !important;
        box-shadow:
            0 0 0 1px rgba(var(--branch-accent-rgb), 0.16),
            0 10px 22px rgba(15, 23, 42, 0.07);
    }

    .branch-mobile-stack-doctors .hora-btn {
        border-radius: 0.8rem !important;
    }

    .branch-mobile-stack-doctors .hora-select-more {
        width: 100%;
        background: rgba(var(--branch-accent-rgb), 0.06);
        border-color: rgba(var(--branch-accent-rgb), 0.18);
        color: #334155;
        font-weight: 700;
    }

    .inline-registration-form {
        padding: 0.85rem;
    }

    .inline-registration-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .inline-registration-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .inline-registration-btn {
        width: 100%;
    }

    .attachment-accordion-toggle {
        padding: 0.72rem 0.8rem;
    }

    .attachment-accordion-content {
        padding: 0.72rem 0.8rem 0.8rem;
    }

    .attachment-accordion-title {
        font-size: 0.78rem;
    }

    .attachment-accordion-badge {
        font-size: 0.58rem;
        padding: 0.12rem 0.4rem;
    }

    .attachment-accordion-helper {
        font-size: 0.68rem;
    }
}

/* ==================== PASO 1: TARJETAS DE ACCESO RAPIDO ==================== */
.step1-category-stack {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.step1-legacy-agenda-wrapper {
    width: 100%;
    padding: 0 25px;
}

.step1-legacy-agenda-card {
    max-width: 640px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 1rem;
    border-top: 6px solid #a5bf00;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    padding: 1.4rem 1.5rem;
    text-align: center;
}

.step1-legacy-agenda-text {
    margin: 0 0 1rem;
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.55;
}

.step1-legacy-agenda-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.8rem 1.3rem;
    border: 0;
    border-radius: 0.8rem;
    background: #008ea9;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.step1-legacy-agenda-link:hover,
.step1-legacy-agenda-link:focus-visible {
    background: #006f85;
    color: #ffffff;
}

.legacy-branch-modal {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

body.legacy-branch-modal-open {
    overflow: hidden;
}

.legacy-branch-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(2px);
}

.legacy-branch-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 680px);
    background: #ffffff;
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
    padding: 1.8rem 1.5rem 1.4rem;
    border: 1px solid rgba(0, 156, 166, 0.14);
}

.legacy-branch-modal__header {
    text-align: center;
    padding-bottom: 1.2rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}

.legacy-branch-modal__title {
    margin: 0;
    color: #18a582;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
}

.legacy-branch-modal__options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legacy-branch-modal__option {
    width: 100%;
    border: 0;
    border-radius: 1.6rem;
    background: linear-gradient(180deg, #0fa3bb 0%, #0a95ab 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.15rem, 3vw, 1.8rem);
    letter-spacing: 0.03em;
    text-align: center;
    padding: 1.3rem 1.1rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.18),
        0 12px 24px rgba(14, 165, 184, 0.22);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.legacy-branch-modal__option:hover,
.legacy-branch-modal__option:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 16px 28px rgba(14, 165, 184, 0.24);
    outline: none;
}

.legacy-branch-modal__footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.3);
}

.legacy-branch-modal__back-btn {
    border: 0;
    border-radius: 0.8rem;
    background: #0a95ab;
    color: #ffffff;
    font-weight: 700;
    padding: 0.7rem 1.15rem;
    min-width: 120px;
    transition: background-color 0.18s ease;
}

.legacy-branch-modal__back-btn:hover,
.legacy-branch-modal__back-btn:focus-visible {
    background: #087f92;
    outline: none;
}

@media (max-width: 640px) {
    .legacy-branch-modal {
        padding: 0.75rem;
    }

    .legacy-branch-modal__dialog {
        border-radius: 1.25rem;
        padding: 1.35rem 1rem 1.15rem;
    }

    .legacy-branch-modal__header {
        margin-bottom: 1.1rem;
        padding-bottom: 1rem;
    }

    .legacy-branch-modal__option {
        border-radius: 1.35rem;
        padding: 1.15rem 0.95rem;
        font-size: 1rem;
    }

    .legacy-branch-modal__footer {
        justify-content: center;
    }

    .legacy-branch-modal__back-btn {
        width: 100%;
    }
}

.category-buttons-inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    max-width: none !important;
    width: 100% !important;
}

/* Force step 1 buttons to span full viewport width
   Overrides from shared/layout-distribution.css & shared/base.css */
body.app-layout--agendar main.container,
body.app-layout--agendar .layout-main.container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.app-layout--agendar .layout-main > .wizard-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.app-layout--agendar .wizard-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#modal-step-1 .step-scroll-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#modal-step-1 .category-buttons-inline {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* ============================================================
   CATEGORY CARDS — Design System (Senior UX/UI)

   Escala cromática:
   Verde  #8FAE45  → CTA sólido verde, texto blanco
   Teal   #3C8E95  → CTA outline neutro
   Gris   #6B7B8D  → CTA sólido gris, texto blanco

   Todos los iconos: fondo sólido de su grupo, SVG blanco
   Todos los títulos: #1F2933 (negro)
   Bordes de tarjeta: #E5E7EB (neutro)
   Sin hover / sin transiciones de estado
   ============================================================ */

.category-buttons-inline .category-btn {
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    text-align: left !important;
    cursor: pointer;
    background: #ffffff !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
    transition: none !important;
}

/* — Sin hover, sin focus ring, sin selected — */
.category-buttons-inline .category-btn:hover,
.category-buttons-inline .category-btn:focus-visible,
.category-buttons-inline .category-btn.selected {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    border-color: #E5E7EB !important;
    background: #ffffff !important;
    outline: none !important;
}

/* — Grid interior — */
.category-card-layout {
    display: grid !important;
    grid-template-columns: 5.04rem minmax(0, 1fr) !important;
    grid-template-rows: 1fr auto !important;
    align-content: start;
    align-items: start;
    gap: 0.3rem 0.6rem;
    width: 100%;
    height: 100%;
    padding: 0.55rem 0.65rem 0.5rem !important;
}

/* — Icono — */
.category-card-icon-shell {
    grid-row: 1;
    grid-column: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 5.04rem;
    height: 5.04rem;
    border-radius: 1rem;
    color: #ffffff !important;
    box-shadow: none !important;
}

.category-card-icon-shell svg {
    width: 3.04rem !important;
    height: 3.04rem !important;
    color: #ffffff !important;
}

/* — Texto — */
.category-card-body {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    align-self: start;
    display: flex !important;
    flex-direction: column;
    gap: 0.18rem;
}

.category-card-heading {
    color: #1F2933 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.005em;
    display: block !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    word-break: break-word !important;
}

.category-card-copy {
    display: none !important;
}

.category-card-heading .category-card-subtitle {
    display: block !important;
    font-weight: 400 !important;
    font-size: 0.7rem !important;
    line-height: 1.28 !important;
    margin-top: 0.12rem;
    color: #6B7280 !important;
}

.category-card-subtext {
    display: block !important;
    font-weight: 400 !important;
    font-size: 0.58rem !important;
    line-height: 1.25 !important;
    margin-top: 0.15rem;
    color: #6B7280 !important;
}

/* — CTA (base: outline neutro) — */
.category-card-cta {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    justify-self: stretch;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 1.6rem;
    margin-top: 0;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1.5px solid #E5E7EB;
    background: #ffffff !important;
    color: #4B5563 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: none !important;
    width: 100%;
}

.category-card-cta i {
    font-size: 0.58rem !important;
}

/* ---- GRUPO VERDE — Atención Médica Hoy + Reservar Consulta ---- */
.category-btn--green .category-card-icon-shell {
    background: #8FAE45 !important;
}
.category-btn--green .category-card-cta {
    background: #8FAE45 !important;
    border-color: #8FAE45 !important;
    color: #ffffff !important;
}

/* ---- GRUPO TEAL — Reservar Examen + Resultados de Exámenes ---- */
.category-btn--teal .category-card-icon-shell {
    background: #3C8E95 !important;
}
.category-btn--teal .category-card-cta {
    background: transparent !important;
    border: 1.5px solid #DDE1E6 !important;
    color: #4B5563 !important;
}

/* ---- GRUPO GRIS — Atención AME + Reservar Pabellón ---- */
.category-btn--gray .category-card-icon-shell {
    background: #7B8FA0 !important;
}
.category-btn--gray .category-card-cta {
    background: #7B8FA0 !important;
    border-color: #7B8FA0 !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    .step1-category-stack {
        flex-direction: column-reverse;
        gap: 0.85rem;
    }

    .step1-legacy-agenda-wrapper {
        padding: 0 12px;
    }

    .step1-legacy-agenda-card {
        border-radius: 0.9rem;
        padding: 1rem 0.95rem;
    }

    .step1-legacy-agenda-text {
        font-size: 0.92rem;
        margin-bottom: 0.85rem;
    }

    .step1-legacy-agenda-link {
        width: 100%;
    }

    /* Container: grid 2 columnas */
    .category-buttons-inline {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.65rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 6px !important;
        padding-right: 12px !important;
    }

    /* Cada tarjeta ocupa su celda */
    .category-buttons-inline .category-btn {
        flex: unset !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
        border-radius: 0.9rem !important;
    }

    /* Layout vertical: icono → texto → CTA */
    .category-card-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 0.7rem 0.5rem 0.5rem !important;
        min-height: 8rem !important;
    }

    /* Icono: centrado, sin posicionamiento de grid */
    .category-card-icon-shell {
        grid-row: unset !important;
        grid-column: unset !important;
        width: 3rem !important;
        height: 3rem !important;
        border-radius: 0.65rem !important;
    }

    .category-card-icon-shell svg {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    /* Texto centrado */
    .category-card-body {
        grid-row: unset !important;
        grid-column: unset !important;
        align-self: unset !important;
        text-align: center !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.35rem 0.25rem 0 !important;
    }

    .category-card-heading {
        font-size: 0.7rem !important;
        line-height: 1.25 !important;
        text-align: center !important;
    }

    /* Ocultar subtexto en móvil */
    .category-card-subtext {
        display: none !important;
    }

    /* CTA: full width al fondo */
    .category-card-cta {
        grid-row: unset !important;
        grid-column: unset !important;
        align-self: unset !important;
        justify-self: unset !important;
        width: 100% !important;
        min-height: 1.6rem !important;
        padding: 0.25rem 0.4rem !important;
        margin-top: 0.45rem !important;
        font-size: 0.62rem !important;
        white-space: nowrap;
    }

    /* Restaurar <br> para que el texto se rompa correctamente en celdas estrechas */
    .category-card-heading br {
        display: block !important;
    }
}