/*
 * GnoScribe (by Sophium) — physician workspace styles.
 * Checkpoint 5A-UX: a small, reusable visual foundation (tokens + a handful of primitives) shared by the login / new-consultation,
 * live-consultation and review pages. System fonts only, no external assets. The semantic classes used by the page scripts
 * (fact-*, evidence-*, transcript-*, dev-*, final-content, ...) are kept and restyled with the same tokens.
 */

:root {
    color-scheme: light;

    /* Sophium brand: deep navy primary, muted blue-gray secondary, a restrained gold accent (the logo's central element).
       Clinical status colors (success/warning/danger/info/status-active) are deliberately independent of the brand palette. */
    --background: #f5f7fa;
    --surface: #ffffff;
    --surface-subtle: #f6f8fb;
    --border: #dde3ec;
    --border-strong: #c3cddb;
    --text: #172033;
    --text-muted: #5b6b82;
    --primary: #1f3a68;
    --primary-hover: #172d52;
    --primary-soft: #eaeff7;
    --accent-gold: #b8913a;
    --status-active: #0f6570;
    --status-active-soft: #e4f2f3;
    --status-active-border: #b3d8db;
    --success: #1f7a45;
    --success-soft: #e7f5ec;
    --warning: #8a5a00;
    --warning-soft: #fdf3dc;
    --danger: #b3261e;
    --danger-soft: #fdeceb;
    --info: #1d4f91;
    --info-soft: #eaf1fb;
    --focus: #4a6fa5;

    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06);
    --shadow-card: 0 1px 3px rgba(23, 32, 51, 0.06), 0 1px 2px rgba(23, 32, 51, 0.04);
    --control-height: 42px;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* An element hidden with the `hidden` attribute must stay hidden even when a component rule sets `display`. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-size: 0.975rem;
}

h1,
h2,
h3 {
    line-height: 1.25;
    margin: 0 0 8px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.1rem;
}

h3 {
    font-size: 1rem;
}

a {
    color: var(--primary);
}

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

/* ------------------------------------------------------------------ application shell */

.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.app-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.15;
    text-decoration: none;
    color: var(--text);
    flex-shrink: 0;
}

/* The official Sophium symbol, shown beside the GnoScribe wordmark (cropped from the supplied horizontal logo, which is illegible at header height),
   next to the text wordmark. Decorative: the wordmark remains the link's accessible name. */
.brand-symbol {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: var(--primary);
}

.brand-product {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.app-nav {
    display: flex;
    gap: 18px;
    margin-left: 24px;
    margin-right: auto;
}

.app-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 4px 2px;
    border-bottom: 2px solid transparent;
}

.app-nav a:hover {
    color: var(--primary);
}

.app-nav a[aria-current="page"] {
    color: var(--primary);
    border-bottom-color: var(--accent-gold);
}

/* Checkpoint 5D-A — "Sair" sits at the far right of every page header, after the environment badge. */
.sign-out-btn {
    flex-shrink: 0;
}

.app-shell-alert {
    max-width: 1180px;
    margin: 0 auto 10px;
}

/* Checkpoint 5D-A — a page entering/restored from the back/forward cache stays invisible until bfcache-guard.js has
   revalidated access (or reloaded), so a signed-out browser never redisplays a previous physician's clinical content. */
/* Checkpoint 5D-B2 — the same concealment is used while revalidating after a resume and while ending the login locally. Only the
   small revalidation panel (no clinical content) may stay visible. */
.app-concealed body > *:not(.auth-shell-overlay) {
    visibility: hidden;
}

.auth-shell-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(23, 32, 42, 0.18);
    padding: 22px 24px;
    text-align: center;
}

.auth-shell-overlay p {
    margin: 0 0 16px;
}

/* Checkpoint 6C-C — non-blocking session-renewal outcome (plain text + one optional explicit action). */
.session-notice {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    max-width: min(640px, calc(100vw - 32px));
    padding: 12px 16px;
    border: 1px solid var(--border, #d0d7de);
    border-radius: 10px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.session-notice p {
    margin: 0;
    flex: 1 1 260px;
}

.env-badge,
.dev-badge {
    display: inline-block;
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid #ecd39a;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 9px;
    border-radius: 999px;
}

/* ------------------------------------------------------------------ page containers */

.page,
.workspace {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 24px 64px;
}

.page-narrow {
    max-width: 760px;
}

/* ------------------------------------------------------------------ login (login.html while the login form is shown)
   `page-auth` is removed by login-page.js when the page becomes "Nova consulta", which restores the normal header and layout. */

.page-auth {
    max-width: 1040px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px;
}

/* The login composition carries its own brand panel; the application header (navigation, "Sair") belongs to signed-in pages. */
body:has(#page-main.page-auth) .app-header {
    display: none;
}

#page-title:empty,
#page-subtitle:empty {
    display: none;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(23, 32, 51, 0.12), 0 2px 6px rgba(23, 32, 51, 0.05);
    overflow: hidden;
}

.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 72px;
    padding: 44px 44px 48px;
    color: #ffffff;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, #22406f 0%, var(--primary) 45%, #152a4d 100%);
    overflow: hidden;
}

/* Subtle detailing: a faint outlined frame and a thin gold rule — decorative only, never an approximation of the Sophium symbol. */
.login-brand::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    box-shadow: 0 0 0 36px rgba(255, 255, 255, 0.025), 0 0 0 72px rgba(255, 255, 255, 0.02);
    pointer-events: none;
}

.login-brand-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.login-brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.login-brand-product {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d9c28a;
}

.login-brand-message {
    position: relative;
    z-index: 1;
    max-width: 400px;
}

.login-brand-message::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent-gold);
    margin-bottom: 20px;
}

.login-brand-headline {
    margin: 0 0 14px;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.login-brand-text {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.82);
}

.login-panel {
    padding: 48px 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-title {
    margin: 0 0 6px;
    font-size: 1.6rem;
    color: var(--primary);
}

.login-subtitle {
    margin: 0 0 24px;
    color: var(--text-muted);
}

.login-panel .login-form label {
    margin-bottom: 6px;
}

.login-panel .login-form input {
    min-height: 48px;
    padding: 10px 14px;
    margin-bottom: 18px;
}

.login-form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
}

.login-footer {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 760px) {
    .page-auth {
        justify-content: flex-start;
        padding: 16px 14px 32px;
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    /* Phone: a compact brand band above the form — the login form comes first in visual weight. */
    .login-brand {
        gap: 14px;
        padding: 22px 22px 24px;
    }

    .login-brand::after {
        display: none;
    }

    .login-brand-message::before {
        margin-bottom: 12px;
    }

    .login-brand-headline {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .login-brand-text {
        font-size: 0.9rem;
    }

    .login-panel {
        padding: 26px 22px 24px;
    }

    .login-title {
        font-size: 1.35rem;
    }
}

.stack > * + * {
    margin-top: 16px;
}

.page-title {
    margin: 0 0 4px;
}

.subtitle,
.helper {
    color: var(--text-muted);
    margin: 0 0 16px;
}

.helper {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.helper-tight {
    margin-top: -8px;
}

.eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------ surfaces */

.card,
.surface,
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 16px;
}

.panel {
    padding: 0;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-subtle);
}

.panel-title {
    margin: 0;
    font-size: 1rem;
}

.panel-body {
    padding: 8px 20px 16px;
}

.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* ------------------------------------------------------------------ buttons */

button,
.btn {
    font: inherit;
    font-weight: 600;
    min-height: var(--control-height);
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* A link styled as a button reads as a button: centered label, no underline, same colors as <button>. */
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    white-space: nowrap;
}

a.btn.btn-secondary {
    color: var(--primary);
}

button:hover:not(:disabled),
.btn:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

button.secondary,
.btn-secondary {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--border-strong);
}

button.secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
    background: var(--primary-soft);
    border-color: var(--primary);
}

button.danger,
.btn-danger,
.fact-actions button.danger {
    background: var(--surface);
    color: var(--danger);
    border-color: #e3b5b1;
}

button.danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
    background: var(--danger-soft);
    border-color: var(--danger);
}

.btn-sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.9rem;
}

.btn-lg {
    min-height: 48px;
    padding: 0 26px;
    font-size: 1.02rem;
}

button:disabled,
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

button.secondary:disabled,
.btn-secondary:disabled {
    background: var(--surface-subtle);
    color: var(--text-muted);
    border-color: var(--border);
    opacity: 0.8;
}

button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.actions,
.consult-actions,
.picker-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.actions {
    margin-bottom: 16px;
}

.picker-actions {
    justify-content: flex-end;
    margin-top: 8px;
}

/* ------------------------------------------------------------------ forms */

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
.field,
select,
textarea {
    font: inherit;
    color: var(--text);
    width: 100%;
    min-height: var(--control-height);
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}

textarea {
    min-height: 72px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 0;
    border-color: var(--primary);
}

input::placeholder {
    color: #8492a1;
}

/* ------------------------------------------------------------------ alerts / banners */

.alert,
.error-banner,
.notice-banner,
.info-banner {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin: 0 0 16px;
}

.alert-error,
.error-banner {
    background: var(--danger-soft);
    border-color: #efc3bf;
    color: #5f1a15;
}

/* A warning shown in an error slot (e.g. the Live page: the consultation is in progress, only live transcription is unavailable). */
.alert[data-severity="warning"] {
    background: var(--warning-soft);
    border-color: #ecd39a;
    color: #5c3d00;
}

.alert-info,
.notice-banner,
.info-banner {
    background: var(--info-soft);
    border-color: #c3d6ee;
    color: #163a6b;
}

.alert-info strong {
    display: block;
    margin-bottom: 4px;
}

.empty-state {
    color: var(--text-muted);
    margin: 0;
}

.progress-text {
    color: var(--text-muted);
    margin: 0 0 16px;
}

/* ------------------------------------------------------------------ status badges / chips (text always carries the meaning) */

.badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-subtle);
    color: var(--text-muted);
    white-space: nowrap;
}

.badge::before,
.chip::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

[data-tone="neutral"] {
    color: #3b4a5a;
    background: var(--surface-subtle);
    border-color: var(--border-strong);
}

[data-tone="active"] {
    color: var(--status-active);
    background: var(--status-active-soft);
    border-color: var(--status-active-border);
}

[data-tone="ok"] {
    color: var(--success);
    background: var(--success-soft);
    border-color: #b9dfc8;
}

[data-tone="warning"] {
    color: var(--warning);
    background: var(--warning-soft);
    border-color: #ecd39a;
}

[data-tone="muted"] {
    color: var(--text-muted);
    background: var(--surface-subtle);
    border-color: var(--border);
}

/* ------------------------------------------------------------------ consultation header (live / review) */

.consult-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "patient actions";
    gap: 12px 24px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 22px;
    margin-bottom: 16px;
}

.consult-header .patient-block {
    grid-area: patient;
}

.consult-header .consult-actions {
    grid-area: actions;
    justify-self: end;
}

/* Consultation state + connection + transcription read as ONE compact group, right under the patient. */
.consult-status {
    display: flex;
    gap: 6px 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10px;
}

.patient-name {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.patient-detail {
    margin: 2px 0 0;
    color: #364454;
    font-size: 1.02rem;
    font-weight: 500;
}

details.change-patient {
    margin-top: 10px;
}

details.change-patient > summary {
    display: inline-block;
    cursor: pointer;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 2px 0;
}

details.change-patient[open] > summary {
    margin-bottom: 12px;
}

details.change-patient .picker-body {
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    max-width: 640px;
}

/* ------------------------------------------------------------------ new consultation / patient picker */

.picker-surface {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}

.picker-title {
    margin: 0 0 4px;
}

.or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 14px 0;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---- "Nova consulta" (login.html after sign-in). Scoped to #create-session-section: the same picker on the Live page keeps its look. */

#page-main.page-narrow #page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary);
    margin: 8px 0 4px;
}

#page-main.page-narrow #page-subtitle {
    margin-bottom: 24px;
}

#create-session-section .picker-surface {
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 24px 28px 26px;
}

#create-session-section .picker-title {
    font-size: 1.1rem;
    color: var(--primary);
}

#create-session-section .picker-title + .helper {
    margin-bottom: 16px;
}

#create-session-section label {
    margin-bottom: 6px;
}

#create-session-section input.field {
    min-height: 46px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

#create-session-section input[type="search"].field {
    min-height: 48px;
    padding-left: 42px;
    margin-bottom: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
}

#create-session-section .picker-surface > .patient-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#create-session-section .picker-surface > .patient-list:empty {
    display: none;
}

#create-session-section .patient-row {
    padding: 12px 16px;
    border-radius: 0;
}

#create-session-section .patient-row-name {
    color: var(--text);
}

#create-session-section .patient-row-detail {
    color: var(--text-muted);
    font-size: 0.88rem;
}

#create-session-section .patient-row .btn {
    min-width: 116px;
    flex-shrink: 0;
}

/* Existing-patient card (the picker's first section): slightly tighter than the new-patient form. */
#create-session-section section.picker-surface:first-of-type {
    padding: 20px 28px 20px;
}

#create-session-section section.picker-surface:first-of-type .picker-title + .helper {
    margin-bottom: 12px;
}

#create-session-section section.picker-surface:first-of-type input[type="search"].field {
    margin-bottom: 10px;
}

#create-session-section section.picker-surface:first-of-type .patient-row {
    padding: 10px 16px;
}

#create-session-section .or-divider {
    margin: 14px 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#create-session-section .or-divider span {
    padding: 3px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

#create-session-section .helper-tight {
    margin-top: -10px;
}

#create-session-section .picker-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

#create-session-section .picker-actions .btn-primary {
    min-height: 46px;
    padding: 0 24px;
}

@media (max-width: 640px) {
    #page-main.page-narrow #page-title {
        font-size: 1.45rem;
    }

    #create-session-section .picker-surface,
    #create-session-section section.picker-surface:first-of-type {
        padding: 18px 16px 20px;
    }

    #create-session-section .patient-row {
        padding: 12px;
    }

    #create-session-section .picker-actions .btn-primary {
        width: 100%;
    }
}

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

.patient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 6px;
    border-top: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.patient-row:first-child {
    border-top: 0;
}

.patient-row:hover {
    background: var(--surface-subtle);
}

.patient-row-identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.patient-row-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.patient-row-detail {
    color: #364454;
    font-size: 0.92rem;
}

/* ------------------------------------------------------------------ page heading (title + subtitle, primary action aside) */

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin: 8px 0 20px;
}

.page-heading-text {
    min-width: 0;
}

.page-heading .page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.page-heading .subtitle {
    margin: 0;
}

/* ------------------------------------------------------------------ "Consultas" list (scoped: the picker's rows keep their own look) */

.consultation-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.consultation-list:empty {
    display: none;
}

.consultation-list .patient-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto) minmax(170px, auto);
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: 0;
    border-top: 1px solid var(--border);
}

.consultation-list .patient-row:first-child {
    border-top: 0;
}

.consultation-list .patient-row:hover {
    background: var(--surface-subtle);
}

.consultation-list .patient-row-name {
    font-size: 1rem;
    color: var(--text);
}

.consultation-list .patient-row-detail {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.consultation-list .badge {
    justify-self: start;
}

.consultation-list .btn {
    justify-self: end;
    min-width: 170px;
}

.consultation-empty {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 28px 20px;
    text-align: center;
}

.alert-info .patient-list {
    margin-top: 6px;
}

.alert-info .patient-row {
    border-top-color: #c3d6ee;
}

/* ------------------------------------------------------------------ Live page (scoped to .live-workspace; Review keeps its header) */

.live-workspace .live-consult-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "patient lifecycle"
        "capture capture";
    align-items: start;
    gap: 16px 24px;
    padding: 22px 26px 0;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 18px;
}

.live-workspace .patient-name {
    color: var(--primary);
    font-size: 1.7rem;
}

.live-workspace .patient-detail {
    color: var(--text-muted);
    font-size: 0.98rem;
}

.live-workspace .consult-status {
    margin-top: 12px;
}

.live-workspace .consult-status:not(:has(:not([hidden]))) {
    display: none;
}

.live-workspace .lifecycle-actions {
    grid-area: lifecycle;
    justify-self: end;
    align-self: center;
}

/* Nothing to do in the lifecycle group (e.g. a completed consultation): no empty slot. */
.live-workspace .lifecycle-actions:not(:has(button:not([hidden]))) {
    display: none;
}

/* Microphone and transcription: a separate strip along the bottom of the card, with its own status on the left. */
.live-workspace .capture-bar {
    grid-area: capture;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 -26px;
    padding: 12px 26px;
    background: var(--surface-subtle);
    border-top: 1px solid var(--border);
}

.live-workspace .capture-status,
.live-workspace .capture-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.live-workspace .capture-actions {
    margin-left: auto;
}

/* The transcript is the page's main content: a taller, calmer reading area. */
.live-workspace .transcript-panel {
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.live-workspace .transcript-panel .panel-header {
    background: var(--surface);
    padding: 16px 24px;
}

.live-workspace .transcript-panel .panel-title {
    color: var(--primary);
    font-size: 1.05rem;
}

.live-workspace .transcript-panel .panel-body {
    padding: 4px 24px 20px;
    min-height: 300px;
}

/* Taller scroll area for long conversations; no minimum on the list itself, so the interim line follows the last segment. */
.live-workspace #transcript-list {
    max-height: min(66vh, 760px);
    min-height: 0;
}

.live-workspace #transcript-list li {
    gap: 14px;
    padding: 12px 0;
    line-height: 1.6;
}

.live-workspace .transcript-time {
    min-width: 3.5em;
}

.live-workspace .transcript-text {
    font-size: 1rem;
}

.live-workspace .transcript-empty {
    padding: 56px 16px 60px;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Decorative only: a neutral "lines of text" mark above the existing empty-state message. */
.live-workspace .transcript-empty::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231f3a68' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='7' x2='19' y2='7'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cline x1='5' y1='17' x2='13' y2='17'/%3E%3C/svg%3E")
        center / 22px no-repeat,
        var(--primary-soft);
}

.live-workspace .interim-line {
    border-left-color: var(--status-active);
}

@media (max-width: 760px) {
    .live-workspace .live-consult-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "patient"
            "lifecycle"
            "capture";
        padding: 18px 16px 0;
    }

    .live-workspace .live-consult-header .lifecycle-actions {
        justify-self: stretch;
    }

    .live-workspace .lifecycle-actions button {
        flex: 1 1 auto;
    }

    .live-workspace .patient-name {
        font-size: 1.4rem;
    }

    .live-workspace .capture-bar {
        margin: 0 -16px;
        padding: 12px 16px;
    }

    .live-workspace .capture-actions {
        margin-left: 0;
        width: 100%;
    }

    .live-workspace .capture-actions button {
        flex: 1 1 0;
    }

    .live-workspace .transcript-panel .panel-header,
    .live-workspace .transcript-panel .panel-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .live-workspace .transcript-panel .panel-body {
        min-height: 220px;
    }
}

/* ------------------------------------------------------------------ live transcript workspace */

.workspace-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 1024px) {
    /* Room for a second clinical panel later (e.g. facts); today the live page has only the transcript, which then uses the full width. */
    .workspace-split.has-two {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.transcript-panel .panel-body {
    padding-top: 4px;
}

#transcript-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(58vh, 560px);
    min-height: 120px;
    overflow-y: auto;
}

#transcript-list li {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f3;
    align-items: baseline;
}

.transcript-time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.transcript-speaker {
    color: var(--text-muted);
    flex: 0 0 auto;
    font-size: 0.8rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0 8px;
}

.transcript-text {
    flex: 1 1 auto;
    max-width: 78ch;
    overflow-wrap: anywhere;
}

.transcript-empty {
    margin: 0;
    padding: 28px 8px;
    text-align: center;
    color: var(--text-muted);
}

.interim-line {
    font-style: italic;
    color: var(--text-muted);
    padding: 10px 12px;
    margin-top: 8px;
    background: var(--surface-subtle);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ development-only provisioning */

.dev-section {
    border-color: #ecd39a;
    background: #fffbf1;
}

/* Development-only provisioning, collapsed by default below the login composition (revealed only by login-page.js). */
.dev-tools {
    margin-top: 20px;
    border: 1px dashed #e2c98c;
    border-radius: var(--radius-md);
}

.dev-tools summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.dev-tools summary::-webkit-details-marker {
    display: none;
}

.dev-tools summary::before {
    content: "▸";
    font-size: 0.8rem;
    transition: transform 0.12s ease;
}

.dev-tools details[open] > summary::before {
    transform: rotate(90deg);
}

.dev-tools-body {
    padding: 0 16px 16px;
}

.dev-message {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.dev-message-success {
    background: var(--success-soft);
    border: 1px solid #b9dfc8;
    color: #1e4d2b;
}

.dev-message-error {
    background: var(--danger-soft);
    border: 1px solid #efc3bf;
    color: #5f1a15;
}

/* ------------------------------------------------------------------ review page (facts, evidence, documents) */

.fact-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.fact-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--surface);
}

.fact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.fact-eyebrow {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fact-statement {
    font-size: 1rem;
    margin: 0 0 8px;
}

.fact-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.fact-badge-pending {
    background: var(--warning-soft);
    color: var(--warning);
}

.fact-badge-accepted {
    background: var(--success-soft);
    color: var(--success);
}

.fact-badge-rejected {
    background: var(--danger-soft);
    color: var(--danger);
}

.fact-badge-corrected {
    background: var(--info-soft);
    color: var(--info);
}

.fact-corrected-block {
    background: var(--surface-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin: 8px 0;
}

.fact-corrected-block dt {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

.fact-corrected-block dt:first-child {
    margin-top: 0;
}

.fact-corrected-block dd {
    margin: 2px 0 0;
}

.fact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.evidence-toggle {
    background: none;
    border: none;
    color: var(--primary);
    padding: 4px 0;
    min-height: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
}

.evidence-toggle:hover:not(:disabled) {
    background: none;
    color: var(--primary-hover);
}

.evidence-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.evidence-list li {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f3;
    align-items: baseline;
}

.correct-editor {
    margin-top: 8px;
}

.correct-editor textarea {
    min-height: 80px;
    margin-bottom: 8px;
    resize: vertical;
}

#document-selector-wrapper {
    margin-bottom: 16px;
}

#document-selector {
    margin-bottom: 0;
}

.document-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.document-editor-header label {
    margin-bottom: 0;
}

.badge-changed {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--warning);
    background: var(--warning-soft);
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#document-editor {
    min-height: 200px;
    resize: vertical;
    margin: 6px 0 10px;
}

#document-editor[readonly] {
    background: var(--surface-subtle);
}

.final-content {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin: 8px 0;
}

.original-content {
    background: var(--warning-soft);
    border-color: #ecd39a;
}

/* ------------------------------------------------------------------ review page (Checkpoint 5C — amendments/history) */

#amendments-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

#amendments-section h3 {
    margin-bottom: 4px;
}

#amendment-reconciliation-banner .actions {
    margin-top: 8px;
}

.amendment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.amendment-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--surface-subtle);
}

.amendment-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.amendment-number {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--info);
    background: var(--info-soft);
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.amendment-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.amendment-content {
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

#amendment-form-wrapper {
    margin-top: 8px;
}

#amendment-input {
    min-height: 90px;
    resize: vertical;
    margin: 6px 0 10px;
}

.confirm-dialog {
    max-width: 440px;
    width: calc(100% - 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: 0 10px 30px rgba(23, 32, 42, 0.18);
}

.confirm-dialog::backdrop {
    background: rgba(23, 32, 42, 0.42);
}

.confirm-dialog h2 {
    margin: 0 0 12px;
}

.confirm-dialog p {
    margin: 0 0 20px;
}

.confirm-dialog .actions {
    margin-bottom: 0;
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ Review page (scoped to .review-workspace; presentation only)
   Hierarchy: patient/consultation context → AI-identified facts (each with its review state and traceable evidence) → clinical
   documentation (editable draft, then read-only final text and amendments). Review state is carried by the existing badge TEXT;
   colour and the left accent only reinforce it. */

.review-workspace .consult-header {
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 22px 26px;
    margin-bottom: 18px;
}

.review-workspace .patient-name {
    color: var(--primary);
    font-size: 1.7rem;
}

.review-workspace .patient-detail {
    color: var(--text-muted);
    font-size: 0.98rem;
}

.review-workspace .consult-status {
    margin-top: 12px;
}

.review-workspace #facts-card,
.review-workspace #document-card {
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 24px 26px 26px;
    margin-bottom: 18px;
}

.review-workspace #facts-card > h2,
.review-workspace #document-card > h2 {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.review-workspace #facts-card > .progress-text,
.review-workspace #document-card > .progress-text {
    margin-bottom: 18px;
}

/* ---- facts: one card per AI proposal; the left accent follows the review state shown by its badge */

.review-workspace .fact-list {
    gap: 14px;
}

.review-workspace .fact-card {
    position: relative;
    border-radius: 10px;
    border-left: 4px solid var(--border-strong);
    padding: 16px 20px 16px 18px;
}

.review-workspace .fact-card:has(.fact-badge-pending) {
    border-left-color: #d9a932;
    background: #fffdf7;
}

.review-workspace .fact-card:has(.fact-badge-accepted) {
    border-left-color: var(--success);
}

.review-workspace .fact-card:has(.fact-badge-corrected) {
    border-left-color: var(--info);
}

.review-workspace .fact-card:has(.fact-badge-rejected) {
    border-left-color: var(--danger);
}

/* A rejected proposal stays fully readable (it is part of the record), only visually quieter. */
.review-workspace .fact-card:has(.fact-badge-rejected) .fact-statement {
    color: var(--text-muted);
}

.review-workspace .fact-badge {
    border: 1px solid transparent;
}

.review-workspace .fact-badge-pending {
    border-color: #ecd39a;
}

.review-workspace .fact-badge-accepted {
    border-color: #b9dfc8;
}

.review-workspace .fact-badge-corrected {
    border-color: #c3d6ee;
}

.review-workspace .fact-badge-rejected {
    border-color: #efc3bf;
}

.review-workspace .fact-statement {
    font-size: 1.02rem;
    line-height: 1.55;
    margin-bottom: 10px;
}

.review-workspace .fact-corrected-block {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 14px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 4px 0 12px;
}

.review-workspace .fact-corrected-block dt {
    margin-top: 0;
    align-self: baseline;
}

.review-workspace .fact-corrected-block dd {
    margin: 0;
    align-self: baseline;
}

/* The physician's correction is the effective text: slightly emphasised next to the preserved AI original. */
.review-workspace .fact-corrected-block dd:last-of-type {
    font-weight: 600;
    color: var(--info);
}

/* ---- evidence: a link-like toggle and the cited transcript excerpts as a quoted, read-only block */

.review-workspace .evidence-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 0.88rem;
    padding: 4px 0;
}

.review-workspace .evidence-toggle::before {
    content: "▸";
    font-size: 0.75rem;
    transition: transform 0.12s ease;
}

.review-workspace .evidence-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.review-workspace .evidence-toggle:hover:not(:disabled) {
    text-decoration: underline;
}

.review-workspace .evidence-list {
    margin: 8px 0 4px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 4px 14px;
}

.review-workspace .evidence-list li {
    padding: 9px 0;
}

.review-workspace .evidence-list li:last-child {
    border-bottom: 0;
}

.review-workspace .evidence-list .transcript-time {
    min-width: 3.2em;
}

/* ---- first-review actions and the correction editor */

.review-workspace .fact-actions {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.review-workspace .fact-actions button {
    min-width: 108px;
}

.review-workspace .correct-editor {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.review-workspace .correct-editor .fact-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* ---- clinical documentation */

.review-workspace #document-card > .actions {
    margin-bottom: 18px;
}

/* Once a document is open in the editor, "Gerar documentação" (a regeneration) is secondary to "Finalizar documentação". */
.review-workspace #document-card:has(#document-editor-wrapper:not([hidden])) #generate-document-btn {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--border-strong);
}

.review-workspace #document-card:has(#document-editor-wrapper:not([hidden])) #generate-document-btn:hover:not(:disabled) {
    background: var(--primary-soft);
    border-color: var(--primary);
}

.review-workspace #document-selector-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.review-workspace #document-selector-wrapper label {
    margin: 0;
}

.review-workspace #document-selector {
    flex: 1 1 260px;
    width: auto;
    min-width: 0;
}

.review-workspace .document-editor-header {
    margin-bottom: 8px;
}

.review-workspace #document-editor {
    min-height: 380px;
    padding: 16px 18px;
    font-size: 1rem;
    line-height: 1.65;
    border-radius: 10px;
    margin: 0 0 14px;
}

.review-workspace #document-editor:not([readonly]):focus {
    border-color: var(--primary);
}

/* Read-only draft (e.g. while finalizing): visibly not editable. */
.review-workspace #document-editor[readonly] {
    color: var(--text-muted);
    border-style: dashed;
}

.review-workspace #document-editor-wrapper > .actions {
    justify-content: flex-end;
    margin-bottom: 0;
}

.review-workspace #finalize-document-btn {
    min-height: 46px;
    padding: 0 24px;
}

/* Final (read-only, physician-adopted) documentation: a completed state, separate from the editable draft. */
.review-workspace #document-finalized-wrapper > h3 {
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 2px;
}

.review-workspace #document-finalized-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: 10px;
    padding: 16px 18px;
    line-height: 1.65;
    margin: 10px 0 14px;
}

.review-workspace #document-original-content {
    border-radius: 10px;
    padding: 16px 18px;
    line-height: 1.65;
}

.review-workspace #amendments-section {
    margin-top: 24px;
    padding-top: 20px;
}

.review-workspace #amendments-section > h3 {
    color: var(--primary);
    font-size: 1.05rem;
}

.review-workspace .amendment-item {
    background: var(--surface);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    padding: 12px 16px;
}

.review-workspace .amendment-number {
    color: var(--primary);
    background: var(--primary-soft);
}

.review-workspace #amendment-input {
    border-radius: 10px;
    padding: 12px 14px;
    line-height: 1.6;
}

.review-workspace #amendment-form-wrapper .actions {
    justify-content: flex-end;
    margin-bottom: 0;
}

.review-workspace .confirm-dialog {
    border-radius: 14px;
}

.review-workspace .confirm-dialog h2 {
    color: var(--primary);
}

@media (max-width: 760px) {
    .review-workspace .consult-header,
    .review-workspace #facts-card,
    .review-workspace #document-card {
        padding: 18px 16px;
    }

    .review-workspace .patient-name {
        font-size: 1.4rem;
    }

    .review-workspace .consult-header .consult-actions,
    .review-workspace .consult-header .consult-actions button {
        width: 100%;
    }

    .review-workspace .fact-card {
        padding: 14px 14px 14px 14px;
    }

    .review-workspace .fact-card-header {
        flex-wrap: wrap;
    }

    .review-workspace .fact-actions button {
        flex: 1 1 0;
        min-width: 0;
    }

    .review-workspace .fact-corrected-block {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .review-workspace .fact-corrected-block dd {
        margin-bottom: 8px;
    }

    .review-workspace #document-editor {
        min-height: 300px;
        padding: 12px 14px;
    }

    .review-workspace #document-editor-wrapper > .actions button,
    .review-workspace #amendment-form-wrapper .actions button {
        width: 100%;
    }

    .review-workspace .amendment-item-header {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------ responsive fallback */

@media (max-width: 760px) {
    .page,
    .workspace {
        padding: 16px 14px 48px;
    }

    .app-header-inner {
        padding: 10px 14px;
        /* Checkpoint 5D-A-UX — at phone width the header items wrap instead of overflowing, so "Sair" is never pushed
           off-screen (found when rendering the sign-out modal at 390px). */
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .app-nav {
        margin-left: 0;
    }

    .consult-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "patient"
            "actions";
        padding: 16px;
    }

    .consult-header .consult-actions {
        justify-self: start;
    }

    .patient-name {
        font-size: 1.35rem;
    }

    .patient-row {
        flex-wrap: wrap;
    }

    .page-heading {
        align-items: flex-start;
    }

    .page-heading .page-title {
        font-size: 1.45rem;
    }
}

/* Phone width: patient on its own line, then status and action side by side — wrapping instead of overlapping when a long
   status label and a long action label do not fit together. */
@media (max-width: 640px) {
    .consultation-list .patient-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 12px;
        padding: 14px 16px;
    }

    .consultation-list .patient-row-identity {
        flex: 1 0 100%;
    }

    .consultation-list .btn {
        min-width: 0;
        margin-left: auto;
    }
}

/* Explicit primary variant (the default button look); used by the shared patient picker. */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

/* An empty transcript shows only its empty-state message, not a blank scroll area. */
#transcript-list:empty {
    min-height: 0;
}

/* Checkpoint 5A-UX-M2 — async-action processing feedback (Analisar consulta / Gerar documentação). Text always carries the meaning;
   the spinner is a supporting animation only, and is muted (not removed) under prefers-reduced-motion. */
.spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sophium-spin 0.7s linear infinite;
}

@keyframes sophium-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        opacity: 0.55;
    }
}

.processing-state {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin: 0 0 16px;
}

.processing-state .spinner {
    width: 20px;
    height: 20px;
    margin-right: 0;
    margin-top: 2px;
    border-width: 3px;
    color: var(--primary);
}

.processing-title {
    margin: 0 0 4px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ confirmation modal (Checkpoint 5D-A-UX) */

.confirm-modal {
    max-width: 480px;
    width: calc(100% - 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 28px 24px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(23, 32, 42, 0.18);
}

.confirm-modal::backdrop {
    background: rgba(23, 32, 42, 0.45);
}

.confirm-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: var(--warning-soft);
    border: 1px solid #ecd39a;
    color: var(--warning);
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
}

.confirm-modal-title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.confirm-modal-description {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.confirm-modal-warning {
    background: var(--warning-soft);
    border: 1px solid #ecd39a;
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0 0 22px;
    color: #4d3500;
    font-size: 0.94rem;
    line-height: 1.5;
}

.confirm-modal-warning p {
    margin: 0;
}

.confirm-modal-warning ul {
    margin: 0;
    padding-left: 18px;
}

.confirm-modal-warning li + li {
    margin-top: 8px;
}

.confirm-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

@media (max-width: 480px) {
    .confirm-modal {
        padding: 22px 18px 18px;
    }

    .confirm-modal-actions {
        flex-direction: column-reverse;
    }

    .confirm-modal-actions button {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ administrator MFA enrollment (7B-5M-2/3) */

.enroll-qr {
    display: block;
    margin: 12px auto;
    image-rendering: pixelated;
    background: #ffffff;
    border: 1px solid var(--border, #d0d7de);
}

.enroll-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.08em;
    word-break: break-all;
    user-select: all;
}

.recovery-codes {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
}

.codes-ack {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 8px 0 12px;
}

.mfa-management {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ------------------------------------------------------------------ Checkpoint 7B-7-1 — administration area (/admin)
   Built from the existing tokens and primitives (.panel, .chip, .alert, .helper); only layout and the two small lists are new. */

.admin-loading {
    color: var(--text-muted);
    margin: 8px 0 0;
}

.admin-state-panel {
    max-width: 640px;
}

.admin-state-message {
    margin: 12px 0 16px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.admin-security-card {
    grid-column: 1 / -1;
}

/* UAT-UX1 — a compact strip: title and explanation on the left, the action on the right (wraps below on narrow screens). */
.admin-security-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
    padding: 16px 20px;
}

.admin-security-text {
    min-width: 0;
    max-width: 760px;
}

.admin-security-text .helper {
    margin: 4px 0 0;
}

.admin-security-body > .btn {
    flex: 0 0 auto;
}

.admin-grid .panel-body {
    padding: 16px 20px 20px;
}

.status-list {
    margin: 0 0 12px;
}

.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.status-row:last-child {
    border-bottom: 0;
}

.status-row dt {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.status-row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

/* UAT-UX1 — the five indicators stay balanced: five equal columns when the card is wide enough, 3 + 2 when narrower, 2 + 2 + 1 at the
   narrowest (container queries on the card body, so the arrangement follows the card, not the window). */
.notifications-body {
    container-type: inline-size;
}

.count-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}

@container (max-width: 440px) {
    .count-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .count-item {
        grid-column: span 2;
    }

    .count-item:nth-child(n + 4) {
        grid-column: span 3;
    }
}

@container (max-width: 260px) {
    .count-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .count-item,
    .count-item:nth-child(n + 4) {
        grid-column: auto;
    }

    .count-item:last-child {
        grid-column: 1 / -1;
    }
}

.count-item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end; /* value and label packed at the top: every value on the same line even when a label wraps */
    gap: 2px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.count-label {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.count-value {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    border: 0;
    background: transparent;
}

.count-value[data-tone="warning"] {
    color: var(--warning);
    background: transparent;
}

.count-value[data-tone="active"] {
    color: var(--status-active);
    background: transparent;
}

.step-up-dialog .step-up-form input {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
}

.step-up-dialog .step-up-error {
    margin-bottom: 14px;
}

.step-up-dialog .confirm-modal-actions {
    justify-content: flex-end;
    margin-bottom: 0;
}

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

    .admin-security-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .status-row {
        flex-wrap: wrap;
    }
}

/* ------------------------------------------------------------------ Checkpoint 7B-7-2 — account administration (/admin/contas) */

.accounts-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
    align-items: start;
}

.accounts-layout .panel-body {
    padding: 16px 20px 20px;
}

.lookup-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.lookup-row input {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.lookup-row button {
    flex: 0 0 auto;
}

.lookup-form {
    margin-bottom: 12px;
}

.account-email {
    overflow-wrap: anywhere;
}

.account-id {
    margin: 0 0 14px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.account-id summary {
    cursor: pointer;
}

.account-id-value {
    margin: 6px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.disable-group {
    max-width: 360px;
    margin-top: 8px;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}

.account-note {
    margin-bottom: 0;
}

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

@media (max-width: 520px) {
    .lookup-row {
        flex-direction: column;
        align-items: stretch;
    }

    .account-actions button {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------------------ Checkpoint 7B-7-3A — invitations (/admin/convites) */

.invites-forms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.invites-forms .panel-body,
.invites-session .panel-body {
    padding: 16px 20px 20px;
}

.invitation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.invitation-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    padding: 14px 16px;
}

.invitation-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.invitation-email {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.invitation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.invitation-details {
    margin: 0 0 10px;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.invitation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

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

/* UAT-UX2 — the administrator's own account: a quiet note under the status rows (subordinate to the status). */
.account-self-note {
    margin: 0 0 12px;
}

/* ------------------------------------------------------------------ Checkpoint 7B-PHY-3 — the physician's professional profile (/perfil.html) */

.profile-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.profile-panel-body {
    padding: 16px 20px 20px;
}

.profile-panel-body > input[type="text"] {
    margin-bottom: 4px;
}

.profile-summary .panel-body {
    padding: 14px 20px;
}

.profile-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.profile-summary-note {
    margin: 0;
}

.profile-completeness-details {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.profile-empty {
    margin-bottom: 12px;
}

.field-error {
    color: var(--danger);
    font-size: 0.86rem;
    margin: 0 0 10px;
}

.profile-rows,
.rqe-list,
.specialty-list,
.specialty-option-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-rows {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.profile-row {
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: start;
}

.profile-field input,
.profile-field select {
    margin-bottom: 4px;
}

.profile-row-remove {
    margin-top: 27px; /* aligned with the controls under their labels */
}

.specialty-list {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.specialty-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    padding: 14px 16px;
}

.specialty-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.specialty-name {
    font-size: 1rem;
    margin: 0 0 6px;
}

.specialty-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rqe-section .rqe-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.rqe-empty {
    color: var(--text-muted);
    font-style: italic;
    margin: 0 0 10px;
}

.rqe-helper {
    margin: 8px 0 0;
}

.specialty-picker {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.specialty-picker input[type="search"] {
    margin-bottom: 4px;
}

.specialty-options {
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.specialty-options:empty {
    display: none;
}

.specialty-option-title {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
}

button.specialty-option {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 6px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text);
    font-weight: 400;
    text-align: left;
}

button.specialty-option:hover:not(:disabled) {
    background: var(--primary-soft);
    border-color: var(--border);
}

button.specialty-option:focus-visible {
    outline-offset: -3px;
}

.specialty-option-action {
    color: var(--primary);
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
}

/* UX refinement — a compact bar: in the flow at the end of the form while nothing is pending; sticky (and slightly raised) only while a
   change is pending, being saved or just confirmed. The alerts (server error, conflict) live in the flow above it, never inside it. */
.profile-savebar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    background: var(--background);
}

.profile-savebar[data-state="pending"] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -6px 14px -10px rgba(23, 32, 51, 0.35);
}

.profile-savebar-status {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    margin-right: auto;
    min-width: 0;
}

.profile-save-hint,
.profile-save-message {
    margin: 0;
    font-size: 0.88rem;
}

.profile-save-hint {
    color: var(--danger);
}

.profile-save-message {
    color: var(--success);
    font-weight: 600;
}

.profile-alert {
    margin: 16px 0 10px;
}

.profile-alert p {
    margin: 0 0 8px;
}

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

    .profile-row-remove {
        margin-top: 0;
        justify-self: start;
    }

    .specialty-card-header {
        flex-direction: column;
    }

    /* Phone: the bar stays one compact row (status left, Save right); the alerts are outside it, so a sticky bar never covers the form. */
    .profile-savebar {
        padding: 8px 0;
    }
}

/* ------------------------------------------------------------------ 7B-PHY-3 UX refinement — the physician account menu (top right) */

.account-menu {
    position: relative;
    flex-shrink: 0;
}

button.account-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--primary-soft);
    color: var(--primary);
}

button.account-menu-toggle:hover:not(:disabled),
button.account-menu-toggle[aria-expanded="true"] {
    background: var(--surface);
    border-color: var(--primary);
}

.account-menu-icon {
    display: block;
}

.account-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 230px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(23, 32, 51, 0.16);
}

.account-menu-item,
button.account-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible,
button.account-menu-item:hover:not(:disabled) {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: transparent;
}

.account-menu-item:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

.account-menu-item[aria-current="page"] {
    color: var(--primary);
    box-shadow: inset 3px 0 0 var(--accent-gold);
}

button.account-menu-item.sign-out-btn {
    color: var(--danger);
}

@media (max-width: 760px) {
    /* Phone: brand, environment badge and the account button share the first row; the primary navigation takes its own row below, so
       the account button never overlaps it. */
    .app-header-inner .app-nav {
        order: 3;
        flex-basis: 100%;
    }

    .app-header-inner .env-badge {
        margin-left: auto;
    }

    .app-header-inner .account-menu {
        margin-left: auto;
    }

    .app-header-inner .env-badge:not([hidden]) + .account-menu {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------ Data Export V1a — /exportar.html */

.export-panel-body {
    padding: 16px 20px 20px;
}

.export-list {
    margin: 0 0 12px;
    padding-left: 20px;
}

.export-list li + li {
    margin-top: 6px;
}

#export-form input[type="password"] {
    max-width: 420px;
    margin-bottom: 4px;
}

#export-form .actions {
    margin: 12px 0;
}

#export-form .helper-tight {
    margin-top: 0; /* the shared helper-tight pulls text up; under this input it would overlap the field */
}

/* ------------------------------------------------------------------ Patient lifecycle — /pacientes.html */

.patients-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 12px;
}

.patients-view-toggle {
    display: inline-flex;
    gap: 6px;
}

.patients-view-toggle button[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

#patients-search-form {
    display: flex;
    gap: 8px;
    flex: 1 1 280px;
    max-width: 460px;
}

#patients-search-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
}

.patients-note {
    margin: 0 0 12px;
}

@media (max-width: 640px) {
    .patient-directory.consultation-list .patient-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .patient-directory.consultation-list .btn {
        justify-self: stretch;
        min-width: 0;
    }
}

/* ------------------------------------------------------------------ Live page — post-transcription UX (2026-09-28) */

/* "Gravando consulta": only the dot pulses (a soft studio-light breath); the text never blinks. */
.live-workspace .recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid #b9dfc8;
    background: var(--success-soft);
    color: var(--success);
    white-space: nowrap;
}

.live-workspace .recording-indicator[hidden] {
    display: none;
}

.recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    animation: sophium-recording-pulse 1.6s ease-in-out infinite;
}

/* Owner feedback (UAT): the first version was too faint to notice — a clearer breath and halo, still calm (no blinking text). */
@keyframes sophium-recording-pulse {
    0% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 122, 69, 0.6); }
    50% { opacity: 0.3; box-shadow: 0 0 0 6px rgba(31, 122, 69, 0); }
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 122, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .recording-dot {
        animation: none;
    }
}

/* Guidance after an explicit "Parar transcrição" — a quiet line under the capture controls. */
.live-workspace .capture-guidance {
    flex-basis: 100%;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.live-workspace .processing-detail {
    margin-bottom: 0;
}

/* The explicit next step of a Completed consultation. */
.live-workspace .next-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 16px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--success);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.live-workspace .next-step[hidden] {
    display: none;
}

.live-workspace .next-step-text {
    min-width: 0;
    flex: 1 1 320px;
}

.live-workspace .next-step-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.live-workspace .next-step-message {
    margin: 0;
    color: var(--text-muted);
}

.btn-forward::after {
    content: " →" / ""; /* decorative: empty alternative text, so screen readers do not read the arrow */
}

/* ------------------------------------------------------------------ Profile photo (2026-09-28) */

/* The avatar button keeps its size and circle; a photo fills it without distortion (cover). */
button.account-menu-toggle[data-has-photo="true"] {
    overflow: hidden;
}

button.account-menu-toggle[data-has-photo="true"] .account-menu-icon {
    display: none;
}

.account-menu-photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile-photo-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.profile-photo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background: var(--primary-soft);
    color: var(--primary);
}

.profile-photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-photo-image[hidden],
.profile-photo-placeholder[hidden] {
    display: none;
}

.profile-photo-controls {
    flex: 1 1 260px;
    min-width: 0;
}

.profile-photo-actions {
    flex-wrap: wrap;
    margin: 8px 0 0;
}

.profile-photo-status {
    margin: 8px 0 0;
}

/* ------------------------------------------------------------------ LEGAL-3 — the physician-use acknowledgement page (/termo)
   A centered reading surface with a comfortable line length; the whole document reads naturally in the page (no small scroll box), and the acceptance
   controls follow it. The legal text itself is loaded from the server and rendered as plain text. */

.page-legal {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.legal-title {
    margin-bottom: 4px;
}

.legal-version {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-weight: 600;
}

.legal-document {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 28px 32px;
    line-height: 1.65;
    max-width: 72ch;
}

.legal-document h2 {
    font-size: 1.25rem;
    margin: 0 0 4px;
}

.legal-document h3 {
    font-size: 1.1rem;
    margin: 28px 0 8px;
}

.legal-document h4 {
    font-size: 1rem;
    margin: 4px 0 20px;
    color: var(--text-muted);
}

.legal-document p {
    margin: 0 0 12px;
    white-space: pre-line;
}

.legal-document ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.legal-document li {
    margin-bottom: 8px;
}

.legal-acceptance {
    margin-top: 24px;
    max-width: 72ch;
}

.legal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface);
}

.legal-checkbox input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.legal-checkbox label {
    font-weight: 600;
}

.legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.legal-decline {
    margin-top: 16px;
    max-width: 72ch;
}

.legal-notice {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.legal-notice p {
    margin: 0;
    flex: 1 1 320px;
}

@media (max-width: 600px) {
    .page-legal {
        padding: 20px 16px 48px;
    }

    .legal-document {
        padding: 20px 16px;
    }
}

/* ------------------------------------------------------------------ COM-2 — commercial administration (/admin/clientes)
   Built from the existing tokens and primitives (.panel, .chip, .alert, .helper, .lookup-row); only the list rows, the facts list and the form
   layout are new. Status chips always carry their meaning in text ("Contrato: Ativo"), never in colour alone. */

#customers-content input[type="number"] {
    font: inherit;
    color: var(--text);
    width: 100%;
    max-width: 200px;
    min-height: var(--control-height);
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}

#customers-content input[type="number"]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 0;
    border-color: var(--primary);
}

#customers-content input:disabled,
#customers-content select:disabled {
    background: var(--surface-subtle);
    color: var(--text-muted);
}

.customers-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.customer-list,
.customer-member-list,
.customer-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.customer-list {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.customer-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    padding: 12px 16px;
}

.customer-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 8px;
}

.customer-link {
    font-weight: 600;
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.customer-type {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.customer-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 6px;
}

.customer-row-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.customer-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.customer-form-panel {
    max-width: 760px;
}

.customer-fieldset {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
    min-width: 0;
}

.customer-fieldset legend {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 10px;
    padding: 0;
}

.optional {
    font-weight: 400;
    color: var(--text-muted);
}

.customer-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.customer-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.customer-detail-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
}

.customer-detail-name {
    margin: 0;
    font-size: 1.4rem;
    overflow-wrap: anywhere;
}

.customer-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

#detail-body > .panel,
.customer-detail-grid > .panel {
    margin-bottom: 20px;
}

#detail-body .panel-body {
    padding: 16px 20px 20px;
}

.customer-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0 0 14px;
}

.customer-facts dt {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.customer-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.customer-chip-line {
    margin: 0 0 10px;
}

.customer-inline-form {
    max-width: 520px;
}

.customer-terms-form {
    border-top: 1px solid var(--border);
    margin-top: 16px;
    padding-top: 16px;
    max-width: 640px;
}

.customer-subtitle {
    margin: 0 0 12px;
    font-size: 1rem;
}

.customer-history {
    margin-top: 16px;
    font-size: 0.92rem;
}

.customer-history summary {
    cursor: pointer;
    color: var(--text-muted);
}

.customer-history-list {
    margin-top: 8px;
    display: grid;
    gap: 4px;
    color: var(--text-muted);
}

.customer-member-list {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.customer-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.customer-member-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.customer-member-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.customer-member-email,
.customer-member-since {
    color: var(--text-muted);
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.customer-assign {
    max-width: 560px;
}

.customer-assign-found {
    border: 1px solid var(--status-active-border);
    background: var(--status-active-soft);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    max-width: 560px;
}

.customer-assign-found p {
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

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

@media (max-width: 520px) {
    .customers-list-header,
    .customer-member {
        flex-direction: column;
        align-items: stretch;
    }

    .customer-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}