/*
 * App shell: top navbar + fixed sidebar + content area, plus a few MD3-flavoured
 * components. Bootstrap 5 provides the base; these rules theme it and add the
 * shell. (De-iframed adaptation of the health home shell.)
 */
* { box-sizing: border-box; }

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

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

/* Bootstrap primary -> brand colour */
.btn-primary {
    --bs-btn-bg: var(--md-sys-color-primary);
    --bs-btn-border-color: var(--md-sys-color-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-disabled-bg: var(--md-sys-color-primary);
    --bs-btn-disabled-border-color: var(--md-sys-color-primary);
}

/* ---- Navbar ------------------------------------------------------------- */
.app-navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: var(--md-sys-color-surface);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1050;
    box-shadow: var(--md-sys-elevation-1);
}
.navbar-left, .navbar-right { display: flex; align-items: center; gap: 12px; }
.logo-container { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-avatar {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--app-grad-a) 0%, var(--app-grad-b) 100%);
    color: #fff; border-radius: var(--md-sys-shape-corner-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
}
img.logo-avatar { object-fit: cover; background: var(--md-sys-color-surface-container); } /* org logo */
.logo-name { font-size: 1.25rem; font-weight: 600; color: var(--md-sys-color-primary); }

.navbar-icon-btn, .mobile-menu-toggle {
    width: 40px; height: 40px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container);
    border: 1px solid var(--md-sys-color-outline-variant);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s ease;
    color: var(--md-sys-color-on-surface);
}
.navbar-icon-btn:hover, .mobile-menu-toggle:hover {
    background: var(--md-sys-color-surface-container-highest);
    box-shadow: var(--md-sys-elevation-1);
}
.navbar-icon-btn { color: var(--app-navbar-icon); font-size: 18px; }
.navbar-icon-btn--danger { color: var(--md-sys-color-error); }
.mobile-menu-toggle { display: none; }
.mobile-menu-toggle i { font-size: 20px; }

.user-avatar {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--app-grad-a) 0%, var(--app-grad-b) 100%);
    color: #fff; border: none; padding: 0; border-radius: var(--md-sys-shape-corner-full);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: box-shadow 0.2s ease;
}
.user-avatar:hover, .user-avatar:focus-visible, .user-avatar[aria-expanded="true"] {
    box-shadow: 0 0 0 2px var(--md-sys-color-surface), 0 0 0 4px var(--md-sys-color-primary);
    outline: none;
}

/* ---- Navbar user (account) dropdown ------------------------------------- */
.user-menu-dropdown {
    min-width: 224px; margin-top: 8px; padding: 8px;
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-2);
}
.user-menu-header { padding: 6px 12px 10px; }
.user-menu-name { font-weight: 600; font-size: 0.95rem; color: var(--md-sys-color-on-surface); }
.user-menu-role { font-size: 0.8rem; color: var(--md-sys-color-on-surface-variant); }
.user-menu-dropdown .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--md-sys-shape-corner-small);
    color: var(--md-sys-color-on-surface);
}
.user-menu-dropdown .dropdown-item:hover,
.user-menu-dropdown .dropdown-item:focus {
    background: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}
.user-menu-dropdown .dropdown-item.active {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.user-menu-dropdown .dropdown-item i { font-size: 16px; color: var(--md-sys-color-primary); }
.user-menu-dropdown .dropdown-item.active i { color: inherit; }
.user-menu-dropdown .dropdown-item--danger,
.user-menu-dropdown .dropdown-item--danger i { color: var(--md-sys-color-error); }
.user-menu-dropdown .dropdown-item--danger:hover,
.user-menu-dropdown .dropdown-item--danger:focus {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}
.user-menu-dropdown .dropdown-item--danger:hover i,
.user-menu-dropdown .dropdown-item--danger:focus i { color: var(--md-sys-color-on-error); }
.user-menu-dropdown .dropdown-divider {
    margin: 6px 4px; border-top-color: var(--md-sys-color-outline-variant); opacity: 1;
}

/* ---- Layout ------------------------------------------------------------- */
.app-container { display: flex; padding-top: 64px; min-height: 100vh; }

.sidebar {
    position: fixed; left: 0; top: 64px;
    width: 280px; height: calc(100vh - 64px);
    background: var(--app-sidebar-bg);
    border-right: 1px solid var(--app-sidebar-border);
    overflow-y: auto;
    z-index: 1040;
    transition: transform 0.3s ease;
}
.sidebar-menu { padding: 12px 0 80px; }
.sidebar-nav-list { list-style: none; margin: 0; padding: 0; }
.sidebar-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    color: var(--app-sidebar-fg);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.sidebar-nav-link:hover { background: var(--app-sidebar-hover-bg); color: var(--app-sidebar-fg); }
.sidebar-nav-link.active {
    background: var(--app-sidebar-active-bg);
    color: var(--app-sidebar-active-fg);
    border-left-color: var(--app-sidebar-accent);
    font-weight: 500;
}
.sidebar-nav-link i {
    font-size: 17px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
}
.sidebar-nav-link span { font-size: 13px; font-weight: 500; }
.sidebar-section-label {
    padding: 16px 16px 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--app-sidebar-muted);
    opacity: 0.6; list-style: none;
}
/* "Voltar" link at the top of a drill-in submenu (e.g. Banco de Dados). */
.sidebar-nav-back { color: var(--app-sidebar-muted); }
.sidebar-nav-back:hover { color: var(--app-sidebar-fg); }

/* ---- Collapsible sub-menu (Modelos de Avaliação) ------------------------ */
/* A nav item may own a nested list — the ABA "Modelos de Avaliação" group, which
   opens into its six clinical categories plus Anamnese. Open/closed state lives in
   localStorage (layout.js); the group is rendered open when the current page is
   inside it, so the active item is never hidden on load. */
.sidebar-nav-group > .sidebar-nav-link { width: 100%; }
.sidebar-nav-caret {
    margin-left: auto; width: auto !important; height: auto !important;
    font-size: 11px !important; opacity: 0.55;
    transition: transform 0.2s ease;
}
.sidebar-nav-group.is-open > .sidebar-nav-link .sidebar-nav-caret { transform: rotate(90deg); }
.sidebar-subnav {
    list-style: none; margin: 2px 0 6px 26px; padding: 0 8px 0 0;
    border-left: 2px solid color-mix(in srgb, var(--app-sidebar-accent) 40%, transparent);
}
.sidebar-nav-group:not(.is-open) > .sidebar-subnav { display: none; }
.sidebar-subnav .sidebar-nav-link {
    padding: 6px 10px; margin-left: 6px;
    border-left: none; border-radius: var(--md-sys-shape-corner-small);
    color: var(--app-sidebar-muted);
}
.sidebar-subnav .sidebar-nav-link:hover { color: var(--app-sidebar-fg); }
.sidebar-subnav .sidebar-nav-link.active {
    background: color-mix(in srgb, var(--app-sidebar-accent) 22%, transparent);
    color: var(--app-sidebar-active-fg);
    font-weight: 700;
}
.sidebar-subnav .sidebar-nav-link i { font-size: 14px; width: 20px; height: 20px; }
.sidebar-subnav .sidebar-nav-link span { font-size: 12px; font-weight: 600; }
.sidebar-subnav-divider {
    height: 1px; margin: 6px 10px; list-style: none;
    background: var(--app-sidebar-border);
}
/* Count badge on a nav item (models per category; overdue re-assessments). */
.sidebar-nav-badge {
    margin-left: auto;
    min-width: 20px; padding: 1px 6px;
    border-radius: var(--md-sys-shape-corner-full);
    background: color-mix(in srgb, var(--app-sidebar-accent) 28%, transparent);
    color: var(--app-sidebar-fg);
    font-size: 10px; font-weight: 700; line-height: 1.6; text-align: center;
}
.sidebar-nav-badge--alert {
    background: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
}

/* ---- Drill-in sidebar panels (main menu sections) ----------------------- */
.sidebar-nav { position: relative; overflow-x: hidden; }
.sidebar-panel { display: none; }
.sidebar-panel.active { display: block; animation: sidebar-panel-in 0.2s ease; }
@keyframes sidebar-panel-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}
/* Section buttons + back button are <button>s styled like the nav links. */
button.sidebar-nav-link {
    width: 100%; font: inherit; text-align: left; cursor: pointer;
    background: none; border: none; border-left: 3px solid transparent;
}
.sidebar-nav-chevron {
    margin-left: auto; width: auto !important; height: auto !important;
    font-size: 12px !important; opacity: 0.5;
}

.content-area {
    margin-left: 280px;
    flex: 1; padding: 24px;
    /* Item flex sem min-width:0 assume min-width:auto e CRESCE até caber o conteúdo:
       uma grade larga empurraria a página inteira para o lado em vez de rolar dentro
       do próprio .data-grid-wrap. Esta linha é o que faz a rolagem horizontal ficar
       onde deve ficar. */
    min-width: 0;
    min-height: calc(100vh - 64px);
    background: var(--md-sys-color-background);
}
.content-header { margin-bottom: 24px; }
.content-header h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 6px; color: var(--md-sys-color-on-surface); }
.content-header p { font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 0; }

/* ---- Cards & components ------------------------------------------------- */
.card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-1);
    padding: 24px;
    margin-bottom: 24px;
}
.card-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 16px; color: var(--md-sys-color-on-surface); }
.card-text { font-size: 14px; color: var(--md-sys-color-on-surface-variant); }
/* Footer strip for panel action buttons: spans the card padding, sits flush at
   the bottom with a divider, buttons right-aligned (use .me-auto to push info left). */
.card-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
    margin: 24px -24px -24px; padding: 16px 24px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}
.card-footer form { margin: 0; }

/* Flash modal messages keep their line breaks (multi-field error lists,
   storage-value dumps from the Exemplos page). */
.flash-message { white-space: pre-line; }

/* ---- Realtime field validation states (core/forms.js) -------------------- */
/* Tokenized so all themes + dark mode work; Bootstrap's hardcoded red/green
   and background icons are overridden. Applied on blur, cleared on input. */
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--md-sys-color-error);
    background-image: none;
}
.form-control.is-valid, .form-select.is-valid {
    border-color: var(--md-sys-color-primary);
    background-image: none;
}
.invalid-feedback { color: var(--md-sys-color-error); }

/* CEP auto-fill (ViaCEP): spinner pinned inside the field, hint below. */
.br-cep-wrap { position: relative; }
.br-cep-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--md-sys-color-primary);
}

/* ---- Password fields: live policy checklist ------------------------------ */
/* Show/hide comes from the shared .password-field / .password-toggle primitive
   (data-reveal, above). The checklist below mirrors App\Security\PasswordPolicy. */
.pw-checklist {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
    font-size: .8125rem;
    color: var(--md-sys-color-on-surface-variant);
}
.pw-checklist .bi { margin-right: 6px; }
.pw-checklist li.ok { color: var(--md-sys-color-primary); }
.pw-checklist li.bad { color: var(--md-sys-color-error); }

/* ---- Record-as-panel list primitive (copy across CRUD modules) ---------- */
/* Lists are a stack of .card panels — one per record — never a <table>. All
   colors flow through --md-sys-* tokens, so light + dark are automatic. Reuses
   the .card / .card-footer contract above. Canonical usage: templates/users/. */
.section-title { font-size: 1.15rem; font-weight: 600; margin: 24px 0 16px; color: var(--md-sys-color-on-surface); }

.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.list-search { position: relative; flex: 1 1 260px; min-width: 220px; }
.list-search .bi {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--md-sys-color-on-surface-variant); pointer-events: none;
}
.list-search .form-control { padding-left: 40px; border-radius: var(--md-sys-shape-corner-full); }
.list-org-filter { flex: 0 1 240px; min-width: 180px; border-radius: var(--md-sys-shape-corner-full); }
.list-count { margin: 0 0 12px; }

/* Password reveal toggle (data-reveal on the input; button injected by forms.js). */
.password-field { position: relative; }
.password-field .form-control { padding-right: 44px; }
.password-toggle {
    position: absolute; top: 0; right: 0; height: 100%; width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-full);
}
.password-toggle:hover { color: var(--md-sys-color-on-surface); }
.password-toggle:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }

/* MD3 horizontal list item inside a .card */
.list-item { display: flex; align-items: center; gap: 16px; }
.list-avatar {
    flex: 0 0 auto; width: 48px; height: 48px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; letter-spacing: .5px;
}
.list-avatar .bi { font-size: 1.25rem; }
.list-body { flex: 1 1 auto; min-width: 0; }
.list-title {
    font-weight: 600; color: var(--md-sys-color-on-surface); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-subtitle {
    font-size: .875rem; color: var(--md-sys-color-on-surface-variant);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-meta {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: flex-end; gap: 6px; max-width: 340px;
}
.list-time { font-size: .8125rem; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }

/* Role chips + status badge (token-driven, AA in light & dark; no green in palette) */
.chip {
    font-size: .75rem; font-weight: 500; padding: 3px 10px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant); white-space: nowrap;
}
.chip-org { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.status-badge {
    font-size: .75rem; font-weight: 600; padding: 3px 10px;
    border-radius: var(--md-sys-shape-corner-full); white-space: nowrap;
}
.status-badge.is-active { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.status-badge.is-inactive {
    background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline-variant);
}

/* Tokenize Bootstrap's outline button so the footer action themes with the app. */
.btn-outline-primary {
    --bs-btn-color: var(--md-sys-color-primary);
    --bs-btn-border-color: var(--md-sys-color-outline);
    --bs-btn-hover-color: var(--md-sys-color-primary);
    --bs-btn-hover-bg: var(--md-sys-color-surface-variant);
    --bs-btn-hover-border-color: var(--md-sys-color-primary);
    --bs-btn-active-color: var(--md-sys-color-primary);
    --bs-btn-active-bg: var(--md-sys-color-surface-variant);
    --bs-btn-active-border-color: var(--md-sys-color-primary);
}

.list-empty { text-align: center; padding: 32px 24px; color: var(--md-sys-color-on-surface-variant); }
.list-empty .bi { font-size: 2rem; color: var(--md-sys-color-outline); display: block; margin-bottom: 8px; }

.list-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.list-pagination-info { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }

/* Narrow screens: drop the trailing meta below the text, aligned past the avatar. */
@media (max-width: 560px) {
    .list-item { flex-wrap: wrap; }
    .list-meta { width: 100%; justify-content: flex-start; padding-left: 64px; }
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-bottom: 24px; }

.stat-card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    box-shadow: var(--md-sys-elevation-1);
    padding: 20px; display: flex; align-items: center; gap: 16px;
}
.stat-icon {
    width: 56px; height: 56px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-primary);
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.stat-content h4 { font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; color: var(--md-sys-color-on-surface); }
.stat-content p { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin: 0; }

/* ---- Sidebar overlay (mobile) ------------------------------------------ */
.sidebar-overlay {
    display: none; position: fixed; inset: 64px 0 0 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1035; opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.active { display: block; opacity: 1; }

@media (max-width: 1024px) {
    .sidebar { width: 240px; }
    .content-area { margin-left: 240px; }
}
@media (max-width: 768px) {
    .mobile-menu-toggle { display: flex; }
    .sidebar { transform: translateX(-100%); width: 280px; }
    .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--md-sys-elevation-3); }
    .content-area { margin-left: 0; padding: 16px; }
    .logo-name { display: none; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---- Auth pages -------------------------------------------------------- */
.auth-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--md-sys-color-background); padding: 20px;
}
.auth-wrap { width: 100%; max-width: 400px; }
.auth-card {
    background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large);
    box-shadow: var(--md-sys-elevation-2);
    padding: 32px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 24px; }
.auth-title { font-size: 1.4rem; font-weight: 600; margin: 0 0 4px; color: var(--md-sys-color-on-surface); }
.auth-subtitle { font-size: 14px; color: var(--md-sys-color-on-surface-variant); margin: 0 0 20px; }
.auth-links { margin-top: 16px; text-align: center; font-size: 14px; }

/* ---- Chat (Conversas / WhatsApp) --------------------------------------- */
.chat-layout { display: flex; gap: 16px; align-items: stretch; height: calc(100vh - 210px); min-height: 420px; }
.chat-sidebar { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.chat-sidebar-toolbar { display: flex; flex-direction: column; gap: 8px; }
/* .list-search has flex: 1 1 260px for row toolbars; inside this COLUMN
   toolbar that basis would become height — pin it to content size. */
.chat-search { flex: 0 0 auto; width: 100%; min-width: 0; }
.chat-conversations { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.chat-conversation {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
    background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-large); text-align: left; width: 100%;
}
.chat-conversation:hover { background: var(--md-sys-color-surface-container); }
.chat-conversation.is-active { background: var(--md-sys-color-secondary-container); border-color: transparent; }
.chat-conversation .list-title { font-size: 14px; }
.chat-conversation .list-subtitle {
    font-size: 12.5px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-unread {
    margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--md-sys-color-primary); color: #fff; font-size: 12px; font-weight: 600;
}
.chat-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; }
.chat-thread-header {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.chat-messages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px;
    background: var(--md-sys-color-surface-container);
}
.chat-empty { margin: auto; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.chat-empty .bi { font-size: 2rem; color: var(--md-sys-color-outline); display: block; margin-bottom: 8px; }
.chat-bubble {
    max-width: min(75%, 560px); padding: 8px 12px; border-radius: 14px; font-size: 14px;
    white-space: pre-wrap; overflow-wrap: break-word;
}
.chat-bubble.is-in {
    align-self: flex-start; background: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline-variant); border-bottom-left-radius: 4px;
}
.chat-bubble.is-out {
    align-self: flex-end; background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container); border-bottom-right-radius: 4px;
}
.chat-bubble.is-failed { border: 1px solid var(--md-sys-color-error); }
.chat-bubble-sender { font-size: 12px; font-weight: 600; color: var(--md-sys-color-primary); margin-bottom: 2px; }
.chat-bubble-meta {
    display: flex; align-items: center; gap: 4px; justify-content: flex-end;
    font-size: 11px; color: var(--md-sys-color-on-surface-variant); margin-top: 2px;
}
.chat-bubble-meta .bi-check2-all.is-read { color: var(--md-sys-color-primary); }
.chat-bubble-meta .chat-seen { color: var(--md-sys-color-primary); font-weight: 600; }
.chat-bubble-meta .bi-exclamation-triangle-fill { color: var(--md-sys-color-error); }
.chat-bubble img.chat-image { max-width: 100%; max-height: 280px; border-radius: 8px; display: block; }
.chat-bubble .chat-video { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.chat-bubble .chat-audio { max-width: 100%; min-width: 220px; display: block; }
.chat-doc {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
    background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant);
    color: inherit; text-decoration: none; font-size: 13.5px; max-width: 100%;
}
.chat-doc .bi { font-size: 1.3rem; }
.chat-composer { padding: 10px 12px; border-top: 1px solid var(--md-sys-color-outline-variant); }
.chat-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-composer textarea { resize: none; max-height: 120px; }
.chat-attach-btn, .chat-send-btn, .chat-mic-btn, .chat-rec-btn {
    width: 42px; height: 42px; flex-shrink: 0; display: inline-flex;
    align-items: center; justify-content: center; padding: 0;
}
.chat-recording { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.chat-rec-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--md-sys-color-on-surface); }
.chat-rec-dot {
    width: 12px; height: 12px; border-radius: 50%; background: var(--md-sys-color-error);
    animation: chat-rec-pulse 1s ease-in-out infinite;
}
@keyframes chat-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.chat-attachment { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
@media (max-width: 820px) {
    .chat-layout { flex-direction: column; height: auto; }
    .chat-sidebar { width: 100%; }
    .chat-conversations { max-height: 260px; }
    .chat-thread { min-height: 420px; }
}

/* ── Tabelas (dev DB row browser: templates/tables/) ────────────────────────
   Toolbar (table picker + column filter) over a real <table> data grid — a
   justified <table> case (raw DB rows). All colors flow through --md-sys-*
   tokens, so light + dark are automatic; the grid scrolls inside its own
   overflow-x wrapper so the page body never scrolls sideways. */
.tables-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 24px; margin-bottom: 16px; }
.tables-toolbar .form-label { font-size: .8125rem; font-weight: 500; margin-bottom: 4px; color: var(--md-sys-color-on-surface-variant); }

.tables-picker { flex: 0 0 auto; }
.tables-picker-row { display: flex; gap: 8px; }
.tables-picker .form-select { min-width: 220px; border-radius: var(--md-sys-shape-corner-full); }

.tables-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; flex: 1 1 520px; }
.tables-filters .list-search { flex: 1 1 200px; min-width: 180px; margin: 0; }
.tables-filter-search { flex: 1 1 220px; min-width: 180px; }
.tables-filter-col { flex: 0 1 200px; min-width: 150px; }
.tables-filter-op { flex: 0 1 170px; min-width: 140px; }
.tables-filter-val { flex: 1 1 180px; min-width: 150px; }
.tables-filters .form-select { border-radius: var(--md-sys-shape-corner-full); }
.tables-filters .form-control { border-radius: var(--md-sys-shape-corner-full); }
.tables-filter-actions { display: flex; align-items: center; gap: 6px; }

/* Data grid — a real <table> in a horizontal-scroll wrapper. */
.data-grid-card { padding: 0; overflow: hidden; }
.data-grid-wrap { overflow-x: auto; width: 100%; }
.data-grid {
    --bs-table-bg: transparent;
    --bs-table-color: var(--md-sys-color-on-surface);
    --bs-table-hover-bg: var(--md-sys-color-surface-variant);
    --bs-table-hover-color: var(--md-sys-color-on-surface);
    --bs-table-border-color: var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-on-surface); font-size: 13px; margin: 0;
    font-variant-numeric: tabular-nums;
}
.data-grid thead th {
    background: var(--md-sys-color-surface-container-highest);
    border-bottom: 2px solid var(--md-sys-color-outline-variant);
    vertical-align: top; white-space: nowrap; padding: 8px 12px;
}
.data-grid tbody td {
    padding: 7px 12px; vertical-align: top;
    max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-grid thead th.is-sorted { background: var(--md-sys-color-secondary-container); }
.data-grid-sort {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--md-sys-color-on-surface); text-decoration: none; font-weight: 600;
}
.data-grid-sort:hover { color: var(--md-sys-color-primary); }
.data-grid-caret { font-size: .7rem; color: var(--md-sys-color-on-surface-variant); }
.data-grid-pk { font-size: .75rem; color: var(--md-sys-color-primary); }
.data-grid-type {
    display: block; font-weight: 400; font-size: .6875rem; margin-top: 2px;
    color: var(--md-sys-color-on-surface-variant); text-transform: none;
}
.cell-null { color: var(--md-sys-color-outline); font-style: italic; }
.cell-empty { color: var(--md-sys-color-outline); }
.cell-masked { color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.cell-masked .bi { font-size: .75rem; }

@media (max-width: 720px) {
    .tables-picker, .tables-picker .form-select { width: 100%; }
    .tables-filters { flex: 1 1 100%; }
}

/* ---- ABA: caixa de seleção rolável --------------------------------------- */
/* Listas longas de checkbox (aplicadores responsáveis, avaliações vinculadas de
   um aprendiz — são 52 instrumentos). Mantém o formulário curto sem esconder
   opções atrás de um <select multiple>, que é ruim de usar no toque. */
.check-scroll {
    max-height: 260px; overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface-container);
}
.check-scroll-group {
    margin: 10px 0 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}
.check-scroll-group:first-child { margin-top: 0; }
.check-scroll .form-check-label { font-size: 13px; }

/* ---- ABA: pré-visualização de logo e imagens de documento ---------------- */
.logo-preview {
    display: flex; align-items: center; justify-content: center;
    height: 140px; padding: 12px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-small);
    /* Xadrez sutil: deixa visível quando o fundo escolhido é transparente. */
    background-image:
        linear-gradient(45deg, var(--md-sys-color-surface-variant) 25%, transparent 25%),
        linear-gradient(-45deg, var(--md-sys-color-surface-variant) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--md-sys-color-surface-variant) 75%),
        linear-gradient(-45deg, transparent 75%, var(--md-sys-color-surface-variant) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.logo-preview img { max-width: 100%; max-height: 100%; }
.doc-image-preview {
    padding: 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface-container);
}
.doc-image-preview img { display: block; max-width: 100%; height: auto; }

/* ---- ABA: barra de progresso miúda no rodapé do cartão ------------------- */
/* Quantas seções do documento já foram preenchidas (Programas de Ensino). */
.mini-progress {
    display: inline-block; vertical-align: middle;
    width: 64px; height: 5px; margin-right: 6px;
    border-radius: var(--md-sys-shape-corner-full);
    background: var(--md-sys-color-surface-container-highest);
    overflow: hidden;
}
.mini-progress > span {
    display: block; height: 100%;
    background: var(--md-sys-color-primary);
    transition: width 0.3s ease;
}

/* ---- ABA: grade de blocos do protocolo ----------------------------------- */
/* Um bloco de tentativas. A grade em si reusa .data-grid (exceção justificada
   ao padrão de lista-em-cards) dentro de .data-grid-wrap, que rola de lado
   sozinha — a página nunca rola. */
.protocol-block {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface-container);
}
.protocol-block-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.protocol-block-title {
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--md-sys-color-on-surface-variant);
}
.protocol-block .data-grid td { padding: 4px 6px; vertical-align: middle; }
.protocol-block .data-grid .form-control-sm { min-width: 150px; font-size: 12px; }

/* ---- ABA: editor de cartões de estímulo ---------------------------------- */
/* Grade de cartões de um palco. Cada cartão traz sua miniatura em cima dos
   controles, para o efeito de cor/palavra ser visível enquanto se edita. */
.stimulus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.stimulus-card {
    padding: 10px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface);
}
.stimulus-preview {
    height: 96px; margin-bottom: 8px;
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface-variant);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.stimulus-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stimulus-word { font-weight: 700; font-size: 20px; color: #111827; }
.stimulus-empty { font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
/* O input de arquivo nativo é feio e largo; vira um botãozinho discreto. */
.stimulus-file {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; cursor: pointer;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-full);
    font-size: 11px; color: var(--md-sys-color-on-surface-variant);
}
.stimulus-file:hover { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.stimulus-file input[type="file"] { display: none; }

/* ---- ABA: construtor de avaliação ---------------------------------------- */
/* Os botões de pontuação. Quantos são e o que dizem depende do instrumento
   (App\Aba\Catalog\ScoringScale), então o pad se adapta ao número de opções. */
.score-pad {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center; justify-content: flex-end;
    padding: 6px; border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface-container);
}
.score-btn {
    min-width: 38px; height: 38px; padding: 0 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.15s ease;
}
.score-btn:hover { border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary); }
.score-btn.is-active {
    background: var(--md-sys-color-primary);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}
.score-btn--clear { font-weight: 400; color: var(--md-sys-color-on-surface-variant); }
.eval-item { padding: 16px; margin-bottom: 12px; }
.eval-item[hidden] { display: none; }
.eval-item-image { max-width: 320px; border-radius: var(--md-sys-shape-corner-small); }
@media (max-width: 720px) {
    .eval-item .list-item { flex-wrap: wrap; }
    .score-pad { width: 100%; justify-content: flex-start; }
}

/* ---- ABA: gráficos SVG --------------------------------------------------- */
/* O SVG é renderizado no servidor e herda as cores do tema por var(--…), então
   claro/escuro e a impressão funcionam sem JS. */
.aba-chart { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
@media print {
    .aba-chart { max-width: 100%; page-break-inside: avoid; }
}

/* ---- ABA: chips do Currículo Geral / PDI --------------------------------- */
/* Todos são token-driven, então claro e escuro saem de graça. Os sufixos vêm dos
   slugs do domínio: CurriculumScales::complexityBand()['slug'],
   ClinicalProgramStatus::slug() e CurriculumScales::termLabels()[…]['slug'] — mudar
   um slug lá exige a regra correspondente aqui. */
.curr-chip {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    padding: 2px 8px; border-radius: var(--md-sys-shape-corner-full);
    font-size: .6875rem; font-weight: 700; line-height: 1.6;
    border: 1px solid transparent;
}
.curr-chip--baixa,
.curr-chip--curto  { background: var(--app-scale-low-bg);     color: var(--app-scale-low-fg); }
.curr-chip--media,
.curr-chip--medio  { background: var(--app-scale-mid-bg);     color: var(--app-scale-mid-fg); }
.curr-chip--alta,
.curr-chip--longo  { background: var(--app-scale-high-bg);    color: var(--app-scale-high-fg); }
.curr-chip--muito-alta { background: var(--app-scale-top-bg); color: var(--app-scale-top-fg); }
.curr-chip--p1 { background: var(--app-scale-top-bg);     color: var(--app-scale-top-fg); }
.curr-chip--p2 { background: var(--app-scale-high-bg);    color: var(--app-scale-high-fg); }
.curr-chip--p3 { background: var(--app-scale-neutral-bg); color: var(--app-scale-neutral-fg); }
/* "Dominado" e "validado por N instrumentos" são marcas de CONFIRMAÇÃO, não de
   dificuldade — por isso a cor de sucesso, e não a escala. */
.curr-chip--mastered  { background: var(--app-scale-low-bg); color: var(--app-scale-low-fg); }
.curr-chip--validated { background: var(--app-scale-mid-bg); color: var(--app-scale-mid-fg); }

/* O código do item, sempre em fonte monoespaçada — é um identificador, e no original
   ele é a âncora visual da linha. */
.curr-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem; font-weight: 700;
    color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
    border-radius: var(--md-sys-shape-corner-extra-small);
    padding: 1px 6px; white-space: nowrap;
}

/* Rótulo em caixa-alta espaçada: a assinatura visual mais marcante do app original. */
.aba-label {
    display: block; font-size: .625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--md-sys-color-on-surface-variant); margin-bottom: 2px;
}

/* Controles embutidos na grade: precisam ser compactos para 10 colunas caberem. */
/* A grade genérica (.data-grid, do módulo Tabelas) trunca a célula numa linha só com
   reticências — ali o valor é um dado bruto. Aqui a célula tem TEXTO CLÍNICO (o
   objetivo da tarefa), que precisa quebrar em várias linhas e ser lido por inteiro. */
.curr-grid td {
    vertical-align: top;
    white-space: normal; overflow: visible; text-overflow: clip;
    max-width: 320px; min-width: 96px;
}
.curr-grid .form-select-sm,
.curr-grid .form-control-sm { min-width: 108px; font-size: .75rem; }
.curr-cell-actions { display: flex; gap: 4px; justify-content: flex-end; }
.curr-objective { font-weight: 600; line-height: 1.45; }
.curr-example { font-size: .75rem; font-style: italic; color: var(--md-sys-color-on-surface-variant); }
.curr-note {
    font-size: .75rem; margin: 6px 0 0; padding: 6px 8px;
    background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant);
    border-radius: var(--md-sys-shape-corner-extra-small);
}
.curr-seq { display: inline-flex; gap: 2px; margin-top: 4px; }

/* Faixa do critério de transição do PDI (80% por 3 sessões / ≤25% vai à supervisão):
   é regra clínica, então fica destacada no topo da tela, como no original. */
.pdi-rule {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 16px;
    border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.pdi-rule .bi { font-size: 1.25rem; flex: 0 0 auto; }
.pdi-area-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px 16px;
    background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant);
    font-size: .8125rem; font-weight: 700;
}
@media print {
    .pdi-rule { border: 1px solid #999; }
    .curr-grid .btn, .curr-grid select, .curr-grid input { display: none; }
}

/* ---- ABA: Folha de Resposta ---------------------------------------------- */
/* O teclado de tipos de resposta: 9 teclas, cada uma com "+" (a tecla toda) e "−"
   (remove a última daquele tipo). Precisa ser grande o suficiente para o aplicador
   acertar o clique enquanto observa o aprendiz. */
.attempt-pad {
    display: grid; gap: 8px; margin-top: 6px;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.attempt-key {
    display: flex; align-items: stretch; overflow: hidden;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-small);
}
.attempt-add {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 12px; border: 0; cursor: pointer;
    font-weight: 700; font-size: .8125rem;
    background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface);
}
.attempt-add:hover { filter: brightness(0.96); }
.attempt-add:active { transform: scale(.98); }
.attempt-count {
    min-width: 24px; padding: 0 6px; border-radius: var(--md-sys-shape-corner-full);
    background: rgba(0, 0, 0, .12); font-size: .75rem; text-align: center;
}
.attempt-remove {
    flex: 0 0 auto; width: 34px; border: 0; cursor: pointer; font-weight: 700;
    border-left: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface); color: var(--md-sys-color-error);
}
.attempt-remove:hover { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }

/* A fita da sessão em curso: as tentativas na ordem em que foram clicadas. */
.attempt-tape {
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 84px; padding: 12px;
    border: 1px dashed var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-medium);
    background: var(--md-sys-color-surface-variant);
}
.attempt-chip {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 3px 8px; border-radius: var(--md-sys-shape-corner-small);
    font-size: .75rem; font-weight: 700;
    background: var(--app-scale-neutral-bg); color: var(--app-scale-neutral-fg);
}
.attempt-order { font-size: .625rem; opacity: .6; font-family: ui-monospace, Menlo, monospace; }
.attempt-drop {
    border: 0; background: none; cursor: pointer; padding: 0 2px;
    color: inherit; opacity: .55; font-size: .9rem; line-height: 1;
}
.attempt-drop:hover { opacity: 1; color: var(--md-sys-color-error); }

/* AC é o único acerto independente, e o teclado deixa isso claro à distância: verde
   só nele, tons de ajuda no resto. Mesma leitura do app original. */
.attempt-key--ac .attempt-add,
.attempt-chip--ac   { background: var(--app-scale-low-bg);  color: var(--app-scale-low-fg); }
.attempt-key--aft .attempt-add,
.attempt-chip--aft  { background: var(--app-scale-top-bg);  color: var(--app-scale-top-fg); }
.attempt-key--afp .attempt-add,
.attempt-chip--afp  { background: var(--app-scale-high-bg); color: var(--app-scale-high-fg); }
.attempt-key--agt .attempt-add,
.attempt-chip--agt  { background: var(--app-scale-mid-bg);  color: var(--app-scale-mid-fg); }
.attempt-key--agp .attempt-add,
.attempt-chip--agp  { background: var(--app-scale-mid-bg);  color: var(--app-scale-mid-fg); }
.attempt-key--aect .attempt-add,
.attempt-chip--aect { background: var(--app-scale-high-bg); color: var(--app-scale-high-fg); }
.attempt-key--aecp .attempt-add,
.attempt-chip--aecp { background: var(--app-scale-high-bg); color: var(--app-scale-high-fg); }
.attempt-key--aep .attempt-add,
.attempt-chip--aep  { background: var(--app-scale-neutral-bg); color: var(--app-scale-neutral-fg); }
.attempt-key--aet .attempt-add,
.attempt-chip--aet  { background: var(--app-scale-neutral-bg); color: var(--app-scale-neutral-fg); }

/* Faixa de alerta: mesma forma da regra do PDI, cor de erro — é o aviso de "leve à
   supervisão", que não pode passar despercebido. */
.pdi-rule--alert {
    background: var(--app-scale-top-bg); color: var(--app-scale-top-fg);
}
@media print {
    .attempt-pad, .attempt-tape { display: none; }
}

/* ---- ABA: Equivalências de Habilidades ----------------------------------- */
.equiv-picker { border: 0; padding: 0; margin: 0; }
.equiv-picker legend { float: none; width: auto; }
.equiv-member {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: var(--md-sys-shape-corner-small);
    background: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface);
    font-size: .8125rem;
}
.equiv-member form { display: inline; }
.equiv-member-drop {
    border: 0; background: none; cursor: pointer; padding: 0 2px; line-height: 1;
    color: var(--md-sys-color-on-surface-variant); font-size: 1rem;
}
.equiv-member-drop:hover { color: var(--md-sys-color-error); }
/* O "Acrescentar item" é um <details>: sem JS ele abre e fecha do mesmo jeito. */
.equiv-add summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
.equiv-add summary::-webkit-details-marker { display: none; }
.equiv-add[open] summary { margin-bottom: 4px; }

/* ---- ABA: Evolução do Aprendiz ------------------------------------------- */
/* Cartão de métrica compacto — rótulo em cima, número embaixo. Distinto do
   .stat-card do dashboard (ícone + conteúdo lado a lado), que tem outra estrutura
   interna e não pode ser reaproveitado aqui sem quebrar o alinhamento. */
.metric-grid {
    display: grid; gap: 12px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.metric-card { padding: 16px; }
.metric-value {
    display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2;
    color: var(--md-sys-color-on-surface);
}