/**
 * Serena — camada de tema (cores).
 *
 * Fonte da verdade: docs/docs_mobile/design-system.md (§7).
 * Para trocar a identidade do sistema inteiro, troque os 4 tons --brand-* abaixo.
 * O CSS do template (app.min.css) referencia estes tokens via var(), então não há
 * hex de marca solto em componente.
 *
 * Carregue este arquivo DEPOIS de app.min.css.
 */

:root,
[data-bs-theme='light'],
[data-bs-theme='dark'] {
    /* ─── TROQUE AQUI — os 4 tons da marca (§7) ─── */
    --brand-600: #355c52; /* primary        — superfícies, ícones, barra ativa */
    --brand-700: #26423b; /* primaryDark    — texto e botão preenchido        */
    --brand-100: #cde4df; /* primaryLight   — bordas de pílula, anel de foco  */
    --brand-50: #eef6f4; /* primaryLighter — fundos de destaque              */

    /* Derivados: 800 é o hover/active do botão preenchido; os -rgb servem a rgba() */
    --brand-800: #1b2f2a;
    --brand-600-rgb: 53, 92, 82;
    --brand-700-rgb: 38, 66, 59;

    /* ─── Neutros (§7) ─── */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --border-light: #f3f4f6;

    /* ─── Status: par fundo claro + texto escuro + borda (§3) ─── */
    --success-bg: #ecfdf5;
    --success-fg: #047857;
    --success-br: #d1fae5;
    --warning-bg: #fef3c7;
    --warning-fg: #92400e; /* o doc pede #D97706, que dá 2,86:1 sobre #FEF3C7 e reprova em AA; este dá 6,37:1 */
    --warning-br: #fde68a;
    --danger-bg: #fef2f2;
    --danger-fg: #b91c1c;
    --danger-br: #fecaca;
    --neutral-bg: #f3f4f6;
    --neutral-fg: #4b5563;
    --neutral-br: #e5e7eb;

    /* ─── Escalonamento e seleção ─── */
    --escalona-bg: #89b492;
    --escalona-fg: #14312a; /* sobre #89b492 dá 8,1:1 — passa em AA e AAA */
    --escalona-br: #6f9d79;
    --selecao-bg: #eaf2f0;

    /* Tinta da marca sobre superfície SUAVE (--brand-50, --border-light, --surface).
       Separada de --brand-700 porque aquele token também é FUNDO de botão preenchido:
       no modo escuro o fundo continua escuro e a tinta precisa clarear. */
    --brand-ink: var(--brand-700);
}

/**
 * ─── MODO ESCURO ───
 * Sem este bloco os neutros e os pares de status ficavam com o valor claro nos dois
 * temas (o seletor lá em cima lista `light` e `dark` juntos), e todo componente que
 * usa var(--surface) / var(--success-bg) / var(--text-primary) desenhava um card
 * branco com texto quase preto em cima do fundo escuro do template.
 *
 * Os valores acompanham o app.min.css do template para o card do Serena não destoar
 * do card do Bootstrap: fundo #2c313e, superfície #343b4a, borda #3c4556.
 */
[data-bs-theme='dark'] {
    /* Superfícies e texto */
    --bg: #2c313e;
    --surface: #343b4a;
    --text-primary: #e5e9ee;
    --text-secondary: #aab8c5;
    --text-muted: #9aa8b8; /* o #8391a2 do template dá 3,49:1 sobre a superfície e reprova em AA; este dá 4,63:1 */
    --border: #3c4556;
    --border-light: #2f3542;

    /* Marca: --brand-50/--brand-100 só aparecem como FUNDO e BORDA (nunca como
       texto), então viram véus da própria marca sobre o escuro. A tinta clareia. */
    --brand-50: rgba(var(--brand-600-rgb), .14);
    --brand-100: rgba(var(--brand-600-rgb), .34);
    --brand-ink: #5ed9ab;

    /* Status: mesmo par fundo/texto/borda, invertido — véu da cor + texto claro */
    --success-bg: rgba(5, 150, 105, .16);
    --success-fg: #6ee7b7;
    --success-br: rgba(5, 150, 105, .38);
    --warning-bg: rgba(241, 181, 61, .16);
    --warning-fg: #f2c76b;
    --warning-br: rgba(241, 181, 61, .38);
    --danger-bg: rgba(255, 93, 72, .16);
    --danger-fg: #ff9e91;
    --danger-br: rgba(255, 93, 72, .38);
    --neutral-bg: #3c4556;
    --neutral-fg: #aab8c5;
    --neutral-br: #4a5468;

    /* Escalonamento e seleção */
    --escalona-bg: #2f5a45;
    --escalona-fg: #dcefe4;
    --escalona-br: #3f7359;
    --selecao-bg: #2f3f39;

    /* O template aponta link e ênfase para --brand-100, que aqui virou véu
       translúcido — sem isto o link do modo escuro ficaria invisível. */
    --bs-link-color: var(--brand-ink);
    --bs-link-color-rgb: 94, 217, 171;
    --bs-link-hover-color: #8ee8c5;
    --bs-link-hover-color-rgb: 142, 232, 197;
    --bs-primary-text-emphasis: var(--brand-ink);
}

/**
 * §2, a regra que governa tudo abaixo:
 *   --brand-600 é cor de SUPERFÍCIE e ÍCONE.
 *   --brand-700 é cor de TEXTO e de BOTÃO PREENCHIDO.
 * #355C52 como texto sobre branco dá 7,49:1 e passa em WCAG AA; #26423B dá 10,9:1.
 * Por isso link, texto e botão preenchido puxam o 700 — e não o primary do template.
 */
:root,
[data-bs-theme='light'] {
    --bs-link-color: var(--brand-700);
    --bs-link-color-rgb: var(--brand-700-rgb);
    --bs-link-hover-color: var(--brand-800);
    --bs-link-hover-color-rgb: 6, 95, 70;
    --bs-primary-text-emphasis: var(--brand-700);
}

.text-primary {
    color: var(--brand-ink) !important;
}

/* Topbar e menu claros (§6): fundo branco, marca no item ativo */
:root[data-topbar-color='light'] {
    --bs-topbar-item-hover-color: var(--brand-700);
}

:root[data-menu-color='light'] {
    --bs-menu-item-active-color: var(--brand-700);
    --bs-menu-item-active-bg: var(--brand-50);
    --bs-menu-item-hover-color: var(--brand-700);
    --bs-menu-item-hover-bg: var(--brand-50);
}

/**
 * Botão preenchido usa --brand-700, não --brand-600 (§2).
 * #355C52 com texto branco dá 7,49:1 e passa em WCAG AA; #26423B dá 10,9:1.
 * É a única razão de o botão não seguir o primary do template.
 */
.btn-primary {
    --bs-btn-bg: var(--brand-700);
    --bs-btn-border-color: var(--brand-700);
    --bs-btn-hover-bg: var(--brand-800);
    --bs-btn-hover-border-color: var(--brand-800);
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-disabled-bg: var(--brand-600);
    --bs-btn-disabled-border-color: var(--brand-600);
    --bs-btn-focus-shadow-rgb: var(--brand-600-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-border-color: var(--brand-600);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-700);
    --bs-btn-active-border-color: var(--brand-700);
    --bs-btn-focus-shadow-rgb: var(--brand-600-rgb);
}

/* Ação de aprovação (§6.1): mesmo verde do primário, sempre ao lado de um Reprovar destrutivo */
.btn-success {
    --bs-btn-bg: var(--brand-700);
    --bs-btn-border-color: var(--brand-700);
    --bs-btn-hover-bg: var(--brand-800);
    --bs-btn-hover-border-color: var(--brand-800);
    --bs-btn-active-bg: var(--brand-800);
    --bs-btn-active-border-color: var(--brand-800);
    --bs-btn-focus-shadow-rgb: var(--brand-600-rgb);
}

/* Destrutivo (§6.1): reprovar, suspender, excluir */
.btn-danger {
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
}

/**
 * Pílulas de status (§3): fundo claro, texto escuro, borda.
 * O padrão do Bootstrap é pílula sólida com texto branco — que reprova em contraste
 * nos tons de aviso e sucesso. Aqui o tom claro pinta o fundo e o escuro escreve dentro.
 */
.badge.bg-success,
.badge.bg-primary {
    background-color: var(--success-bg) !important;
    color: var(--success-fg) !important;
    border: 1px solid var(--success-br);
}

.badge.bg-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning-fg) !important;
    border: 1px solid var(--warning-br);
}

.badge.bg-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger-fg) !important;
    border: 1px solid var(--danger-br);
}

.badge.bg-secondary,
.badge.bg-light {
    background-color: var(--neutral-bg) !important;
    color: var(--neutral-fg);
    border: 1px solid var(--neutral-br);
}

/**
 * "Publicado" / ativo é o único estado de pílula sólida (§3) — precisa se distinguir
 * de "Aprovado" à distância. Use <span class="badge badge-solid">.
 *
 * Fundo em --brand-700, não --brand-600: branco sobre #355C52 dá 7,49:1 e sobre #26423B dá 10,9:1,
 * o que a própria §2 proíbe. Sólida x clara continua distinguível à distância.
 */
.badge.badge-solid {
    background-color: var(--brand-700) !important;
    color: #fff;
    border: 1px solid var(--brand-800);
}

/* Foco de campo (§6.2): borda na marca + anel --brand-100 de 3px */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-100);
}

/**
 * Seleção e hover de linha: verde clarinho.
 *
 * Vem ANTES da regra de escalonamento de propósito. Os dois seletores têm a mesma
 * especificidade (0,2,2), então quem estiver por último vence — e o escalonamento
 * precisa vencer, senão passar o mouse sobre a linha de ideação suicida a desbotaria
 * para o verde claro da seleção. Não inverta a ordem.
 */
.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: var(--selecao-bg);
    --bs-table-hover-color: var(--text-primary);
}

.linha-selecionada > * {
    --bs-table-bg: var(--selecao-bg);
    --bs-table-striped-bg: var(--selecao-bg);
}

/**
 * Linha de escalonamento clínico.
 *
 * O Bootstrap pinta linha por variável, não por background direto: `table-striped` e
 * `table-hover` sobrescrevem qualquer `background-color` posto na `<tr>`. Por isso a
 * cor entra nas variáveis de estado — senão a listra zebrada volta a aparecer por
 * cima justamente na linha que precisa se destacar.
 */
.table > :not(caption) > tr.table-escalona > * {
    --bs-table-bg: var(--escalona-bg);
    --bs-table-color: var(--escalona-fg);
    --bs-table-striped-bg: var(--escalona-bg);
    --bs-table-striped-color: var(--escalona-fg);
    --bs-table-hover-bg: var(--escalona-br);
    --bs-table-hover-color: var(--escalona-fg);
    border-bottom-color: var(--escalona-br);
}

/**
 * Prazo estourado / parado — mesmos tokens de status do §3.
 *
 * O Bootstrap calcula `--bs-table-color` por contraste automático sobre o hex do
 * template (`#ff5d48`, `#f1b53d`). Com o fundo pastel claro que sobra depois do
 * alpha da linha, esse cálculo escolhe branco — e o texto some. Forçamos o par
 * fundo claro + texto escuro que o design system já validou em AA.
 */
.table > :not(caption) > tr.table-danger > * {
    --bs-table-bg: var(--danger-bg);
    --bs-table-color: var(--danger-fg);
    --bs-table-striped-bg: var(--danger-bg);
    --bs-table-striped-color: var(--danger-fg);
    --bs-table-hover-bg: var(--danger-br);
    --bs-table-hover-color: var(--danger-fg);
    --bs-table-bg-type: initial;
    border-bottom-color: var(--danger-br);
    box-shadow: inset 3px 0 0 var(--danger-fg);
}

.table > :not(caption) > tr.table-warning > * {
    --bs-table-bg: var(--warning-bg);
    --bs-table-color: var(--warning-fg);
    --bs-table-striped-bg: var(--warning-bg);
    --bs-table-striped-color: var(--warning-fg);
    --bs-table-hover-bg: var(--warning-br);
    --bs-table-hover-color: var(--warning-fg);
    --bs-table-bg-type: initial;
    border-bottom-color: var(--warning-br);
    box-shadow: inset 3px 0 0 var(--warning-fg);
}

/* Secundários dentro da linha alertada — não herdar o branco quebrado do template */
.table > :not(caption) > tr.table-danger .text-muted,
.table > :not(caption) > tr.table-warning .text-muted {
    color: inherit !important;
    opacity: 0.75;
}

.table > :not(caption) > tr.table-danger a,
.table > :not(caption) > tr.table-warning a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.table > :not(caption) > tr.table-danger .text-danger,
.table > :not(caption) > tr.table-danger .text-warning,
.table > :not(caption) > tr.table-warning .text-warning,
.table > :not(caption) > tr.table-warning .text-danger {
    color: inherit !important;
    font-weight: 600;
}

/* Pílula sólida do escalonamento — contraponto às pílulas claras acima */
.badge.bg-escalona {
    background-color: var(--escalona-bg) !important;
    color: var(--escalona-fg);
    border: 1px solid var(--escalona-br);
}

/* Aba ativa na cor da marca — o padrão do template usa o azul do Bootstrap */
.nav-tabs .nav-link.active {
    color: var(--brand-ink);
    border-bottom-color: var(--brand-600);
}

/**
 * `.nav-tabs.nav-bordered` (abas da estação de trabalho da consulta, das Filas de
 * aprovação, do formulário de agenda etc.): o padrão do tema não dá fundo NENHUM
 * ao item — só um traço de 1px embaixo do ativo. Numa tela sem card ao redor da
 * faixa de abas, a aba selecionada fica na mesma cor do fundo da página e ninguém
 * percebe que aquilo é clicável, muito menos qual está aberta.
 *
 * Vira um controle segmentado: tira colorida em --bg, aba ativa PREENCHIDA em
 * --brand-700 com texto branco — o contraste tem que ser alto o bastante para
 * ler a aba "de longe", não um branco-sobre-branco com sombra sutil (a primeira
 * versão disto ficou fiel demais ao tema e saiu sem vida nenhuma).
 *
 * Espaçamento (padding do link, gap, padding do container) é o mesmo da v1 —
 * só a cor/preenchimento do item ativo mudou. Não mexer no padding do `.active`
 * especificamente: é o que mantém a aba selecionada com a MESMA altura das outras.
 */
.nav-tabs.nav-bordered {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
    background-color: #fff;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
}

.nav-tabs.nav-bordered .nav-item {
    display: flex;
}

.nav-tabs.nav-bordered .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    color: var(--text-secondary);
    background-color: transparent;
    border: 0;
    border-radius: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-tabs.nav-bordered .nav-item .nav-link:hover:not(.active) {
    color: var(--brand-ink);
    background-color: rgb(255 255 255 / 60%);
}

.nav-tabs.nav-bordered .nav-item .nav-link.active {
    color: #fff;
    font-weight: 600;
    background-color: var(--brand-700);
}

/* O badge de contagem (`bg-primary-subtle text-primary`) foi desenhado para ficar
   sobre --bg, não sobre --brand-700: nessa combinação o texto sai quase invisível.
   Sobre a aba ativa ele vira uma pílula translúcida branca — o mesmo idioma do
   "branco sobre verde" que o resto da aba já usa. */
.nav-tabs.nav-bordered .nav-item .nav-link.active .badge {
    background-color: rgb(255 255 255 / 25%) !important;
    color: #fff !important;
}

/* ============================================================================
   QUADRO KANBAN (ADM-29 — funil de atendimento)
   ============================================================================

   O quadro precisa PARECER um quadro: raia com fundo próprio, cabeçalho fixo,
   card branco que se descola da raia e cursor de "pegar". Antes disso, as colunas
   eram só divs soltas lado a lado e ninguém reconhecia o objeto.

   Arrastar é gesto, não decisão: soltar o card ABRE O MODAL de movimentação, que
   continua exigindo motivo e continua auditado. O arrasto encurta o caminho até a
   pergunta; ele não pula a pergunta.
   ---------------------------------------------------------------------------- */

.kanban {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
}

.kanban-coluna {
    display: flex;
    flex-direction: column;
    flex: 0 0 280px;
    width: 280px;
    max-height: 68vh;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    scroll-snap-align: start;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

/* A faixa colorida no topo é o que diferencia a raia de um card comum. */
.kanban-coluna__topo {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.625rem 0.75rem;
    background-color: var(--bg);
    border-top: 3px solid var(--neutral-br);
    border-bottom: 1px solid var(--border);
    border-radius: 0.5rem 0.5rem 0 0;
}

.kanban-coluna--ativo .kanban-coluna__topo    { border-top-color: var(--brand-600); }
.kanban-coluna--ganho .kanban-coluna__topo    { border-top-color: var(--success-fg); }
.kanban-coluna--bloqueado .kanban-coluna__topo { border-top-color: var(--text-primary); }
.kanban-coluna--perdido .kanban-coluna__topo  { border-top-color: var(--text-muted); }

.kanban-coluna__lista {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.625rem;
    min-height: 6rem;
}

/* Alvo de soltura: o quadro precisa dizer ONDE o card vai cair. */
.kanban-coluna.is-over {
    background-color: var(--brand-50);
    border-color: var(--brand-600);
}

.kanban-coluna.is-over .kanban-coluna__lista {
    outline: 2px dashed var(--brand-600);
    outline-offset: -4px;
    border-radius: 0.375rem;
}

/* A coluna de origem não é alvo: soltar de volta nela não é movimentação. */
.kanban-coluna.is-origem {
    opacity: 0.6;
}

.kanban-card {
    position: relative;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.625rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgb(17 24 39 / 6%);
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.kanban-card:last-child { margin-bottom: 0; }

.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }

.kanban-card:hover {
    box-shadow: 0 4px 10px rgb(17 24 39 / 10%);
    transform: translateY(-1px);
}

.kanban-card.is-dragging {
    opacity: 0.45;
    box-shadow: none;
    transform: none;
}

/* Atraso é a única cor forte do card: quem estourou o prazo tem que saltar. */
.kanban-card--atrasado {
    border-color: var(--danger-br);
    border-left: 3px solid var(--danger-fg);
}

/* Punho de arraste — o affordance que faltava para o quadro se anunciar. */
.kanban-card__punho {
    color: var(--text-muted);
    cursor: grab;
    line-height: 1;
}

.kanban-vazio {
    border: 1px dashed var(--border);
    border-radius: 0.375rem;
    padding: 1.25rem 0.5rem;
    text-align: center;
    color: var(--text-muted);
}

/* Divisor entre a jornada e os desvios (bloqueado / perdido). */
.kanban-divisor {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    border-left: 2px dashed var(--border);
    color: var(--text-muted);
}

.kanban-divisor span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Padrão de formulário — ver public/assets/js/serena-forms.js
   ------------------------------------------------------------------ */

/* O asterisco de campo obrigatório é DESENHADO aqui e APLICADO pelo JS, que o
   deriva do `required` do campo. Nenhuma view escreve <span class="text-danger">*</span>
   na mão — era assim que asterisco e validação real dessincronizavam. */
/* `.header-title` entra na lista porque há bloco INTEIRO obrigatório, e não só campo:
   "Exames solicitados" no pedido de exame é o título de um repetidor cujas linhas são
   individualmente opcionais (a última fica em branco de propósito) mas do qual se
   exige ao menos uma. Não existe `required` de onde derivar isso — o `<select>` da
   linha não pode tê-lo, senão o navegador recusaria salvar o rascunho por causa da
   linha vazia que a própria tela desenha. */
/* ------------------------------------------------------------------
   `.text-muted` legível — contraste AA
   ------------------------------------------------------------------ */

/* O `.text-muted` do Bootstrap resolve para `--bs-secondary-color`, e o tema Hyper
   entrega `#9ba6b7` no modo claro. Sobre o branco dos cards isso dá **2,47:1** —
   reprova o mínimo de 4,5:1 da WCAG AA para texto normal, e reprovava com folga.
   Em `font-12` (rótulo de bloco, subtítulo de documento, coluna de data) o texto
   simplesmente não se lia; foi relatado duas vezes, em telas diferentes.

   O valor novo é `--text-secondary` (#6b7280), que ESTE arquivo já declara como a
   cor de texto secundário do sistema — ou seja, não é uma cor inventada aqui: é
   alinhar o utilitário do Bootstrap ao token que o design system já tinha. Sobre
   branco dá **4,83:1**, passa AA, e continua visivelmente mais claro que o texto
   primário (#111827) — que é o ponto do `.text-muted`: hierarquia, não invisibilidade.

   Um `!important` seria necessário para vencer o `.text-muted{...!important}` do
   `app.min.css` SE atacássemos a classe. Redefinir a VARIÁVEL evita essa briga por
   completo: a regra do Bootstrap continua valendo, só que sobre um valor legível.

   Escopo `[data-bs-theme=light]` de propósito. O modo escuro usa `#8391a2` sobre
   fundo escuro, onde o contraste já é outro — e o seletor de tema do rodapé permite
   trocar. Escurecer a variável global sem escopo deixaria o modo escuro pior. */
:root,
[data-bs-theme='light'] {
    --bs-secondary-color: var(--text-secondary);
}

.form-label.obrigatorio::after,
label.obrigatorio::after,
.header-title.obrigatorio::after {
    content: " *";
    color: var(--bs-danger);
    font-weight: 600;
}

/* O foco que o Enter deposita no botão do último campo precisa ser VISÍVEL —
   é o que avisa o usuário do que ele está prestes a acionar. */
.btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Dropzone — ver public/assets/js/serena-dropzone.js

   Mesmo idioma do kanban: `.is-over` lá, `.is-dragover` aqui — moldura
   tracejada em --brand-600 sobre --brand-50 diz ONDE a coisa vai cair.
   ------------------------------------------------------------------ */

.serena-dropzone {
    display: block;
}

.serena-dropzone__zona {
    /* Âncora do input transparente que fica POR CIMA — é ele que abre o
       seletor no clique e reporta o `required`. Ver o cabeçalho do JS. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    text-align: center;
    background-color: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.serena-dropzone__zona input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /* NÃO é `display:none`: escondido, o `required` trava o envio do formulário
       ("An invalid form control is not focusable") e o clique só funcionaria com JS. */
    opacity: 0;
    cursor: pointer;
}

.serena-dropzone__zona input[type="file"]:disabled {
    cursor: not-allowed;
}

.serena-dropzone__conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none; /* o alvo do clique é o input, não a decoração */
}

.serena-dropzone__icone {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--brand-ink);
}

.serena-dropzone__titulo {
    font-weight: 500;
    color: var(--text-primary);
}

.serena-dropzone__ajuda {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Arraste sobre a zona. */
.serena-dropzone.is-dragover .serena-dropzone__zona {
    background-color: var(--brand-50);
    border-color: var(--brand-600);
    border-style: dashed;
}

.serena-dropzone.is-dragover .serena-dropzone__icone {
    color: var(--brand-ink);
}

/* O foco é do input (transparente); o anel tem que aparecer na zona. */
.serena-dropzone.is-focus .serena-dropzone__zona {
    border-color: var(--brand-600);
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Formato ou tamanho recusado, ou `required` não preenchido. */
.serena-dropzone.is-invalid .serena-dropzone__zona {
    background-color: var(--danger-bg);
    border-color: var(--danger-br);
}

.serena-dropzone.is-invalid .serena-dropzone__icone {
    color: var(--danger-fg);
}

.serena-dropzone__erro {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--danger-fg);
}

/* Com arquivo escolhido, a zona vira rodapé da lista — não some, para dar onde
   soltar o próximo. */
.serena-dropzone.tem-arquivo .serena-dropzone__zona {
    padding: 0.75rem 1rem;
}

.serena-dropzone.tem-arquivo .serena-dropzone__icone {
    font-size: 1.25rem;
}

.serena-dropzone__lista {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.serena-dropzone__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.5rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
}

.serena-dropzone__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    background-color: var(--brand-50);
    border-radius: 0.25rem;
    color: var(--brand-ink);
    font-size: 1.125rem;
}

.serena-dropzone__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.serena-dropzone__meta {
    display: flex;
    flex-direction: column;
    min-width: 0; /* sem isto o nome longo estoura o flex em vez de truncar */
    flex: 1 1 auto;
}

.serena-dropzone__nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.serena-dropzone__tamanho {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.serena-dropzone__remover {
    flex: 0 0 auto;
    padding: 0.125rem 0.375rem;
    background: none;
    border: 0;
    border-radius: 0.25rem;
    line-height: 1;
    color: var(--text-muted);
}

.serena-dropzone__remover:hover,
.serena-dropzone__remover:focus-visible {
    background-color: var(--danger-bg);
    color: var(--danger-fg);
}

/* ------------------------------------------------------------------
   Conversa da consulta — ver public/assets/js/serena-conversa.js
   e app/Views/partials/_conversa-consulta.php

   O MESMO bloco serve o paciente e o médico. Quem é "eu" muda por
   modificador (`--eu`), não por folha de estilo — duas cópias
   divergiriam no primeiro ajuste, e a thread é a mesma coisa dos dois
   lados.

   O balão de quem fala usa --brand-700, e NÃO --brand-600: a regra §2
   do design-system diz que 600 é cor de SUPERFÍCIE e 700 é cor de
   TEXTO e de BOTÃO PREENCHIDO. Com a marca nova os dois passam — branco sobre
   #355C52 dá 7,49:1 e sobre #26423B dá 10,9:1 —, mas a divisão de papéis
   continua, porque é ela que mantém hierarquia entre os dois tons.
   ------------------------------------------------------------------ */

.serena-chat {
    display: flex;
    flex-direction: column;
    /* Altura contida, e não `auto`: a thread precisa rolar DENTRO dela. Sem
       isto, uma conversa longa empurra o campo de escrever para fora da
       tela e o paciente rola a página inteira para conseguir responder. */
    height: clamp(24rem, 60vh, 34rem);
}

/* ── A thread ───────────────────────────────────────────────────── */

.serena-chat__thread {
    flex: 1 1 auto;
    overflow-y: auto;
    /* Sem isto, chegar ao fim da thread passa a rolagem para a página. */
    overscroll-behavior: contain;
    padding: 1rem;
    background-color: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.serena-chat__dia {
    align-self: center;
    margin: 0.5rem 0 0.25rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* ── Os balões ──────────────────────────────────────────────────── */

.serena-chat__linha {
    display: flex;
    max-width: 100%;
}

.serena-chat__linha--eu {
    justify-content: flex-end;
}

.serena-chat__balao {
    max-width: min(80%, 34rem);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    /* A fala vem de um textarea: quebra de linha é conteúdo, e `pre-wrap` é o
       que a preserva. `break-word` existe porque alguém VAI colar uma URL de
       300 caracteres. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    /* O "rabinho": o canto de baixo do lado de quem falou é reto. É o que
       deixa a autoria óbvia sem escrever o nome em todo balão. */
    border-bottom-left-radius: 0.125rem;
}

.serena-chat__linha--eu .serena-chat__balao {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.125rem;
}

.serena-chat__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.serena-chat__linha--eu .serena-chat__meta {
    /* Sobre o verde escuro, o cinza de texto sumiria. */
    color: rgba(255, 255, 255, 0.75);
}

.serena-chat__lida {
    color: #7dd3fc;
}

/* ── Mensagem de sistema ────────────────────────────────────────── */

.serena-chat__sistema {
    align-self: center;
    max-width: min(90%, 30rem);
    padding: 0.3125rem 0.75rem;
    text-align: center;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    background-color: var(--neutral-bg);
    border-radius: 999px;
}

/* ── Card da receita ────────────────────────────────────────────── */

.serena-chat__receita {
    align-self: center;
    width: min(100%, 26rem);
    padding: 0.75rem;
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 0.5rem;
}

.serena-chat__receita-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--brand-ink);
}

.serena-chat__receita-dados {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── Anexo ──────────────────────────────────────────────────────── */

.serena-chat__anexo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0;
    text-decoration: none;
    color: inherit;
}

.serena-chat__anexo-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    background-color: var(--neutral-bg);
    color: var(--text-secondary);
}

.serena-chat__linha--eu .serena-chat__anexo-icone {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.serena-chat__anexo-nome {
    font-size: 0.8125rem;
    font-weight: 500;
    word-break: break-all;
}

.serena-chat__anexo-tamanho {
    font-size: 0.6875rem;
    opacity: 0.75;
}

.serena-chat__imagem {
    display: block;
    max-width: 100%;
    max-height: 14rem;
    border-radius: 0.5rem;
    margin-bottom: 0.25rem;
}

/* ── Estado vazio ───────────────────────────────────────────────── */

.serena-chat__vazio {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ── "digitando…" ───────────────────────────────────────────────── */

.serena-chat__digitando {
    padding: 0 1rem 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    background-color: var(--bg);
}

/* ── O composer ─────────────────────────────────────────────────── */

.serena-chat__composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.625rem;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
}

.serena-chat__campo {
    flex: 1 1 auto;
    resize: none;
    max-height: 8rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background-color: var(--surface);
    color: var(--text-primary);
}

.serena-chat__campo:focus {
    outline: none;
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.serena-chat__botao {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand-700);
    color: #fff;
    transition: background-color 0.12s ease, opacity 0.12s ease;
}

.serena-chat__botao:hover:not(:disabled) {
    background-color: var(--brand-800);
}

.serena-chat__botao:disabled {
    opacity: 0.45;
}

.serena-chat__botao--claro {
    background-color: var(--neutral-bg);
    color: var(--text-secondary);
}

.serena-chat__botao--claro:hover:not(:disabled) {
    background-color: var(--border);
    color: var(--text-primary);
}

/* O input de arquivo fica transparente POR CIMA do botão do clipe — mesmo
   truque do serena-dropzone, e pelo mesmo motivo: um input `display:none`
   some com o foco do teclado e quebra o clique em alguns navegadores. */
.serena-chat__clipe {
    position: relative;
    overflow: hidden;
}

.serena-chat__clipe input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

/* Arrastar arquivo sobre a thread inteira. Mesmo idioma do dropzone e do
   kanban: moldura tracejada em --brand-600 sobre --brand-50 diz ONDE cai. */
.serena-chat.is-dragover .serena-chat__thread {
    background-color: var(--brand-50);
    outline: 2px dashed var(--brand-600);
    outline-offset: -0.5rem;
}

/* ── Conversa encerrada ─────────────────────────────────────────── */

.serena-chat__fechado {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    background-color: var(--neutral-bg);
    border-top: 1px solid var(--border);
}

/* ============================================================================
   ÁREA DO PACIENTE — visão geral, menu e canal de suporte
   ----------------------------------------------------------------------------
   Tudo aqui obedece a §2: --brand-600 é SUPERFÍCIE e ÍCONE, --brand-700 é TEXTO.
   Nenhum hex de marca solto — o que não é marca (o roxo do KPI, o verde do
   WhatsApp) é declarado no próprio componente, e de propósito: não são tons da
   Serena e não devem virar token, senão a troca de identidade os arrasta junto.
   ============================================================================ */

/* ── Cabeçalho da tela ──────────────────────────────────────────── */

.serena-titulo-pagina {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Pílula clara com ícone: o par fundo+texto vem de .badge.bg-* já definido acima,
   e esta classe só acrescenta a forma. Por isso ela ACOMPANHA um bg-*, nunca
   substitui — sozinha, ficaria sem cor. */
.serena-badge-pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
}

/* ── Aviso de elegibilidade ─────────────────────────────────────── */

.serena-aviso {
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

/* `currentColor` no fundo faz o disco herdar a cor do .alert-* que o embrulha:
   um aviso de perigo fica vermelho sem precisar de regra própria. O <i> volta
   para branco porque senão herdaria o mesmo tom e sumiria dentro do disco. */
.serena-aviso__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.25rem;
    background-color: currentColor;
}

.serena-aviso__icone > i {
    color: #fff;
}

/* ── Ladrilho de ícone (KPI, informações) ───────────────────────── */

.serena-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 1.5rem;
}

.serena-tile--brand {
    color: var(--brand-ink);
    background-color: var(--brand-50);
}

/* Roxo: contraste de CATEGORIA, não de status — separa "já aconteceu" de "vai
   acontecer" sem sugerir sucesso nem alerta. */
.serena-tile--roxo {
    color: #6d28d9;
    background-color: #ede9fe;
}

/* Ciano e âmbar nascem do painel do MÉDICO, que tem quatro contadores contra os
   dois do paciente. Vale a mesma regra do roxo: são CATEGORIAS, não status — o
   âmbar aqui quer dizer "agenda", e não "atenção". Quem precisar sinalizar
   alerta usa o alert do tema, que é o lugar onde a cor tem esse significado. */
.serena-tile--ciano {
    color: #0e7490;
    background-color: #cffafe;
}

.serena-tile--ambar {
    color: #b45309;
    background-color: #fef3c7;
}

/* ── KPI clicável ───────────────────────────────────────────────── */

.serena-kpi {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.serena-kpi:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 8%);
}

/* O card inteiro é um link: sem foco visível, quem navega por teclado não sabe
   onde está. */
.serena-kpi:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* ── Dashboard ADM-04 — cartões e alerta clínico ─────────────────── */

.dash-periodo {
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
}

.dash-periodo__pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.2rem;
    background: var(--border-light);
    border-radius: 999px;
}

.dash-periodo__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* A pílula "Personalizar" é um <button> (abre o dropdown de datas) e precisa
   perder o cromo nativo do botão para ficar idêntica às pílulas-link ao lado. */
button.dash-periodo__pill {
    font-family: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.dash-periodo__pill:hover {
    color: var(--brand-ink);
    background-color: rgb(255 255 255 / 70%);
}

.dash-periodo__pill.is-active {
    color: var(--brand-ink);
    background-color: var(--brand-50);
    box-shadow: 0 1px 2px rgb(var(--brand-700-rgb) / 8%);
}

/* Alerta clínico: fundo rosa bem sutil, ícone com anéis de onda, título
   alinhado ao centro da bolinha. */
.dash-risco {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.25rem 1.35rem 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 50%, #fffafa 100%);
    border: 1px solid #fecaca;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(185 28 28 / 4%);
}

.dash-risco__cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 0.85rem;
    margin-bottom: 0.65rem;
}

/* Bolinha com “sombrinha” e ondas que expandem (radar / zone-wave). */
.dash-risco__bolinha {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0.85rem;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 50%;
    box-shadow:
        0 2px 8px rgb(185 28 28 / 18%),
        0 0 0 3px rgb(254 226 226 / 90%);
}

.dash-risco__bolinha > i {
    position: relative;
    z-index: 2;
}

/* Anéis de onda: partem da bolinha, crescem e somem. */
.dash-risco__bolinha::before,
.dash-risco__bolinha::after {
    content: '';
}

.dash-risco__bolinha::before,
.dash-risco__bolinha::after,
.dash-risco__onda {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    border: 2px solid rgb(220 38 38 / 45%);
    box-shadow: 0 0 12px rgb(220 38 38 / 18%);
    pointer-events: none;
    animation: dash-risco-wave 2.6s cubic-bezier(0.15, 0.6, 0.3, 1) infinite;
}

.dash-risco__bolinha::after {
    animation-delay: 0.85s;
}

.dash-risco__onda {
    animation-delay: 1.7s;
}

@keyframes dash-risco-wave {
    0% {
        transform: scale(1);
        opacity: 0.65;
        border-color: rgb(220 38 38 / 55%);
    }
    70% {
        opacity: 0.18;
    }
    100% {
        transform: scale(2.35);
        opacity: 0;
        border-color: rgb(220 38 38 / 0%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-risco__bolinha::before,
    .dash-risco__bolinha::after,
    .dash-risco__onda {
        animation: none;
        /* Anéis estáticos quando o usuário pede menos movimento. */
        transform: scale(1.35);
        opacity: 0.35;
    }

    .dash-risco__bolinha::after {
        transform: scale(1.7);
        opacity: 0.2;
    }

    .dash-risco__onda {
        transform: scale(2.05);
        opacity: 0.1;
    }
}

.dash-risco__titulo {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #b91c1c;
}

.dash-risco__badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #b91c1c !important;
    background: #fee2e2 !important;
    border: 1px solid #fecaca;
}

.dash-risco__corpo {
    /* Empurra texto/CTA para alinhar sob o título, não sob a bolinha + ondas. */
    padding-left: calc(2.75rem + 1.7rem + 0.85rem);
}

.dash-risco__corpo > p:first-child {
    color: #374151;
}

@media (max-width: 575.98px) {
    .dash-risco__corpo {
        padding-left: 0;
    }
}

/* X do alerta clínico sensível. Fica fora do fluxo do cabeçalho (que é flex e
   quebra linha) para não empurrar os badges, e o cartão reserva o espaço dele
   à direita. */
.dash-risco__fechar {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    opacity: 0.45;
}

.dash-risco__fechar:hover,
.dash-risco__fechar:focus-visible {
    opacity: 1;
}

.dash-risco:has(.dash-risco__fechar) {
    padding-right: 2.6rem;
}

/* Saída do cartão ao dispensar (o X). */
.dash-risco.is-saindo {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .dash-risco.is-saindo {
        transition: none;
    }
}

/* Cartão KPI com ícone temático, marca d'água e onda na base. */
.dash-kpi {
    --dash-kpi-accent: var(--brand-600);
    --dash-kpi-soft: var(--brand-50);
    --dash-kpi-ink: var(--brand-700);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.dash-kpi:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--dash-kpi-accent) 28%, var(--border));
    box-shadow: 0 8px 22px rgb(0 0 0 / 7%);
    transform: translateY(-2px);
}

a.dash-kpi:focus-visible {
    outline: 2px solid var(--dash-kpi-accent);
    outline-offset: 2px;
}

.dash-kpi--verde {
    --dash-kpi-accent: #059669;
    --dash-kpi-soft: #ecfdf5;
    --dash-kpi-ink: #047857;
}

.dash-kpi--azul {
    --dash-kpi-accent: #2563eb;
    --dash-kpi-soft: #eff6ff;
    --dash-kpi-ink: #1d4ed8;
}

.dash-kpi--roxo {
    --dash-kpi-accent: #7c3aed;
    --dash-kpi-soft: #f5f3ff;
    --dash-kpi-ink: #6d28d9;
}

.dash-kpi--ambar {
    --dash-kpi-accent: #d97706;
    --dash-kpi-soft: #fffbeb;
    --dash-kpi-ink: #b45309;
}

.dash-kpi__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Bottom maior que a altura da onda (~4.25rem) para o link nunca encostar nela. */
    padding: 1.25rem 1.25rem 4.75rem;
}

.dash-kpi__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.dash-kpi__titulo-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

/* Bolinha colorida à esquerda — o título alinha ao centro dela. */
.dash-kpi__bolinha {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    color: var(--dash-kpi-ink);
    background: var(--dash-kpi-soft);
    border-radius: 50%;
}

.dash-kpi__titulo {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.dash-kpi__marca {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--dash-kpi-accent);
    background: var(--dash-kpi-soft);
    border-radius: 50%;
    opacity: 0.55;
}

.dash-kpi__valor {
    margin: 0 0 0.2rem;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dash-kpi__valor.is-alerta {
    color: var(--dash-kpi-ink);
}

.dash-kpi__meta {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dash-kpi__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.dash-kpi__badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.28rem 0.55rem;
    border-radius: 0.45rem;
}

.dash-kpi__link {
    margin-top: auto;
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-ink);
}

.dash-kpi__link i {
    font-size: 0.85rem;
}

/* Onda decorativa na base do cartão (área chart sutil). */
.dash-kpi__onda {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 4.25rem;
    pointer-events: none;
}

.dash-kpi__onda path.onda-fill {
    fill: var(--dash-kpi-accent);
    opacity: 0.07;
}

.dash-kpi__onda path.onda-linha {
    fill: none;
    stroke: var(--dash-kpi-accent);
    stroke-width: 1.25;
    opacity: 0.2;
}

.dash-kpi__aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #1e40af;
    text-decoration: none;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.65rem;
}

.dash-kpi__aviso:hover {
    color: #1e3a8a;
    background: #dbeafe;
}

.dash-kpi__aviso strong {
    font-weight: 650;
}

.dash-kpi__aviso-cta {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Ilustração suave no card de documentos. */
.dash-kpi__arte {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    z-index: 0;
    width: 5.5rem;
    height: 5.5rem;
    pointer-events: none;
    opacity: 0.9;
}

.dash-kpi--com-arte .dash-kpi__body {
    padding-right: 5.5rem;
    padding-bottom: 4.75rem;
}

.dash-kpi--com-arte .dash-kpi__valor.is-alerta {
    color: #d97706;
}

@media (prefers-reduced-motion: reduce) {
    a.dash-kpi:hover {
        transform: none;
    }
}

/* ── Dashboard — Filas de aprovação ─────────────────────────────── */

.dash-secao {
    margin-bottom: 1.75rem;
}

.dash-secao__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.dash-secao__titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dash-secao__titulo i {
    color: var(--text-secondary);
}

.dash-secao__subtitulo {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.dash-secao__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 999px;
}

.dash-fila {
    --dash-fila-accent: #64748b;
    --dash-fila-soft: #f1f5f9;
    --dash-fila-ink: #475569;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.1rem 1.15rem;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.dash-fila:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--dash-fila-accent) 30%, var(--border));
    box-shadow: 0 8px 20px rgb(0 0 0 / 6%);
    transform: translateY(-2px);
}

a.dash-fila:focus-visible {
    outline: 2px solid var(--dash-fila-accent);
    outline-offset: 2px;
}

.dash-fila.is-disabled {
    cursor: not-allowed;
    opacity: 0.85;
    background: #fafafa;
}

.dash-fila--azul {
    --dash-fila-accent: #2563eb;
    --dash-fila-soft: #eff6ff;
    --dash-fila-ink: #1d4ed8;
}

.dash-fila--indigo {
    --dash-fila-accent: #4f46e5;
    --dash-fila-soft: #eef2ff;
    --dash-fila-ink: #4338ca;
}

.dash-fila--roxo {
    --dash-fila-accent: #7c3aed;
    --dash-fila-soft: #f5f3ff;
    --dash-fila-ink: #6d28d9;
}

.dash-fila--rosa {
    --dash-fila-accent: #db2777;
    --dash-fila-soft: #fdf2f8;
    --dash-fila-ink: #be185d;
}

.dash-fila--verde {
    --dash-fila-accent: #059669;
    --dash-fila-soft: #ecfdf5;
    --dash-fila-ink: #047857;
}

.dash-fila--teal {
    --dash-fila-accent: #0d9488;
    --dash-fila-soft: #f0fdfa;
    --dash-fila-ink: #0f766e;
}

.dash-fila--laranja {
    --dash-fila-accent: #ea580c;
    --dash-fila-soft: #fff7ed;
    --dash-fila-ink: #c2410c;
}

.dash-fila--ambar {
    --dash-fila-accent: #d97706;
    --dash-fila-soft: #fffbeb;
    --dash-fila-ink: #b45309;
}

.dash-fila--cinza {
    --dash-fila-accent: #64748b;
    --dash-fila-soft: #f1f5f9;
    --dash-fila-ink: #475569;
}

.dash-fila__topo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.dash-fila__icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--dash-fila-ink);
    background: var(--dash-fila-soft);
    border-radius: 0.6rem;
}

.dash-fila__contador {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    margin-left: auto;
    padding: 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dash-fila-ink);
    background: var(--dash-fila-soft);
    border-radius: 0.5rem;
}

.dash-fila__titulo {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

.dash-fila__desc {
    margin: 0 0 0.85rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.dash-fila__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.dash-fila__prio {
    padding: 0.15rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border-radius: 999px;
}

.dash-fila__breve {
    padding: 0.15rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--border-light);
    border-radius: 999px;
}

/* ── Dashboard — Alertas em faixa ───────────────────────────────── */

.dash-alerta {
    --dash-alerta-accent: #64748b;
    --dash-alerta-soft: #f8fafc;
    --dash-alerta-ink: #334155;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        'icone cabecalho cta'
        'icone desc      cta';
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.2rem;
    padding: 0.95rem 1.1rem;
    background: var(--dash-alerta-soft);
    border: 1px solid color-mix(in srgb, var(--dash-alerta-accent) 18%, #fff);
    border-left: 4px solid var(--dash-alerta-accent);
    border-radius: 0.75rem;
}

@media (max-width: 767.98px) {
    .dash-alerta {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'icone cabecalho'
            'icone desc'
            'cta   cta';
    }

    .dash-alerta__cta {
        justify-self: start;
        margin-top: 0.35rem;
    }
}

.dash-alerta--alta {
    --dash-alerta-accent: #dc2626;
    --dash-alerta-soft: #fef2f2;
    --dash-alerta-ink: #b91c1c;
}

.dash-alerta--media {
    --dash-alerta-accent: #d97706;
    --dash-alerta-soft: #fffbeb;
    --dash-alerta-ink: #b45309;
}

.dash-alerta--baixa {
    --dash-alerta-accent: #2563eb;
    --dash-alerta-soft: #eff6ff;
    --dash-alerta-ink: #1d4ed8;
}

.dash-alerta__icone {
    grid-area: icone;
    align-self: start;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    color: var(--dash-alerta-ink);
    background: color-mix(in srgb, var(--dash-alerta-accent) 12%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--dash-alerta-accent) 28%, #fff);
    border-radius: 50%;
}

.dash-alerta__corpo {
    display: contents;
}

.dash-alerta__cabecalho {
    grid-area: cabecalho;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    min-height: 2.35rem;
}

.dash-alerta__titulo {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--dash-alerta-ink);
}

.dash-alerta__badge {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 0.28rem 0.5rem !important;
    border-radius: 999px !important;
}

.dash-alerta__badge--sev {
    color: #fff !important;
    background: var(--dash-alerta-accent) !important;
}

.dash-alerta__badge--lock {
    color: #475569 !important;
    background: #e2e8f0 !important;
}

.dash-alerta__desc {
    grid-area: desc;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #4b5563;
}

.dash-alerta__cta {
    grid-area: cta;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dash-alerta__cta:hover {
    color: var(--brand-ink);
    border-color: var(--brand-100);
    background: var(--brand-50);
}

.dash-alerta__fechar {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
}

.dash-alerta:has(.dash-alerta__fechar) {
    position: relative;
    padding-right: 2.25rem;
}

/* Saída do alerta ao dispensar (o X). */
.dash-alerta.is-saindo {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ── Dashboard — estado vazio ("sem movimentação") ──────────────────
   Card de vazio com respiro: ícone em círculo, título forte e subtítulo.
   Usado por filas, alertas e recorte sem movimento — a mesma linguagem. */

.dash-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 240px;
    padding: 2.75rem 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
}

/* `display: flex` do autor venceria a regra de UA para [hidden]; reafirmamos. */
.dash-vazio[hidden] {
    display: none;
}

.dash-vazio__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.35rem;
    font-size: 1.6rem;
    color: var(--text-secondary);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 50%;
}

.dash-vazio__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dash-vazio__subtitulo {
    max-width: 46ch;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    a.dash-fila:hover {
        transform: none;
    }

    .dash-alerta.is-saindo {
        transition: none;
    }
}

/* ── Dashboard — Faturamento ────────────────────────────────────── */

.dash-fat {
    --dash-fat-accent: #7c3aed;
    --dash-fat-soft: #f5f3ff;
    --dash-fat-ink: #6d28d9;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.dash-fat:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--dash-fat-accent) 28%, var(--border));
    box-shadow: 0 8px 22px rgb(0 0 0 / 7%);
    transform: translateY(-2px);
}

a.dash-fat:focus-visible {
    outline: 2px solid var(--dash-fat-accent);
    outline-offset: 2px;
}

.dash-fat--roxo {
    --dash-fat-accent: #7c3aed;
    --dash-fat-soft: #f5f3ff;
    --dash-fat-ink: #6d28d9;
}

.dash-fat--verde {
    --dash-fat-accent: #059669;
    --dash-fat-soft: #ecfdf5;
    --dash-fat-ink: #047857;
}

.dash-fat .dash-kpi__onda path.onda-fill {
    fill: var(--dash-fat-accent);
}

.dash-fat .dash-kpi__onda path.onda-linha {
    stroke: var(--dash-fat-accent);
}

.dash-fat__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Mesmo respiro dos KPIs: link acima da onda. */
    padding: 1.25rem 1.25rem 4.75rem;
}

.dash-fat__topo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.dash-fat__icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--dash-fat-ink);
    background: var(--dash-fat-soft);
    border-radius: 0.6rem;
}

.dash-fat__titulo {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.dash-fat__marca {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    color: var(--dash-fat-accent);
    background: var(--dash-fat-soft);
    border-radius: 50%;
    opacity: 0.7;
}

.dash-fat__valor {
    margin: 0 0 0.2rem;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dash-fat__meta {
    margin: 0 0 0.9rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dash-fat__lista {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.dash-fat__lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.dash-fat__lista li.is-destaque {
    font-weight: 700;
    color: var(--text-primary);
}

.dash-fat__pill {
    display: inline-flex;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: var(--border-light);
    border-radius: 999px;
}

.dash-fat__neg {
    font-weight: 600;
    color: #dc2626;
}

.dash-fat__link {
    margin-top: auto;
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-ink);
}

@media (prefers-reduced-motion: reduce) {
    a.dash-fat:hover {
        transform: none;
    }
}

/* ── Dashboard — Movimento diário ───────────────────────────────── */

.dash-mov {
    padding: 1.25rem 1.35rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
}

.dash-mov__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.dash-mov__legenda {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.dash-mov__legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--border-light);
    border-radius: 999px;
}

.dash-mov__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.dash-mov__dot--roxo {
    background: #7c3aed;
}

.dash-mov__dot--verde {
    background: #059669;
}

.dash-mov__canvas {
    height: 260px;
}

.dash-mov__nota {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
}

.dash-mov__nota i {
    margin-top: 0.1rem;
    color: var(--text-muted);
}

/* ── Quando é a consulta ────────────────────────────────────────── */

.serena-quando {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.serena-quando__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    font-size: 1.5rem;
    color: var(--brand-ink);
    background-color: var(--brand-50);
}

.serena-quando__data {
    text-align: center;
    line-height: 1.2;
}

.serena-quando__dia {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.serena-quando__hora {
    text-align: center;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
}

/* ── Painel do parceiro (PAR-06) ─────────────────────────────────── */

.par-kpi {
    --par-kpi-accent: var(--brand-600);
    --par-kpi-soft: var(--brand-50);
    --par-kpi-ink: var(--brand-700);
    display: block;
    height: 100%;
    padding: 1.25rem;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.par-kpi:hover {
    color: inherit;
    border-color: color-mix(in srgb, var(--par-kpi-accent) 28%, var(--border));
    box-shadow: 0 8px 22px rgb(0 0 0 / 7%);
    transform: translateY(-2px);
}

a.par-kpi:focus-visible {
    outline: 2px solid var(--par-kpi-accent);
    outline-offset: 2px;
}

.par-kpi--verde {
    --par-kpi-accent: #059669;
    --par-kpi-soft: #ecfdf5;
    --par-kpi-ink: #047857;
}

.par-kpi--azul {
    --par-kpi-accent: #2563eb;
    --par-kpi-soft: #eff6ff;
    --par-kpi-ink: #1d4ed8;
}

.par-kpi--ambar {
    --par-kpi-accent: #d97706;
    --par-kpi-soft: #fff7ed;
    --par-kpi-ink: #c2410c;
}

.par-kpi--roxo {
    --par-kpi-accent: #7c3aed;
    --par-kpi-soft: #f5f3ff;
    --par-kpi-ink: #6d28d9;
}

.par-kpi__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.85rem;
    font-size: 1.25rem;
    color: var(--par-kpi-ink);
    background: var(--par-kpi-soft);
    border-radius: 0.75rem;
}

.par-kpi__titulo {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.par-kpi__valor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.25rem;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

.par-kpi__estrela {
    font-size: 1.1rem;
    color: #f1b53d;
}

.par-kpi__delta {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 999px;
}

.par-kpi__delta--up {
    color: #047857;
    background: #ecfdf5;
}

.par-kpi__delta--down {
    color: #b91c1c;
    background: #fef2f2;
}

.par-kpi__meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
}

/* CTA loja sem movimento */
.par-cta {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
}

.par-cta__corpo {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 1.5rem 2rem;
}

.par-cta__arte {
    display: flex;
    align-items: center;
    justify-content: center;
}

.par-cta__img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    border-radius: 0.875rem;
}

.par-cta__selo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    color: var(--brand-ink);
    background: var(--brand-50);
    border-radius: 999px;
}

.par-cta__titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.par-cta__texto {
    max-width: 36rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.par-cta__botao {
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    border-radius: 0.65rem;
}

.par-passos__titulo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.par-passo {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    height: 100%;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 3%);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.par-passo:hover {
    color: inherit;
    border-color: var(--brand-100);
    box-shadow: 0 8px 20px rgb(0 0 0 / 6%);
    transform: translateY(-2px);
}

a.par-passo:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.par-passo__icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.1rem;
    color: var(--brand-ink);
    background: var(--brand-50);
    border-radius: 0.65rem;
}

.par-passo--verde .par-passo__icone {
    color: #047857;
    background: #ecfdf5;
}

.par-passo--azul .par-passo__icone {
    color: #1d4ed8;
    background: #eff6ff;
}

.par-passo--ambar .par-passo__icone {
    color: #c2410c;
    background: #fff7ed;
}

.par-passo--roxo .par-passo__icone {
    color: #6d28d9;
    background: #f5f3ff;
}

.par-passo__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.par-passo__titulo {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.par-passo__num {
    color: var(--brand-ink);
}

.par-passo__texto {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.par-passo__seta {
    flex-shrink: 0;
    margin-top: 0.35rem;
    color: var(--text-muted, #94a3b8);
}

@media (max-width: 991.98px) {
    .par-cta__corpo {
        grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .par-cta__corpo {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        text-align: center;
    }

    .par-cta__arte {
        order: -1;
    }

    .par-cta__img {
        max-width: 240px;
        margin-inline: auto;
    }

    .par-cta__conteudo {
        text-align: center;
    }

    .par-cta__texto {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Acesso rápido ──────────────────────────────────────────────── */

/* `auto-fit` + `minmax`: são 5 atalhos hoje e o número não é fixo no tempo. Com
   grade automática, acrescentar o sexto não pede CSS novo — e no celular eles
   se reorganizam sozinhos. */
.serena-atalhos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
}

.serena-atalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.serena-atalho:hover {
    color: var(--brand-ink);
    border-color: var(--brand-100);
    background-color: var(--brand-50);
    transform: translateY(-2px);
}

.serena-atalho:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

.serena-atalho__icone {
    position: relative;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--brand-ink);
}

.serena-atalho__rotulo {
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Contadores (atalho e menu) ─────────────────────────────────── */

/* Vermelho, e não --brand-*: é o único ponto da área que pede AÇÃO do paciente.
   Em verde ele viraria decoração dentro de uma tela inteira verde. */
.serena-atalho__contador {
    position: absolute;
    top: -0.4rem;
    right: -0.6rem;
    min-width: 1.15rem;
    padding: 0 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    color: #fff;
    background-color: #dc2626;
    border-radius: 999px;
}

/* No menu o mesmo número é discreto: ali ele convive com a barra do item ativo e
   com o ícone, e um ponto vermelho a cada linha viraria alarme. */
.serena-menu-contador {
    min-width: 1.25rem;
    padding: 0.15rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-ink);
    background-color: var(--brand-100);
    border-radius: 999px;
}

/* Atalho visual ⌘K no buscador do topbar (como no print da Área do Parceiro). */
.serena-search-kbd {
    position: absolute;
    top: 50%;
    right: 2.75rem;
    z-index: 2;
    display: none;
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-muted);
    pointer-events: none;
    background: var(--border-light);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    transform: translateY(-50%);
}

@media (min-width: 992px) {
    .serena-search-kbd {
        display: inline-block;
    }

    #serena-menu-search {
        padding-right: 3.5rem;
    }
}

/* ── Lista de consultas (painel do médico) ──────────────────────── */

/* Substitui a `table-borderless` que havia aqui. Não é troca de gosto: cada linha
   agora é um LINK para o atendimento, e `<a>` não é filho válido de `<tr>` — em
   tabela, o link teria de viver dentro de uma célula, e só ela seria clicável.
   Com flex, a linha inteira é o alvo. */
.serena-consultas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.serena-consulta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    text-decoration: none;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.serena-consulta:hover {
    color: var(--brand-ink);
    border-color: var(--brand-100);
    background-color: var(--brand-50);
}

.serena-consulta:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
}

/* Largura fixa para as horas alinharem coluna a coluna: com largura automática,
   "08:00" e "14:30" empurram o nome do paciente para posições diferentes e a
   lista perde a régua vertical. */
.serena-consulta__hora {
    flex-shrink: 0;
    width: 3.25rem;
    text-align: center;
    font-weight: 700;
    color: var(--brand-ink);
}

.serena-consulta__nome {
    font-weight: 500;
    color: var(--text-primary);
}

/* ── Informações importantes ────────────────────────────────────── */

.serena-info {
    padding: 1rem;
    border: 1px solid var(--brand-100);
    border-radius: 0.75rem;
    background-color: var(--brand-50);
}

.serena-info__icone {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--brand-ink);
}

/* ── Card de ajuda do menu ──────────────────────────────────────── */

/* O degradê repete o fundo da ILUSTRAÇÃO, que é um PNG com fundo e não um
   recorte transparente. É o que faz a arte encaixar sem emenda visível — mexer
   num sem mexer no outro cria um degrau de cor atrás da médica. */
.serena-ajuda-card {
    position: relative;
    overflow: hidden;
    margin: 1rem 0.75rem 1.5rem;
    padding: 1rem;
    border: 1px solid var(--brand-100);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f5fbf7 0%, #e1f2ea 100%);
}

/* O recuo à direita fica no TÍTULO e no TEXTO, e não no card: a sidebar tem
   ~240px e reservar a faixa da arte no card inteiro espremeria o botão abaixo em
   ~96px, quebrando "Falar com a equipe" em três linhas. Assim só as duas linhas
   de texto desviam da médica — o botão usa a largura toda, como no layout. */
.serena-ajuda-card__titulo,
.serena-ajuda-card__texto {
    position: relative;
    z-index: 1;
    padding-right: 4.5rem;
}

.serena-ajuda-card__titulo {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--brand-ink);
}

.serena-ajuda-card__texto {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* Verde do WhatsApp, e não --brand-*: o botão promete o app que vai abrir, e é a
   cor dele que o paciente reconhece antes de ler o rótulo. */
.serena-ajuda-card__botao {
    position: relative;
    /* Acima da arte: o botão atravessa a faixa da ilustração e precisa continuar
       clicável — a arte tem `pointer-events: none` pelo mesmo motivo. */
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    color: #fff;
    background-color: #128c4a;
    border-color: #128c4a;
}

.serena-ajuda-card__botao:hover,
.serena-ajuda-card__botao:focus {
    color: #fff;
    background-color: #0e6f3a;
    border-color: #0e6f3a;
}

/* Parceiro: botão verde da marca (abre o suporte interno, não o WhatsApp). */
.serena-ajuda-card--parceiro .serena-ajuda-card__titulo,
.serena-ajuda-card--parceiro .serena-ajuda-card__texto {
    padding-right: 0;
}

.serena-ajuda-card__botao--parceiro {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    border-radius: 0.5rem;
}

.serena-ajuda-card__botao--parceiro:hover,
.serena-ajuda-card__botao--parceiro:focus {
    background-color: var(--brand-800, #1b2f2a);
    border-color: var(--brand-800, #1b2f2a);
}

/* A máscara dissolve só a borda ESQUERDA do PNG no degradê do card — é a única
   aresta do recorte que fica exposta e encostaria no texto. As outras três não
   precisam: a de baixo e a da direita são aparadas pelo `overflow: hidden` do
   card, e a de cima é fundo liso do próprio recorte, do mesmo tom do degradê.
   Um fade `to top` aqui seria um erro: ele apagaria a cabeça da médica, que fica
   justamente no topo da imagem. `-webkit-` junto porque o Safari só implementa
   a versão prefixada. */
.serena-ajuda-card__arte {
    position: absolute;
    right: -0.5rem;
    bottom: 0;
    z-index: 0;
    width: 5.5rem;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, #000 60%, transparent 100%);
    mask-image: linear-gradient(to left, #000 60%, transparent 100%);
}

/* No menu recolhido só sobra a faixa dos ícones — o card não caberia e viraria
   um borrão. Some junto com os rótulos. */
[data-sidenav-size='condensed'] .serena-ajuda-card,
[data-sidenav-size='sm-hover'] .serena-ajuda-card {
    display: none;
}

/* ── Botão flutuante de suporte ─────────────────────────────────── */

/* z-index abaixo do 1055 do #serena-simulador e do 1050 do backdrop de modal: um
   botão de suporte não deve pairar sobre uma caixa de diálogo aberta. */
.serena-suporte-flutuante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
    color: #fff;
    background-color: var(--brand-700);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgb(var(--brand-700-rgb) / 35%);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.serena-suporte-flutuante:hover {
    color: #fff;
    background-color: var(--brand-800);
    transform: scale(1.06);
}

.serena-suporte-flutuante:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 3px;
}

/* Quem pediu menos animação não recebe salto nem escala — só a mudança de cor. */
@media (prefers-reduced-motion: reduce) {
    .serena-kpi,
    .serena-atalho,
    .serena-suporte-flutuante,
    .par-kpi,
    .par-passo {
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .serena-kpi:hover,
    .serena-atalho:hover,
    .serena-suporte-flutuante:hover,
    a.par-kpi:hover,
    a.par-passo:hover {
        transform: none;
    }
}

/* ============================================================================
 * FICHA — herói com foto, dados-chave e abas.
 *
 * Componentes COMPARTILHADOS pela ficha do paciente (ADM-11) e pelo cadastro do
 * médico (ADM-06). Espelham o protótipo aprovado. Sem hex de marca solto: tudo
 * sai dos tokens --brand-* / neutros do topo deste arquivo. O prefixo `pf-`
 * nasceu em paciente-ficha e virou o namespace comum das duas telas.
 * ========================================================================== */

/* ── Barra de ação do topo (troca a trilha padrão) ── */
.pf-actionbar { margin-top: .25rem; }

.pf-back {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .8125rem; font-weight: 500;
    color: var(--text-secondary); text-decoration: none;
    margin-bottom: .4rem;
}
.pf-back:hover { color: var(--brand-ink); }
.pf-back i { font-size: 1rem; }

.pf-title {
    display: flex; align-items: center; gap: .5rem;
    font-size: 1.5rem; font-weight: 700; line-height: 1.2;
    color: var(--text-primary); margin: 0 0 .35rem;
}
.pf-verified {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-600); color: #fff; flex-shrink: 0;
}
.pf-verified i { font-size: .9rem; }
.pf-subtitle {
    font-size: .8125rem; color: var(--text-secondary);
    max-width: 660px; line-height: 1.5;
}

/* Botões claros com borda; e o âmbar do "Status da conta". */
.pf-btn-light {
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-primary); font-weight: 500;
    display: inline-flex; align-items: center; gap: .4rem;
}
.pf-btn-light:hover { background: #f9fafb; border-color: #d1d5db; color: var(--text-primary); }
.pf-btn-warning {
    background: var(--surface); border: 1px solid var(--warning-br);
    color: var(--warning-fg); font-weight: 500;
    display: inline-flex; align-items: center; gap: .4rem;
}
.pf-btn-warning:hover { background: var(--warning-bg); border-color: var(--warning-fg); color: var(--warning-fg); }
.pf-btn-icon { padding-left: .5rem; padding-right: .5rem; }

/* ── Herói: foto | identidade | dados-chave ── */
.pf-hero__grid {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 1.5rem 2rem;
}

.pf-photo { position: relative; flex-shrink: 0; }
.pf-photo__img {
    width: 118px; height: 150px; object-fit: cover; display: block;
    border-radius: 14px; border: 1px solid var(--border);
    background: var(--border-light);
}
/* Sem foto (ex.: médico sem avatar): iniciais em vez de um rosto genérico de banco. */
.pf-photo__initials {
    width: 118px; height: 150px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; border: 1px solid var(--brand-100);
    background: var(--brand-50); color: var(--brand-ink);
    font-size: 2.25rem; font-weight: 700; letter-spacing: .02em;
    user-select: none;
}
.pf-photo__cam {
    position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand-600); color: #fff;
    border: 3px solid var(--surface);
    display: inline-flex; align-items: center; justify-content: center;
}
.pf-photo__cam i { font-size: 1rem; }

.pf-identity { flex: 1 1 300px; min-width: 250px; }
.pf-identity__name {
    font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .15rem;
}
.pf-identity__contact { font-size: .8125rem; color: var(--brand-ink); margin: 0 0 .65rem; }
.pf-dot { color: var(--text-muted); margin: 0 .15rem; }

.pf-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.pf-badges .badge { font-weight: 500; }

.pf-lock { font-size: .75rem; color: var(--text-secondary); margin-top: .5rem; line-height: 1.5; }
.pf-lock i { color: var(--text-muted); margin-right: .25rem; }
.pf-lock a { color: var(--brand-ink); font-weight: 500; }

.pf-keyinfo {
    flex: 1 1 340px;
    display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 1.1rem 1.25rem;
    padding-left: 2rem; border-left: 1px solid var(--border);
}
.pf-keyinfo__item { display: flex; align-items: flex-start; gap: .6rem; }
.pf-keyinfo__icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-ink);
}
.pf-keyinfo__icon i { font-size: 1.1rem; }
.pf-keyinfo__label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .02em;
    color: var(--text-muted); margin-bottom: .1rem;
}
.pf-keyinfo__value { font-size: .8125rem; font-weight: 600; color: var(--text-primary); }

/* ── Abas com ícone ── */
.pf-tabs .nav-link { display: inline-flex; align-items: center; gap: .4rem; }
.pf-tabs .nav-link i { font-size: 1rem; }

/* ── Aba: Dados cadastrais ── */
.pf-section-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.1rem; }
.pf-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; }
.pf-field__label { font-size: .75rem; color: var(--text-muted); margin-bottom: .2rem; }
.pf-field__value {
    font-size: .875rem; color: var(--text-primary); font-weight: 500;
    display: inline-flex; align-items: center; gap: .4rem;
}
.pf-field__value--empty { color: var(--text-muted); font-weight: 400; }

.pf-copy, .pf-wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; padding: 0;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; text-decoration: none;
    transition: color .12s ease, background-color .12s ease;
}
.pf-copy:hover { color: var(--brand-ink); background: var(--brand-50); }
.pf-copy--ok { color: var(--brand-ink) !important; }
.pf-wa { color: #25d366; }
.pf-wa:hover { color: #fff; background: #25d366; }
.pf-copy i, .pf-wa i { font-size: .95rem; }

/* ── Nota lateral verde (o "só o status é editável aqui") ── */
.pf-sidenote {
    background: var(--brand-50); border: 1px solid var(--brand-100);
    border-radius: 12px; padding: 1.25rem;
}
.pf-sidenote__icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--surface); color: var(--brand-ink);
    border: 1px solid var(--brand-100);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
}
.pf-sidenote__icon i { font-size: 1.25rem; }
.pf-sidenote__title { font-size: .875rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .5rem; }
.pf-sidenote__text { font-size: .8125rem; color: var(--text-secondary); margin: 0 0 .75rem; line-height: 1.5; }
.pf-sidenote__link {
    background: none; border: none; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem;
    color: var(--brand-ink); font-weight: 600; font-size: .8125rem;
}
.pf-sidenote__link:hover { color: var(--brand-800); }

/* ── Responsivo ── */
@media (max-width: 991.98px) {
    .pf-keyinfo { padding-left: 0; border-left: none; }
    .pf-fields { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .pf-keyinfo { grid-template-columns: 1fr; }
    .pf-fields { grid-template-columns: 1fr; }
    .pf-title { font-size: 1.25rem; }
}

/* ============================================================================
 * PROCESSO REGULATÓRIO — detalhe (ADM-17b — anvisa/{id}).
 *
 * Mesma linguagem da ficha do paciente: cabeçalho de ação, cards com ícone e
 * grade de dados com ícones. Reaproveita os tokens --brand-* / neutros do topo;
 * o que é próprio desta tela usa o prefixo `an-`.
 *
 * SOBRE O PREFIXO `an-`: só sobrevive aqui o que nenhum `pf-*` resolve. O que
 * era duplicata saiu — badge de título e badge de etapa voltaram para a paleta
 * canônica (`bg-*-subtle text-*`), o breadcrumb voltou para utilitários do
 * Bootstrap e o estado vazio "nenhuma transição" voltou para o estado vazio
 * padrão. Cada bloco abaixo diz por que ainda existe.
 * ========================================================================== */

/* ── Cabeçalho: back + trilha, título, subtítulo e arte da pasta ──
 * NÃO é o `pf-hero`: `pf-hero` é um CARD (foto | identidade | dados-chave) e
 * este é um cabeçalho de PÁGINA, fora de card, com arte posicionada em absolute
 * sobre a faixa. Os tokens de texto (pf-back / pf-title / pf-subtitle) são os
 * compartilhados; só o posicionamento é próprio desta tela. */
.an-header { position: relative; margin-top: .25rem; margin-bottom: 1rem; }
.an-header__top {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .5rem 1rem; margin-bottom: .35rem;
}
.an-header__main { padding-right: 8rem; }

/* Arte decorativa da pasta — só enfeite, atrás do conteúdo e sem captura de clique. */
.an-header__art {
    position: absolute; top: .25rem; right: .25rem; width: 150px;
    pointer-events: none; user-select: none; opacity: .92;
}
.an-header__art svg { width: 100%; height: auto; display: block; }
.an-art__leaf         { fill: var(--brand-600); opacity: .55; }
.an-art__folder-back  { fill: var(--brand-600); }
.an-art__folder-front { fill: var(--brand-100); }
.an-art__badge        { fill: var(--surface); }
.an-art__check        { fill: none; stroke: var(--brand-600); }

/* ── Título de card com ícone (verde suave) ── */
.an-cardtitle { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.an-cardtitle--split { justify-content: space-between; }
.an-cardtitle__icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-ink);
}
.an-cardtitle__icon i { font-size: 1.15rem; }
.an-cardtitle__text {
    font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0;
}
.an-cardtitle__aux { display: flex; align-items: center; gap: .5rem; }
.an-step { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.an-kebab {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 7px;
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
}
.an-kebab:hover { background: var(--brand-50); color: var(--brand-ink); }
.an-kebab::after { display: none; }

/* ── Grade de dados com ícone ──
 * Parente do `pf-keyinfo`, mas não substituível por ele: `pf-keyinfo` é a coluna
 * direita do herói (3 colunas, divisor à esquerda, rótulo em caixa alta) e vive
 * DENTRO do `pf-hero__grid`. Esta grade ocupa um card inteiro em 2 colunas, e
 * precisa de item de largura total, dica sob o valor e valor vazio — nenhum dos
 * três existe no `pf-keyinfo`. */
.an-dados {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 2rem;
}
.an-dados__item { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.an-dados__item--full { grid-column: 1 / -1; }
.an-dados__icon {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-ink);
}
.an-dados__icon i { font-size: 1.1rem; }
.an-dados__label { font-size: .75rem; color: var(--text-muted); margin-bottom: .15rem; }
.an-dados__value {
    font-size: .875rem; font-weight: 600; color: var(--text-primary);
    line-height: 1.4; word-break: break-word;
}
.an-dados__value a { font-weight: 600; }
.an-dados__value--empty { color: var(--text-muted); font-weight: 400; }
.an-dados__sep { color: var(--text-muted); font-weight: 400; }
.an-dados__hint { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; line-height: 1.45; }

.an-pill {
    display: inline-flex; align-items: center; margin-left: .35rem;
    padding: .08rem .5rem; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-ink);
    font-size: .7rem; font-weight: 600;
}

/* ── Anexos ── */
.an-anexo {
    display: flex; align-items: center; gap: .85rem;
    padding: .75rem 0; border-bottom: 1px solid var(--border-light);
}
.an-anexo:first-of-type { padding-top: 0; }
.an-anexo__ext {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--danger-bg); color: var(--danger-fg);
}
.an-anexo__ext i { font-size: 1.3rem; }
.an-anexo__body { flex: 1 1 auto; min-width: 0; }
.an-anexo__name {
    font-size: .8125rem; font-weight: 600; color: var(--text-primary);
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
}
.an-anexo__meta { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }
/* O download do anexo passou a existir de verdade (Anvisa::baixarAnexo), então o
   cursor deixou de ser `not-allowed` fixo: agora é ponteiro no link ativo e
   `not-allowed` só no botão desabilitado, que é o caso de perfil sem permissão. */
.an-anexo__download {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary); cursor: pointer; text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.an-anexo__download:hover { background: var(--border-light); color: var(--text-primary); }
.an-anexo__download:disabled,
.an-anexo__download[disabled] { cursor: not-allowed; opacity: .6; }
.an-anexo__download:disabled:hover,
.an-anexo__download[disabled]:hover { background: var(--surface); color: var(--text-secondary); }
.an-anexo__download i { font-size: 1.05rem; }

/* Caixa de nota discreta (aviso de auditoria, confirmação de trilha) */
.an-note {
    background: var(--border-light); border-radius: 10px;
    padding: .7rem .9rem; margin-top: .9rem;
    font-size: .75rem; color: var(--text-secondary); line-height: 1.5;
}
.an-cardnote { font-size: .75rem; color: var(--text-muted); line-height: 1.5; margin-top: .9rem; }

/* ── Histórico de transições (timeline) ── */
.an-hist { position: relative; }
.an-hist__item { position: relative; display: flex; gap: .85rem; padding-bottom: 1.1rem; }
.an-hist__item:last-child { padding-bottom: 0; }
/* Fio vertical entre os discos */
.an-hist__item:not(:last-child)::before {
    content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px;
    width: 2px; background: var(--border);
}
.an-hist__dot {
    position: relative; z-index: 1; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-600); color: #fff;
}
.an-hist__dot i { font-size: .95rem; }
.an-hist__body { padding-top: .15rem; min-width: 0; }
.an-hist__transition { font-size: .8125rem; color: var(--text-primary); }
.an-hist__transition i { color: var(--text-muted); margin: 0 .15rem; }
.an-hist__meta { font-size: .75rem; color: var(--text-muted); margin-top: .1rem; }
.an-hist__obs { font-size: .8125rem; color: var(--text-secondary); margin-top: .2rem; }
.an-hist__anexo { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

/* ── Etapa atual: aviso e fatos ── */
.an-warn {
    display: flex; align-items: flex-start; gap: .35rem;
    font-size: .75rem; color: var(--warning-fg); margin: .65rem 0 0;
}
.an-warn i { margin-top: .05rem; }
.an-fact { margin-top: .9rem; }
.an-fact__label { font-size: .75rem; color: var(--text-muted); margin-bottom: .1rem; }
.an-fact__value { font-size: .8125rem; font-weight: 600; color: var(--text-primary); }

/* ── Responsivo ── */
@media (max-width: 991.98px) {
    .an-header__main { padding-right: 0; }
    .an-header__art { display: none; }
}
@media (max-width: 575.98px) {
    .an-dados { grid-template-columns: 1fr; }
}

/* ============================================================================
   LINHA DO TEMPO DO TRATAMENTO (ADM-13 — pacientes/{id}/historico)
   ----------------------------------------------------------------------------
   Um fio cronológico só: cada nó é um disco colorido POR CATEGORIA (consulta,
   documento, cadastro, elegibilidade…), ligado ao seguinte por uma linha. A cor
   é de categoria, não de status — separa os tipos de nó sem sugerir sucesso nem
   alerta. O disco, a pílula e (quando há) o status compartilham o par de cor
   --tl-bg / --tl-fg, que o modificador --<cor> injeta no item.
   ---------------------------------------------------------------------------- */

.serena-timeline {
    --tl-icone: 2.75rem;   /* diâmetro do disco   */
    --tl-eixo: 1.375rem;   /* centro do disco = metade do diâmetro */
    margin: 0;
    padding: 0.25rem 0 0;
}

.serena-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--tl-icone) 1fr;
    gap: 0.9rem;
    padding-bottom: 1.75rem;

    /* par padrão (cinza), sobrescrito pelos modificadores abaixo */
    --tl-bg: var(--neutral-bg);
    --tl-fg: var(--neutral-fg);
}

.serena-timeline__item:last-child {
    padding-bottom: 0;
}

/* A linha que liga um disco ao próximo: parte do centro deste e desce até o
   centro do seguinte. Fica ATRÁS do disco (z-index 0), que a cobre com fundo
   opaco + anel na cor da superfície. */
.serena-timeline__item::before {
    content: '';
    position: absolute;
    top: var(--tl-eixo);
    bottom: calc(var(--tl-eixo) * -1);
    left: var(--tl-eixo);
    width: 2px;
    transform: translateX(-50%);
    background: var(--border);
    z-index: 0;
}

.serena-timeline__item:last-child::before {
    display: none;
}

.serena-timeline__icone {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tl-icone);
    height: var(--tl-icone);
    border-radius: 50%;
    font-size: 1.25rem;
    color: var(--tl-fg);
    background: var(--tl-bg);
    /* anel na cor do card: dá o "descolamento" do disco sobre a linha */
    box-shadow: 0 0 0 4px var(--surface);
}

.serena-timeline__conteudo {
    min-width: 0;
    padding-top: 0.1rem;
}

.serena-timeline__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
    color: var(--tl-fg);
    background: var(--tl-bg);
}

.serena-timeline__titulo {
    margin: 0.45rem 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
}

/* O status herda a cor da categoria (o "Status: Agendada" verde da consulta). */
.serena-timeline__status {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tl-fg);
}

.serena-timeline__meta {
    margin: 0.3rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.serena-timeline__meta a {
    margin-left: 0.15rem;
    font-size: 0.75rem;
}

/* ── Famílias de cor (disco + pílula + status) ─────────────────────────────
   Cada par é fundo pastel + tom escuro que passa em AA sobre ele. Verde e âmbar
   reaproveitam os tokens de status; os demais são cores de CATEGORIA declaradas
   aqui de propósito — não são tons da marca e não devem virar token. */
.serena-timeline__item--verde    { --tl-bg: #ecfdf5; --tl-fg: #047857; }
.serena-timeline__item--roxo     { --tl-bg: #f3e8ff; --tl-fg: #6d28d9; }
.serena-timeline__item--azul     { --tl-bg: #eff6ff; --tl-fg: #1d4ed8; }
.serena-timeline__item--ambar    { --tl-bg: #fef3c7; --tl-fg: #b45309; }
.serena-timeline__item--ciano    { --tl-bg: #cffafe; --tl-fg: #0e7490; }
.serena-timeline__item--vermelho { --tl-bg: #fef2f2; --tl-fg: #b91c1c; }
.serena-timeline__item--cinza    { --tl-bg: #f3f4f6; --tl-fg: #4b5563; }

/* Link "Limpar filtros" — texto discreto sob o botão Filtrar, não um segundo
   botão que competisse com ele. */
.serena-limpar-filtros {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-secondary);
    text-decoration: none;
}

.serena-limpar-filtros:hover,
.serena-limpar-filtros:focus-visible {
    color: var(--brand-ink);
}

/* ============================================================================
 * LISTA DE PACIENTES (ADM-10) — aviso verde, cartões-resumo e tabela.
 * Mesmo namespace `pf-*` das fichas; sem hex de marca solto (tokens --brand-*).
 * ========================================================================== */

.pf-notice {
    display: flex; gap: .75rem; align-items: flex-start;
    background: var(--brand-50); border: 1px solid var(--brand-100);
    border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1rem;
    font-size: .8125rem; color: var(--text-secondary); line-height: 1.5;
}
.pf-notice__icon { color: var(--brand-ink); font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
.pf-notice strong { color: var(--text-primary); }
.pf-notice em { color: var(--brand-ink); font-style: normal; font-weight: 500; }

/* Cartão-resumo (stat): ícone em círculo + rótulo + número + descrição. */
.pf-stat .card-body { padding: 1.25rem; }
/* Ícone SEMPRE à esquerda, colado no texto. Existiu um modificador `--spread`
   que jogava o ícone na borda direita: saiu de circulação porque a mesma tela
   ganhava dois alinhamentos diferentes conforme a aba. Um totalizador só, em
   todo o painel — a referência é /medicos/agenda. */
.pf-stat__row { display: flex; align-items: center; gap: 1rem; }
.pf-stat__icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.pf-stat__icon--verde    { background: var(--brand-50); color: var(--brand-ink); }
.pf-stat__icon--ambar    { background: #ffedd5; color: #ea580c; }
.pf-stat__icon--roxo     { background: #ede9fe; color: #7c3aed; }
.pf-stat__icon--vermelho { background: #fee2e2; color: #dc2626; }
.pf-stat__icon--azul     { background: #dbeafe; color: #2563eb; }
.pf-stat__icon--cinza    { background: #e2e8f0; color: #475569; }
.pf-stat__text { min-width: 0; }
.pf-stat__label { font-size: .875rem; font-weight: 500; color: var(--text-secondary); line-height: 1.2; }
.pf-stat__value { font-size: 1.9rem; font-weight: 700; color: var(--text-primary); line-height: 1.15; margin-top: .1rem; }
.pf-stat__value--verde    { color: var(--brand-ink); }
.pf-stat__value--ambar    { color: #ea580c; }
.pf-stat__value--roxo     { color: #7c3aed; }
.pf-stat__value--vermelho { color: #dc2626; }
.pf-stat__value--azul     { color: #2563eb; }
.pf-stat__value--cinza    { color: #475569; }
/* Valor em MOEDA: "R$ 1.234.567,89" é três vezes mais largo que uma contagem e
   estourava a coluna do card em 1.9rem. Mesmo peso e mesma cor — só o corpo cede. */
.pf-stat__value--moeda { font-size: 1.45rem; overflow-wrap: anywhere; }
/* Valor que ainda não existe (fechamento sem líquido apurado, por exemplo). Fica
   dentro do .pf-stat__value para não desalinhar o card, mas sem o peso de número. */
.pf-stat__value-vazio { font-size: 1rem; font-weight: 500; font-style: italic; color: var(--text-muted); }
.pf-stat__desc { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.pf-stat__desc-link { color: var(--text-muted); text-decoration: none; }
.pf-stat__desc-link:hover { color: var(--brand-ink); text-decoration: underline; }
.pf-stat--alerta { border-color: var(--danger-br); }
/* Card-resumo que é atalho (o <a> envolve o card inteiro): sem um retorno ao
   passar o mouse, nada denuncia que aquele número é clicável. */
a:hover > .pf-stat { border-color: var(--brand-600); }
a:focus-visible > .pf-stat { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* "Só lista" na tela /filas: esconde de uma vez todo o resumo das cinco abas (cards de
   número e textos de apoio, marcados com `data-filas-resumo` em cada partial). A classe
   entra no <html> antes do primeiro paint, então nada pisca antes de sumir. */
.filas-so-lista [data-filas-resumo] { display: none !important; }

/* ============================================================================
 * LISTAGEM DAS FILAS (pf-fila) — UM DESENHO SÓ PARA TODAS AS ABAS DE /filas.
 *
 * Antes cada aba desenhava a sua fila do jeito dela: "Médicos" em cards, "Parceiros"
 * em card com tabela dentro, "Produtos", "Prescrições", "ANVISA" e "Avaliações" em
 * tabela larga. Duas consequências reais, e nenhuma delas cosmética:
 *
 *  1. TABELA LARGA ROLA NA HORIZONTAL. Com seis a oito colunas, quem abre a fila num
 *     notebook comum lê metade da linha e arrasta para ver a outra metade — inclusive
 *     a coluna de AÇÃO, que é o motivo de a tela existir.
 *  2. O MESMO GESTO mudava de forma a cada aba. Conferir e decidir é o mesmo trabalho
 *     nas seis; ter que reaprender onde fica o botão a cada troca de aba é atrito puro.
 *
 * O desenho: UM CARD POR ITEM DA FILA (ou por dono, quando o item é documento e o dono
 * tem vários). Cabeçalho com quem/o quê e as ações do dono; corpo com os campos em
 * blocos rótulo-em-cima-valor-embaixo, que quebram em linha nova em vez de rolar.
 * ========================================================================== */
.pf-fila { display: flex; flex-direction: column; gap: 1rem; }

/* `mb-0`: o espaçamento entre os cards é do `gap` do container, e não da margem do
   card — senão a última fila fica com uma folga a mais embaixo. */
.pf-fila > .card { margin-bottom: 0; }

.pf-fila__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.pf-fila__titulo { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.pf-fila__sub { font-size: .75rem; color: var(--text-muted); }
.pf-fila__acoes { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

/* Os documentos de um mesmo dono, um por linha dentro do card dele. */
.pf-fila__itens { display: flex; flex-direction: column; gap: .75rem; }
.pf-fila__item {
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.pf-fila__item-texto { flex: 1 1 18rem; min-width: 0; }

/* Os botões da linha (Abrir / Aprovar / Rejeitar) no MEIO da altura do item, e não
   grudados no topo: o bloco de texto à esquerda é mais alto que eles, então com o
   `align-items: flex-start` do item sobrava um vão vazio embaixo dos botões. O
   `align-self` mexe só neste bloco — o texto continua começando em cima —, e a
   direita segue sendo a mesma de antes, dada pelo `justify-content: space-between`. */
.pf-fila__item > .pf-fila__acoes { align-self: center; }

/* Os campos que na tabela eram COLUNAS. `flex-wrap` no lugar do scroll: numa tela
   estreita eles descem, e nada some para fora da direita. */
.pf-fila__campos { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: .65rem; }
.pf-fila__campo { min-width: 0; }
.pf-fila__rotulo {
    display: block;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    line-height: 1.3;
}
.pf-fila__valor { font-size: .8125rem; color: var(--text-primary); }

/* Campo de texto corrido (a "Pendência" da fila de produtos): num `flex-wrap`, um
   texto de frase inteira empurra os campos curtos para longe uns dos outros. Com
   `flex-basis: 100%` ele desce para a linha de baixo e ocupa a largura do card,
   deixando Categoria / Loja / Receita / Dias juntos em cima. */
.pf-fila__campo--largo { flex: 1 0 100%; }

/* VARIANTE COMPACTA — usada pela aba "Produtos".
 *
 * Os cards das abas de documento têm ITENS dentro (uma linha por documento, com os
 * seus botões). O de produto não: é um cabeçalho e uma linha de campos. Com o mesmo
 * respiro das outras, sobrava vão vazio e cabiam três produtos na tela — numa fila
 * que se lê varrendo, não abrindo um por um. Aqui o ar sai do card e do intervalo
 * entre um produto e o seguinte; o tamanho do texto e a área de clique dos botões
 * ficam como estão. */
.pf-fila--compacta { gap: .5rem; }
.pf-fila--compacta > .card > .card-header { padding: .625rem .875rem; }
.pf-fila--compacta > .card > .card-body { padding: .625rem .875rem; }
.pf-fila--compacta .pf-fila__campos { gap: .35rem 1.25rem; }

/* Destaque do card inteiro, no lugar do `table-warning`/`table-danger` da linha. */
.pf-fila__card--atencao { border-color: var(--warning-br); }
.pf-fila__card--atraso  { border-color: var(--danger-br); }

/* FILA DE MÉDICOS (pf-fila-med) — card horizontal, uma linha por médico no desktop.
 * Nasceu na aba de Médicos e hoje desenha TODAS as abas de /filas (Parceiros,
 * Produtos, Prescrições e Avaliações também).
 *
 * AVATAR | NOME / CRM • E-MAIL ┃ ESPECIALIDADE | VALOR | MÉTODOS | DIAS ┃ BADGE | ABRIR | ⋮
 *
 * Três camadas de texto: nome e valores escuros; rótulos pequenos e cinza; CRM e
 * e-mail cinza suave. Quando a LISTA (não a janela — a sidebar come largura) fica
 * estreita, os campos descem para a segunda linha e o badge + botão ficam juntos no
 * fim, sempre à mão. */
.pf-fila-med { gap: .625rem; container-type: inline-size; }
.pf-fila-med__card {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: .875rem 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: .625rem;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    min-height: 5.25rem;
}

.pf-fila-med__quem {
    display: flex;
    align-items: center;
    gap: .875rem;
    flex: 0 1 24rem;
    min-width: 15rem;
    padding-right: 1.25rem;
    border-right: 1px solid var(--border);
}
.pf-fila-med__avatar {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
    color: var(--brand-ink);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .02em;
}
/* Filas que não listam pessoa (produto, pedido) põem um ícone no lugar das iniciais. */
.pf-fila-med__avatar > .ti { font-size: 1.35rem; }
/* Avaliações: a nota da avaliação denunciada no lugar das iniciais do autor. */
.pf-fila-med__avatar--nota { gap: .1rem; background: #fef3c7; color: #b45309; }
.pf-fila-med__avatar--nota > .ti { font-size: .85rem; }
.pf-fila-med__ident { min-width: 0; }
.pf-fila-med__nome {
    margin: 0 0 .15rem;
    font-size: .975rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pf-fila-med__sub {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.pf-fila-med__campos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    flex: 1 1 28rem;
    min-width: 0;
}
.pf-fila-med__campo { display: flex; align-items: flex-start; gap: .5rem; min-width: 7rem; }
.pf-fila-med__campo > .ti { font-size: 1.125rem; line-height: 1.1; color: var(--text-secondary); }
.pf-fila-med__rotulo { display: block; font-size: .72rem; color: var(--text-muted); line-height: 1.3; }
.pf-fila-med__valor { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.pf-fila-med__valor--atraso { color: var(--danger-fg); font-weight: 600; }
/* Texto corrido (o comentário da denúncia): ocupa a linha inteira dos campos. */
.pf-fila-med__campo--largo { flex: 1 1 100%; }
.pf-fila-med__sub > .pf-dot { margin: 0 .4rem; }

.pf-fila-med__acoes {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: auto;
}
.pf-fila-med__chip {
    font-size: .72rem;
    font-weight: 500;
    padding: .35rem .55rem;
    border-radius: .3rem;
    white-space: nowrap;
}
.pf-fila-med__abrir {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid var(--brand-100);
    border-radius: .5rem;
    background: var(--surface);
    color: var(--brand-ink);
    font-weight: 500;
    white-space: nowrap;
}
.pf-fila-med__abrir > .ti { font-size: 1.125rem; }
.pf-fila-med__abrir:hover,
.pf-fila-med__abrir:focus-visible {
    background: var(--brand-50);
    border-color: var(--brand-100);
    color: var(--brand-ink);
}
.pf-fila-med__menu {
    width: 2.25rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    color: var(--text-secondary);
    font-size: 1.125rem;
}
.pf-fila-med__menu:hover,
.pf-fila-med__menu:focus-visible,
.pf-fila-med__menu.show { background: var(--border-light); color: var(--text-primary); }

/* Tablet/notebook estreito: identificação e ações na primeira linha, campos embaixo
   ocupando a largura inteira. */
@container (max-width: 1260px) {
    .pf-fila-med__quem { flex: 1 1 16rem; border-right: 0; padding-right: 0; }
    .pf-fila-med__campos { order: 3; flex-basis: 100%; padding-top: .75rem; border-top: 1px solid var(--border-light); }
}

/* Celular: campos em grade de dois; o badge numa linha e, embaixo, o botão esticado com o ⋮ ao lado. */
@container (max-width: 560px) {
    .pf-fila-med__card { padding: .875rem 1rem; }
    .pf-fila-med__quem { min-width: 0; flex-basis: 100%; }
    .pf-fila-med__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .pf-fila-med__acoes { order: 4; flex-basis: 100%; display: grid; grid-template-columns: 1fr auto; margin-left: 0; }
    .pf-fila-med__chip { grid-column: 1 / -1; justify-self: start; }
    .pf-fila-med__abrir { justify-content: center; }
}

/* Visualizador de documento em lightbox (serena-visualizador.js). A altura do quadro
   mora aqui, e não em `style=""` no JS, porque ela MUDA: o botão de maximizar troca o
   diálogo para `modal-fullscreen`, e aí o PDF precisa ocupar a janela inteira menos o
   cabeçalho do modal. */
.serena-vis__corpo { min-height: 70vh; }
.serena-vis__quadro { height: 70vh; }
.serena-vis__imagem { max-height: 70vh; }

.modal-fullscreen .serena-vis__corpo { min-height: 0; }
.modal-fullscreen .serena-vis__quadro { height: calc(100vh - 4.25rem); }
.modal-fullscreen .serena-vis__imagem { max-height: calc(100vh - 5rem); }

/* ============================================================================
 * MODAL DE AJUDA (pf-ajuda) — "Como funciona esta fila".
 * A TELA mostra o que se decide; a EXPLICAÇÃO inteira mora aqui. O texto longo
 * ganha hierarquia (faixa de abertura, seções com ícone, passos numerados) para
 * ser varrido, e não lido de ponta a ponta toda vez que alguém abre a fila.
 * ========================================================================== */

.pf-ajuda { font-size: .8125rem; color: var(--text-secondary); line-height: 1.6; }
.pf-ajuda strong { color: var(--text-primary); font-weight: 600; }

/* Faixa de abertura: o que está em jogo nesta fila, em duas linhas. */
.pf-ajuda__destaque {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--warning-bg); border: 1px solid var(--warning-br);
    border-left: 4px solid var(--warning-fg);
    border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.25rem;
    color: var(--warning-fg);
}
.pf-ajuda__destaque i { font-size: 1.35rem; flex-shrink: 0; margin-top: .1rem; }
.pf-ajuda__destaque strong { color: var(--warning-fg); }
.pf-ajuda__destaque-titulo {
    display: block; font-size: .875rem; font-weight: 700;
    color: var(--warning-fg); margin-bottom: .25rem;
}

.pf-ajuda__secao { margin-bottom: 1.35rem; }
.pf-ajuda__secao:last-child { margin-bottom: 0; }
.pf-ajuda__titulo {
    display: flex; align-items: center; gap: .5rem;
    font-size: .875rem; font-weight: 600; color: var(--text-primary);
    margin: 0 0 .65rem;
}
.pf-ajuda__titulo i { color: var(--brand-ink); font-size: 1.05rem; }

/* Passos numerados — o caminho que um item percorre até chegar na fila. */
.pf-ajuda__passos { list-style: none; counter-reset: pf-passo; margin: 0; padding: 0; }
.pf-ajuda__passos li {
    counter-increment: pf-passo; position: relative; padding: 0 0 .7rem 2rem;
}
.pf-ajuda__passos li:last-child { padding-bottom: 0; }
.pf-ajuda__passos li::before {
    content: counter(pf-passo);
    position: absolute; left: 0; top: .05rem;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--brand-50); color: var(--brand-ink);
    font-size: .7rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}

/* Lista de fatos: marcador discreto, sem o bullet padrão do navegador. */
.pf-ajuda__lista { list-style: none; margin: 0; padding: 0; }
.pf-ajuda__lista li { position: relative; padding: 0 0 .55rem 1.1rem; }
.pf-ajuda__lista li:last-child { padding-bottom: 0; }
.pf-ajuda__lista li::before {
    content: ''; position: absolute; left: 0; top: .6em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--brand-600);
}

/* Legenda dos cards de número: o rótulo e o que exatamente aquele número conta. */
.pf-ajuda__cards { display: grid; gap: .5rem; }
.pf-ajuda__card {
    display: flex; gap: .6rem; align-items: flex-start;
    background: var(--border-light); border-radius: 10px; padding: .6rem .8rem;
}
.pf-ajuda__card i { color: var(--brand-ink); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.pf-ajuda__card b { color: var(--text-primary); font-weight: 600; }

/* Avatar de iniciais na tabela + célula nome/e-mail. */
.pf-avatar-sm {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-ink);
    font-weight: 600; font-size: .8rem;
}
.pf-cell-user { display: flex; align-items: center; gap: .7rem; }
.pf-cell-user__text { min-width: 0; }
.pf-cell-user__name { font-weight: 600; color: var(--text-primary); text-decoration: none; }
.pf-cell-user__name:hover { color: var(--brand-ink); }
.pf-cell-user__sub { font-size: .75rem; color: var(--text-muted); }

/* ============================================================================
   Botão de fechar dos avisos fixos (serena-avisos.js).
   O "x" aparece no canto de todo aviso amarelo, branco ou azul que não é uma
   mensagem de flash. Ao fechar, o aviso guarda a decisão no navegador.
   ========================================================================== */
.serena-aviso-com-x {
    position: relative;
    padding-right: 2.75rem;
}
.serena-aviso-x {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .55;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}
.serena-aviso-x:hover,
.serena-aviso-x:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .08);
    outline: none;
}
.serena-aviso-saindo {
    opacity: 0;
    transition: opacity .2s ease;
}

/* ==========================================================================
   Detalhe da consulta — médico e paciente
   ==========================================================================
   As duas áreas mostram os mesmos dados do atendimento e a mesma conversa. O
   desenho mora aqui, e não em cada view, porque um ícone-chip escrito duas vezes
   diverge na primeira mudança que só uma das telas receber.
   Consumido por partials/_dado-icone.php e partials/_ajuda-card.php.

   A lista de etapas aqui chama-se `serena-etapas` e não `serena-timeline`: as duas
   nasceram em branches paralelos com o mesmo nome e desenhos incompatíveis — esta é
   marcador de ponto, a outra é disco de ícone de 2,75rem (ver `.serena-timeline`,
   usada por pacientes/historico.php). São componentes distintos que colidiram no
   nome por acaso; concatenar os dois blocos quebraria uma das duas telas.
   ========================================================================== */

/* --- Dado com ícone (Data, Hora, Duração, Método, Valor…) ---------------- */
.serena-dado {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.serena-dado__icone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--brand-50, #f0f9f4);
    color: var(--brand-600, #0f8a5f);
    font-size: 1rem;
}

.serena-dado__corpo { min-width: 0; }

.serena-dado__rotulo {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--text-secondary, #6c757d);
}

.serena-dado__valor {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    /* Nome de médico e motivo longos não podem empurrar a coluna. */
    overflow-wrap: anywhere;
}

.serena-dado__extra {
    font-size: 0.75rem;
    color: var(--brand-600, #0f8a5f);
}

/* --- Linha do tempo ------------------------------------------------------ */
.serena-etapas { position: relative; margin: 0; padding: 0; list-style: none; }

.serena-etapas__item {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 0 1rem 1.25rem;
}

.serena-etapas__item:last-child { padding-bottom: 0; }

/* O marcador. `::before` é o fio que desce até o próximo item — some no último,
   senão fica um traço solto embaixo. */
.serena-etapas__item::after {
    content: '';
    position: absolute;
    top: 0.3rem;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    border: 1.5px solid var(--brand-500, #16a06e);
    border-radius: 50%;
    background: #fff;
}

.serena-etapas__item::before {
    content: '';
    position: absolute;
    top: 0.9rem;
    bottom: 0;
    left: 0.22rem;
    width: 1px;
    background: var(--brand-100, #d7efe3);
}

.serena-etapas__item:last-child::before { display: none; }

/* Marca preenchida = etapa que aconteceu. Vazia = ainda não. */
.serena-etapas__item--feito::after { background: var(--brand-500, #16a06e); }

.serena-etapas__rotulo { font-size: 0.8125rem; color: var(--text-secondary, #6c757d); }
.serena-etapas__valor  { font-size: 0.8125rem; }

/* --- Card de ajuda: variante larga, dentro da conversa ------------------- */
.serena-ajuda-card--largo {
    margin: 0.5rem 0;
    padding: 1.25rem;
}

/* Na versão larga a arte fica ao lado, não atrás: sobra largura para as duas
   colunas conviverem, e o texto não precisa desviar de nada. */
.serena-ajuda-card--largo .serena-ajuda-card__conteudo { position: relative; z-index: 1; padding-right: 9rem; }
.serena-ajuda-card--largo .serena-ajuda-card__titulo,
.serena-ajuda-card--largo .serena-ajuda-card__texto { padding-right: 0; }
.serena-ajuda-card--largo .serena-ajuda-card__titulo { font-size: 1rem; }
.serena-ajuda-card--largo .serena-ajuda-card__texto { font-size: 0.8125rem; max-width: 26rem; }

.serena-ajuda-card__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.serena-ajuda-card--largo .serena-ajuda-card__botao { width: auto; padding-inline: 1rem; }

.serena-ajuda-card__botao-alt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.serena-ajuda-card__selos {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.6875rem;
    color: var(--text-secondary, #6c757d);
}

.serena-ajuda-card__selos li { display: flex; align-items: center; gap: 0.3rem; }
.serena-ajuda-card__selos i { color: var(--brand-500, #16a06e); font-size: 0.875rem; }

.serena-ajuda-card--largo .serena-ajuda-card__arte {
    right: 0.5rem;
    bottom: 0;
    width: 9.5rem;
    max-width: 40%;
}

/* Abaixo de 640px a arte vira ruído: some, e o texto usa a largura toda. */
@media (max-width: 640px) {
    .serena-ajuda-card--largo .serena-ajuda-card__conteudo { padding-right: 0; }
    .serena-ajuda-card--largo .serena-ajuda-card__arte { display: none; }
}

/* --- Nota de segurança sob o composer ------------------------------------ */
.serena-chat__nota {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.375rem 0.625rem 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-secondary, #6c757d);
    /* `flex: 0 0 auto`: quando a conversa é o item elástico da coluna do atendimento
       (ver serena-agenda.css), sem isto a nota encolhe antes da thread e o botão de
       som fica cortado no meio. */
    flex: 0 0 auto;
}

/* O texto cede espaço ao botão em tela estreita; o botão nunca encolhe. */
.serena-chat__nota-texto {
    min-width: 0;
}

/* O silenciador do aviso sonoro. Discreto por padrão — é controle de apoio, não uma
   ação da conversa —, e ganha peso ao receber o foco do teclado. */
.serena-chat__som {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-muted, #9ca3af);
    line-height: 1;
}

.serena-chat__som i {
    font-size: 0.9375rem;
}

.serena-chat__som:hover,
.serena-chat__som:focus-visible {
    background-color: var(--neutral-bg);
    color: var(--text-primary);
}

/* Silenciado é ESTADO, e estado se enxerga sem passar o mouse: o ícone barrado
   sozinho é sutil demais num corpo de 15px. */
.serena-chat__som[aria-pressed="false"] {
    color: var(--danger-fg);
}

/* --- Avatar do paciente -------------------------------------------------- */
.serena-avatar-vazio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--brand-50, #f0f9f4);
    color: var(--brand-600, #0f8a5f);
    font-size: 1.5rem;
}

/**
 * --- Campo de senha: sem zoom no iPhone, olhinho e barra de força -----------
 *
 * iOS Safari abre zoom automático ao focar um campo com font-size < 16px — o
 * `.form-control` do tema usa 0.9rem (14.4px), abaixo do limiar. Só o campo de
 * senha muda aqui; os demais campos mantêm o tamanho do tema.
 *
 * `.serena-senha-wrap`/`.serena-senha-toggle`/`.serena-senha-forca` são montados
 * pelo JS em public/assets/js/serena-senha.js — a view só escreve
 * `type="password"` (olhinho automático) e, para senha NOVA, `data-senha-forca`
 * (mesmo espírito das demais convenções de .claude/skills/padrao-tela).
 */
input[type='password'] {
    font-size: 16px;
}

.serena-senha-wrap {
    position: relative;
}

.serena-senha-wrap .form-control {
    padding-right: 2.75rem;
}

.serena-senha-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
}

.serena-senha-toggle:hover {
    color: var(--brand-ink);
}

.serena-senha-toggle:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: 4px;
}

.serena-senha-forca {
    margin-top: 0.5rem;
}

.serena-senha-forca-barra {
    height: 4px;
    border-radius: 2px;
    background: var(--border, #e5e7eb);
    overflow: hidden;
}

.serena-senha-forca-barra span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: transparent;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.serena-senha-forca-texto {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--text-secondary, #6b7280);
}

.serena-senha-forca.nivel-fraca .serena-senha-forca-barra span {
    width: 33%;
    background: var(--danger-fg);
}

.serena-senha-forca.nivel-media .serena-senha-forca-barra span {
    width: 66%;
    background: var(--warning-fg);
}

.serena-senha-forca.nivel-forte .serena-senha-forca-barra span {
    width: 100%;
    background: var(--success-fg);
}

.serena-senha-forca.nivel-fraca .serena-senha-forca-texto {
    color: var(--danger-fg);
}

.serena-senha-forca.nivel-media .serena-senha-forca-texto {
    color: var(--warning-fg);
}

.serena-senha-forca.nivel-forte .serena-senha-forca-texto {
    color: var(--success-fg);
}

/* Estado vazio padrão — ver app/Views/partials/_estado-vazio.php */
.serena-estado-vazio__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--light, #f1f3fa);
}

.serena-estado-vazio__icone i {
    font-size: 28px;
    color: var(--text-secondary, #6b7280);
}

/* Número do passo nas abas da consulta — a jornada do atendimento em MED-10.
   Discreto por escolha: o passo orienta, mas quem tem de saltar aos olhos é o
   nome da aba e o eventual badge de pendência ao lado dele. */
.serena-passo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--light, #f1f3fa);
    color: var(--text-secondary, #6b7280);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
}

.nav-link.active .serena-passo {
    background: var(--bs-primary, #6658dd);
    color: #fff;
}

/* Ponto de presença "atendo agora" — painel do médico.
   Cinza é o repouso; verde pulsa devagar porque presença é estado que expira, e o
   movimento lembra disso sem precisar de texto. */
.serena-presenca-ponto {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: .4rem;
    border-radius: 50%;
    background: var(--text-muted, #9aa0ac);
    vertical-align: middle;
}

.serena-presenca-ponto.is-online {
    background: var(--success-fg, #1abc9c);
    box-shadow: 0 0 0 0 rgba(26, 188, 156, .6);
    animation: serena-presenca-pulso 2.2s infinite;
}

@keyframes serena-presenca-pulso {
    70%  { box-shadow: 0 0 0 7px rgba(26, 188, 156, 0); }
    100% { box-shadow: 0 0 0 0 rgba(26, 188, 156, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .serena-presenca-ponto.is-online { animation: none; }
}

/* ================= Wizard de agendamento (paciente/agendar) =================
   O cartão do profissional é um controle, não um bloco de leitura: precisa dizer
   "clique em mim" antes do clique e "é este" depois dele. Só `border-primary` (o que
   havia) muda 1px numa borda que o tema já pinta de cinza-claro — num cartão de 300px
   é uma diferença que ninguém enxerga, e o paciente ficava sem saber se a escolha
   pegou. */
.agendar-medico {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--bs-border-color, #dee2e6);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.agendar-medico:hover,
.agendar-medico:focus-visible {
    border-color: var(--bs-primary, #6658dd);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.agendar-medico.is-selecionado {
    border-color: var(--bs-primary, #6658dd);
    box-shadow: 0 0 0 2px rgba(102, 88, 221, .25);
}

/* A marca de confirmação nasce escondida e só existe no cartão escolhido — cor
   sozinha não basta (daltonismo, e o contraste some no tema escuro). */
.agendar-medico__marca {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--bs-primary, #6658dd);
    color: #fff;
    font-size: .8rem;
    line-height: 1;
}

.agendar-medico.is-selecionado .agendar-medico__marca {
    display: inline-flex;
}

/* Passo da trilha ainda não alcançado: visivelmente inerte, e sem cursor de link —
   ele não leva a lugar nenhum enquanto a escolha anterior não existir. */
#agendar-trilha .nav-link.disabled {
    opacity: .55;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .agendar-medico,
    .agendar-medico:hover,
    .agendar-medico:focus-visible { transition: none; transform: none; }
}

/* =====================================================================
   COLUNA DE AÇÕES FIXA — cadastro de produto (parceiro/produto-form)
   =====================================================================

   O formulário de produto é longo: identificação, catálogo, fotos, preço,
   estoque, logística e conformidade. O botão "Salvar" mora na coluna da
   direita e, com a rolagem, sumia da tela — o parceiro descia para ajustar
   estoque, terminava, e tinha de subir tudo de volta para achar o botão. Pior
   nos formulários em que ele desiste no meio por não saber se dava para salvar
   incompleto (dá: o produto nasce rascunho).

   `align-self: flex-start` é o que faz o sticky funcionar dentro de uma row do
   Bootstrap: sem ele a coluna estica até a altura do irmão (`align-items:
   stretch` é o padrão do flex), e um elemento da altura do container nunca tem
   para onde grudar — o `position: sticky` fica ali sem efeito nenhum e sem
   erro nenhum, que é o modo de falha mais difícil de enxergar aqui.

   `max-height` + `overflow-y` porque a coluna tem TRÊS cards (situação, regra
   de ouro, ajuda): em monitor baixo ela passa da viewport, e sticky sem teto de
   altura esconde justamente o rodapé — onde ficam os botões. Com o teto, a
   própria coluna rola por dentro e o "Salvar" continua alcançável.

   O `top` acompanha a altura da topbar fixa do tema, como `.serena-consulta-topo`
   já faz na estação de trabalho da consulta.
   ===================================================================== */
@media (min-width: 992px) {
    .serena-coluna-acoes {
        position: sticky;
        top: 84px;
        align-self: flex-start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Abaixo de 992px a coluna já vem EMPILHADA embaixo do formulário (col-lg-4),
   e grudá-la ali prenderia um bloco no fim da página em vez de aproximar o
   botão. Mesma decisão do `static` em telas estreitas que a estação de trabalho
   da consulta usa. */

/* =====================================================================
   CONEXÃO DO WHATSAPP — avatar com ondas de "sinal vivo".

   Mesmo mecanismo de `.dash-risco__bolinha` (radar / zone-wave), com dois
   desvios deliberados:

     - VERDE, e não vermelho: lá o anel grita "há uma pessoa em risco"; aqui
       ele confirma que o canal está no ar. Reaproveitar a classe vermelha e
       recolorir por cima deixaria a semântica do alerta clínico ambígua no
       CSS, que é onde ela precisa ficar óbvia;
     - envolve uma FOTO (o avatar do perfil do WhatsApp), então o miolo é
       redondo com `overflow: hidden` e os anéis moram fora dele.

   As ondas só existem quando a conexão está ATIVA: um anel pulsando numa
   tela desconectada diria o contrário do estado real.
   ===================================================================== */
.wa-avatar {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    margin: 1.1rem;
    color: #15803d;
    background: #dcfce7;
    border-radius: 50%;
    box-shadow:
        0 2px 10px rgb(21 128 61 / 18%),
        0 0 0 4px rgb(220 252 231 / 90%);
}

/* A foto preenche o círculo sem deformar; se ela não carregar, o JS troca por
   um ícone e o fundo verde continua fazendo sentido. */
.wa-avatar__foto {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wa-avatar > i {
    position: relative;
    z-index: 2;
}

/* Três anéis defasados: nascem no avatar, crescem e somem. */
.wa-avatar--ativo::before,
.wa-avatar--ativo::after {
    content: '';
}

.wa-avatar--ativo::before,
.wa-avatar--ativo::after,
.wa-avatar__onda {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    border: 2px solid rgb(34 197 94 / 45%);
    box-shadow: 0 0 12px rgb(34 197 94 / 18%);
    pointer-events: none;
    animation: wa-avatar-wave 2.6s cubic-bezier(0.15, 0.6, 0.3, 1) infinite;
}

.wa-avatar--ativo::after {
    animation-delay: 0.85s;
}

.wa-avatar--ativo .wa-avatar__onda {
    animation-delay: 1.7s;
}

@keyframes wa-avatar-wave {
    0% {
        transform: scale(1);
        opacity: 0.65;
        border-color: rgb(34 197 94 / 55%);
    }
    70% {
        opacity: 0.18;
    }
    100% {
        transform: scale(2.1);
        opacity: 0;
        border-color: rgb(34 197 94 / 0%);
    }
}

/* Desconectado: mesmo desenho, cinza e parado. O contraste entre os dois
   estados é o que a tela comunica — não o texto embaixo. */
.wa-avatar--inativo {
    color: #64748b;
    background: #f1f5f9;
    box-shadow:
        0 2px 8px rgb(100 116 139 / 12%),
        0 0 0 4px rgb(241 245 249 / 90%);
}

@media (prefers-reduced-motion: reduce) {
    .wa-avatar--ativo::before,
    .wa-avatar--ativo::after,
    .wa-avatar__onda {
        /* Anéis estáticos quando o usuário pede menos movimento: o sinal de
           "conectado" continua legível sem nada se mexendo. */
        animation: none;
        opacity: 0.35;
        transform: scale(1.35);
    }
}

/* ------------------------------------------------------------------
   Console de atendimento (ADM-31) — app/Views/chat/*.php

   Namespace PRÓPRIO (`serena-console-`), e não o `serena-chat` acima:
   aquele bloco é a thread do paciente/médico e mudar um valor lá para
   arrumar o backoffice quebraria a conversa clínica.

   O desenho é de três faixas dentro de UM card: barra de ações no
   topo (ocupa a largura toda da coluna do chat), identidade do
   contato à esquerda e contexto do paciente à direita, separados por
   uma linha vertical, e a thread rolando abaixo.
   ------------------------------------------------------------------ */

.serena-console-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg);
}

/* Fila e thread rolam DENTRO do card; a página não cresce com a conversa. */
.serena-console-fila {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: clamp(20rem, 62vh, 44rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.serena-console-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: clamp(18rem, 46vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem;
    background-color: var(--bg);
}

.serena-console-item {
    display: block;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.serena-console-item:hover {
    border-color: var(--brand-600, #355c52);
    background-color: var(--bg);
}

.serena-console-item--ativo {
    border-color: var(--brand-700, #26423b);
    box-shadow: inset 3px 0 0 0 var(--brand-700, #26423b);
}


/* ============================================================================
 * CONSOLE DE ATENDIMENTO (ADM-31) — troca de conversa sem recarregar.
 * O miolo (`#serena-console`) é substituído por `serena-chat.js`; enquanto a
 * resposta não chega, ele esmaece e para de aceitar clique. É um sinal DISCRETO
 * de propósito: a resposta costuma levar poucas centenas de milissegundos, e um
 * spinner cobrindo a fila piscaria mais do que a recarga que viemos remover.
 * ========================================================================== */
#serena-console {
    transition: opacity .12s ease-out;
}

#serena-console.is-carregando {
    opacity: .55;
    pointer-events: none;
    cursor: progress;
}


/* ============================================================================
 * MODO ESCURO — componentes com cor FIXA
 *
 * O bloco de tokens lá em cima resolve tudo que passa por var(). Sobra o que foi
 * escrito em hexadecimal direto: pastéis claros (#ecfdf5, #eff6ff, #fef3c7…) que
 * são superfície, e a tinta escura que vive em cima deles. No tema escuro os dois
 * lados precisam inverter juntos — trocar só o fundo deixaria texto escuro sobre
 * escuro, e trocar só o texto deixaria o cartão claro no meio da tela escura.
 *
 * A receita é sempre a mesma: o fundo vira um VÉU da própria cor sobre a
 * superfície escura (color-mix ~16%), e a tinta vira a versão clara do mesmo tom.
 * Assim a semântica de cor (verde = ok, âmbar = atenção, roxo = categoria) chega
 * intacta nos dois temas.
 * ========================================================================== */

/* ── Abas em pílula: sobre o card escuro, a trilha precisa AFUNDAR ── */
[data-bs-theme='dark'] .nav-tabs.nav-bordered {
    background-color: var(--bg);
}
[data-bs-theme='dark'] .nav-tabs.nav-bordered .nav-item .nav-link:hover:not(.active) {
    background-color: rgb(255 255 255 / 6%);
}

/* ── Contadores de categoria (painel do paciente e do médico) ── */
[data-bs-theme='dark'] .serena-tile--roxo  { color: #c4b5fd; background-color: rgb(124 58 237 / 18%); }
[data-bs-theme='dark'] .serena-tile--ciano { color: #67e8f9; background-color: rgb(14 116 144 / 22%); }
[data-bs-theme='dark'] .serena-tile--ambar { color: #fcd34d; background-color: rgb(217 119 6 / 18%); }

/* ── Alerta clínico de autolesão ──
   O gradiente rosa não sobrevive ao fundo escuro; vira um véu vermelho chapado,
   que é o que mantém a leitura de "isto é grave" sem clarear a tela inteira. */
[data-bs-theme='dark'] .dash-risco {
    background: rgb(220 38 38 / 12%);
    border-color: rgb(220 38 38 / 38%);
}
[data-bs-theme='dark'] .dash-risco__bolinha {
    color: #fca5a5;
    background: rgb(220 38 38 / 22%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%), 0 0 0 3px rgb(220 38 38 / 20%);
}
[data-bs-theme='dark'] .dash-risco__titulo,
[data-bs-theme='dark'] .dash-risco__badge { color: #fca5a5 !important; }
[data-bs-theme='dark'] .dash-risco__badge {
    background: rgb(220 38 38 / 20%) !important;
    border-color: rgb(220 38 38 / 38%);
}

/* ── Famílias com par accent/soft ──
   Cada família já derivava a variante do seu `--*-accent`; aqui o `--*-soft`
   deixa de ser um pastel fixo e passa a ser o véu daquele mesmo accent sobre a
   superfície escura. Uma regra por família cobre TODAS as variantes de cor. */
[data-bs-theme='dark'] .dash-kpi    { --dash-kpi-soft:    color-mix(in srgb, var(--dash-kpi-accent) 16%, var(--surface)); }
[data-bs-theme='dark'] .dash-fila   { --dash-fila-soft:   color-mix(in srgb, var(--dash-fila-accent) 16%, var(--surface)); }
[data-bs-theme='dark'] .dash-alerta { --dash-alerta-soft: color-mix(in srgb, var(--dash-alerta-accent) 14%, var(--surface)); }
[data-bs-theme='dark'] .dash-fat    { --dash-fat-soft:    color-mix(in srgb, var(--dash-fat-accent) 16%, var(--surface)); }
[data-bs-theme='dark'] .par-kpi     { --par-kpi-soft:     color-mix(in srgb, var(--par-kpi-accent) 16%, var(--surface)); }

/* O accent puro (#2563eb, #7c3aed…) foi escolhido para contrastar com BRANCO.
   Onde ele é TINTA e não moldura, clareia — a moldura e o sparkline seguem no
   tom cheio, que sobre o escuro continua legível como forma. */
[data-bs-theme='dark'] .dash-kpi__marca { color: color-mix(in srgb, var(--dash-kpi-accent) 45%, #fff); }
[data-bs-theme='dark'] .dash-fat__marca { color: color-mix(in srgb, var(--dash-fat-accent) 45%, #fff); }

/* O `color-mix(... , #fff)` das bordas do alerta clareava a moldura; no escuro o
   ponto de mistura é a superfície, não o branco. */
[data-bs-theme='dark'] .dash-alerta {
    border-color: color-mix(in srgb, var(--dash-alerta-accent) 30%, var(--surface));
}
[data-bs-theme='dark'] .dash-alerta__icone {
    background: color-mix(in srgb, var(--dash-alerta-accent) 20%, var(--surface));
    border-color: color-mix(in srgb, var(--dash-alerta-accent) 40%, var(--surface));
}
[data-bs-theme='dark'] .dash-alerta__desc { color: var(--text-secondary); }
[data-bs-theme='dark'] .dash-alerta__cta  { background: var(--surface); }
[data-bs-theme='dark'] .dash-alerta__badge--lock {
    color: #cbd5e1 !important;
    background: rgb(148 163 184 / 22%) !important;
}

/* ── Restos do painel ── */
[data-bs-theme='dark'] .dash-kpi__aviso {
    color: #93c5fd;
    background: rgb(37 99 235 / 15%);
    border-color: rgb(37 99 235 / 35%);
}
[data-bs-theme='dark'] .dash-kpi__aviso:hover {
    color: #bfdbfe;
    background: rgb(37 99 235 / 24%);
}
[data-bs-theme='dark'] .dash-fila.is-disabled { background: rgb(255 255 255 / 3%); }
[data-bs-theme='dark'] .dash-fila__prio {
    color: var(--warning-fg);
    background: var(--warning-bg);
}
[data-bs-theme='dark'] .dash-mov__nota { background: rgb(255 255 255 / 4%); }

/* ── Painel do parceiro ── */
[data-bs-theme='dark'] .par-kpi__delta--up   { color: var(--success-fg); background: var(--success-bg); }
[data-bs-theme='dark'] .par-kpi__delta--down { color: var(--danger-fg);  background: var(--danger-bg); }
[data-bs-theme='dark'] .par-cta { background: var(--surface); }
[data-bs-theme='dark'] .par-passo--verde .par-passo__icone { color: #6ee7b7; background: rgb(5 150 105 / 18%); }
[data-bs-theme='dark'] .par-passo--azul  .par-passo__icone { color: #93c5fd; background: rgb(37 99 235 / 18%); }
[data-bs-theme='dark'] .par-passo--ambar .par-passo__icone { color: #fdba74; background: rgb(234 88 12 / 18%); }
[data-bs-theme='dark'] .par-passo--roxo  .par-passo__icone { color: #c4b5fd; background: rgb(124 58 237 / 18%); }

/* ── Cartão de ajuda da sidebar ── */
[data-bs-theme='dark'] .serena-ajuda-card {
    background: linear-gradient(135deg, rgb(5 150 105 / 14%) 0%, rgb(5 150 105 / 24%) 100%);
}

/* ── Botão claro: no escuro "claro" é subir um degrau, não descer ── */
[data-bs-theme='dark'] .pf-btn-light:hover {
    background: rgb(255 255 255 / 7%);
    border-color: rgb(255 255 255 / 22%);
}

/* ── Linha do tempo: o par --tl-bg/--tl-fg de cada variante ── */
[data-bs-theme='dark'] .serena-timeline__item--verde    { --tl-bg: rgb(5 150 105 / 18%);   --tl-fg: #6ee7b7; }
[data-bs-theme='dark'] .serena-timeline__item--roxo     { --tl-bg: rgb(124 58 237 / 18%);  --tl-fg: #c4b5fd; }
[data-bs-theme='dark'] .serena-timeline__item--azul     { --tl-bg: rgb(37 99 235 / 18%);   --tl-fg: #93c5fd; }
[data-bs-theme='dark'] .serena-timeline__item--ambar    { --tl-bg: rgb(217 119 6 / 18%);   --tl-fg: #fcd34d; }
[data-bs-theme='dark'] .serena-timeline__item--ciano    { --tl-bg: rgb(14 116 144 / 22%);  --tl-fg: #67e8f9; }
[data-bs-theme='dark'] .serena-timeline__item--vermelho { --tl-bg: rgb(220 38 38 / 18%);   --tl-fg: #fca5a5; }
[data-bs-theme='dark'] .serena-timeline__item--cinza    { --tl-bg: rgb(148 163 184 / 18%); --tl-fg: #cbd5e1; }

/* ── Ícones e números coloridos da ficha ── */
[data-bs-theme='dark'] .pf-stat__icon--ambar    { background: rgb(234 88 12 / 18%);   color: #fdba74; }
[data-bs-theme='dark'] .pf-stat__icon--roxo     { background: rgb(124 58 237 / 18%);  color: #c4b5fd; }
[data-bs-theme='dark'] .pf-stat__icon--vermelho { background: rgb(220 38 38 / 18%);   color: #fca5a5; }
[data-bs-theme='dark'] .pf-stat__icon--azul     { background: rgb(37 99 235 / 18%);   color: #93c5fd; }
[data-bs-theme='dark'] .pf-stat__icon--cinza    { background: rgb(148 163 184 / 18%); color: #cbd5e1; }
[data-bs-theme='dark'] .pf-stat__value--ambar   { color: #fdba74; }

/* ── O miolo da bolinha da trilha de etapas acompanha o fundo ── */
[data-bs-theme='dark'] .serena-etapas__item::after { background: var(--surface); }

/* ── Presença do WhatsApp ── */
[data-bs-theme='dark'] .wa-avatar {
    color: #6ee7b7;
    background: rgb(21 128 61 / 25%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 25%), 0 0 0 4px rgb(21 128 61 / 20%);
}
[data-bs-theme='dark'] .wa-avatar--inativo {
    color: #94a3b8;
    background: rgb(100 116 139 / 22%);
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%), 0 0 0 4px rgb(100 116 139 / 18%);
}

/* `var(--light, …)` cai sempre no fallback claro porque `--light` não existe —
   o token certo aqui é o neutro do tema, que já sabe inverter. */
[data-bs-theme='dark'] .serena-estado-vazio__icone,
[data-bs-theme='dark'] .serena-passo {
    background: var(--neutral-bg);
}

/* `bg-white` no botão da fila de elegibilidade existe para dar fundo OPACO sobre a
   linha tingida — não para ser branco. No escuro o opaco é a superfície. */
[data-bs-theme='dark'] .btn.bg-white {
    background-color: var(--surface) !important;
}