:root {
    color-scheme: light;
    --navy: #0e3441;
    --navy-deep: #092630;
    --teal: #0f8b8d;
    --teal-soft: #e8f5f3;
    --canvas: #f5f3ee;
    --surface: #fff;
    --text: #17262c;
    --muted: #617278;
    --border: #dbe4e2;
    --success: #167b5b;
    --danger: #a43c3c;
    --focus: 0 0 0 3px rgba(64, 205, 194, .38);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--canvas); }
button, select { font: inherit; }
a { color: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
    padding: 28px 20px; color: #eaf7f5;
    background: radial-gradient(circle at 10% 0, rgba(34, 176, 169, .28), transparent 30%), var(--navy-deep);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
    display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px;
    border-radius: 14px; color: white; font-weight: 850;
    background: linear-gradient(135deg, #0e7180, #13a09b);
}
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: #a9c6c7; }
.brand--inverse { margin: 0 8px 34px; }

.primary-nav { display: grid; gap: 5px; }
.nav-item {
    display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 12px; border-radius: 12px; color: #c7dcdd;
    text-decoration: none; font-weight: 650;
}
.nav-item.is-active { color: white; background: rgba(255,255,255,.11); }
.nav-item.is-disabled { opacity: .58; cursor: not-allowed; }
.nav-item small {
    padding: 3px 6px; border-radius: 999px; font-size: .61rem; letter-spacing: .04em;
    background: rgba(255,255,255,.1);
}
.sidebar-footer { margin-top: auto; padding: 18px 12px 4px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-footer p { margin: 0 0 3px; color: #9ebbbc; font-size: .75rem; }
.sidebar-footer strong { display: block; overflow-wrap: anywhere; }
.sidebar-footer a { display: inline-block; margin-top: 12px; color: #9fe1dc; font-size: .84rem; }

.workspace { min-width: 0; padding: 38px clamp(24px, 4vw, 64px) 54px; }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 28px; }
.eyebrow { margin: 0; color: var(--teal); font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
h1 { margin: 4px 0 3px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.04em; }
h2 { margin: 4px 0 0; font-size: 1.28rem; letter-spacing: -.02em; }
h3 { margin: 8px 0 4px; }
.topbar-context { margin: 0; color: var(--muted); }

.context-switcher { min-width: min(100%, 410px); }
.context-switcher label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.context-switcher > div { display: flex; gap: 8px; }
select {
    min-width: 0; flex: 1; height: 44px; padding: 0 38px 0 13px; border: 1px solid var(--border);
    border-radius: 11px; color: var(--text); background: var(--surface);
}
.button { height: 44px; padding: 0 16px; border: 0; border-radius: 11px; font-weight: 750; cursor: pointer; }
.button--secondary { color: white; background: var(--navy); }
.button--primary { width: 100%; color: white; background: var(--teal); }
.button--link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.button:hover { filter: brightness(1.08); }

.flash { margin-bottom: 20px; padding: 13px 16px; border-radius: 12px; font-weight: 650; }
.flash--success { color: #0b5d42; background: #dff4e9; border: 1px solid #a7ddc2; }
.flash--error { color: #8c2f2f; background: #fae6e6; border: 1px solid #ecc0c0; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card {
    min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 17px;
    background: rgba(255,255,255,.92); box-shadow: 0 12px 35px rgba(18,59,74,.06);
}
.metric-card--accent { color: white; border-color: var(--navy); background: linear-gradient(135deg, var(--navy), #155a67); }
.metric-card span, .metric-card small { display: block; }
.metric-card span { color: var(--muted); font-size: .79rem; font-weight: 700; }
.metric-card--accent span, .metric-card--accent small { color: #c9e3e3; }
.metric-card strong { display: block; margin: 7px 0 5px; font-size: 2rem; letter-spacing: -.04em; }
.metric-card small { color: var(--muted); line-height: 1.35; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 18px; }
.panel {
    min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 18px;
    background: var(--surface); box-shadow: 0 12px 35px rgba(18,59,74,.05);
}
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.badge { padding: 6px 9px; border-radius: 999px; color: #176d68; background: var(--teal-soft); font-size: .72rem; font-weight: 750; }
.empty-state { padding: 46px 18px 30px; text-align: center; color: var(--muted); }
.empty-state > span { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--teal); background: var(--teal-soft); font-size: 1.5rem; }
.empty-state p { margin: 0; }
.appointment-list { margin: 20px 0 0; padding: 0; list-style: none; }
.appointment-list li {
    display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 14px 0; border-top: 1px solid #edf1f0;
}
.appointment-list time strong, .appointment-list time span, .appointment-list div span { display: block; }
.appointment-list time strong { font-size: 1.15rem; }
.appointment-list time span, .appointment-list div span { color: var(--muted); font-size: .77rem; margin-top: 2px; }
.status { padding: 5px 8px; border-radius: 999px; color: #176d68; background: var(--teal-soft); font-size: .7rem; font-weight: 750; }
.progress-value { color: var(--teal); font-size: 1.1rem; }
.progress { height: 8px; overflow: hidden; margin: 22px 0; border-radius: 99px; background: #e7edeb; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #4bc4b4); }
.progress-bar--0 { width: 0; }
.progress-bar--33 { width: 33%; }
.progress-bar--67 { width: 67%; }
.progress-bar--100 { width: 100%; }
.checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 28px; color: var(--muted); }
.checklist li::before {
    content: "·"; position: absolute; left: 0; top: -1px; display: grid; place-items: center;
    width: 19px; height: 19px; border: 1px solid var(--border); border-radius: 50%;
}
.checklist li.is-complete { color: var(--text); }
.checklist li.is-complete::before { content: "✓"; color: white; border-color: var(--success); background: var(--success); font-size: .72rem; }
.queue-note { margin: 18px 0 0; padding: 10px 12px; border-radius: 10px; color: #765b15; background: #fff5cf; font-size: .8rem; }
.privacy-note { margin: 18px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin-bottom: 6px; }
.page-heading p:last-child { margin: 0; color: var(--muted); }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 9px; }
.team-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 18px; align-items: start; }
.member-list { margin-top: 18px; }
.member-row {
    display: grid; grid-template-columns: 42px minmax(130px, .8fr) minmax(180px, 1.4fr) auto;
    gap: 13px; align-items: center; padding: 15px 0; border-top: 1px solid #edf1f0;
}
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--navy); background: var(--teal-soft); font-size: .78rem; font-weight: 850; }
.member-identity strong, .member-identity span, .member-access span { display: block; }
.member-identity span { margin-top: 2px; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.member-access { display: grid; gap: 4px; color: var(--muted); font-size: .75rem; }
.member-access strong { color: var(--text); }
.form-intro { margin: 12px 0 18px; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.stacked-form { display: grid; gap: 15px; }
.stacked-form label { display: grid; gap: 7px; color: var(--text); font-size: .8rem; font-weight: 750; }
.stacked-form label small { color: var(--muted); font-weight: 500; }
.stacked-form input, .stacked-form select {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border);
    border-radius: 11px; color: var(--text); background: white;
}
.credential-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 24px;
    margin-bottom: 18px; padding: 22px; border: 1px solid #e8cb71; border-radius: 17px; background: #fff8d9;
}
.credential-card h2 { margin-bottom: 7px; }
.credential-card p { margin: 0; color: #6c5b29; font-size: .84rem; }
.credential-card dl { display: grid; gap: 9px; margin: 0; }
.credential-card dl div { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.72); }
.credential-card dt { color: #6c5b29; }
.credential-card dd { user-select: all; }
.secret-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }

.account-page { display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 10% 0, #dff4f1, transparent 35%), var(--canvas); }
.account-card {
    width: min(100%, 520px); padding: clamp(26px, 5vw, 46px); border: 1px solid var(--border);
    border-radius: 22px; background: white; box-shadow: 0 24px 70px rgba(18,59,74,.10);
}
.account-card .brand { margin-bottom: 34px; }
.account-card .eyebrow { margin-top: 0; }
.account-card h1 { margin-bottom: 12px; font-size: clamp(2rem, 7vw, 3rem); }
.account-card > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }

.patient-directory { padding-bottom: 10px; }
.patient-search { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 10px; align-items: end; margin: 18px 0; }
.patient-search label, .patient-form label, .consent-form label { display: grid; gap: 7px; color: var(--text); font-size: .8rem; font-weight: 750; }
.patient-search input, .patient-form input, .patient-form select, .consent-form input, .consent-form select {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border);
    border-radius: 11px; color: var(--text); background: white;
}
.patient-list { border-top: 1px solid #edf1f0; }
.patient-row {
    display: grid; grid-template-columns: 42px minmax(170px, 1.2fr) minmax(170px, .8fr) auto;
    gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid #edf1f0; color: inherit; text-decoration: none;
}
.patient-row:hover { color: var(--teal); }
.patient-identity, .patient-contact { display: grid; gap: 3px; }
.patient-identity small, .patient-contact small, .patient-contact { color: var(--muted); font-size: .76rem; }
.empty-state.compact { min-height: 210px; }
.patient-form-card { max-width: 940px; }
.patient-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.patient-form label small, .consent-form label small { color: var(--muted); font-weight: 500; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 7px; }
.patient-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.patient-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin: 20px 0 0; }
.patient-facts div { padding: 13px; border-radius: 12px; background: var(--teal-soft); }
.patient-facts dt { color: var(--muted); font-size: .72rem; }
.patient-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .9rem; font-weight: 750; }
.guardian-list { display: grid; margin-top: 16px; }
.guardian-list > div { display: grid; gap: 3px; padding: 13px 0; border-top: 1px solid #edf1f0; }
.guardian-list span, .guardian-list small { color: var(--muted); font-size: .76rem; }
.inline-form { margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf1f0; }
.inline-form summary { cursor: pointer; color: var(--teal); font-weight: 800; }
.inline-form form { margin-top: 16px; }
.check-field { display: flex !important; grid-template-columns: none; align-items: center; gap: 9px !important; }
.check-field input { width: 17px !important; height: 17px !important; }
.consent-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.consent-form button { align-self: end; }
.consent-history { display: grid; border-top: 1px solid #edf1f0; }
.consent-history > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #edf1f0; }
.consent-history p, .consent-history small { display: grid; gap: 3px; margin: 0; }
.consent-history small, .consent-history time { color: var(--muted); font-size: .72rem; }
.consent-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.consent-dot--accepted { background: var(--success); }
.consent-dot--declined, .consent-dot--revoked { background: #b7554a; }

.schedule-toolbar {
    display: grid; grid-template-columns: 44px minmax(250px, auto) minmax(180px, 1fr) 44px;
    gap: 12px; align-items: center; margin-bottom: 16px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 15px; background: white;
}
.schedule-toolbar form { display: flex; align-items: end; gap: 8px; }
.schedule-toolbar form label { display: grid; gap: 4px; color: var(--muted); font-size: .7rem; }
.schedule-toolbar input { height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; }
.date-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--navy); background: var(--teal-soft); text-decoration: none; font-weight: 900; }
.selected-date { display: grid; justify-items: center; gap: 2px; }
.selected-date span { color: var(--muted); font-size: .76rem; }
.schedule-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.schedule-summary div { display: flex; align-items: baseline; gap: 8px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 13px; background: white; }
.schedule-summary strong { color: var(--navy); font-size: 1.35rem; }
.schedule-summary span { color: var(--muted); font-size: .76rem; }
.day-timeline { display: grid; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; }
.day-timeline > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; position: relative; }
.day-timeline > li::before { content: ""; position: absolute; left: 70px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.day-timeline > li > time { display: grid; align-content: start; justify-items: end; gap: 2px; padding-top: 17px; color: var(--navy); }
.day-timeline > li > time span { color: var(--muted); font-size: .7rem; }
.day-timeline > li > article { margin: 0 0 12px 17px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.day-timeline > li > article::before { content: ""; position: absolute; left: 65px; margin-top: 3px; width: 11px; height: 11px; border: 3px solid white; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px var(--border); }
.day-timeline .is-inactive article { opacity: .65; background: #f7f7f5; }
.appointment-main { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.appointment-main > div { display: grid; gap: 4px; }
.appointment-main a { color: var(--navy); font-weight: 850; text-decoration: none; }
.appointment-main span, .day-timeline article > p { color: var(--muted); font-size: .76rem; }
.day-timeline article > p { margin: 9px 0 0; }
.appointment-status { padding: 6px 9px; border-radius: 999px; white-space: nowrap; color: var(--teal); background: var(--teal-soft); font-size: .7rem; font-weight: 800; }
.appointment-status--checked_in { color: #765b15; background: #fff5cf; }
.appointment-status--in_progress { color: #184e82; background: #e4f0fa; }
.appointment-status--completed { color: var(--success); background: #e1f4eb; }
.appointment-status--cancelled, .appointment-status--no_show { color: #93443b; background: #f8e8e5; }
.appointment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf1f0; }
.appointment-actions form { margin: 0; }
.appointment-actions details { position: relative; }
.appointment-actions details > summary { cursor: pointer; padding: 8px 11px; border-radius: 9px; color: #93443b; background: #f8e8e5; font-size: .72rem; font-weight: 800; }
.appointment-actions details form { display: grid; gap: 9px; position: absolute; z-index: 3; top: 42px; right: 0; width: 280px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.appointment-actions details label { display: grid; gap: 5px; font-size: .72rem; font-weight: 750; }
.appointment-actions details input { height: 39px; padding: 0 9px; border: 1px solid var(--border); border-radius: 9px; }
.button--small { min-height: 34px; padding: 7px 10px; font-size: .72rem; }
.button--danger { color: white; background: #a74d43; }
.appointment-form-card { max-width: 980px; }
.appointment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.appointment-form label { display: grid; gap: 7px; color: var(--text); font-size: .8rem; font-weight: 750; }
.appointment-form label small { color: var(--muted); font-weight: 500; }
.appointment-form input, .appointment-form select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: white; }
.reminder-readiness { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 18px; padding: 18px 22px; border: 1px solid #e6c871; border-radius: 15px; background: #fff8d9; }
.reminder-readiness > div { display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: baseline; }
.reminder-readiness .eyebrow { grid-column: 1 / -1; margin: 0; }
.reminder-readiness strong { color: var(--navy); font-size: 1.8rem; }
.reminder-readiness span, .reminder-readiness p { color: #6c5b29; font-size: .78rem; }
.reminder-readiness p { margin: 0; line-height: 1.5; }
.continuity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.waitlist, .series-list { display: grid; margin-top: 16px; }
.waitlist article, .series-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 14px 0; border-top: 1px solid #edf1f0; }
.waitlist article > div:first-child, .series-list article > div:first-child { display: grid; gap: 3px; }
.waitlist a, .series-list strong { color: var(--navy); font-weight: 850; text-decoration: none; }
.waitlist span, .series-list span, .waitlist p, .series-list p { color: var(--muted); font-size: .74rem; }
.waitlist p, .series-list p { grid-column: 1 / -1; margin: 4px 0 0; }
.waitlist .appointment-actions { grid-column: 1 / -1; }
.continuity-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.continuity-form label { display: grid; gap: 6px; color: var(--text); font-size: .76rem; font-weight: 750; }
.continuity-form label small { color: var(--muted); font-weight: 500; }
.continuity-form input, .continuity-form select { width: 100%; height: 42px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.clinical-alerts { margin-bottom: 18px; padding: 22px 26px; border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: var(--shadow); }
.clinical-alert-list, .clinical-entry-list { display: grid; gap: 10px; margin-top: 14px; }
.clinical-alert { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border-left: 5px solid #5c8793; border-radius: 11px; background: #eef5f5; }
.clinical-alert--warning { border-color: #d49c21; background: #fff7dc; }
.clinical-alert--critical { border-color: #b24b40; background: #fbeae7; }
.clinical-alert > div { display: grid; gap: 3px; }
.clinical-alert span { font-size: .7rem; font-weight: 850; text-transform: uppercase; }
.clinical-alert form { display: flex; align-items: center; gap: 8px; }
.clinical-alert select { height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: white; }
.clinical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.clinical-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #edf1f0; }
.clinical-entry p { display: grid; gap: 3px; margin: 0; }
.clinical-entry small { color: var(--muted); }
.clinical-entry.is-inactive { opacity: .6; }
.text-action { padding: 0; border: 0; color: var(--teal); background: transparent; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 800; }
.empty-state { color: var(--muted); }
.encounter-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); gap: 18px; align-items: start; }
.encounter-list { display: grid; margin-top: 14px; }
.encounter-list > a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid #edf1f0; color: var(--text); text-decoration: none; }
.encounter-list > a > div { display: grid; gap: 4px; }
.encounter-list small, .encounter-list > a > span:last-child { color: var(--muted); font-size: .74rem; }
.encounter-state { padding: 6px 9px; border-radius: 999px; color: #765b15; background: #fff5cf; font-size: .68rem; font-weight: 850; }
.encounter-state--signed { color: var(--success); background: #e1f4eb; }
.draft-warning { display: flex; gap: 12px; align-items: baseline; margin-bottom: 16px; padding: 16px 20px; border: 1px solid #e6c871; border-radius: 13px; background: #fff8d9; }
.draft-warning span { color: #6c5b29; }
.soap-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.soap-form label { display: grid; gap: 7px; font-weight: 800; }
.soap-form textarea, .amendment-panel textarea { width: 100%; padding: 12px; resize: vertical; border: 1px solid var(--border); border-radius: 11px; color: var(--text); font: inherit; line-height: 1.5; }
.soap-form .form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.soap-form .form-actions span { color: var(--muted); font-size: .75rem; }
.signing-panel { margin-top: 18px; }
.signing-panel > summary { cursor: pointer; color: #93443b; font-size: 1rem; font-weight: 850; }
.signed-note { overflow: hidden; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: var(--shadow); }
.signed-seal { display: flex; justify-content: space-between; gap: 18px; padding: 22px 26px; color: white; background: var(--navy); }
.signed-seal > span { display: grid; align-content: center; text-align: right; font-weight: 800; }
.signed-seal small { color: #b9d2d6; font-weight: 500; }
.soap-sections { display: grid; grid-template-columns: 1fr 1fr; }
.soap-sections article { min-height: 160px; padding: 22px 26px; border-right: 1px solid #edf1f0; border-bottom: 1px solid #edf1f0; }
.soap-sections article:nth-child(even) { border-right: 0; }
.soap-sections h3 { margin-bottom: 10px; }
.soap-sections p, .amendment-list p { margin: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.integrity-hash { margin: 0; padding: 14px 26px; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.amendment-list { display: grid; gap: 12px; margin-top: 14px; }
.amendment-list article { padding: 16px; border-left: 4px solid var(--teal); border-radius: 10px; background: var(--teal-soft); }
.amendment-list header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.amendment-list header span, .amendment-list small { color: var(--muted); font-size: .7rem; }
.workspace--wide { padding-left: clamp(18px, 2.7vw, 44px); padding-right: clamp(18px, 2.7vw, 44px); }
.odontogram-empty { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.odontogram-empty form { min-width: 190px; }
.chart-status { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; padding: 16px 20px; border: 1px solid #e6c871; border-radius: 14px; background: #fff8d9; }
.chart-status > div:first-child { display: grid; gap: 3px; }
.chart-status span { color: var(--muted); font-size: .75rem; }
.chart-status--finalized { border-color: #a7ddc2; background: #dff4e9; }
.chart-seal { display: grid; text-align: right; }
.chart-seal small { color: var(--muted); }
.odontogram-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.odontogram-board { min-width: 0; overflow-x: auto; }
.arch-label { display: grid; grid-template-columns: 1fr 1fr; min-width: 880px; margin: 18px 0 7px; color: var(--muted); font-size: .68rem; font-weight: 750; text-align: center; }
.tooth-grid { display: grid; grid-template-columns: repeat(16, minmax(48px, 1fr)); gap: 5px; min-width: 880px; }
.tooth-card { display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 126px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 10px; background: #fbfcfb; text-align: center; }
.tooth-card--quadrant { margin-left: 9px; }
.tooth-card strong { color: var(--navy); font-size: .76rem; }
.tooth-card small { color: #718084; font-size: .54rem; line-height: 1.2; }
.tooth-shape { position: relative; width: 30px; height: 36px; border: 2px solid #9fb4b6; border-radius: 45% 45% 38% 38%; background: white; }
.tooth-shape::after { content: ""; position: absolute; inset: 7px; border: 1px solid #c7d6d5; border-radius: 45%; }
.tooth-grid--lower .tooth-shape { transform: rotate(180deg); }
.tooth-findings { display: grid; gap: 3px; width: 100%; }
.tooth-findings span { overflow: hidden; padding: 3px; border-radius: 5px; color: #26363a; background: #edf3f2; font-size: .52rem; line-height: 1.15; }
.tooth-card--caries .tooth-shape, .legend-item--caries::before { background: #f3aaa2; border-color: #a43c3c; }
.tooth-card--restoration .tooth-shape, .legend-item--restoration::before { background: #a8d7e8; border-color: #31708a; }
.tooth-card--sealant .tooth-shape, .legend-item--sealant::before { background: #c7b8e8; border-color: #7056a2; }
.tooth-card--crown .tooth-shape, .legend-item--crown::before { background: #f5d98e; border-color: #9a7420; }
.tooth-card--root_canal .tooth-shape, .legend-item--root_canal::before { background: #f0bc7d; border-color: #9a5920; }
.tooth-card--implant .tooth-shape, .legend-item--implant::before { background: #b8ced2; border-color: #486c74; }
.tooth-card--missing .tooth-shape, .legend-item--missing::before { background: #e4e7e7; border-color: #6d7779; }
.tooth-card--missing .tooth-shape::before { content: "×"; position: absolute; z-index: 1; inset: -5px 0 0; color: #a43c3c; font-size: 2rem; line-height: 1; }
.tooth-card--fracture .tooth-shape, .legend-item--fracture::before { background: linear-gradient(135deg, white 43%, #a43c3c 45%, #a43c3c 53%, white 55%); border-color: #a43c3c; }
.tooth-card--watch .tooth-shape, .legend-item--watch::before { background: #fff1a8; border-color: #a48518; }
.midline { position: relative; min-width: 880px; height: 24px; text-align: center; }
.midline::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px dashed #b9c7c5; }
.midline span { position: relative; padding: 0 9px; color: var(--muted); background: white; font-size: .62rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 13px; min-width: 880px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #edf1f0; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .65rem; }
.legend-item::before { content: ""; width: 10px; height: 10px; border: 1px solid #809092; border-radius: 3px; }
.odontogram-side { display: grid; gap: 18px; }
.finding-register > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 0; border-top: 1px solid #edf1f0; }
.finding-register p { display: grid; gap: 3px; margin: 0; }
.finding-register small { color: var(--muted); font-size: .68rem; }
.chart-integrity { display: grid; gap: 13px; }
.chart-integrity code { overflow-wrap: anywhere; color: var(--muted); font-size: .65rem; }
.snapshot-history { display: grid; margin-top: 13px; }
.snapshot-history a { display: grid; gap: 2px; padding: 11px; border-top: 1px solid #edf1f0; text-decoration: none; }
.snapshot-history a.is-current { border-radius: 8px; background: var(--teal-soft); }
.snapshot-history span { color: var(--muted); font-size: .68rem; }
.periodontal-metrics { display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr)); gap: 9px; margin-bottom: 18px; }
.periodontal-metrics article { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: white; }
.periodontal-metrics span { color: var(--muted); font-size: .65rem; }
.periodontal-metrics strong { color: var(--navy); font-size: 1.18rem; }
.periodontal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.periodontal-board { min-width: 0; overflow-x: auto; }
.periodontal-table { min-width: 720px; margin-top: 15px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.periodontal-row { display: grid; grid-template-columns: 54px repeat(6, minmax(70px, 1fr)) 70px; align-items: center; min-height: 46px; border-top: 1px solid #edf1f0; }
.periodontal-row:first-child { border-top: 0; }
.periodontal-row > * { display: grid; place-items: center; min-height: 45px; padding: 5px; border-left: 1px solid #edf1f0; text-align: center; }
.periodontal-row > *:first-child { border-left: 0; }
.periodontal-row--header { min-height: 38px; color: white; background: var(--navy); font-size: .68rem; }
.periodontal-row--header > * { min-height: 38px; border-color: rgba(255,255,255,.12); }
.perio-site { grid-template-columns: auto auto; gap: 3px; color: var(--success); background: #edf8f4; }
.perio-site b { font-size: 1rem; }
.perio-site small { min-width: 12px; color: #a43c3c; font-size: .55rem; font-weight: 850; }
.perio-site.is-empty { color: #9aa8aa; background: white; }
.perio-site.is-watch { color: #765b15; background: #fff5cf; }
.perio-site.is-deep { color: #8c2f2f; background: #fae6e6; }
.perio-tooth-finding { color: var(--muted); font-size: .65rem; }
.perio-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; color: var(--muted); font-size: .66rem; }
.perio-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; background: #edf8f4; }
.perio-legend span.is-watch::before { background: #fff5cf; }
.perio-legend span.is-deep::before { background: #fae6e6; }
.perio-mm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.perio-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.perio-checks label { display: flex; align-items: center; gap: 5px; font-size: .72rem; }
.plan-empty { display: grid; grid-template-columns: 1fr minmax(300px, .65fr); gap: 28px; align-items: start; }
.plan-empty textarea, .plan-toolbar textarea, .plan-summary { white-space: pre-wrap; }
.plan-toolbar { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.plan-toolbar nav { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-toolbar .inline-form { min-width: 280px; }
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.plan-total { color: var(--teal); font-size: 1.3rem; }
.plan-summary { margin: 16px 0; padding: 14px; border-left: 4px solid var(--teal); border-radius: 8px; background: var(--teal-soft); line-height: 1.5; }
.plan-items { display: grid; margin-top: 16px; }
.plan-items h3 { margin: 18px 0 5px; color: var(--teal); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.plan-items article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid #edf1f0; }
.plan-items article > div { display: grid; gap: 3px; }
.plan-items span, .plan-items small { color: var(--muted); font-size: .72rem; }
.plan-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--navy); text-align: right; }
.plan-totals span { color: var(--muted); }
.plan-small-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.decision-history { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.decision-state { padding: 7px 10px; border-radius: 999px; color: #765b15; background: #fff5cf; font-size: .7rem; font-weight: 850; }
.decision-state--accepted { color: var(--success); background: #dff4e9; }
.decision-state--declined, .decision-state--revoked { color: #93443b; background: #f8e8e5; }
.decision-event { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #edf1f0; }
.decision-index { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--teal); background: var(--teal-soft); font-size: .68rem; font-weight: 850; }
.decision-event > div { display: grid; gap: 4px; min-width: 0; }
.decision-event small, .decision-event p { margin: 0; color: var(--muted); font-size: .7rem; }
.decision-event code { overflow-wrap: anywhere; color: #758587; font-size: .58rem; }
.decision-capture > summary { cursor: pointer; color: var(--teal); font-size: .95rem; font-weight: 850; }
.decision-attestations { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: var(--teal-soft); }
.decision-attestations label { display: flex; grid-template-columns: none; align-items: start; gap: 8px; font-size: .7rem; font-weight: 650; line-height: 1.35; }
.decision-attestations input { width: auto; height: auto; margin-top: 2px; }
.receipt-page { min-height: 100vh; padding: 32px 18px; background: #eef3f2; }
.decision-receipt { max-width: 980px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: white; box-shadow: var(--shadow); }
.decision-receipt > header { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 28px; border-bottom: 1px solid var(--border); }
.receipt-actions { display: flex; gap: 9px; }
.receipt-hero { padding: 34px 38px; color: white; background: var(--navy); }
.receipt-hero h1 { margin: 4px 0; font-size: clamp(2.3rem, 5vw, 4rem); }
.receipt-hero p { color: #b9d2d6; }
.integrity-badge { display: inline-flex; margin-top: 16px; padding: 8px 11px; border-radius: 999px; font-size: .72rem; font-weight: 850; }
.integrity-badge--valid { color: #075f45; background: #ccefdc; }
.integrity-badge--invalid { color: #8c2f2f; background: #fae6e6; }
.receipt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); }
.receipt-grid article { display: grid; gap: 5px; padding: 22px 28px; background: white; }
.receipt-grid span, .receipt-grid small { color: var(--muted); font-size: .7rem; }
.receipt-section { padding: 24px 28px; border-top: 1px solid var(--border); }
.receipt-section h2 { margin-bottom: 12px; }
.receipt-items { display: grid; }
.receipt-items > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #edf1f0; font-size: .78rem; }
.receipt-hashes p { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; margin: 8px 0; }
.receipt-hashes code { overflow-wrap: anywhere; color: var(--muted); font-size: .65rem; }
.decision-receipt footer { padding: 18px 28px; color: var(--muted); background: #f4f7f6; font-size: .68rem; text-align: center; }
.billing-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.billing-metrics article { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: white; }
.billing-metrics span, .billing-metrics small { color: var(--muted); font-size: .7rem; }
.billing-metrics strong { color: var(--navy); font-size: 1.65rem; }
.billing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.billing-main { display: grid; gap: 18px; }
.charge-list, .payment-list { display: grid; gap: 12px; margin-top: 16px; }
.charge-card { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: #fbfcfb; }
.charge-card--voided { opacity: .68; }
.charge-card > header { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.charge-card > header > div { display: grid; gap: 3px; }
.charge-card > header span, .charge-card > header small { color: var(--muted); font-size: .68rem; }
.charge-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.charge-amounts p { display: grid; gap: 3px; margin: 0; padding: 11px; border-radius: 9px; background: var(--teal-soft); }
.charge-amounts span { color: var(--muted); font-size: .64rem; }
.billing-state { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; border-radius: 999px; color: #765b15; background: #fff5cf; font-size: .67rem; font-weight: 850; white-space: nowrap; }
.billing-state--paid, .billing-state--posted { color: var(--success); background: #dff4e9; }
.billing-state--voided, .billing-state--reversed { color: #93443b; background: #f8e8e5; }
.billing-action { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.billing-action > summary, .reverse-payment > summary, .billing-eligible details > summary { cursor: pointer; color: var(--teal); font-size: .73rem; font-weight: 850; }
.billing-action--danger > summary, .reverse-payment > summary { color: #93443b; }
.billing-warning { margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid #b24b40; border-radius: 8px; color: #79362f; background: #fbeae7; font-size: .72rem; }
.billing-action form, .reverse-payment form, .billing-eligible form { margin-top: 12px; padding: 13px; border-radius: 10px; background: white; }
.payment-list > article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid #edf1f0; }
.payment-list article > div { display: grid; gap: 3px; }
.payment-list article span { color: var(--muted); font-size: .69rem; }
.reverse-payment { position: relative; }
.reverse-payment form { position: absolute; z-index: 4; top: 25px; right: 0; width: 280px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.billing-eligible > article { display: grid; gap: 5px; padding: 14px 0; border-top: 1px solid #edf1f0; }
.billing-eligible > article span { color: var(--muted); font-size: .7rem; }
.billing-eligible > article b { color: var(--teal); }
.receipt-reversed { display: inline-flex; margin: 16px 0 0 8px; padding: 8px 11px; border-radius: 999px; color: #8c2f2f; background: #fae6e6; font-size: .72rem; font-weight: 900; }
.cash-session-panel { margin-bottom: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 1.25fr); gap: 24px; align-items: center; }
.cash-session-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.cash-session-form .check-field, .cash-session-form button { grid-column: 1 / -1; }
.cash-session-summary { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.cash-session-summary > div:last-child { min-width: 210px; padding: 16px; border-radius: 16px; background: var(--mint); display: grid; }
.cash-session-summary strong { font-size: 1.7rem; }
.cash-close { grid-column: 1 / -1; }
.cash-history { margin-top: 22px; }
.cash-history article, .cut-events article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.cash-history article div, .cut-events article div { display: grid; }
.cut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 26px; }
.cut-grid article { padding: 16px; border-radius: 14px; background: var(--mint); display: grid; }
.cut-grid strong { font-size: 1.35rem; }
.cash-cut > section { margin-top: 24px; }
.inventory-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.inventory-actions details > summary { cursor: pointer; font-weight: 900; color: var(--teal); }
.inventory-actions details[open] > summary { margin-bottom: 18px; }
.inventory-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr); gap: 22px; }
.inventory-item-list article, .inventory-movements article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.inventory-item-list article > div, .inventory-lot-list article { display: grid; }
.inventory-item-list article > div:nth-child(2) { text-align: right; }
.inventory-lot-list article { gap: 3px; padding: 13px 0; border-top: 1px solid var(--line); }
.inventory-lot-list article b { justify-self: start; padding: 5px 9px; border-radius: 999px; background: var(--mint); color: var(--teal); font-size: .72rem; }
.inventory-lot-list .lot--expired b { background: #fae6e6; color: #8c2f2f; }
.inventory-lot-list .lot--expiring b { background: #fff2c7; color: #775500; }
.inventory-movements { margin-top: 22px; }
.inventory-movements article { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.inventory-movements article > div { display: grid; }

:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 1020px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .team-layout { grid-template-columns: 1fr; }
    .patient-profile-grid { grid-template-columns: 1fr; }
    .member-row { grid-template-columns: 42px minmax(120px, .8fr) minmax(160px, 1.2fr) auto; }
}
@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: static; width: auto; height: auto; padding: 18px; }
    .brand--inverse { margin: 0; }
    .primary-nav { display: none; }
    .sidebar-footer { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 0 0; }
    .sidebar-footer p { display: none; }
    .sidebar-footer a { margin: 0 0 0 auto; }
    .workspace { padding: 24px 16px 40px; }
    .topbar { display: grid; align-items: start; gap: 18px; }
    .context-switcher { min-width: 0; width: 100%; }
    .page-heading { align-items: start; }
    .credential-card { grid-template-columns: 1fr; }
    .member-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .member-access { grid-column: 2 / -1; }
    .patient-search { grid-template-columns: 1fr auto; }
    .patient-search label { grid-column: 1 / -1; }
    .consent-form { grid-template-columns: 1fr 1fr; }
    .schedule-toolbar { grid-template-columns: 44px 1fr 44px; }
    .schedule-toolbar form { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
    .continuity-grid { grid-template-columns: 1fr; }
    .clinical-grid { grid-template-columns: 1fr; }
    .encounter-layout { grid-template-columns: 1fr; }
    .odontogram-layout { grid-template-columns: 1fr; }
    .periodontal-layout { grid-template-columns: 1fr; }
    .plan-layout, .plan-empty { grid-template-columns: 1fr; }
    .billing-layout { grid-template-columns: 1fr; }
    .inventory-actions, .inventory-layout { grid-template-columns: 1fr; }
    .cash-session-panel { grid-template-columns: 1fr; }
    .billing-metrics { grid-template-columns: repeat(2, 1fr); }
    .odontogram-side { grid-template-columns: 1fr 1fr; }
    .periodontal-metrics { grid-template-columns: repeat(4, 1fr); }
    .clinical-alert { align-items: start; }
    .clinical-alert form { align-items: stretch; flex-direction: column; }
}
@media (max-width: 520px) {
    .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .metric-card { padding: 16px; }
    .metric-card strong { font-size: 1.6rem; }
    .context-switcher > div { align-items: stretch; }
    .context-switcher select { width: 100%; }
    .appointment-list li { grid-template-columns: 52px minmax(0, 1fr); }
    .appointment-list .status { grid-column: 2; justify-self: start; }
    .page-heading { display: grid; }
    .member-row { grid-template-columns: 42px minmax(0, 1fr); }
    .member-row > .status { grid-column: 2; justify-self: start; }
    .patient-form { grid-template-columns: 1fr; }
    .patient-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .patient-contact { grid-column: 2 / -1; }
    .patient-facts, .consent-form { grid-template-columns: 1fr; }
    .consent-history > div { grid-template-columns: 12px minmax(0, 1fr); }
    .consent-history time { grid-column: 2; }
    .schedule-summary { grid-template-columns: 1fr 1fr; }
    .appointment-form { grid-template-columns: 1fr; }
    .day-timeline > li { grid-template-columns: 54px minmax(0, 1fr); gap: 9px; }
    .day-timeline > li::before { left: 53px; }
    .day-timeline > li > article { margin-left: 9px; }
    .day-timeline > li > article::before { left: 48px; }
    .appointment-main { display: grid; }
    .appointment-status { justify-self: start; }
    .appointment-actions details form { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
    .reminder-readiness { grid-template-columns: 1fr; }
    .continuity-form { grid-template-columns: 1fr; }
    .soap-form, .soap-sections { grid-template-columns: 1fr; }
    .soap-sections article { border-right: 0; }
    .signed-seal, .amendment-list header, .draft-warning { align-items: start; flex-direction: column; }
    .signed-seal > span { text-align: left; }
    .encounter-list > a { grid-template-columns: auto minmax(0, 1fr); }
    .encounter-list > a > span:last-child { grid-column: 2; }
    .odontogram-side { grid-template-columns: 1fr; }
    .chart-status, .odontogram-empty { align-items: stretch; flex-direction: column; }
    .chart-seal { text-align: left; }
    .periodontal-metrics { grid-template-columns: repeat(2, 1fr); }
    .plan-toolbar { display: grid; }
    .plan-small-fields { grid-template-columns: 1fr; }
    .decision-receipt > header, .receipt-actions { align-items: stretch; flex-direction: column; }
    .receipt-grid { grid-template-columns: 1fr; }
    .receipt-hashes p { grid-template-columns: 1fr; }
    .billing-metrics, .charge-amounts { grid-template-columns: 1fr; }
    .cash-session-form, .cut-grid { grid-template-columns: 1fr; }
    .cash-session-summary { align-items: stretch; flex-direction: column; }
    .cash-history article, .cut-events article { grid-template-columns: minmax(0, 1fr) auto; }
    .cash-history article .text-action { grid-column: 1 / -1; }
    .inventory-item-list article, .inventory-movements article { grid-template-columns: minmax(0, 1fr) auto; }
    .inventory-movements article small { grid-column: 1 / -1; }
    .payment-list > article { grid-template-columns: minmax(0, 1fr) auto; }
    .payment-list > article > .text-action, .payment-list > article > details { grid-column: 1 / -1; }
    .reverse-payment form { position: static; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
    .receipt-page { padding: 0; background: white; }
    .decision-receipt { max-width: none; border: 0; border-radius: 0; box-shadow: none; }
    .receipt-actions { display: none !important; }
}
/* ============================================================================
   INTELLI-DENTAL · Capa de tema "Génesis" (portada desde Intelli-Realty)
   ----------------------------------------------------------------------------
   Estética NiceAdmin: fondo #f6f9ff, superficies blancas, acento índigo var(--pc-accent),
   títulos navy var(--pc-heading), sombras suaves azuladas, tipografías Open Sans / Nunito
   / Poppins e iconos SVG propios (sin dependencias externas).

   Este bloque va SIEMPRE al final de app.css: al cargarse el último, sus tokens
   y reglas mandan sobre la hoja base.
   Para re-marcar el sistema basta con cambiar --pc-accent y --pc-heading.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&family=Poppins:wght@400;500;600&display=swap");

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Paleta Intelli-Realty */
    --pc-accent:       var(--pc-accent);
    --pc-accent-dark:  #2f42d8;
    --pc-accent-soft:  #f6f6fe;
    /* Componentes del acento, para las sombras y los anillos de foco.
       Las reescribe el head con el color que la clínica haya elegido. */
    --pc-accent-rgb:   65, 84, 241;
    --pc-heading-rgb:  1, 41, 112;
    --pc-heading:      var(--pc-heading);
    --pc-bg:           #f6f9ff;
    --pc-surface:      #ffffff;
    --pc-text:         #444444;
    --pc-text-muted:   #6c757d;
    --pc-muted-navy:   #899bbd;
    --pc-border:       #ebeef4;
    --pc-radius:       5px;
    --pc-radius-lg:    8px;
    --pc-shadow:       0 0 30px rgba(var(--pc-heading-rgb), .10);
    --pc-shadow-hover: 0 10px 34px rgba(var(--pc-heading-rgb), .18);
    --pc-focus:        0 0 0 4px rgba(var(--pc-accent-rgb), .12);
    --pc-font:         "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pc-font-head:    "Nunito", system-ui, sans-serif;
    --pc-font-title:   "Poppins", system-ui, sans-serif;

    /* Colores auxiliares de las "info-card" */
    --pc-green:  #2eca6a;  --pc-green-soft:  #e0f8e9;
    --pc-blue:   #2f80ed;  --pc-blue-soft:   #e7f1ff;
    --pc-coral:  #ff771d;  --pc-coral-soft:  #ffecdf;
    --pc-purple: #7239ea;  --pc-purple-soft: #f2ecff;
    --pc-amber:  #ffbb00;  --pc-amber-soft:  #fff5d9;

    /* Remapeo de los tokens originales de Intelli-Dental */
    --navy:      var(--pc-heading);
    --navy-deep: #ffffff;
    --teal:      var(--pc-accent);
    --teal-soft: #f6f6fe;
    --canvas:    #f6f9ff;
    --surface:   #ffffff;
    --text:      #444444;
    --muted:     #899bbd;
    --border:    #ebeef4;
    --success:   #2eca6a;
    --danger:    #d9534f;
    --focus:     0 0 0 4px rgba(var(--pc-accent-rgb), .12);

    font-family: var(--pc-font);
}

/* ------------------------------------------------------------ 2. Tipografía */
html { background: var(--pc-bg); }
body {
    background: var(--pc-bg);
    color: var(--pc-text);
    font-family: var(--pc-font);
    font-size: 15px;
    line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--pc-font-head); color: var(--pc-heading); }
h1 { margin: 4px 0 3px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
h2 { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; font-family: var(--pc-font-title); }
h3 { margin: 8px 0 4px; font-size: 1rem; font-weight: 600; font-family: var(--pc-font-title); }
button, select, input, textarea { font-family: var(--pc-font); }
.eyebrow, .crm-eyebrow {
    color: var(--pc-accent); font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}
.topbar-context, .privacy-note, .form-intro { color: var(--pc-text-muted); }

/* ------------------------------------------------------------- 3. Shell/app */
.app-shell { grid-template-columns: 280px minmax(0, 1fr); background: var(--pc-bg); }

/* Sidebar claro estilo NiceAdmin */
.sidebar {
    padding: 0;
    color: var(--pc-heading);
    background: var(--pc-surface);
    box-shadow: 0 0 20px rgba(var(--pc-heading-rgb), .10);
    border-right: 0;
    z-index: 20;
}
.brand--inverse {
    margin: 0;
    padding: 17px 20px;
    border-bottom: 1px solid var(--pc-border);
    gap: 12px;
}
.brand-mark {
    width: 40px; height: 40px; border-radius: 9px; font-size: 1rem; font-weight: 700;
    letter-spacing: .02em;
    background: var(--pc-accent);
    box-shadow: 0 6px 16px rgba(var(--pc-accent-rgb), .28);
}
.brand strong {
    font-family: var(--pc-font-head); font-size: 1.15rem; font-weight: 800;
    color: var(--pc-heading); line-height: 1.1; letter-spacing: .01em;
}
.brand small { color: var(--pc-muted-navy); font-size: .69rem; font-weight: 600; letter-spacing: .02em; }

.primary-nav {
    gap: 3px;
    padding: 14px 15px;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}
.primary-nav::before {
    content: "Menú";
    padding: 4px 12px 8px;
    color: var(--pc-muted-navy);
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.nav-item {
    grid-template-columns: 24px 1fr auto;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: var(--pc-radius);
    color: var(--pc-heading);
    font-size: .93rem; font-weight: 600;
    transition: background .18s ease, color .18s ease;
}
.nav-item > span[aria-hidden], .nav-item > svg.icon {
    color: var(--pc-muted-navy);
    font-size: 1.12rem;
    text-align: center;
    transition: color .18s ease;
}
a.nav-item:hover { background: var(--pc-bg); color: var(--pc-accent); }
a.nav-item:hover > span[aria-hidden], a.nav-item:hover > svg.icon { color: var(--pc-accent); }
.nav-item.is-active { color: var(--pc-accent); background: var(--pc-bg); }
.nav-item.is-active > span[aria-hidden], .nav-item.is-active > svg.icon { color: var(--pc-accent); }
.nav-item.is-disabled { color: var(--pc-muted-navy); opacity: .62; background: transparent; }
.nav-item small { background: var(--pc-accent-soft); color: var(--pc-accent); font-weight: 700; }

.sidebar-footer {
    padding: 15px 20px 18px;
    border-top: 1px solid var(--pc-border);
    background: var(--pc-surface);
}
.sidebar-footer p { color: var(--pc-muted-navy); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-footer strong { color: var(--pc-heading); font-family: var(--pc-font-head); font-size: .95rem; }
.sidebar-footer a { color: var(--pc-accent); font-size: .8rem; font-weight: 600; text-decoration: none; margin-top: 9px; }
.sidebar-footer a:hover { text-decoration: underline; }

.workspace { padding: 22px clamp(16px, 2.4vw, 30px) 40px; background: var(--pc-bg); }

/* ----------------------------------------------------- 3b. Iconos (sprite SVG) */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.icon {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.22em;
}
.brand-mark svg.icon { width: 22px; height: 22px; color: #fff; }
.metric-icon svg.icon { width: 26px; height: 26px; stroke-width: 1.7; }
.sidebar-footer a svg.icon { width: 15px; height: 15px; margin-right: 5px; }

/* ------------------------------------------------------- 4. Topbar / titular */
.topbar, .page-heading {
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow);
}
.page-heading { margin-bottom: 20px; }
.heading-actions { gap: 8px; }

/* -------------------------------------------------------------- 5. Botones */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px;
    border-radius: var(--pc-radius);
    font-family: var(--pc-font);
    font-size: .9rem; font-weight: 600;
    transition: filter .15s ease, box-shadow .15s ease, transform .05s ease;
}
.button--primary, .button--secondary { width: auto; color: #fff; background: var(--pc-accent); box-shadow: 0 4px 14px rgba(var(--pc-accent-rgb), .22); }
.stacked-form > .button--primary, .account-card .button--primary { width: 100%; }
.button--secondary { background: var(--pc-heading); box-shadow: 0 4px 14px rgba(var(--pc-heading-rgb), .18); }
.button--danger { color: #fff; background: var(--danger); box-shadow: 0 4px 14px rgba(217, 83, 79, .22); }
.button--small { height: 34px; padding: 0 13px; font-size: .8rem; }
.button:hover { filter: brightness(1.07); }
.button:active { transform: scale(.99); }
.text-action, .inline-form summary, .appointment-main a, .snapshot-history a { color: var(--pc-accent); }

/* --------------------------------------------------- 6. Campos de formulario */
select,
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea,
.stacked-form input, .stacked-form select,
.patient-search input, .patient-form input, .patient-form select,
.consent-form input, .consent-form select,
.appointment-form input, .appointment-form select,
.continuity-form input, .continuity-form select,
.schedule-toolbar input {
    border: 1px solid rgba(var(--pc-heading-rgb), .18);
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    color: var(--pc-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
select, .stacked-form input, .stacked-form select,
.patient-search input, .patient-form input, .patient-form select,
.consent-form input, .consent-form select,
.appointment-form input, .appointment-form select,
.continuity-form input, .continuity-form select { height: 44px; }
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--pc-accent);
    box-shadow: var(--pc-focus);
}
:focus-visible { outline: 0; box-shadow: var(--pc-focus); }
.stacked-form label, .patient-search label, .patient-form label, .consent-form label,
.appointment-form label, .continuity-form label, .soap-form label, .context-switcher label {
    color: var(--pc-heading); font-size: .8rem; font-weight: 600;
}
.stacked-form label small, .patient-form label small, .consent-form label small,
.appointment-form label small, .continuity-form label small { color: var(--pc-muted-navy); font-weight: 400; }

/* ------------------------------------------------------------- 7. Superficies */
.panel, .schedule-toolbar, .schedule-summary div, .day-timeline > li > article,
.patient-form-card, .cash-session-panel, .cut-grid article,
.inventory-item-list article, .inventory-movements article,
.charge-card, .payment-list > article, .billing-eligible > article,
.waitlist article, .series-list article, .clinical-entry,
.encounter-list > a, .receipt-grid article, .decision-receipt,
.plan-items article, .periodontal-metrics article, .billing-metrics article,
.reminder-readiness > div, .odontogram-board, .periodontal-board,
.finding-register > div, .chart-integrity, .account-card, .credential-card {
    border: 0;
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow);
}
.panel { padding: 22px 20px; }
.panel-heading { align-items: center; margin-bottom: 4px; }
.credential-card { background: #fffaf0; box-shadow: 0 0 30px rgba(255, 187, 0, .16); }
.credential-card dl div { background: rgba(255, 255, 255, .85); border-radius: var(--pc-radius); }
.account-page { background: var(--pc-bg); }
.account-card { border-radius: var(--pc-radius-lg); box-shadow: 0 0 40px rgba(var(--pc-heading-rgb), .12); }

/* Separadores de listas (antes #edf1f0) */
.appointment-list li, .member-row, .patient-list, .patient-row,
.guardian-list > div, .inline-form, .consent-history, .consent-history > div {
    border-color: var(--pc-border);
}

/* ------------------------------------------------- 8. Métricas (info-cards) */
.summary-grid, .billing-metrics, .schedule-summary { gap: 18px; }
.metric-card, .billing-metrics article, .periodontal-metrics article, .cut-grid article {
    position: relative;
    min-width: 0;
    min-height: 100px;
    padding: 18px 20px;
    border: 0;
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow);
    transition: box-shadow .2s ease, transform .15s ease;
}
.metric-card:hover, .billing-metrics article:hover { box-shadow: var(--pc-shadow-hover); transform: translateY(-2px); }
.metric-card span, .billing-metrics article span, .periodontal-metrics article span {
    color: var(--pc-text-muted); font-size: .8rem; font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.metric-card strong, .billing-metrics article strong, .periodontal-metrics article strong, .cut-grid strong {
    margin: 2px 0; font-family: var(--pc-font-head); font-size: 1.7rem; font-weight: 700;
    color: var(--pc-heading); letter-spacing: -.01em; line-height: 1.1;
}
.metric-card small, .billing-metrics article small { color: var(--pc-muted-navy); font-size: .72rem; }

/* Variante con icono: círculo de color a la izquierda (estilo info-card) */
.metric-card:has(> .metric-icon) {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-auto-rows: min-content;
    align-content: center;
    gap: 0 15px;
}
.metric-card:has(> .metric-icon) > *:not(.metric-icon) { grid-column: 2; }
.metric-card .metric-icon {
    grid-row: 1 / -1;
    align-self: center;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    color: var(--pc-accent);
    background: var(--pc-accent-soft);
    overflow: visible;
}
.metric-card--accent .metric-icon { color: #fff; background: var(--pc-accent); box-shadow: 0 6px 16px rgba(var(--pc-accent-rgb), .30); }
.metric-card .metric-icon--green  { color: var(--pc-green);  background: var(--pc-green-soft); }
.metric-card .metric-icon--blue   { color: var(--pc-blue);   background: var(--pc-blue-soft); }
.metric-card .metric-icon--coral  { color: var(--pc-coral);  background: var(--pc-coral-soft); }
.metric-card .metric-icon--purple { color: var(--pc-purple); background: var(--pc-purple-soft); }
.metric-card .metric-icon--amber  { color: var(--pc-amber);  background: var(--pc-amber-soft); }

.metric-card--accent {
    color: var(--pc-text);
    border: 0;
    background: var(--pc-surface);
    box-shadow: 0 0 30px rgba(var(--pc-accent-rgb), .20);
}
.metric-card--accent span { color: var(--pc-text-muted); }
.metric-card--accent small { color: var(--pc-muted-navy); }
.metric-card--accent strong { color: var(--pc-accent); }

.schedule-summary div { padding: 15px 18px; border: 0; border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); }
.schedule-summary strong { font-family: var(--pc-font-head); color: var(--pc-heading); font-size: 1.4rem; font-weight: 700; }
.schedule-summary span { color: var(--pc-text-muted); font-size: .78rem; }

/* ------------------------------------------------------ 9. Píldoras y estados */
.badge, .status, .encounter-state, .appointment-status, .billing-state,
.decision-state, .chart-status span, .integrity-badge {
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.badge, .status { color: var(--pc-accent); background: var(--pc-accent-soft); }
.appointment-status--checked_in { color: var(--pc-blue);  background: var(--pc-blue-soft); }
.appointment-status--in_progress { color: var(--pc-purple); background: var(--pc-purple-soft); }
.appointment-status--completed { color: #1f9d57; background: var(--pc-green-soft); }
.appointment-status--cancelled, .appointment-status--no_show { color: var(--pc-coral); background: var(--pc-coral-soft); }
.billing-state--paid, .billing-state--posted, .decision-state--accepted,
.encounter-state--signed, .integrity-badge--valid { color: #1f9d57; background: var(--pc-green-soft); }
.billing-state--voided, .billing-state--reversed, .decision-state--declined,
.decision-state--revoked, .integrity-badge--invalid { color: var(--pc-coral); background: var(--pc-coral-soft); }

.avatar, .date-arrow, .empty-state > span, .decision-index {
    color: var(--pc-accent);
    background: var(--pc-accent-soft);
    border-radius: 50%;
}
.date-arrow { border-radius: var(--pc-radius); }
.empty-state > span { border-radius: 50%; }
.avatar { font-family: var(--pc-font-head); font-weight: 700; }

.flash {
    border-radius: var(--pc-radius);
    font-weight: 600;
    box-shadow: var(--pc-shadow);
}
.flash--success { color: #1f7a4d; background: #e6f8ee; border: 0; border-left: 4px solid var(--pc-green); }
.flash--error { color: #9b2c2c; background: #fdecea; border: 0; border-left: 4px solid var(--danger); }
.queue-note { border-radius: var(--pc-radius); color: #8a6100; background: var(--pc-amber-soft); }
.draft-warning, .billing-warning { border-radius: var(--pc-radius); }

.progress { background: var(--pc-bg); border-radius: 999px; }
.progress span, .progress-bar { background: var(--pc-accent); }
.progress-value { color: var(--pc-accent); font-family: var(--pc-font-head); font-weight: 800; }
.checklist li.is-complete::before { background: var(--pc-green); border-color: var(--pc-green); }
.checklist li::before { border-color: var(--pc-border); }

/* ------------------------------------------------ 10. Listas y filas clicables */
.patient-row, .encounter-list > a, .charge-card, .member-row {
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.patient-row { padding: 14px 12px; border-radius: var(--pc-radius); border-bottom: 1px solid var(--pc-border); }
.patient-row:hover { color: var(--pc-accent); background: var(--pc-bg); }
.patient-row:hover .patient-identity strong { color: var(--pc-accent); }
.encounter-list > a:hover { box-shadow: var(--pc-shadow-hover); transform: translateY(-2px); }
.patient-facts div { background: var(--pc-bg); border-radius: var(--pc-radius); }
.patient-identity strong, .member-identity strong, .appointment-list time strong {
    color: var(--pc-heading); font-family: var(--pc-font-head); font-weight: 700;
}
.appointment-list time strong { font-size: 1.05rem; }
.day-timeline > li > time { padding-right: 16px; color: var(--pc-heading); font-family: var(--pc-font-head); font-weight: 700; }
.day-timeline > li > time span { font-family: var(--pc-font); font-weight: 400; }
.day-timeline > li > article { box-shadow: 0 0 18px rgba(var(--pc-heading-rgb), .07); }
.day-timeline > li > article::before { background: var(--pc-accent); box-shadow: 0 0 0 1px var(--pc-border); }
.day-timeline > li::before { background: var(--pc-border); }

/* ------------------------------------------------------- 11. Odontograma etc. */
.tooth-card { border-radius: var(--pc-radius); }
.chart-legend .legend-item { font-size: .74rem; }
.perio-site.is-watch { background: var(--pc-amber-soft); }
.perio-site.is-deep { background: var(--pc-coral-soft); }
.integrity-hash, .chart-integrity code, .receipt-hashes code, .secret-value {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--pc-muted-navy);
}

/* ------------------------------------------------ 11b. Portal del paciente */
.shell {
    display: grid;
    gap: 18px;
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(24px, 5vw, 56px) 20px 48px;
}
.shell > .brand {
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow);
    text-decoration: none;
}
.shell > .brand .brand-mark {
    width: 44px; height: 44px; border-radius: 10px;
    color: #fff; font-weight: 700;
    background: var(--pc-accent);
    box-shadow: 0 6px 16px rgba(var(--pc-accent-rgb), .28);
}
.shell > .brand strong { display: block; font-family: var(--pc-font-head); font-size: 1.15rem; font-weight: 800; color: var(--pc-heading); }
.shell > .brand small { display: block; color: var(--pc-muted-navy); font-size: .72rem; font-weight: 600; }
.hero {
    padding: 30px 26px;
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    box-shadow: var(--pc-shadow);
}
.hero h1 { margin: 8px 0 12px; }
.hero p:last-child { margin: 0; color: var(--pc-text-muted); line-height: 1.65; }
.notice {
    padding: 15px 18px;
    border-radius: var(--pc-radius);
    border-left: 4px solid var(--pc-accent);
    background: var(--pc-accent-soft);
    color: var(--pc-heading);
    font-size: .88rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------- 12. Responsive */
@media (max-width: 1200px) {
    .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
    .summary-grid, .billing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: sticky; top: 0; padding: 0; box-shadow: 0 2px 18px rgba(var(--pc-heading-rgb), .10); }
    .brand--inverse { padding: 13px 16px; border-bottom: 1px solid var(--pc-border); }
    /* El menú vuelve a mostrarse como tira horizontal deslizable */
    .primary-nav {
        display: flex;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        border-bottom: 1px solid var(--pc-border);
        scrollbar-width: none;
    }
    .primary-nav::-webkit-scrollbar { display: none; }
    .primary-nav::before { display: none; }
    .nav-item {
        display: inline-flex; align-items: center; gap: 7px;
        flex: 0 0 auto; min-height: 38px; padding: 8px 13px;
        white-space: nowrap; font-size: .86rem;
    }
    .sidebar-footer {
        display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
        padding: 10px 16px; border-top: 1px solid var(--pc-border);
    }
    .sidebar-footer p { display: none; }
    .sidebar-footer strong {
        min-width: 0; flex: 1 1 auto; font-size: .85rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
    }
    .sidebar-footer a { flex: 0 0 auto; margin: 0; white-space: nowrap; }
    .workspace { padding: 16px 14px 34px; }
    .topbar, .page-heading { padding: 14px 16px; gap: 14px; }
}
@media (max-width: 520px) {
    .summary-grid, .billing-metrics { grid-template-columns: 1fr; gap: 12px; }
    .metric-card, .billing-metrics article { min-height: 88px; padding: 15px 16px; grid-template-columns: 50px minmax(0, 1fr); }
    .metric-card::before, .billing-metrics article::before { width: 48px; height: 48px; }
    .metric-card strong, .billing-metrics article strong { font-size: 1.45rem; }
}

/* ---------------------------------------------------------------- 13. Print */
@media print {
    .sidebar, .primary-nav, .sidebar-footer { display: none !important; }
    .panel, .metric-card, .topbar, .page-heading, .decision-receipt { box-shadow: none !important; border: 1px solid var(--pc-border) !important; }
    body, html { background: #fff !important; }
}

/* ============================================================================
   14. Bloque de usuario en la barra lateral
   ============================================================================ */
.nav-group {
    padding: 18px 12px 6px;
    color: var(--pc-muted-navy);
    font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sidebar-footer { display: grid; gap: 10px; }
.sidebar-footer .side-user {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: var(--pc-radius);
    color: var(--pc-heading); text-decoration: none;
    transition: background .16s ease;
}
.sidebar-footer .side-user:hover, .sidebar-footer .side-user.is-active { background: var(--pc-bg); }
.side-avatar {
    display: grid; place-items: center; overflow: hidden;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--pc-accent-soft); color: var(--pc-accent);
    font-family: var(--pc-font-head); font-weight: 700; font-size: .95rem;
}
.side-avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-user-meta { min-width: 0; }
.side-user-meta strong {
    display: block; font-family: var(--pc-font-head); font-size: .9rem; color: var(--pc-heading);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-user-meta small {
    display: block; color: var(--pc-muted-navy); font-size: .72rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-user-go { width: 17px; height: 17px; color: var(--pc-muted-navy); }
.side-user:hover .side-user-go { color: var(--pc-accent); }
.side-links { display: flex; gap: 8px; }
.sidebar-footer .side-links a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 10px; border-radius: var(--pc-radius);
    background: var(--pc-bg); color: var(--pc-heading);
    font-size: .78rem; font-weight: 600; text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.sidebar-footer .side-links a:hover { background: var(--pc-accent-soft); color: var(--pc-accent); text-decoration: none; }
.side-links svg.icon { width: 15px; height: 15px; }
.nav-item small {
    margin-left: auto; padding: 2px 8px; border-radius: 999px;
    background: var(--pc-coral); color: #fff; font-size: .68rem; font-weight: 700;
}

/* ============================================================================
   15. Panel de ajustes con pestañas (módulo "Sitio web")
   ============================================================================ */
.settings-hub { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-side {
    position: sticky; top: 20px; display: grid; gap: 3px; padding: 14px;
    border-radius: var(--pc-radius); background: var(--pc-surface); box-shadow: var(--pc-shadow);
}
.settings-side .nav-group { padding: 6px 10px 4px; }
.settings-nav__item {
    display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px;
    padding: 9px 11px; border: 0; border-radius: var(--pc-radius);
    background: transparent; color: var(--pc-heading);
    font-family: var(--pc-font); font-size: .88rem; font-weight: 600; text-align: left;
    cursor: pointer; transition: background .16s ease, color .16s ease;
}
.settings-nav__item svg.icon { width: 18px; height: 18px; color: var(--pc-muted-navy); }
.settings-nav__item:hover { background: var(--pc-bg); color: var(--pc-accent); }
.settings-nav__item.is-active { background: var(--pc-bg); color: var(--pc-accent); }
.settings-nav__item.is-active svg.icon { color: var(--pc-accent); }

.settings-panel { display: none; }
.settings-panel.is-active { display: block; }
.settings-panel__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.settings-panel__icon {
    display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 50%; background: var(--pc-accent-soft); color: var(--pc-accent);
}
.settings-panel__head h2 { margin: 0; font-size: 1.15rem; }
.settings-panel__head p { margin: 2px 0 0; color: var(--pc-text-muted); font-size: .85rem; }

.settings-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-form-grid > label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--pc-heading); }
.settings-form-grid > label.wide { grid-column: 1 / -1; }
.settings-form-grid textarea {
    min-height: 110px; padding: 11px 13px; resize: vertical;
    border: 1px solid rgba(var(--pc-heading-rgb), .18); border-radius: var(--pc-radius);
    font-family: var(--pc-font); font-size: .9rem; color: var(--pc-text); background: var(--pc-surface);
}
.settings-form-grid input[type="color"] { height: 44px; padding: 4px; cursor: pointer; }
.settings-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--pc-border);
}
.settings-actions .spacer { margin-right: auto; color: var(--pc-muted-navy); font-size: .8rem; }

.settings-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.settings-toggle {
    display: flex; align-items: center; gap: 12px; padding: 13px 15px;
    border-radius: var(--pc-radius); background: var(--pc-bg); cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--pc-heading);
}
.settings-toggle input { width: 18px; height: 18px; accent-color: var(--pc-accent); cursor: pointer; }

.image-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; grid-column: 1 / -1; }
.image-field .preview {
    display: grid; place-items: center; overflow: hidden;
    width: 120px; height: 96px; border-radius: var(--pc-radius);
    background: var(--pc-bg); color: var(--pc-muted-navy);
}
.image-field .preview img { width: 100%; height: 100%; object-fit: cover; }
.image-field .meta { display: grid; gap: 8px; font-size: .8rem; }
.image-field .meta span { color: var(--pc-muted-navy); font-weight: 400; }
.image-field input[type="file"] { font-size: .82rem; }

/* --------------------------------------------------- servicios editables */
.svc-list { display: grid; gap: 12px; }
.svc-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--pc-radius); background: var(--pc-bg);
}
.svc-row.is-off { opacity: .55; }
.svc-row .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pc-accent-soft); color: var(--pc-accent); }
.svc-row strong { display: block; font-family: var(--pc-font-head); color: var(--pc-heading); font-size: .95rem; }
.svc-row small { display: block; color: var(--pc-muted-navy); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-actions { display: flex; gap: 6px; }
.svc-actions button, .svc-actions .button {
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: var(--pc-radius); background: var(--pc-surface); color: var(--pc-muted-navy);
    cursor: pointer; box-shadow: var(--pc-shadow);
}
.svc-actions button:hover { color: var(--pc-accent); }
.svc-actions button.danger:hover { color: var(--danger); }
.svc-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pc-border); }
.svc-editor > summary { cursor: pointer; color: var(--pc-accent); font-weight: 700; font-size: .9rem; }

/* ------------------------------------------------- bandeja de solicitudes */
.req-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.req-filters a {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: 999px; background: var(--pc-surface); color: var(--pc-heading);
    font-size: .82rem; font-weight: 600; text-decoration: none; box-shadow: var(--pc-shadow);
}
.req-filters a.is-active { background: var(--pc-accent); color: #fff; }
.req-filters a b { font-family: var(--pc-font-head); }
.req-list { display: grid; gap: 12px; }
.req-card { padding: 18px 20px; border-radius: var(--pc-radius); background: var(--pc-surface); box-shadow: var(--pc-shadow); }
.req-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.req-card header strong { font-family: var(--pc-font-head); font-size: 1rem; color: var(--pc-heading); }
.req-card header time { margin-left: auto; color: var(--pc-muted-navy); font-size: .78rem; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.req-grid div span { display: block; color: var(--pc-muted-navy); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.req-grid div b, .req-grid div a { display: block; color: var(--pc-heading); font-size: .9rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.req-message { padding: 12px 14px; border-radius: var(--pc-radius); background: var(--pc-bg); font-size: .88rem; margin-bottom: 12px; }
.req-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.req-form select, .req-form input { height: 38px; }
.req-form input { flex: 1; min-width: 180px; }
/* El paso a prospecto va debajo del cambio de estado, separado por una línea:
   es otra acción, con otra consecuencia, y no debe confundirse con guardar. */
.req-form--convert { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pc-border); }
.req-hint { flex: 1; min-width: 0; color: var(--pc-muted-navy); font-size: .78rem; }
.req-linked { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pc-border); font-size: .82rem; color: var(--pc-muted-navy); }
.req-linked a { font-weight: 600; }
.req-state { padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.req-state--pending { color: var(--pc-coral); background: var(--pc-coral-soft); }
.req-state--contacted { color: var(--pc-blue); background: var(--pc-blue-soft); }
.req-state--scheduled { color: #1f9d57; background: var(--pc-green-soft); }
.req-state--discarded { color: var(--pc-muted-navy); background: var(--pc-bg); }

/* ============================================================================
   16. Mi perfil
   ============================================================================ */
/* PERFIL · valores traídos de Intelli-Realty (paquete 2026-08-25b). El
   marcado de esta pantalla ya era el mismo que allá; lo que faltaba era la
   piel: portada con degradado, avatar cuadrado de esquinas suaves y tarjetas
   con más redondeo. */
.pf-hero { overflow: hidden; border-radius: 18px; background: var(--pc-surface); box-shadow: var(--pc-shadow); margin-bottom: 20px; }
.pf-cover { height: 130px; background: linear-gradient(120deg, var(--pc-accent), var(--pc-purple) 60%, var(--pc-heading)); }
.pf-identity { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: 0 26px 18px; margin-top: -46px; }
.pf-avatar-wrap { position: relative; flex: 0 0 auto; }
.pf-avatar {
    display: grid; place-items: center; overflow: hidden;
    width: 104px; height: 104px; border-radius: 24px;
    border: 4px solid var(--pc-surface); box-shadow: 0 6px 18px rgba(var(--pc-heading-rgb), .15);
    background: linear-gradient(135deg, var(--pc-accent), var(--pc-purple)); color: #fff;
    font-family: var(--pc-font-head); font-weight: 800; font-size: 2.1rem;
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-cam, .pf-del {
    position: absolute; display: grid; place-items: center; width: 34px; height: 34px;
    border: 3px solid var(--pc-surface); border-radius: 50%; color: #fff; cursor: pointer; padding: 0;
}
.pf-cam { right: -6px; bottom: -6px; background: var(--pc-accent); }
.pf-cam:hover, .pf-del:hover { filter: brightness(1.1); }
.pf-del { right: -6px; top: -6px; background: var(--danger); border: 3px solid var(--pc-surface); }
.pf-cam svg.icon, .pf-del svg.icon { width: 16px; height: 16px; }
.pf-meta { flex: 1 1 220px; padding-bottom: 6px; min-width: 0; }
.pf-meta h1 { margin: 4px 0 2px; font-size: 1.62rem; font-family: var(--pc-font-head); }
.pf-meta p { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; color: var(--pc-text-muted); font-size: .85rem; }
.pf-roles { display: flex; flex-wrap: wrap; gap: 6px; align-self: center; }
.pf-roles span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--pc-accent-soft); color: var(--pc-accent); font-size: .78rem; font-weight: 700; }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 20px; border-top: 1px solid var(--pc-border); }
.pf-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 9px; color: var(--pc-text-muted); font-size: .845rem; font-weight: 600; text-decoration: none; }
.pf-tabs a:hover { background: var(--pc-bg); color: var(--pc-accent); }
.pf-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.pf-side { display: grid; gap: 16px; }
.pf-context .ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--pc-accent-soft); color: var(--pc-accent); margin-bottom: 12px; }
.pf-context > span { display: block; color: var(--pc-muted-navy); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pf-context .pf-note span { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: .76rem; }
.pf-context > strong { display: block; color: var(--pc-heading); font-family: var(--pc-font-head); margin: 2px 0 14px; }
.pf-note { display: flex; gap: 8px; margin: 6px 0 0; color: var(--pc-muted-navy); font-size: .76rem; }
.pf-note svg.icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.pf-card { padding: 24px; border-radius: 16px; background: var(--pc-surface); box-shadow: var(--pc-shadow); }
.pf-card + .pf-card { margin-top: 20px; }
.pf-card .hd { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.pf-card .hd .ic { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--pc-accent-soft); color: var(--pc-accent); }
.pf-card .hd .ic.sec { background: #fdecea; color: var(--danger); }
.pf-card .hd h2 { margin: 0; font-size: 1.12rem; font-family: var(--pc-font-head); }
.pf-card .hd p { margin: 2px 0 0; color: var(--pc-text-muted); font-size: .83rem; }
.pf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.pf-fields > label { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--pc-heading); }
.pf-fields > label.wide { grid-column: 1 / -1; }
.pf-fields textarea {
    min-height: 100px; padding: 11px 13px; resize: vertical;
    border: 1px solid rgba(var(--pc-heading-rgb), .18); border-radius: var(--pc-radius);
    font-family: var(--pc-font); font-size: .9rem; color: var(--pc-text); background: var(--pc-surface);
}
.pf-sub { margin: 8px 0 4px; color: var(--pc-muted-navy); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; grid-column: 1 / -1; }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }

@media (max-width: 1080px) {
    .settings-hub, .pf-grid { grid-template-columns: 1fr; }
    .settings-side { position: static; display: flex; flex-wrap: wrap; }
    .settings-nav__item { flex: 0 0 auto; grid-template-columns: 18px auto; }
}
@media (max-width: 760px) {
    .settings-form-grid, .settings-toggles, .pf-fields { grid-template-columns: 1fr; }
    .svc-row { grid-template-columns: 44px minmax(0, 1fr); }
    .svc-row .svc-actions, .svc-row > form { grid-column: 2; }
    .image-field { grid-template-columns: 1fr; }
}

/* Ajuste del bloque de usuario cuando la barra lateral pasa a horizontal */
@media (max-width: 760px) {
    .sidebar-footer { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 16px; }
    .sidebar-footer .side-user { flex: 1 1 auto; min-width: 0; padding: 4px 6px; }
    .side-links { flex: 0 0 auto; }
    .side-links a { padding: 7px 10px; }
    .nav-group { display: none; }
}

/* ============================================================================
   17. Usuarios (administración de personal)
   ============================================================================ */
.usr-toolbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px;
    align-items: center; margin-bottom: 18px;
}
.usr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.usr-chips a {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
    border-radius: 999px; background: var(--pc-surface); color: var(--pc-heading);
    font-size: .82rem; font-weight: 600; text-decoration: none; box-shadow: var(--pc-shadow);
}
.usr-chips a.is-active { background: var(--pc-accent); color: #fff; }
.usr-chips a b { font-family: var(--pc-font-head); }

.usr-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.usr-search input, .usr-search select { height: 38px; }
.usr-search input { flex: 1 1 180px; min-width: 180px; }
.usr-search select { flex: 0 1 auto; min-width: 172px; }
.usr-search .text-action { white-space: nowrap; }

.usr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.usr-list { display: grid; gap: 12px; }

.usr-card {
    display: grid; grid-template-columns: 52px minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
    gap: 14px; align-items: center;
    padding: 15px 18px; border-radius: var(--pc-radius);
    background: var(--pc-surface); box-shadow: var(--pc-shadow);
    text-decoration: none; color: inherit;
    transition: transform .16s ease, box-shadow .16s ease;
}
.usr-card:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(var(--pc-heading-rgb), .16); }
.usr-card.is-suspended { opacity: .74; }

.usr-av {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    overflow: hidden; flex: 0 0 auto;
    background: var(--pc-accent-soft); color: var(--pc-accent);
    font-family: var(--pc-font-head); font-size: .95rem; font-weight: 700;
}
.usr-av img { width: 100%; height: 100%; object-fit: cover; }

.usr-id { min-width: 0; }
.usr-id strong { display: block; font-family: var(--pc-font-head); font-size: .97rem; color: var(--pc-heading); }
.usr-id span { display: block; color: var(--pc-text-muted); font-size: .8rem; overflow-wrap: anywhere; }
.usr-id small { display: block; color: var(--pc-muted-navy); font-size: .74rem; overflow-wrap: anywhere; }

.usr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.usr-tags span {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    border-radius: 999px; background: var(--pc-bg); color: var(--pc-heading);
    font-size: .73rem; font-weight: 600;
}
.usr-tags span i { font-style: normal; color: var(--pc-muted-navy); font-weight: 500; }
.usr-tags span.is-owner { background: var(--pc-accent-soft); color: var(--pc-accent); }
.usr-tags .usr-more { background: transparent; color: var(--pc-muted-navy); }

.usr-meta { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.usr-state { padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.usr-state--active { color: #1f9d57; background: var(--pc-green-soft); }
.usr-state--suspended { color: var(--pc-coral); background: var(--pc-coral-soft); }
.usr-go { color: var(--pc-muted-navy); width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Ficha del usuario ---------------------------------------------------- */
.usr-roles-list { display: grid; gap: 10px; }
.usr-role-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 11px 14px; border-radius: var(--pc-radius); background: var(--pc-bg);
}
.usr-role-row .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pc-surface); color: var(--pc-accent); }
.usr-role-row strong { display: block; font-size: .88rem; color: var(--pc-heading); }
.usr-role-row span { display: block; color: var(--pc-text-muted); font-size: .78rem; }
.usr-role-row form { margin: 0; }
.usr-role-row .button--secondary {
    background: var(--pc-surface); color: var(--pc-heading);
    border: 1px solid rgba(var(--pc-heading-rgb), .14); box-shadow: none;
}
.usr-role-row .button--secondary:hover { background: #fdecea; color: var(--danger); border-color: #f6cfca; }

.usr-role-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.usr-role-add select { height: 38px; flex: 1; min-width: 150px; }

.usr-risk {
    display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start;
    padding: 14px 16px; border-radius: var(--pc-radius); background: var(--pc-bg); margin-bottom: 16px;
}
.usr-risk .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pc-surface); color: var(--pc-coral); }
.usr-risk strong { display: block; font-size: .88rem; color: var(--pc-heading); margin-bottom: 3px; }
.usr-risk p { margin: 0; color: var(--pc-text-muted); font-size: .82rem; }

@media (max-width: 1080px) {
    .usr-layout { grid-template-columns: 1fr; }
    .usr-toolbar { grid-template-columns: 1fr; }
    .usr-search { justify-content: flex-start; }
}
@media (max-width: 760px) {
    .usr-card { grid-template-columns: 46px minmax(0, 1fr); }
    .usr-av { width: 46px; height: 46px; }
    .usr-card .usr-tags, .usr-card .usr-meta { grid-column: 2; justify-content: flex-start; }
    .usr-role-row { grid-template-columns: 38px minmax(0, 1fr); }
    .usr-role-row form { grid-column: 2; }
}

/* ============================================================================
   FASE 0 · Orientación
   ----------------------------------------------------------------------------
   Búsqueda global en la barra lateral, línea de tiempo del paciente y mapa del
   sistema. Todo lo de abajo es nuevo: no pisa ninguna regla anterior.
   ============================================================================ */

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

/* ------------------------------------------- Búsqueda global (barra lateral) */
.side-search { position: relative; padding: 12px 14px 4px; }
.side-search-field {
    position: relative; display: flex; align-items: center;
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    background: var(--pc-bg); transition: border-color .15s ease, box-shadow .15s ease;
}
.side-search-field:focus-within { border-color: var(--pc-accent); box-shadow: var(--pc-focus); }
.side-search-field > svg.icon {
    flex: 0 0 auto; width: 16px; height: 16px; margin-left: 10px; color: var(--pc-muted-navy);
}
.side-search-field input[type="search"] {
    flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 10px;
    border: 0; border-radius: inherit; background: transparent;
    color: var(--pc-text); font-size: .82rem;
}
.side-search-field input[type="search"]:focus { outline: 0; box-shadow: none; }
.side-search-field input::placeholder { color: var(--pc-muted-navy); }
.side-search-field input::-webkit-search-cancel-button { cursor: pointer; }

.side-search-panel {
    position: absolute; z-index: 40; top: calc(100% - 2px); left: 14px; right: 14px;
    max-height: min(60vh, 460px); overflow-y: auto;
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    background: var(--pc-surface); box-shadow: var(--pc-shadow-hover);
}
.side-search-panel[hidden] { display: none; }
.side-search-panel .ss-group {
    padding: 8px 12px 4px; color: var(--pc-muted-navy);
    font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.side-search-panel a.ss-hit {
    display: block; padding: 8px 12px; color: var(--pc-text);
    text-decoration: none; border-top: 1px solid var(--pc-border);
}
.side-search-panel a.ss-hit:first-of-type { border-top: 0; }
.side-search-panel a.ss-hit strong { display: block; color: var(--pc-heading); font-size: .82rem; font-weight: 700; }
.side-search-panel a.ss-hit small { display: block; color: var(--pc-text-muted); font-size: .72rem; }
.side-search-panel a.ss-hit:hover,
.side-search-panel a.ss-hit.is-cursor { background: var(--pc-accent-soft); color: var(--pc-accent); }
.side-search-panel .ss-empty { padding: 14px 12px; color: var(--pc-text-muted); font-size: .78rem; }
.side-search-panel .ss-all {
    display: block; padding: 9px 12px; border-top: 1px solid var(--pc-border);
    color: var(--pc-accent); font-size: .76rem; font-weight: 700; text-align: center; text-decoration: none;
}
.side-search-panel .ss-all:hover { background: var(--pc-accent-soft); }

/* ------------------------------------------------ Página de resultados */
.search-block .section-heading .eyebrow svg.icon { width: 13px; height: 13px; vertical-align: -2px; }
.search-list { border-top: 1px solid var(--pc-border); margin-top: 14px; }
.search-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
    padding: 13px 0; border-bottom: 1px solid var(--pc-border);
    color: inherit; text-decoration: none; transition: background .15s ease;
}
.search-row:hover { background: var(--pc-accent-soft); }
.search-identity { display: grid; gap: 3px; min-width: 0; }
.search-identity strong { color: var(--pc-heading); font-size: .9rem; }
.search-identity small { color: var(--pc-text-muted); font-size: .76rem; overflow-wrap: anywhere; }

/* --------------------------------------------- Línea de tiempo del paciente */
.page-heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.avatar--lg { width: 46px; height: 46px; font-size: .9rem; }

.timeline-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.chip {
    display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
    border: 1px solid var(--pc-border); border-radius: 999px;
    color: var(--pc-text-muted); background: var(--pc-surface);
    font-size: .76rem; font-weight: 700; text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.chip:hover { color: var(--pc-accent); border-color: var(--pc-accent); }
.chip.is-active { color: #fff; background: var(--pc-accent); border-color: var(--pc-accent); }

.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.timeline-heading {
    margin: 20px 0 8px; color: var(--pc-heading);
    font-family: var(--pc-font-head); font-size: .82rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
}
.timeline-heading:first-child { margin-top: 0; }
.timeline-item {
    position: relative;
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto;
    gap: 13px; align-items: center;
    padding: 13px 0 13px 0; border-bottom: 1px solid var(--pc-border);
}
.timeline-mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; color: var(--pc-accent); background: var(--pc-accent-soft);
}
.timeline-mark svg.icon { width: 17px; height: 17px; }
.timeline-item--charge .timeline-mark,
.timeline-item--payment .timeline-mark { color: var(--pc-green); background: var(--pc-green-soft); }
.timeline-item--plan .timeline-mark,
.timeline-item--decision .timeline-mark { color: var(--pc-purple); background: var(--pc-purple-soft); }
.timeline-item--appointment .timeline-mark { color: var(--pc-blue); background: var(--pc-blue-soft); }
.timeline-item--consent .timeline-mark { color: var(--pc-coral); background: var(--pc-coral-soft); }
.timeline-body { display: grid; gap: 2px; min-width: 0; }
.timeline-body strong { color: var(--pc-heading); font-size: .9rem; }
.timeline-body small { color: var(--pc-text-muted); font-size: .76rem; overflow-wrap: anywhere; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; color: var(--pc-muted-navy); font-size: .7rem; font-weight: 700; }
.timeline-group { color: var(--pc-accent); letter-spacing: .04em; text-transform: uppercase; }
.timeline-go {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: var(--pc-radius); color: var(--pc-accent);
    background: var(--pc-accent-soft); text-decoration: none; font-weight: 700;
}
.timeline-go:hover { color: #fff; background: var(--pc-accent); }

/* ------------------------------------------------------- Mapa del sistema */
.map-intro p { margin: 0 0 8px; color: var(--pc-text); font-size: .9rem; line-height: 1.6; }
.map-context { color: var(--pc-muted-navy); font-size: .76rem; font-weight: 700; }
.map-block { margin-top: 18px; }
.map-block .section-heading .metric-icon { width: 42px; height: 42px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.map-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 15px 16px; border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius); background: var(--pc-bg);
}
.map-card h3 { margin: 0; font-size: .95rem; }
.map-card p { margin: 0; color: var(--pc-text-muted); font-size: .81rem; line-height: 1.55; }
.map-card .button { align-self: flex-start; margin-top: 6px; }
.map-note { color: var(--pc-muted-navy); font-size: .74rem; font-style: italic; margin-top: 6px; }

/* ---------------------------------- Variantes de listas y formularios largos */
.patient-search--multi { grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) auto auto; }
.patient-row--wide { grid-template-columns: 42px minmax(170px, 1.3fr) minmax(130px, .7fr) auto auto; }

@media (max-width: 900px) {
    .patient-search--multi { grid-template-columns: minmax(0, 1fr); }
    .patient-row--wide { grid-template-columns: 42px minmax(0, 1fr); }
    .patient-row--wide .patient-contact,
    .patient-row--wide .status { grid-column: 2; }
    .search-row { grid-template-columns: minmax(0, 1fr) auto; }
    .timeline-item { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .timeline-go { grid-column: 2 / -1; justify-self: start; }
}

@media (max-width: 1024px) {
    /* En horizontal la barra deja de ser columna: la búsqueda ocupa su propia fila. */
    .side-search { order: 99; flex: 1 1 100%; padding: 8px 16px 10px; }
    .side-search-panel { left: 16px; right: 16px; }
    .nav-group { display: block; }
}

/* Botón fantasma con contorno en los encabezados y tarjetas nuevas de Fase 0. */
.page-heading-actions .button--ghost,
.map-card .button--ghost {
    border: 1px solid var(--pc-border);
    background: var(--pc-surface);
    color: var(--pc-heading);
    box-shadow: none;
}
.page-heading-actions .button--ghost:hover,
.map-card .button--ghost:hover {
    color: var(--pc-accent);
    border-color: var(--pc-accent);
    background: var(--pc-accent-soft);
    filter: none;
}
.map-block .section-heading .eyebrow svg.icon,
.search-block .section-heading .eyebrow svg.icon { width: 13px; height: 13px; vertical-align: -2px; }

/* --------------------------------------- Imágenes del expediente (Fase 1) */
.img-upload {
    display: grid; gap: 14px 16px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.img-upload > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.img-upload > label > span { color: var(--pc-heading); font-size: .8rem; font-weight: 600; }
.img-upload > label > span small { color: var(--pc-muted-navy); font-weight: 400; font-style: italic; }
.img-upload input, .img-upload select, .img-upload textarea { width: 100%; }
.img-upload-wide { grid-column: 1 / -1; }
.img-upload-file input[type="file"] {
    padding: 9px 10px; border: 1px dashed var(--pc-accent);
    border-radius: var(--pc-radius); background: var(--pc-accent-soft);
    color: var(--pc-heading); font-size: .82rem;
}
.img-upload .form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.img-upload .form-actions span { color: var(--pc-text-muted); font-size: .78rem; }

.img-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.img-toolbar .chip small { margin-left: 5px; opacity: .7; font-weight: 700; }
.chip--muted { border-style: dashed; }

.img-grid {
    display: grid; gap: 14px; margin-top: 16px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.img-card {
    position: relative; display: flex; flex-direction: column;
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg);
    background: var(--pc-surface); overflow: hidden; text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.img-card:hover { border-color: var(--pc-accent); box-shadow: var(--pc-shadow-hover); transform: translateY(-2px); }
.img-card--retired { opacity: .62; }
.img-card--retired:hover { opacity: 1; }
.img-thumb {
    position: relative; display: grid; place-items: center; gap: 6px;
    aspect-ratio: 4 / 3; background: #0c1424; overflow: hidden;
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumb > svg.icon { width: 34px; height: 34px; color: rgba(255, 255, 255, .55); }
.img-thumb > small { color: rgba(255, 255, 255, .55); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.img-tooth {
    position: absolute; left: 8px; bottom: 8px; padding: 2px 7px;
    border-radius: 999px; background: rgba(255, 255, 255, .92);
    color: var(--pc-heading); font-size: .68rem; font-weight: 800;
}
.img-meta { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; min-width: 0; }
.img-meta strong {
    color: var(--pc-heading); font-family: var(--pc-font-title); font-size: .86rem;
    line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.img-meta small { color: var(--pc-text-muted); font-size: .74rem; }
.img-meta .img-date { color: var(--pc-muted-navy); }
.img-badge {
    position: absolute; right: 8px; top: 8px; padding: 3px 9px; border-radius: 999px;
    background: var(--pc-coral); color: #fff; font-size: .66rem; font-weight: 800;
    letter-spacing: .03em; text-transform: uppercase;
}

.img-detail { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; }
.img-viewer { display: flex; flex-direction: column; gap: 10px; }
.img-viewer-frame {
    display: grid; place-items: center; min-height: 280px;
    border-radius: var(--pc-radius); background: #0c1424;
    overflow: hidden; line-height: 0;
}
.img-viewer-frame img { width: 100%; max-height: 66vh; object-fit: contain; display: block; }
.img-viewer-note { margin: 0; color: var(--pc-muted-navy); font-size: .76rem; }
.img-viewer-pdf {
    display: grid; justify-items: center; gap: 10px; padding: 46px 20px; text-align: center;
    border: 1px dashed var(--pc-border); border-radius: var(--pc-radius); background: var(--pc-bg);
}
.img-viewer-pdf svg.icon { width: 40px; height: 40px; color: var(--pc-accent); }
.img-viewer-pdf strong { color: var(--pc-heading); }
.img-viewer-pdf p { margin: 0; color: var(--pc-text-muted); font-size: .82rem; max-width: 42ch; }
.img-facts { grid-template-columns: minmax(0, 1fr); }
.img-facts dd a { color: var(--pc-accent); }
.img-notes { color: var(--pc-text); font-size: .86rem; line-height: 1.65; }

@media (max-width: 1100px) {
    .img-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .img-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .img-upload { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------- Mensualidades (Fase 1) */
.metric-card--alert { box-shadow: inset 0 0 0 1px var(--pc-coral), var(--pc-shadow); }
.panel--alert { box-shadow: inset 0 0 0 1px rgba(255, 119, 29, .35), var(--pc-shadow); }
.text-danger { color: var(--pc-coral); }

.status--danger, .status--overdue { color: #a33d00; background: var(--pc-coral-soft); }
.status--paid, .status--completed { color: #17794a; background: var(--pc-green-soft); }
.status--partial { color: #8a6100; background: var(--pc-amber-soft); }
.status--cancelled { color: var(--pc-text-muted); background: var(--pc-border); }
.status--active, .status--pending { color: var(--pc-accent); background: var(--pc-accent-soft); }

/* Listas de vencimientos y de convenios */
.due-list, .plan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.due-row, .plan-row {
    display: grid; align-items: center; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius); background: var(--pc-surface);
    text-decoration: none; color: inherit;
}
.due-row { grid-template-columns: minmax(120px, .8fr) minmax(0, 1.6fr) auto auto; }
.plan-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(110px, .7fr) auto auto; }
a.due-row:hover, a.plan-row:hover { border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.due-row--overdue { border-left: 3px solid var(--pc-coral); }
.plan-row--cancelled { opacity: .7; }

.due-when strong, .due-who strong, .plan-identity strong, .plan-terms {
    display: block; color: var(--pc-heading); font-size: .88rem; font-weight: 600;
}
.due-when small, .due-who small, .plan-identity small, .plan-terms small, .plan-balance small {
    display: block; color: var(--pc-text-muted); font-size: .74rem; font-weight: 400;
}
.due-amount, .plan-balance {
    color: var(--pc-heading); font-family: var(--pc-font-title);
    font-size: .95rem; font-weight: 700; text-align: right;
}
.due-row--overdue .due-amount { color: var(--pc-coral); }

/* Formulario del convenio con vista previa en vivo */
.plan-form {
    display: grid; gap: 14px 16px; margin-top: 16px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.plan-form > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan-form > label > span { color: var(--pc-heading); font-size: .8rem; font-weight: 600; }
.plan-form > label > span small { color: var(--pc-muted-navy); font-weight: 400; font-style: italic; }
.plan-form input, .plan-form select, .plan-form textarea { width: 100%; }
.plan-form-wide { grid-column: 1 / -1; }
.plan-form .form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.plan-form .form-actions span { color: var(--pc-text-muted); font-size: .78rem; }

.plan-preview {
    padding: 14px 16px; border: 1px dashed var(--pc-border);
    border-radius: var(--pc-radius); background: var(--pc-bg);
}
.plan-preview-note { margin: 0; color: var(--pc-text-muted); font-size: .8rem; }
.plan-preview-head { margin: 0 0 10px; color: var(--pc-heading); font-size: .95rem; }
.plan-preview-head span { color: var(--pc-text-muted); font-size: .82rem; font-weight: 400; }
.plan-preview-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.plan-preview-list li {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: 10px; align-items: baseline; padding: 5px 0;
    border-top: 1px solid var(--pc-border); font-size: .82rem;
}
.plan-preview-list li span { color: var(--pc-heading); }
.plan-preview-list li time { color: var(--pc-text-muted); }
.plan-preview-list li b { color: var(--pc-heading); text-align: right; font-family: var(--pc-font-title); }
.plan-notes {
    margin: 0 0 14px; padding: 10px 12px; border-left: 3px solid var(--pc-accent);
    background: var(--pc-accent-soft); border-radius: var(--pc-radius);
    color: var(--pc-text); font-size: .84rem; line-height: 1.6;
}

/* Tabla del calendario */
.table-scroll { overflow-x: auto; margin-top: 14px; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 620px; }
.schedule-table th, .schedule-table td {
    padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--pc-border);
}
.schedule-table thead th {
    color: var(--pc-muted-navy); font-size: .7rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.schedule-table td.num, .schedule-table th:nth-child(4) { text-align: right; }
.schedule-table tbody td { color: var(--pc-text); }
.schedule-table tbody td:nth-child(2) { color: var(--pc-heading); font-weight: 600; }
.schedule-table tfoot td {
    color: var(--pc-heading); font-weight: 700; border-top: 2px solid var(--pc-border); border-bottom: 0;
}
.schedule-row--paid td { color: var(--pc-text-muted); }
.schedule-row--overdue { background: var(--pc-coral-soft); }
.schedule-row--overdue td:nth-child(2) { color: #a33d00; }
.schedule-row--partial { background: var(--pc-amber-soft); }

/* Firmas del convenio impreso */
.receipt-signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.receipt-signatures div { display: flex; flex-direction: column; gap: 6px; }
.receipt-signatures span { display: block; height: 44px; border-bottom: 1px solid var(--pc-heading); }
.receipt-signatures small { color: var(--pc-text-muted); font-size: .74rem; }

/* Enlace a mensualidades dentro de la tarjeta de cuenta en Caja */
.charge-links { margin: 8px 0 0; }
.charge-links a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--pc-accent); font-size: .8rem; font-weight: 600; text-decoration: none;
}
.charge-links a:hover { text-decoration: underline; }
.charge-links svg.icon { width: 15px; height: 15px; }

@media (max-width: 900px) {
    .due-row { grid-template-columns: minmax(0, 1fr) auto; }
    .due-row .due-who { grid-column: 1 / -1; }
    .plan-row { grid-template-columns: minmax(0, 1fr) auto; }
    .plan-row .plan-terms, .plan-row .plan-balance { grid-column: 1 / -1; }
    .plan-form { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .receipt-actions { display: none; }
    .schedule-row--overdue, .schedule-row--partial { background: transparent; }
}

/* Corrección heredada: el tema pinta TODOS los h1/h2 de navy, y dentro del
   hero oscuro de los comprobantes eso los dejaba invisibles (navy sobre
   navy). Afecta al recibo de pago, al de corte de caja y al del plan de
   tratamiento, no sólo al convenio nuevo. */
.receipt-hero h1,
.receipt-hero h2,
.receipt-hero .eyebrow { color: #fff; }

/* ------------------------------------- Indicadores del negocio (Fase 1) */
.report-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.report-empty {
    margin: 12px 0 0; padding: 14px 16px; border: 1px dashed var(--pc-border);
    border-radius: var(--pc-radius); background: var(--pc-bg);
    color: var(--pc-text-muted); font-size: .82rem;
}
.report-note { margin: 12px 0 0; color: var(--pc-muted-navy); font-size: .76rem; line-height: 1.55; }
.img-facts dd small { color: var(--pc-muted-navy); font-weight: 400; font-size: .74rem; }

/* Barras horizontales de reparto */
.bar-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 2fr) minmax(90px, auto); gap: 12px; align-items: center; }
.bar-label { color: var(--pc-heading); font-size: .82rem; font-weight: 600; }
.bar-track { height: 10px; border-radius: 999px; background: var(--pc-border); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--pc-accent); min-width: 3px; }
.bar-fill--completed { background: var(--pc-green); }
.bar-fill--cancelled { background: var(--pc-text-muted); }
.bar-fill--no_show   { background: var(--pc-coral); }
.bar-fill--booked, .bar-fill--confirmed { background: var(--pc-blue); }
.bar-value { text-align: right; color: var(--pc-heading); font-size: .84rem; font-weight: 700; font-family: var(--pc-font-title); }
.bar-value small { display: block; color: var(--pc-text-muted); font-size: .72rem; font-weight: 400; }

/* Gráfica de tendencia: puro CSS, sin librerías, porque es PWA offline */
.trend-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; align-items: end; margin-top: 18px; min-height: 200px; }
.trend-bar { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 200px; text-align: center; }
.trend-amount { color: var(--pc-heading); font-size: .74rem; font-weight: 700; font-family: var(--pc-font-title); }
.trend-column { display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.trend-fill {
    display: block; width: 100%; max-width: 56px; border-radius: 6px 6px 0 0;
    background: var(--pc-accent);
}
.trend-bar:last-child .trend-fill { background: linear-gradient(180deg, var(--pc-heading), var(--pc-accent)); }
.trend-label { color: var(--pc-text-muted); font-size: .74rem; }

/* Títulos dentro del bloque de alertas de inventario */
.alert-title {
    margin: 18px 0 0; color: var(--pc-heading);
    font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.alert-title--danger { color: #a33d00; }
.alert-title:first-of-type { margin-top: 6px; }

/* La pantalla de inventario y la de indicadores respiran mejor anchas */
.workspace--wide { max-width: 1500px; }

@media (max-width: 760px) {
    .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
    .bar-row .bar-track { grid-column: 1 / -1; order: 3; }
    .trend-chart { overflow-x: auto; grid-auto-columns: 72px; }
}

/* --------------------- El menú creció: densidad y pista de scroll ---------- */
/* Con Mensualidades e Indicadores el menú ya no cabe entero en pantallas
   de portátil. `.primary-nav` siempre tuvo overflow-y:auto, así que nada se
   pierde, pero no había ninguna señal de que hubiera más abajo. Se recupera
   espacio apretando un poco cada entrada y se añade una sombra que sólo
   aparece cuando de verdad hay contenido oculto (truco de background-attachment,
   sin una línea de JavaScript). */
.primary-nav {
    padding: 10px 15px 12px;
    background:
        linear-gradient(var(--pc-surface) 30%, rgba(255, 255, 255, 0)) top / 100% 22px no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), var(--pc-surface) 70%) bottom / 100% 22px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(var(--pc-heading-rgb), .13), rgba(var(--pc-heading-rgb), 0)) top / 100% 9px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(var(--pc-heading-rgb), .13), rgba(var(--pc-heading-rgb), 0)) bottom / 100% 9px no-repeat scroll;
}
.primary-nav::before { padding: 2px 12px 5px; }
.nav-item { min-height: 38px; padding: 7px 12px; }
.nav-group { margin-top: 9px; padding-bottom: 2px; }

/* Tabla estrecha: la de citas por profesional cabe sin barra de scroll. */
.schedule-table--compact { min-width: 380px; }

/* ------------------------------------------------ WhatsApp (Fase 1) */
.wa-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.wa-row {
    display: grid; gap: 8px 16px; padding: 14px 16px;
    grid-template-columns: minmax(150px, .9fr) minmax(0, 1.4fr);
    border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); background: var(--pc-surface);
}
.wa-when strong, .wa-who strong { display: block; color: var(--pc-heading); font-size: .9rem; }
.wa-when small, .wa-who small { display: block; color: var(--pc-text-muted); font-size: .76rem; }
.wa-message {
    grid-column: 1 / -1; margin: 0; padding: 10px 12px;
    border-left: 3px solid #25d366; border-radius: var(--pc-radius);
    background: #f2fbf5; color: var(--pc-text); font-size: .84rem; line-height: 1.55;
}
.wa-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wa-actions form { margin: 0; }
.wa-actions .button svg.icon { width: 16px; height: 16px; vertical-align: -3px; }
.wa-nophone { color: var(--pc-coral); font-size: .8rem; font-weight: 600; }

.wa-providers { display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wa-provider {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 13px 15px; border: 1px solid var(--pc-border); border-radius: var(--pc-radius);
    background: var(--pc-bg); cursor: pointer;
}
.wa-provider:hover { border-color: var(--pc-accent); }
.wa-provider input { margin-top: 3px; }
.wa-provider strong { display: block; color: var(--pc-heading); font-size: .88rem; }
.wa-provider small { display: block; margin-top: 4px; color: var(--pc-text-muted); font-size: .78rem; line-height: 1.5; }
.wa-provider:has(input:checked) { border-color: var(--pc-accent); background: var(--pc-accent-soft); }
.wa-ok { color: #17794a; }
.wa-switch { margin-top: 16px; }

.notice {
    padding: 12px 15px; margin-bottom: 16px;
    border-left: 3px solid var(--pc-accent); border-radius: var(--pc-radius);
    background: var(--pc-accent-soft); color: var(--pc-text); font-size: .85rem; line-height: 1.6;
}
.report-note code {
    padding: 2px 6px; border-radius: 4px; background: var(--pc-bg);
    font-size: .76rem; overflow-wrap: anywhere;
}
.plan-form input[readonly] { background: var(--pc-bg); cursor: pointer; }

@media (max-width: 760px) {
    .wa-row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Seguimiento comercial                                              */
/* ------------------------------------------------------------------ */
/* Un renglón por caso, con lo que la recepción necesita para marcar:  */
/* quién es, qué se le debe perseguir, cuánto vale y por dónde         */
/* escribirle. En móvil se apila; el importe pasa a leerse de corrido. */

.followup-list { list-style: none; margin: 0; padding: 0; }

.followup-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto auto;
    grid-template-areas: "who what amount links" "trail trail trail trail";
    gap: 6px 18px; align-items: center;
    padding: 14px 4px; border-top: 1px solid var(--pc-border);
}
.followup-row:first-child { border-top: 0; }
.followup-list--simple .followup-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
    grid-template-areas: "who what links" "trail trail trail";
}

.followup-who { grid-area: who; min-width: 0; }
.followup-what { grid-area: what; min-width: 0; }
.followup-amount { grid-area: amount; }
.followup-links { grid-area: links; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.followup-trail { grid-area: trail; }

.followup-name {
    display: block; font-weight: 600; color: var(--pc-heading);
    text-decoration: none; overflow-wrap: anywhere;
}
.followup-name:hover { color: var(--pc-accent); text-decoration: underline; }
.followup-meta { display: block; margin-top: 2px; color: var(--pc-text-muted); font-size: .78rem; }
.followup-title { display: block; font-size: .88rem; color: var(--pc-text); overflow-wrap: anywhere; }
.followup-title--warn { color: #b54708; font-weight: 600; }

.followup-amount { font-weight: 700; font-size: 1.02rem; color: var(--pc-heading); white-space: nowrap; }
.followup-amount--alert { color: #b42318; }

/* El verde de WhatsApp es el de la marca, no el del tema: quien lo ve
   sabe de un golpe que ese botón abre una conversación, no un formulario. */
.button--whatsapp {
    background: #25d366; border-color: #25d366; color: #06301a;
    display: inline-flex; align-items: center; gap: 6px;
}
.button--whatsapp:hover { background: #1fb855; border-color: #1fb855; color: #06301a; }
.button--whatsapp .icon { width: 15px; height: 15px; }

.followup-last {
    margin: 6px 0 0; padding: 8px 11px; border-radius: var(--pc-radius);
    background: var(--pc-bg); color: var(--pc-text-muted);
    font-size: .78rem; line-height: 1.55;
}
.followup-last strong { color: var(--pc-heading); }

.followup-action { margin-top: 6px; }
.followup-action > summary {
    display: inline-block; cursor: pointer; padding: 4px 0;
    color: var(--pc-accent); font-size: .8rem; font-weight: 600;
}
.followup-action > summary::marker { color: var(--pc-accent); }

.followup-form {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
    gap: 10px; align-items: end;
    margin-top: 8px; padding: 12px; border-radius: var(--pc-radius);
    background: var(--pc-accent-soft);
}
.followup-form .field { margin: 0; }
.followup-form .field--narrow { max-width: 150px; }
.followup-form button { align-self: end; }

.empty-note {
    margin: 4px 0 0; padding: 14px; border-radius: var(--pc-radius);
    background: var(--pc-bg); color: var(--pc-text-muted); font-size: .85rem;
}
.section-note { margin: 2px 0 12px; color: var(--pc-text-muted); font-size: .82rem; line-height: 1.6; }
.page-footnote {
    margin: 18px 0 0; color: var(--pc-text-muted);
    font-size: .78rem; line-height: 1.7; text-align: center;
}

@media (max-width: 900px) {
    .followup-row,
    .followup-list--simple .followup-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "who amount" "what what" "links links" "trail trail";
        gap: 8px 12px;
    }
    .followup-links { justify-content: flex-start; }
    .followup-form { grid-template-columns: minmax(0, 1fr); }
    .followup-form .field--narrow { max-width: none; }
}

/* ------------------------------------------------------------------ */
/* Prospectos y presupuestos                                          */
/* ------------------------------------------------------------------ */

.prospect-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; align-items: end; margin-top: 4px;
}
/* Sin `min-width: 0` una celda de rejilla no baja de lo que mide su
   contenido, y un select con opciones largas empuja la fila fuera del panel.
   Es la causa número uno de que una pantalla nueva desborde a lo ancho. */
.prospect-form .field {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0; margin: 0;
}
.prospect-form .field > input,
.prospect-form .field > select,
.prospect-form .field > textarea { width: 100%; min-width: 0; max-width: 100%; }
.prospect-form .field--wide { grid-column: 1 / -1; }
/* El botón toma su propio renglón y mide lo que dice. Metido en una columna
   de 190 px, «Marcar como perdido» se parte en dos líneas. */
.prospect-form button { grid-column: 1 / -1; justify-self: start; width: auto; }

/* Los campos sueltos de estas pantallas (fuera de la rejilla) también apilan
   etiqueta sobre control: si no, el textarea de notas sale espachurrado a un
   lado de su etiqueta. */
[data-quote-builder] > .field {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0; margin-top: 14px;
}
[data-quote-builder] > .field > textarea,
[data-quote-builder] > .field > input { width: 100%; min-width: 0; }
[data-quote-builder] > button { margin-top: 14px; }

/* Pestañas de filtro: abiertos, convertidos, perdidos. */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 1px solid var(--pc-border); border-radius: 999px;
    color: var(--pc-text-muted); font-size: .82rem; text-decoration: none;
}
.filter-tab small {
    padding: 1px 7px; border-radius: 999px;
    background: var(--pc-bg); color: var(--pc-text-muted); font-size: .72rem;
}
.filter-tab:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.filter-tab.is-active {
    background: var(--pc-accent); border-color: var(--pc-accent); color: #fff; font-weight: 600;
}
.filter-tab.is-active small { background: rgba(255, 255, 255, .25); color: #fff; }

/* Cada presupuesto es su propia tarjeta: se leen de arriba abajo como
   una conversación, del más nuevo al más viejo. */
.quote-card {
    margin-top: 14px; padding: 16px; border: 1px solid var(--pc-border);
    border-left: 3px solid var(--pc-accent); border-radius: var(--pc-radius);
    background: #fff;
}
.quote-card--won  { border-left-color: #17794a; }
.quote-card--lost { border-left-color: #b42318; }

.quote-head { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: space-between; align-items: flex-start; }
.quote-head h3 { margin: 2px 0 0; font-size: 1.05rem; }
.quote-state { margin: 4px 0 0; color: var(--pc-text-muted); font-size: .8rem; }
.quote-total { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--pc-heading); white-space: nowrap; }

.quote-notes {
    margin: 10px 0 0; padding: 10px 12px; border-radius: var(--pc-radius);
    background: var(--pc-bg); color: var(--pc-text); font-size: .84rem; line-height: 1.6;
}
.quote-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; margin-top: 12px; }
.followup-action--win > summary { color: #17794a; }
.followup-action--win > summary::marker { color: #17794a; }

/* Tablas anchas: que se deslice la tabla, nunca la página. */
.table-scroll { margin-top: 12px; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.data-table th, .data-table td {
    padding: 8px 10px; border-bottom: 1px solid var(--pc-border);
    text-align: left; vertical-align: top;
}
.data-table thead th {
    color: var(--pc-text-muted); font-size: .72rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.data-table tfoot th { border-bottom: 0; color: var(--pc-heading); font-size: .92rem; }
.data-table small { color: var(--pc-text-muted); }

.quote-builder input { width: 100%; min-width: 90px; }
.quote-builder td:first-child input { min-width: 170px; }
.quote-line { font-weight: 600; color: var(--pc-heading); white-space: nowrap; }

.inline-form { display: inline-block; margin-left: 8px; }

@media (max-width: 900px) {
    .prospect-form { grid-template-columns: minmax(0, 1fr); }
    .quote-total { font-size: 1.15rem; }
}

/* ---------------------------------------------------------------- descuentos
   Misma trampa de siempre: en una rejilla, una celda no baja de lo que mide su
   contenido salvo que lleve min-width:0, y `.field` no apila etiqueta sobre
   control por sí solo. Sin esto, el select de motivos ---«Convenio con empresa
   o escuela»--- empuja la fila fuera del panel y la pantalla desborda. */
.discount-form { display: flex; flex-direction: column; gap: 14px; }
.discount-form .field {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0; margin: 0;
}
.discount-form .field > input,
.discount-form .field > select,
.discount-form .field > textarea { width: 100%; min-width: 0; max-width: 100%; }
.discount-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.discount-grid > .field { min-width: 0; }

/* La vista previa cambia de color según sirva o no: en verde el resultado, en
   coral el aviso de que se pasa del saldo. Reserva su alto para que el
   formulario no dé un salto cada vez que se teclea un número. */
.discount-preview {
    min-height: 1.35rem; margin: 0; font-size: .86rem; font-weight: 600;
    color: var(--pc-muted-navy);
}
.discount-preview--ok { color: #1f9254; }
.discount-preview--error { color: var(--pc-coral); }

.discount-list { display: flex; flex-direction: column; gap: 14px; }
.discount-card {
    padding: 16px 18px; border-radius: var(--pc-radius);
    background: var(--pc-bg); border-left: 3px solid var(--pc-accent);
}
/* Un descuento revocado ya no cuenta para el saldo: se apaga para que no se
   confunda de un vistazo con los vigentes, pero NO se esconde. */
.discount-card--revoked { border-left-color: var(--pc-border); opacity: .72; }
.discount-card > header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px;
}
.discount-card > header strong {
    font-family: var(--pc-font-head); font-size: 1.05rem; color: var(--pc-heading);
}
.discount-card > header time { margin-left: auto; color: var(--pc-muted-navy); font-size: .78rem; }
.discount-tag {
    padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    color: var(--pc-accent); background: rgba(var(--pc-accent-rgb), .1);
}
.discount-meta {
    display: grid; gap: 10px; margin-bottom: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.discount-meta > div { min-width: 0; }
.discount-meta span {
    display: block; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--pc-muted-navy);
}
.discount-meta b { color: var(--pc-heading); font-size: .88rem; overflow-wrap: anywhere; }
.discount-reason {
    margin: 0; padding: 10px 12px; border-radius: var(--pc-radius);
    background: var(--pc-surface); font-size: .88rem; overflow-wrap: anywhere;
}
.discount-reason--revoked { margin-top: 10px; border-left: 3px solid var(--pc-coral); }

.discount-revoke { margin-top: 12px; }
.discount-revoke > summary {
    cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--pc-coral);
}
.discount-revoke form {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pc-border);
}
.discount-revoke .field {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0;
}
.discount-revoke .field > input { width: 100%; min-width: 0; max-width: 100%; }
.discount-warning { margin: 0; font-size: .82rem; color: var(--pc-muted-navy); }

@media (max-width: 900px) {
    .discount-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ signos vitales
   Misma trampa de siempre: celda de rejilla con min-width:0 y `.field` apilando
   por su cuenta. Aquí son NUEVE campos, así que sin esto la fila se desborda
   seguro. */
.vitals-panel .vitals-alert {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
    margin-bottom: 14px; padding: 12px 14px;
    border-radius: var(--pc-radius); border-left: 3px solid var(--pc-coral);
    background: var(--pc-coral-soft); font-size: .88rem;
}
.vitals-panel .vitals-alert strong { color: var(--pc-coral); }
.vitals-panel .vitals-alert span { flex-basis: 100%; color: var(--pc-muted-navy); font-size: .8rem; }

.vitals-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vitals-row {
    display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
    padding: 10px 12px; border-radius: var(--pc-radius); background: var(--pc-bg);
    border-left: 3px solid var(--pc-border);
}
/* La toma con algo fuera de rango se marca, pero se sigue leyendo igual: no se
   esconde ni se pinta de rojo entero, que vuelve ilegible el número. */
.vitals-row--alert { border-left-color: var(--pc-coral); }
.vitals-row strong { font-family: var(--pc-font-head); color: var(--pc-heading); font-size: .92rem; }
.vitals-row span { margin-left: auto; color: var(--pc-muted-navy); font-size: .78rem; }
.vitals-row em { flex-basis: 100%; font-style: normal; color: var(--pc-muted-navy); font-size: .82rem; }

.vitals-capture > summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--pc-accent); }
.vitals-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.vitals-form .field {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0;
}
.vitals-form .field > input { width: 100%; min-width: 0; max-width: 100%; }
.vitals-form .field span small {
    font-weight: 400; color: var(--pc-muted-navy); text-transform: none; letter-spacing: 0;
}
.vitals-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.vitals-grid > .field { min-width: 0; }

@media (max-width: 640px) {
    .vitals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vitals-row span { margin-left: 0; }
}

/* --------------------------------------------------- sello de integridad
   El sello de la nota clínica se recalcula al abrirla. La insignia verde no
   es decorativa: es la respuesta a «demuéstrame que este expediente no se
   tocó», que es lo que pregunta una inspección. */
.seal-badge {
    padding: 5px 11px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.seal-badge--valid  { color: #1f9254; background: rgba(31, 146, 84, .12); }
.seal-badge--broken { color: var(--pc-coral); background: var(--pc-coral-soft); }
.seal-badge--draft  { display: none; }

.seal-broken {
    margin-bottom: 18px; padding: 16px 18px;
    border-radius: var(--pc-radius); border-left: 3px solid var(--pc-coral);
    background: var(--pc-coral-soft);
}
.seal-broken strong { display: block; margin-bottom: 8px; color: var(--pc-coral); font-size: .95rem; }
.seal-broken p { margin: 0 0 10px; font-size: .86rem; }
.seal-broken ul { margin: 0 0 10px; padding-left: 20px; font-size: .86rem; }
.seal-broken li { margin-bottom: 4px; }
.seal-broken__what { margin: 0; font-weight: 600; }

/* ------------------------------------------------ tablero de cumplimiento
   Las celdas llevan min-width:0 por la misma razón de siempre: «Pacientes
   atendidos sin consentimiento» es una etiqueta larga y sin eso empuja la
   rejilla fuera del panel. */
.compliance-tiles {
    display: grid; gap: 14px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.compliance-tile {
    min-width: 0; padding: 16px 18px;
    border-radius: var(--pc-radius); background: var(--pc-bg);
    border-left: 3px solid var(--pc-border);
}
.compliance-tile span {
    display: block; margin-bottom: 6px;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--pc-muted-navy);
}
.compliance-tile strong {
    display: block; font-family: var(--pc-font-head);
    font-size: 1.6rem; line-height: 1.1; color: var(--pc-heading);
}
.compliance-tile small { display: block; margin-top: 4px; font-size: .78rem; color: var(--pc-muted-navy); }
.compliance-tile--ok   { border-left-color: #1f9254; }
.compliance-tile--warn { border-left-color: var(--pc-accent); }
.compliance-tile--bad  { border-left-color: var(--pc-coral); background: var(--pc-coral-soft); }
.compliance-tile--bad strong { color: var(--pc-coral); }

.compliance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.compliance-list li {
    padding: 12px 14px; border-radius: var(--pc-radius); background: var(--pc-bg);
    border-left: 3px solid var(--pc-accent);
}
.compliance-list strong { display: block; color: var(--pc-heading); font-size: .92rem; }
.compliance-list span { font-size: .84rem; color: var(--pc-muted-navy); }

/* Al imprimir, el menú y los botones sobran: lo que se entrega es el informe. */
@media print {
    .app-shell > nav, .sidebar, .heading-actions { display: none !important; }
    .workspace { padding: 0 !important; }
    .panel { break-inside: avoid; }
}

/* =========================================================================
   Aviso de privacidad y derechos ARCO (LFPDPPP) — paquete u
   ========================================================================= */

/* Rejilla de formulario de estas pantallas. Misma idea que .prospect-form: el
   `min-width: 0` es obligatorio, porque sin él una celda no baja del ancho de
   su contenido y un select con opciones largas —«Rectificación — Tienen un
   dato mío mal…»— empuja la fila fuera del panel. */
.privacy-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; align-items: end; margin-top: 10px;
}
.privacy-form .field {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0; margin: 0;
}
.privacy-form .field > span { font-size: .86rem; font-weight: 600; color: var(--pc-heading); }
.privacy-form .field > span small { font-weight: 400; color: var(--pc-muted-navy); }
.privacy-form .field > input,
.privacy-form .field > select,
.privacy-form .field > textarea { width: 100%; min-width: 0; max-width: 100%; }
.privacy-form .field > textarea { min-height: 90px; resize: vertical; line-height: 1.55; }
.privacy-form .field--wide { grid-column: 1 / -1; }
/* El botón toma su propio renglón y mide lo que dice: metido en una columna
   de 220 px, «Marcar identidad acreditada» se parte en dos líneas. */
.privacy-form > button { grid-column: 1 / -1; justify-self: start; width: auto; }
/* La casilla va en línea con su texto, no apilada como los demás campos. */
.privacy-form .check-field {
    flex-direction: row; align-items: flex-start; gap: 8px;
}
.privacy-form .check-field > input { width: auto; margin-top: 3px; flex: none; }

.privacy-note--inline { margin: 0; align-self: center; }

/* Semáforo del plazo. El estado va en el color Y en el texto: un badge que
   sólo cambia de color deja fuera a quien no distingue rojo de verde. */
.arco-clock {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: .78rem; font-weight: 600; white-space: nowrap;
    background: var(--pc-bg); color: var(--pc-muted-navy);
}
.arco-clock--ok      { background: rgba(31, 146, 84, .12); color: #1f7a48; }
/* Ámbar explícito: --pc-accent-soft es un azul pálido y aquí haría que
   «te quedan 3 días» se viera igual de tranquilo que «te quedan 15». */
.arco-clock--soon    { background: #fff4de; color: #8a5a00; }
.arco-clock--overdue { background: var(--pc-coral-soft); color: var(--pc-coral); }
.arco-clock--done    { background: var(--pc-bg); color: var(--pc-muted-navy); }

/* Bitácora encadenada. */
.arco-timeline { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.arco-timeline li {
    padding: 12px 14px; border-radius: var(--pc-radius); background: var(--pc-bg);
    border-left: 3px solid var(--pc-accent);
}
.arco-timeline-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; }
.arco-timeline-head strong { color: var(--pc-heading); font-size: .92rem; }
.arco-timeline-head time { font-size: .8rem; color: var(--pc-muted-navy); }
.arco-timeline li p { margin: 6px 0 4px; font-size: .88rem; line-height: 1.55; }
.arco-timeline li small { font-size: .76rem; color: var(--pc-muted-navy); }

/* Ficha de datos en dos columnas. */
.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 18px; margin: 14px 0 0;
}
.detail-grid > div { min-width: 0; }
.detail-grid dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pc-muted-navy); }
.detail-grid dd { margin: 2px 0 0; font-size: .92rem; color: var(--pc-heading); font-weight: 600; overflow-wrap: anywhere; }

/* Texto que escribió otra persona: se muestra tal cual y se ve que es una cita. */
.quote-block {
    margin: 14px 0 0; padding: 14px 16px; border-radius: var(--pc-radius);
    background: var(--pc-bg); border-left: 3px solid var(--pc-border);
    font-size: .92rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere;
}

.muted-line { display: block; font-size: .76rem; color: var(--pc-muted-navy); font-weight: 400; }
.hash-short { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Selector del color del tema · «Sitio web → Marca»
   ══════════════════════════════════════════════════════════════════════════
   Los cuadros usan --o, que es el color de SU variante, no el del tema
   activo: son muestras, y una muestra que se repinta al elegirla no sirve
   para comparar.
   ────────────────────────────────────────────────────────────────────────── */

.tema-picker { margin-bottom: 22px; }

.tema-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0 12px;
}

.tema-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 11px 12px 12px;
    border: 1.5px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.tema-opt:hover { border-color: var(--o); }
.tema-opt:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.tema-opt.is-active {
    border-color: var(--o);
    box-shadow: 0 0 0 3px rgb(from var(--o) r g b / .16);
}
/* Respaldo para el navegador sin rgb(from …): el anillo se dibuja con el
   borde, que ya lleva el color. Sin esto la selección se ve igual, sólo que
   sin halo. */
@supports not (color: rgb(from #000 r g b / .5)) {
    .tema-opt.is-active { box-shadow: inset 0 0 0 1px var(--o); }
}

.tema-bar { display: block; width: 100%; height: 26px; border-radius: 5px; background: var(--o); }
.tema-name { font-size: .84rem; font-weight: 600; color: var(--pc-heading); line-height: 1.2; }
.tema-hex { font-size: .72rem; color: var(--pc-muted-navy); font-variant-numeric: tabular-nums; }

.tema-band {
    /* Abajo a la derecha, a la altura del hex: encima de la barra de color
       la etiqueta se lee mal y además tapa justo lo que se viene a ver. */
    position: absolute; bottom: 11px; right: 10px;
    padding: 2px 8px; border-radius: 999px;
    font-size: .64rem; font-weight: 700; letter-spacing: .01em;
    background: var(--pc-surface);
}
.tema-band--libre  { color: #1f9d57; background: var(--pc-green-soft); }
.tema-band--neutro { color: var(--pc-text-muted); background: var(--pc-bg); }
.tema-band--ojo    { color: #96650b; background: var(--pc-amber-soft); }
.tema-band--evitar { color: var(--pc-coral); background: var(--pc-coral-soft); }


@media (max-width: 560px) {
    .tema-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tema-band { position: static; align-self: flex-start; }
}

/* El hex le deja sitio a la etiqueta y no se encabalgan. */
.tema-hex { padding-right: 72px; }
@media (max-width: 560px) { .tema-hex { padding-right: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   Configuración del sistema · autoguardado
   ══════════════════════════════════════════════════════════════════════════
   Sin botón de guardar, el aviso ES la interfaz: si no se ve que guardó, la
   pantalla no da confianza y la gente recarga para comprobar. Por eso hay dos
   avisos y no uno — el de arriba dice que ALGO se guardó, y el pegado al campo
   dice CUÁL.
   ────────────────────────────────────────────────────────────────────────── */

.cfg-etiqueta {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    font-size: .82rem; font-weight: 600; color: var(--pc-heading);
    margin-bottom: 6px;
}

.cfg-guardado,
.cfg-estado {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; letter-spacing: .01em;
    color: #1f9d57; background: var(--pc-green-soft);
    animation: cfg-aparece .18s ease-out;
}
.cfg-guardado.is-error,
.cfg-estado.is-error { color: var(--pc-coral); background: var(--pc-coral-soft); }

.cfg-estado { padding: 6px 14px; font-size: .78rem; }
.cfg-estado .icon { width: 15px; height: 15px; }
.cfg-estado[hidden], .cfg-guardado[hidden] { display: none; }

@keyframes cfg-aparece {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cfg-guardado, .cfg-estado { animation: none; }
}

.cfg-campo { display: block; min-width: 0; }
.cfg-ayuda { display: block; margin-top: 6px; color: var(--pc-text-muted); font-size: .75rem; line-height: 1.45; }

.cfg-input,
.cfg-select-tema {
    width: 100%;
    border: 1.5px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 10px 12px;
    background: var(--pc-surface);
    color: var(--pc-text);
    font: inherit; font-size: .9rem;
}
.cfg-input:focus, .cfg-select-tema:focus {
    outline: 0; border-color: var(--pc-accent); box-shadow: var(--pc-focus);
}
.cfg-input[type="color"] { padding: 4px; height: 44px; cursor: pointer; }
textarea.cfg-input { resize: vertical; min-height: 88px; }

/* El select vive arriba de los cuadros: es el control de verdad, y los
   cuadros son el mismo dato en grande. */
.cfg-select-tema { margin-bottom: 4px; }
.cfg-campo .tema-grid { margin-top: 12px; }

/* ── logotipo */
.cfg-imagen { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cfg-imagen__vista {
    display: grid; place-items: center;
    width: 76px; height: 76px; flex: 0 0 auto;
    border: 1.5px solid var(--pc-border); border-radius: var(--pc-radius);
    background: var(--pc-bg); overflow: hidden;
    color: var(--pc-muted-navy);
}
.cfg-imagen__vista img { width: 100%; height: 100%; object-fit: contain; }
.cfg-imagen__vista .icon { width: 30px; height: 30px; }
.cfg-imagen > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cfg-archivo { font-size: .84rem; max-width: 100%; }
.cfg-quitar[hidden] { display: none; }

@media (max-width: 720px) {
    .cfg-imagen { gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Configuración del sistema · las pestañas
   ══════════════════════════════════════════════════════════════════════════
   Cuatro secciones caben en una fila. En columna gastaban un tercio del ancho
   para cuatro renglones y dejaban apretados justo los campos donde se
   escriben domicilios largos.

   Forma: un control segmentado —la fila entera es una pieza, con las cuatro
   pastillas adentro y la abierta pintada del color de la clínica—. Se eligió
   sobre el subrayado fino porque el subrayado, cuando el panel de abajo es
   una tarjeta blanca, se lee como cuatro botones que resultaron estar en
   fila; la pieza con marco se lee como UN grupo del que hay una abierta, que
   es exactamente lo que es.

   `.cfg-tab` NO hereda de `.settings-nav__item`. Esa clase es de la barra
   vertical de «Sitio web» y traía `display:grid` a lo ancho: había que
   pelearle regla por regla, y si la hoja llegaba vieja al navegador las
   pestañas caían a esa forma vertical —o sea, se veían como si el cambio no
   se hubiera subido—. Ésta se define sola.
   ────────────────────────────────────────────────────────────────────────── */

.cfg-tabs {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 5px;
    border: 1px solid var(--pc-border);
    /* Radio concéntrico: el de adentro más el acolchado. Si no, la pastilla
       activa se ve descentrada en las esquinas. */
    border-radius: calc(var(--pc-radius) + 5px);
    background: var(--pc-surface);
    box-shadow: 0 1px 2px rgba(var(--pc-heading-rgb), .04);
    overflow-x: auto;
    scrollbar-width: none;
    /* Cuando el guion trae a la vista la pestaña que se abrió, el navegador
       la para justo en la orilla del marco y se ve cortada. `scroll-padding`
       le dice dónde está de verdad la orilla: a 5 px, la del acolchado. */
    scroll-padding-inline: 5px;
}
.cfg-tabs::-webkit-scrollbar { display: none; }

.cfg-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 15px;
    border: 0;
    border-radius: var(--pc-radius);
    background: transparent;
    color: var(--pc-muted-navy);
    font-family: var(--pc-font);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.cfg-tab__ico { display: inline-grid; place-items: center; }
.cfg-tab svg.icon { width: 17px; height: 17px; color: currentColor; }

.cfg-tab:hover { background: var(--pc-bg); color: var(--pc-heading); }

/* La abierta se pinta del color de la clínica, con blanco encima. Las diez
   variantes del selector están medidas contra blanco a 4.5:1 o más, así que
   este texto cumple con cualquiera que se elija. */
.cfg-tab.is-active,
.cfg-tab.is-active:hover {
    background: var(--pc-accent);
    color: #fff;
    box-shadow:
        0 1px 2px rgba(var(--pc-accent-rgb), .30),
        0 6px 14px -6px rgba(var(--pc-accent-rgb), .55);
}

/* Fuera de la pastilla, no dentro: dentro se pierde contra el color lleno. */
.cfg-tab:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }

/* El panel abierto recibe el foco al llegar con el tabulador, pero no tiene
   por qué dibujar un marco: no es un control, sólo un destino. */
.cfg-cuerpo .settings-panel:focus { outline: none; }

/* Con las pestañas arriba, el panel ya manda el título de la sección: el
   encabezado de adentro se queda con el resumen y suelta el icono grande. */
.cfg-cuerpo .settings-panel__head { margin-bottom: 18px; }

@media (max-width: 640px) {
    /* A lo ancho completo: así se nota que se desliza, en vez de quedar una
       pieza cortada a la mitad de la pantalla. */
    .cfg-tabs { width: auto; }
    .cfg-tab { padding: 9px 12px; font-size: .82rem; gap: 7px; }
    .cfg-tab svg.icon { width: 16px; height: 16px; }
}

/* A dos columnas desde que hay ancho: es lo que se ganó al quitar la columna
   lateral. Los campos marcados `wide` siguen ocupando la fila entera. */
.cfg-cuerpo .settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}
.cfg-cuerpo .settings-form-grid > .wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .cfg-cuerpo .settings-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Cada campo apila en columna y pega arriba.
   Antes heredaba `display:grid` del formulario del sitio, y con las filas
   estirándose el input de un campo SIN texto de ayuda bajaba ~14 px respecto
   del de al lado que sí lo tenía. Se veía como si los campos estuvieran
   descuadrados entre columnas, y lo estaban. */
.cfg-cuerpo .cfg-campo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.cfg-cuerpo .cfg-campo > .cfg-ayuda { margin-top: auto; padding-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   Pantalla de acceso · split-screen
   ══════════════════════════════════════════════════════════════════════════
   Panel de marca con el acento sólido a un lado, formulario en blanco al
   otro. En móvil se apila y el panel de color se vuelve una franja arriba.

   Relleno sólido, sin degradados: un degradado en un panel de este tamaño se
   ve barato y además parpadea al pintar.
   ────────────────────────────────────────────────────────────────────────── */

.auth-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;          /* el móvil, con su barra de direcciones */
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--pc-bg);
    font-family: var(--pc-font);
    color: var(--pc-text);
}

.auth-card {
    width: 100%;
    max-width: 940px;
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    min-height: 550px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--pc-surface);
    box-shadow: 0 24px 60px -20px rgba(var(--pc-heading-rgb), .35);
}

/* ── el panel de marca */
.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 40px 36px;
    background: var(--pc-accent);
    color: #fff;
}
.auth-brand__top { display: flex; align-items: center; gap: 12px; }
.auth-brand__chip {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}
.auth-brand__chip .icon { width: 22px; height: 22px; color: #fff; }
.auth-brand__chip img { width: 100%; height: 100%; object-fit: cover; }
.auth-brand__name { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }

.auth-brand h1 {
    margin: 0 0 12px;
    font-family: var(--pc-font-title);
    font-size: 1.7rem; line-height: 1.25; font-weight: 600;
    color: #fff;                  /* blanco puro para el título */
    text-wrap: balance;
}
/* El párrafo al 82 %: en gris se ensucia sobre el color. */
.auth-brand__lead { margin: 0 0 26px; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }

.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.auth-points li {
    display: grid; grid-template-columns: 20px minmax(0, 1fr);
    align-items: start; gap: 12px;
    font-size: .89rem; line-height: 1.45; color: rgba(255, 255, 255, .92);
}
.auth-points .icon { width: 19px; height: 19px; margin-top: 1px; }

.auth-brand__foot {
    display: flex; align-items: center; gap: 8px;
    margin: 0; font-size: .78rem; color: rgba(255, 255, 255, .68);
}
.auth-brand__foot .icon { width: 15px; height: 15px; }

/* ── el formulario */
.auth-form {
    display: flex; flex-direction: column; justify-content: center;
    padding: 48px 44px;
    min-width: 0;
}
.auth-form h2 {
    margin: 0 0 4px;
    font-family: var(--pc-font-title);
    font-size: 1.4rem; font-weight: 600; color: var(--pc-heading);
}
.auth-form__sub { margin: 0 0 26px; font-size: .9rem; color: var(--pc-text-muted); }
.auth-form label { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 600; color: var(--pc-heading); }

.auth-input {
    display: flex; align-items: center; gap: 10px;
    height: 48px; padding: 0 14px; margin: 0 0 18px;
    border: 1.5px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: var(--pc-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input:focus-within { border-color: var(--pc-accent); box-shadow: var(--pc-focus); }
.auth-input__ico { width: 19px; height: 19px; flex: 0 0 auto; color: var(--pc-muted-navy); transition: color .15s ease; }
.auth-input:focus-within .auth-input__ico { color: var(--pc-accent); }
.auth-input input {
    flex: 1 1 auto; min-width: 0; height: 100%;
    border: 0; outline: 0; background: transparent;
    font-family: var(--pc-font); font-size: .95rem; color: var(--pc-text);
}

/* Sin esto el autocompletado del navegador pinta el campo de amarillo y el
   formulario se ve sucio. */
.auth-input input:-webkit-autofill,
.auth-input input:-webkit-autofill:hover,
.auth-input input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--pc-surface) inset;
    -webkit-text-fill-color: var(--pc-text);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-eye {
    display: grid; place-items: center; position: relative;
    padding: 4px; border: 0; background: none; cursor: pointer;
    color: var(--pc-muted-navy);
}
.auth-eye:hover { color: var(--pc-accent); }
.auth-eye:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; border-radius: 6px; }
.auth-eye .icon { width: 19px; height: 19px; }
/* El pliego no trae un ojo tachado, así que la raya la dibuja el CSS. */
.auth-eye[aria-pressed="true"]::after {
    content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
    height: 1.6px; border-radius: 2px; background: currentColor;
    transform: rotate(-45deg);
}

.auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 50px; margin-top: 4px;
    border: 0; border-radius: var(--pc-radius);
    background: var(--pc-accent); color: #fff;
    font-family: var(--pc-font); font-size: .98rem; font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease;
}
.auth-btn:hover { filter: brightness(1.07); }
.auth-btn:active { transform: scale(.99); }
.auth-btn:focus-visible { outline: 2px solid var(--pc-heading); outline-offset: 2px; }
.auth-btn .icon { width: 18px; height: 18px; }

.auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 20px; padding: 11px 14px;
    border-radius: var(--pc-radius);
    font-size: .86rem; line-height: 1.45;
}
.auth-alert .icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.auth-alert--error { color: #8c2f2f; background: #fae6e6; }
.auth-alert--ok    { color: #17794a; background: var(--pc-green-soft); }

.auth-back { margin: 20px 0 0; text-align: center; }
.auth-back a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .84rem; color: var(--pc-text-muted); text-decoration: none;
}
.auth-back a:hover { color: var(--pc-accent); }
.auth-back .icon { width: 15px; height: 15px; }

/* ── apilado */
@media (max-width: 780px) {
    .auth-body { padding: 0; align-items: stretch; }
    .auth-card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 100dvh;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
    }
    .auth-brand { gap: 16px; padding: 26px 24px 28px; }
    .auth-brand h1 { font-size: 1.28rem; margin: 14px 0 6px; }
    .auth-brand__lead { margin: 0; font-size: .87rem; }
    /* De reojo, en un teléfono, los puntos de valor sólo estorban entre la
       marca y el campo del correo. */
    .auth-points, .auth-brand__foot { display: none; }
    .auth-form { padding: 30px 26px 40px; }
}

@media (max-width: 780px) and (min-height: 720px) {
    /* Con alto de sobra sí caben, y la puerta se ve menos desnuda. */
    .auth-points { display: grid; }
}

/* ============================================================================
   PAQUETE 2026-08-25b
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · EL NOMBRE DE UNA PERSONA ES UNA LIGA
   ----------------------------------------------------------------------------
   Regla de la casa: donde el sistema pinta el nombre de un paciente, un
   profesional, un usuario o un prospecto, ese nombre ABRE su ficha.

   Decisión de diseño: la liga NO se ve como liga en reposo. Si se pintaran
   trescientos nombres en azul subrayado, el panel se volvería un campo de
   minas y el ojo dejaría de distinguir qué es importante. En reposo el nombre
   se ve exactamente como antes; al pasar el ratón aparece el subrayado y una
   flechita. Así no se pierde nada de la lectura y sí se gana el destino.

   Lo pinta el helper `person_link()` de `app/Helpers/site_helper.php`. Ninguna
   vista arma su propio formato.
   ---------------------------------------------------------------------------- */
.pl {
    display: inline;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .14s ease, color .14s ease;
}
.pl:hover, .pl:focus-visible {
    color: var(--pc-accent);
    border-bottom-color: currentColor;
}
.pl:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; border-radius: 2px; }
/* La flecha sólo existe al pasar el ratón: en reposo no ocupa lugar ni
   desacomoda el renglón, porque se reserva su ancho desde el principio. */
.pl::after {
    content: "";
    display: inline-block;
    width: .62em; height: .62em;
    margin-left: .3em;
    vertical-align: -.02em;
    opacity: 0;
    background: currentColor;
    -webkit-mask: var(--pl-arrow) center / contain no-repeat;
    mask: var(--pl-arrow) center / contain no-repeat;
    transition: opacity .14s ease;
}
.pl:hover::after, .pl:focus-visible::after { opacity: .85; }
:root {
    --pl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
/* Cuando el nombre ya vive DENTRO de una liga que envuelve toda la fila, el
   chip no debe volver a decorar: heredaría dos subrayados. */
a .pl { border-bottom: 0; }
a .pl::after { content: none; }

/* Chip con iniciales para los listados que lo pidan. */
.pchip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pchip > .av {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--pc-accent-soft); color: var(--pc-accent);
    font-family: var(--pc-font-head); font-weight: 800; font-size: 12px;
}
.pchip--patient    > .av { background: var(--pc-blue-soft);   color: var(--pc-blue); }
.pchip--profesional > .av { background: var(--pc-green-soft);  color: #07855f; }
.pchip--usuario    > .av { background: var(--pc-purple-soft); color: var(--pc-purple); }
.pchip--prospecto  > .av { background: var(--pc-amber-soft);  color: #c97800; }

/* ----------------------------------------------------------------------------
   2 · INDICADORES EN EL TABLERO
   ---------------------------------------------------------------------------- */
.kpi-band {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px; margin-bottom: 22px;
}
.kpi-tile {
    position: relative; overflow: hidden;
    padding: 18px 20px; border-radius: var(--pc-radius-lg);
    background: var(--pc-surface); box-shadow: var(--pc-shadow);
}
.kpi-tile .kpi-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kpi-tile .kpi-ic {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border-radius: 11px; background: var(--pc-accent-soft); color: var(--pc-accent);
}
.kpi-tile .kpi-ic svg.icon { width: 19px; height: 19px; }
.kpi-tile .kpi-ic--green  { background: var(--pc-green-soft);  color: #07855f; }
.kpi-tile .kpi-ic--coral  { background: var(--pc-coral-soft);  color: #d95a12; }
.kpi-tile .kpi-ic--amber  { background: var(--pc-amber-soft);  color: #c97800; }
.kpi-tile .kpi-ic--blue   { background: var(--pc-blue-soft);   color: var(--pc-blue); }
.kpi-tile .kpi-ic--purple { background: var(--pc-purple-soft); color: var(--pc-purple); }
.kpi-tile .kpi-name {
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--pc-muted-navy); line-height: 1.3;
}
.kpi-tile .kpi-value {
    display: block; font-family: var(--pc-font-head); font-weight: 800;
    font-size: 30px; line-height: 1.05; color: var(--pc-heading);
    letter-spacing: -.015em;
}
.kpi-tile .kpi-foot { display: block; margin-top: 7px; font-size: 12.5px; color: var(--pc-text-muted); line-height: 1.45; }
.kpi-tile--alert { box-shadow: 0 0 0 1px #f6c7c4, var(--pc-shadow); }

/* Barrita de progreso dentro de la tarjeta, para los KPI que son porcentaje. */
/* La pista NO usa --pc-bg: ese azul es casi blanco y sobre la tarjeta blanca
   desaparecía, así que el 7.8 % se leía como un puntito rojo suelto en vez de
   como una barra corta dentro de una pista. */
.kpi-meter { display: block; margin-top: 12px; height: 6px; border-radius: 6px; background: #e9edf5; overflow: hidden; }
.kpi-meter > i { display: block; height: 100%; min-width: 6px; border-radius: 6px; background: var(--pc-accent); }
.kpi-meter--green  > i { background: #2eca6a; }
.kpi-meter--coral  > i { background: #e5484d; }

/* ----------------------------------------------------------------------------
   3 · LOS CHARTS
   ----------------------------------------------------------------------------
   Dibujados a mano en SVG. El panel es PWA y tiene que funcionar sin internet:
   no se puede colgar de un Chart.js de CDN. Además así pesan cero.
   ---------------------------------------------------------------------------- */
.chart-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 22px; }
.chart-card {
    padding: 20px 22px 16px; border-radius: var(--pc-radius-lg);
    background: var(--pc-surface); box-shadow: var(--pc-shadow);
    display: flex; flex-direction: column; min-width: 0;
}
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.chart-head h2 { margin: 3px 0 0; font-family: var(--pc-font-head); font-size: 18px; font-weight: 700; color: var(--pc-heading); }
.chart-head .chart-note { margin: 3px 0 0; font-size: 12.5px; color: var(--pc-text-muted); }
.chart-hero {
    font-family: var(--pc-font-head); font-weight: 800; font-size: 27px;
    line-height: 1; color: var(--pc-heading); letter-spacing: -.015em; white-space: nowrap;
}

/* -- área de ingresos ------------------------------------------------------ */
/* La caja del área conserva su proporción (600 x 200). Estirarla con
   `preserveAspectRatio="none"` dejaba los puntos convertidos en óvalos:
   `vector-effect` corrige el grosor del trazo, no la forma del círculo. */
.spark { width: 100%; height: auto; display: block; margin-top: 10px; }
.spark .grid-line { stroke: var(--pc-border); stroke-width: 1.4; }
.spark .area  { fill: url(#sparkFill); }
.spark .line  { fill: none; stroke: var(--pc-accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.spark .dot   { fill: var(--pc-surface); stroke: var(--pc-accent); stroke-width: 3; }
.spark .dot--last { fill: var(--pc-accent); }
.spark .xlab  { fill: var(--pc-muted-navy); font-size: 11px; font-family: var(--pc-font); text-anchor: middle; }
.spark .vlab  { fill: var(--pc-heading); font-size: 12px; font-weight: 700; font-family: var(--pc-font); text-anchor: middle; }
/* El punto que el ratón toca: un aro grande e invisible como blanco de clic. */
.spark .hit { fill: transparent; cursor: default; }
.spark .hit:hover + .dot, .spark .hit:focus + .dot { r: 6; }
/* Trazo animado al cargar: se dibuja de izquierda a derecha una sola vez. */
@media (prefers-reduced-motion: no-preference) {
    .spark .line { stroke-dasharray: var(--spark-len, 1200); stroke-dashoffset: var(--spark-len, 1200); animation: sparkDraw 1.1s cubic-bezier(.22,1,.36,1) .1s forwards; }
    .spark .area { opacity: 0; animation: sparkFade .7s ease .5s forwards; }
    .spark .dot  { opacity: 0; animation: sparkFade .3s ease .9s forwards; }
}
@keyframes sparkDraw { to { stroke-dashoffset: 0; } }
@keyframes sparkFade { to { opacity: 1; } }

/* -- arco de aceptación ---------------------------------------------------- */
.gauge-wrap { display: grid; place-items: center; padding: 6px 0 2px; }
.gauge { width: 100%; max-width: 230px; height: auto; display: block; }
.gauge .track { fill: none; stroke: var(--pc-bg); stroke-width: 13; stroke-linecap: round; }
.gauge .value { fill: none; stroke: url(#gaugeStroke); stroke-width: 13; stroke-linecap: round; }
/* 26 px es lo más grande que cabe DENTRO del anillo sin tocarlo: a 30 px el
   «66.7%» chocaba con el arco por los costados. */
.gauge .big  { fill: var(--pc-heading); font-family: var(--pc-font-head); font-weight: 800; font-size: 26px; text-anchor: middle; }
.gauge .sub  { fill: var(--pc-muted-navy); font-family: var(--pc-font); font-size: 9.5px; text-anchor: middle; letter-spacing: .1em; }
@media (prefers-reduced-motion: no-preference) {
    .gauge .value { stroke-dasharray: var(--gauge-len, 300); stroke-dashoffset: var(--gauge-len, 300); animation: gaugeDraw 1.2s cubic-bezier(.22,1,.36,1) .15s forwards; }
}
@keyframes gaugeDraw { to { stroke-dashoffset: var(--gauge-rest, 0); } }
.gauge-legend { display: grid; gap: 7px; margin-top: 12px; }
.gauge-legend div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.gauge-legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--pc-text); }
.gauge-legend b { color: var(--pc-heading); font-weight: 700; }

/* -- barra apilada del estado de las citas --------------------------------- */
/* Paleta validada con el comprobador de la guía de visualización: la banda de
   luminosidad, el piso de croma y la separación para visión normal pasan; la
   separación para daltonismo cae en 6.3 (banda 6-8), que sólo es admisible
   CON codificación secundaria — por eso cada segmento lleva su etiqueta con
   el número y hay leyenda además del color. */
.stack { display: flex; width: 100%; height: 30px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--pc-bg); margin: 14px 0 4px; }
.stack > span {
    display: grid; place-items: center; min-width: 0;
    font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap;
    transition: flex-basis .5s cubic-bezier(.22,1,.36,1);
}
.stack > span:first-child { border-radius: 7px 0 0 7px; }
.stack > span:last-child  { border-radius: 0 7px 7px 0; }
.stack .s-completed { background: #2eca6a; }
.stack .s-cancelled { background: #e8a33d; }
.stack .s-no_show   { background: #e5484d; }
.stack .s-open      { background: #4154f1; }
/* OJO: NO se llama `.chart-legend`. Ese nombre ya es del odontograma y su
   regla base trae `min-width: 880px`, porque esa rejilla mide eso de ancho.
   Heredarla aquí estiraba el tablero a 916 px en el teléfono. */
.kpi-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; min-width: 0; }
.kpi-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--pc-text); }
.kpi-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.kpi-legend b { color: var(--pc-heading); font-weight: 700; }

.chart-empty { display: grid; place-items: center; padding: 34px 16px; text-align: center; color: var(--pc-text-muted); font-size: 13px; }

@media (max-width: 1180px) {
    .kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .kpi-band { grid-template-columns: 1fr; }
    .kpi-tile .kpi-value { font-size: 26px; }
}

/* ----------------------------------------------------------------------------
   4 · USUARIOS · el look de Intelli-Realty
   ----------------------------------------------------------------------------
   Trasplantado tal cual de `public/assets/css/sections.css` de Intelli-Realty
   (bloque «Lote 5B · Usuarios»), porque los dos temas comparten exactamente
   las mismas variables `--pc-*`: no hubo que traducir ni un color.

   Lo único que cambió: allá los iconos son una tipografía (Remix Icon por
   CDN) y aquí son el sprite SVG propio, porque el panel funciona sin
   internet. Por eso los tamaños se fijan sobre `svg.icon` y no con font-size.
   ---------------------------------------------------------------------------- */
.access-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.access-page-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--pc-accent); }
.access-page-head .eyebrow svg.icon { width: 15px; height: 15px; }
.access-page-head h1 { margin: 6px 0 3px; font-size: 26px; font-weight: 700; color: var(--pc-heading); font-family: var(--pc-font-head); }
.access-page-head p { margin: 0; color: var(--pc-text-muted); font-size: 14px; }
.access-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.access-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.access-kpis article { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; position: relative; padding: 18px; border-radius: var(--pc-radius-lg); background: var(--pc-surface); box-shadow: var(--pc-shadow); min-width: 0; }
.access-kpi-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.access-kpi-icon svg.icon { width: 25px; height: 25px; }
.access-kpi-icon.violet { background: var(--pc-purple-soft); color: var(--pc-purple); }
.access-kpi-icon.green  { background: var(--pc-green-soft);  color: #07855f; }
.access-kpi-icon.blue   { background: var(--pc-blue-soft);   color: var(--pc-blue); }
.access-kpi-icon.pink   { background: #ffe9f3; color: #d63b74; }
.access-kpis strong { display: block; font-size: 26px; font-weight: 800; color: var(--pc-heading); font-family: var(--pc-font-head); line-height: 1; }
.access-kpis small  { display: block; margin-top: 3px; color: var(--pc-text-muted); font-size: 13px; }
.access-kpis em { position: absolute; top: 14px; right: 14px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--pc-muted-navy); background: var(--pc-bg); padding: 4px 8px; border-radius: 999px; }

.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-title-row h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--pc-heading); font-family: var(--pc-font-head); }
.section-title-row p { margin: 2px 0 0; color: var(--pc-text-muted); font-size: 13px; }

.role-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.role-card { padding: 18px; border-radius: 10px; background: var(--pc-surface); box-shadow: var(--pc-shadow); border-top: 3px solid var(--pc-accent); transition: transform .15s ease, box-shadow .15s ease; }
.role-card:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-hover); }
.role-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.role-card header span { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--pc-accent-soft); color: var(--pc-accent); }
.role-card header span svg.icon { width: 21px; height: 21px; }
.role-card header em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--pc-muted-navy); background: var(--pc-bg); padding: 4px 9px; border-radius: 999px; }
.role-card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--pc-heading); }
.role-card p { margin: 0 0 12px; font-size: 12.5px; color: var(--pc-text-muted); line-height: 1.5; min-height: 52px; }
.role-card a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--pc-accent); text-decoration: none; }
.role-card a svg.icon { width: 15px; height: 15px; }
.role-card a:hover { gap: 8px; }
.role-card.violet { border-top-color: var(--pc-purple); }
.role-card.violet header span { background: var(--pc-purple-soft); color: var(--pc-purple); }
.role-card.blue { border-top-color: var(--pc-blue); }
.role-card.blue header span { background: var(--pc-blue-soft); color: var(--pc-blue); }
.role-card.green { border-top-color: var(--pc-green); }
.role-card.green header span { background: var(--pc-green-soft); color: #07855f; }
.role-card.amber { border-top-color: var(--pc-amber); }
.role-card.amber header span { background: var(--pc-amber-soft); color: #c97800; }
.role-card.coral { border-top-color: var(--pc-coral); }
.role-card.coral header span { background: var(--pc-coral-soft); color: #d95a12; }

.access-users { padding: 0; overflow: visible; border-radius: var(--pc-radius-lg); background: var(--pc-surface); box-shadow: var(--pc-shadow); }
.access-users-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px; border-bottom: 1px solid var(--pc-border); }
.access-users-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--pc-heading); font-family: var(--pc-font-head); }
.access-users-head p { margin: 2px 0 0; color: var(--pc-text-muted); font-size: 13px; }
.access-user-tools form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.access-user-tools select { min-height: 42px; padding: 0 10px; border: 1px solid var(--pc-border); border-radius: 6px; background: #fff; color: var(--pc-heading); font-size: 13px; font-family: var(--pc-font); }
.table-search { display: flex; align-items: center; gap: 7px; width: 240px; min-height: 42px; padding: 0 12px; border: 1px solid var(--pc-border); border-radius: 6px; background: #fff; color: var(--pc-muted-navy); }
.table-search svg.icon { width: 16px; height: 16px; flex: none; }
.table-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--pc-text); font-family: var(--pc-font); }

.access-table-wrap { overflow-x: auto; }
.access-user-table { width: 100%; border-collapse: collapse; }
.access-user-table th, .access-user-table td { padding: 14px; border-bottom: 1px solid var(--pc-border); text-align: left; vertical-align: middle; }
.access-user-table th { background: var(--pc-bg); color: var(--pc-heading); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.access-user-table tbody tr:hover { background: var(--pc-accent-soft); }
.access-user-table tbody tr:last-child td { border-bottom: 0; }
.access-user-table .text-end { text-align: right; }
.access-user-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.access-user-identity strong { display: block; font-size: 14px; color: var(--pc-heading); }
.access-user-identity small { display: block; color: var(--pc-text-muted); font-size: 12px; overflow-wrap: anywhere; }

.user-avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0; overflow: visible; font-family: var(--pc-font-head); }
.user-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.user-avatar.tone-1 { background: #7239ea; }
.user-avatar.tone-2 { background: #2f80ed; }
.user-avatar.tone-3 { background: #2eca6a; }
.user-avatar.tone-4 { background: #f5a524; }
.user-avatar.tone-5 { background: #ff771d; }
.user-avatar i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--pc-surface); background: #c4cbda; }
.user-avatar i.online { background: #2eca6a; }

.stage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.stage-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.stage-pill.violet { background: var(--pc-purple-soft); color: #6942dd; }
.stage-pill.blue   { background: var(--pc-blue-soft);   color: #237eb8; }
.stage-pill.green  { background: var(--pc-green-soft);  color: #07855f; }
.stage-pill.amber  { background: var(--pc-amber-soft);  color: #c97800; }
.stage-pill.coral  { background: var(--pc-coral-soft);  color: #d95a12; }
.stage-pill.indigo { background: var(--pc-accent-soft); color: var(--pc-accent); }
.pill-stack { display: flex; flex-wrap: wrap; gap: 5px; }

.contact-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.contact-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.contact-status.active   { color: #07855f; }
.contact-status.inactive { color: #98a2b3; }

.user-actions-menu { position: relative; display: inline-block; }
.user-actions-menu summary { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--pc-muted-navy); background: var(--pc-bg); }
.user-actions-menu summary::-webkit-details-marker { display: none; }
.user-actions-menu summary svg.icon { width: 17px; height: 17px; }
.user-actions-menu summary:hover { background: var(--pc-accent-soft); color: var(--pc-accent); }
.user-actions-menu[open] summary { background: var(--pc-accent); color: #fff; }
.user-actions-menu > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; background: #fff; border: 1px solid var(--pc-border); border-radius: 10px; box-shadow: var(--pc-shadow-hover); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.user-actions-menu > div a, .user-actions-menu > div button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; border: 0; background: transparent; border-radius: 7px; font-size: 13px; color: var(--pc-heading); text-decoration: none; cursor: pointer; text-align: left; font-family: var(--pc-font); }
.user-actions-menu > div a svg.icon, .user-actions-menu > div button svg.icon { width: 16px; height: 16px; flex: none; }
.user-actions-menu > div a:hover, .user-actions-menu > div button:hover { background: var(--pc-accent-soft); color: var(--pc-accent); }

.crm-directory-empty { display: grid; place-items: center; padding: 60px 20px; text-align: center; }
.crm-directory-empty > span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--pc-accent-soft); color: var(--pc-accent); }
.crm-directory-empty > span svg.icon { width: 27px; height: 27px; }
.crm-directory-empty h3 { margin: 13px 0 3px; font-size: 16px; color: var(--pc-heading); }
.crm-directory-empty p { margin: 0 0 13px; color: var(--pc-text-muted); font-size: 13px; }

@media (max-width: 1180px) { .access-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .access-kpis { grid-template-columns: 1fr; } .table-search { width: 100%; } .access-user-tools form { width: 100%; } }

/* Las etiquetas del eje X del área van fuera del SVG estirado. */
.spark-labels { display: flex; justify-content: space-between; margin-top: 8px; gap: 4px; }
.spark-labels span { display: grid; gap: 2px; text-align: center; min-width: 0; }
.spark-labels b { font-size: 11px; font-weight: 600; color: var(--pc-muted-navy); }
.spark-labels em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--pc-heading); }
.spark-labels .is-last b { color: var(--pc-accent); }
.pf-meta > p span { display: inline-flex; align-items: center; gap: 6px; }
.pf-meta > p svg.icon, .pf-roles span svg.icon { width: 15px; height: 15px; }
.pf-meta .eyebrow { display: inline-flex; align-items: center; gap: 6px; }
.pf-meta .eyebrow svg.icon { width: 14px; height: 14px; }
/* Los cuatro campos del alta de acceso en dos columnas: el formulario de una
   sola columna dejaba media pantalla vacía. */
.stacked-form--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stacked-form--cols > button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 720px) { .stacked-form--cols { grid-template-columns: 1fr; } }

/* En el teléfono el encabezado de sección y el de cada chart NO pueden ir en
   una sola fila: el botón se encimaba sobre «Mes en curso» y el importe
   grande estrujaba el título del chart hasta partirlo en tres renglones. */
@media (max-width: 760px) {
    .section-title-row { flex-wrap: wrap; }
    .section-title-row > * { flex: 1 1 100%; }
    .chart-head { flex-wrap: wrap; }
    .chart-head > div { flex: 1 1 100%; }
    .chart-hero { font-size: 24px; }
    .kpi-tile .kpi-value { font-size: 27px; }
}