/*
 * Camada de componentes do Medon.Client sobre o Bootstrap padrão, usando os design
 * tokens compartilhados (css/tokens.css, linkado de assets/design-tokens/tokens.css —
 * ver Medon.Client.csproj). Decisão: CSS sobre as classes do Bootstrap (não
 * componentes Razor substituindo Card/Button/etc) — a base de código inteira já usa
 * "card"/"btn"/"form-control"/"alert" do Bootstrap; reescrever a marcação de todas as
 * páginas custaria muito mais que sobrepor uma camada de estilo consistente. Só existem
 * componentes Razor próprios (pasta Components/) para o que o Bootstrap não tem pronto:
 * EstadoVazio, BadgeStatus, Carregando.
 *
 * Paleta: teal (mesma escala de --cor-primaria-* de tokens.css) — unificada com
 * Medon.Site de propósito. Não sobrescrever --cor-primaria-* aqui: era o que esse
 * arquivo fazia antes (escala azul só do Client), e criava a impressão de dois
 * produtos diferentes entre o site público e a área logada.
 */

/* ---------- Base ---------- */
html, body {
    font-family: var(--fonte-base);
    color: var(--cor-texto);
    background-color: var(--cor-fundo-secao);
    font-size: var(--texto-base);
    line-height: var(--altura-linha-base);
}

/* ---------- Tipografia ----------
 * ESCALA COMPACTA: todo título do produto é --texto-sm (0.9rem). O h1 do Bootstrap é
 * 2.5rem e esta camada já o tinha reduzido para 1.75rem, mas mesmo assim ele dominava
 * telas que são lista e dado, não landing page.
 *
 * O tamanho deixou de ser o recurso de hierarquia — quem separa título de conteúdo é
 * PESO (negrito x normal), COR (--cor-texto x --cor-texto-secundario) e POSIÇÃO (faixa
 * de cabeçalho, pastilha de ícone, moldura do card). É o mesmo tamanho do nome em
 * .cabecalho-pessoa ("Dra. Teste da Silva"), do título de página em .cabecalho-pagina
 * e do cabeçalho das colunas de anexos, que já vinham assim.
 *
 * .h1..h6 também cobertos: são utilitários que algumas páginas usam para estilizar um
 * elemento como se fosse outro nível. Com a escala achatada eles viram quase no-op, o
 * que é esperado — a marcação continua correta, só não muda mais o tamanho. */
h1, .h1 {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    line-height: var(--altura-linha-titulo);
    color: var(--cor-texto);
    margin-bottom: var(--espaco-3);
}

h2, .h2 {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    line-height: var(--altura-linha-titulo);
    color: var(--cor-texto);
    margin-bottom: var(--espaco-3);
}

/* Um degrau abaixo, e só no peso: subtítulo dentro de bloco que já tem um h2. */
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    line-height: var(--altura-linha-titulo);
    color: var(--cor-texto);
    margin-bottom: var(--espaco-2);
}

/* Marca "(opcional)" dentro de um <label>. Global porque já são duas telas (a
   triagem da fila e o Meu perfil do paciente) e ninguém quer uma folha isolada
   inteira, com atributo de escopo em toda a marcação da página, por uma regra só. */
.rotulo-opcional {
    font-weight: var(--peso-normal);
    color: var(--cor-neutro-500);
}

.text-muted, .form-text {
    color: var(--cor-texto-secundario) !important;
    font-size: var(--texto-sm);
}

small, .small {
    font-size: var(--texto-xs);
}

/* ---------- Layout / ritmo vertical ----------
 * Largura máxima de leitura — sem isso, tabela/lista/texto esticam até a borda do
 * monitor em telas largas. Páginas que precisam de outra largura (ex: formulário
 * estreito) já usam style="max-width" próprio, que continua valendo (mais específico
 * que isto aqui só por estar inline no elemento).
 */
.content {
    max-width: 1100px;
    /* Simétrico. Antes o rodapé era --espaco-8 (3rem) contra 2rem no topo, e os 3rem
       eram ar puro depois do último card — com uma faixa de aviso no topo da página,
       era esse vazio que empurrava o desktop para além da dobra e criava barra de
       rolagem sem ter conteúdo nenhum ali. O topo continua precisando do respiro
       (separa da barra superior); o rodapé não. */
    padding-top: var(--espaco-6);
    padding-bottom: var(--espaco-6);
}

.content > h1:first-child,
.content > h2:first-child {
    margin-top: 0;
}

/* ---------- Cards ----------
 * Flutuando sobre o fundo cinza-claro em vez do branco-sobre-branco padrão do
 * Bootstrap — mesmo visual em toda a área logada, sem tocar marcação de nenhuma
 * página (todas já usam a classe "card" do Bootstrap). */
.card {
    border: none;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    background-color: var(--cor-superficie);
}

.card-body {
    padding: var(--espaco-5);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--cor-borda);
    padding: var(--espaco-4) var(--espaco-5);
    font-weight: var(--peso-medio);
}

/* Vence .h5 nas páginas que escrevem class="h5 card-title" por vir depois no arquivo,
   com a mesma especificidade. */
.card-title {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    margin-bottom: var(--espaco-2);
}

/* ---------- Botões ----------
 * primaria-700, não primaria-600: branco sobre primaria-600 mede 4.21:1 de
 * contraste, abaixo do mínimo de 4.5:1 do WCAG AA para texto normal (mesmo ajuste
 * em Medon.Site/templates/critical.css). primaria-700 mede 6:1. */
.btn {
    border-radius: var(--raio-md);
    font-weight: var(--peso-medio);
    /* 40px — ainda acima do mínimo de toque de 24px (WCAG 2.2 AA) e perto do
       alvo confortável de 44px, mas sem o ar "inchado" que 44px dava em botões
       de texto curto. */
    min-height: 2.5rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.btn-sm {
    min-height: 1.875rem;
}

/* ---------- Padrão de botão do produto ----------
 * Modelo: o "Atender próximo" da fila — letra menor, mais respiro nas laterais que
 * em cima/embaixo, e ícone à esquerda do texto.
 *
 * inline-flex + gap é o que faz ícone e texto ficarem centrados um com o outro:
 * com o inline-block do Bootstrap, um <svg> ao lado de texto assenta na linha de
 * base e fica alguns pixels baixo demais. O gap só aparece quando existe ícone.
 *
 * A tela inicial fica FORA deste padrão a pedido: os botões de lá levam
 * .btn-inicio e continuam com o bloco .btn acima, sem nenhuma mudança.
 *
 * A cor NÃO vem do modelo: aquele botão usa --teal-600 (= --cor-primaria-600), que
 * mede 4,1:1 com texto branco e não passa no mínimo de 4,5:1 do WCAG AA. O padrão
 * continua em --cor-primaria-700 (~5,9:1), um tom mais escuro que o do print. */
.btn:not(.btn-inicio) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    border-radius: var(--raio-sm);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    line-height: 1.2;
    padding: 0.5rem 1.25rem;
}

.btn-sm:not(.btn-inicio) {
    gap: 0.375rem;
    font-size: var(--texto-xs);
    padding: 0.25rem 0.75rem;
}

/* Ícone dentro de botão nunca encolhe nem estica junto com o texto. */
.btn:not(.btn-inicio) > svg {
    flex-shrink: 0;
}

/* Sem contorno: o modelo é um bloco de cor chapado. A borda escura que o
   .btn-primary trazia continua valendo na tela inicial, que ficou de fora. */
.btn-primary:not(.btn-inicio) {
    border-color: transparent;
}

/* O secundário do Bootstrap é um cinza-chumbo que não existe em lugar nenhum do
   Medon — ao lado do primário novo ele lia como peça de outro produto. Aqui vira o
   par natural: mesma geometria, superfície branca e a borda cinza dos cards. */
.btn-secondary:not(.btn-inicio) {
    background-color: var(--cor-superficie);
    border-color: var(--cor-borda);
    color: var(--cor-texto);
}

.btn-secondary:not(.btn-inicio):hover,
.btn-secondary:not(.btn-inicio):focus {
    background-color: var(--cor-fundo-secao);
    border-color: var(--cor-neutro-300);
    color: var(--cor-texto);
}

/* CTA de destaque (azul, degradê) — reservado para o botão de conversão mais
   importante de uma tela (ex: "Entrar na fila"), não para todo botão primário.
   Mesma regra visual do Medon.Site (.btn--cta em critical.css) — usar os dois
   com moderação é o que faz o azul chamar atenção; espalhado, ele brigaria
   com o teal que é a cor de marca do produto. */
.btn-cta {
    background: linear-gradient(135deg, var(--cor-primaria-600), var(--cor-primaria-700));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
}

.btn-cta:hover, .btn-cta:focus {
    background: linear-gradient(135deg, var(--cor-primaria-600), var(--cor-primaria-700));
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.36);
    transform: translateY(-1px);
    color: #fff;
}

/* Desabilitado. O padrão do Bootstrap não serve aqui: como não existe variante
   .btn-cta no Bootstrap, --bs-btn-disabled-color fica sem valor, o `color` do botão
   cai para o texto herdado da página (cinza-escuro) e ainda leva opacity .65 sobre
   o degradê — vira um botão lavado de letra cinza.

   Aqui ele fica chapado, sem o brilho nem o levante do hover, com o MESMO par que
   .btn-primary:disabled já usa no projeto: primaria-400 com letra branca. Não é um
   tom novo nem um cinza, é o desabilitado que o app já tinha. Azul 600 chapado foi
   testado e descartado: fica quase idêntico ao botão ativo, e botão desabilitado
   que parece ativo faz o paciente clicar no vazio. */
.btn-cta:disabled,
.btn-cta.disabled {
    background: var(--cor-primaria-400);
    border-color: transparent;
    color: #fff;
    box-shadow: none;
    transform: none;
    opacity: 1;
}

.btn-primary {
    color: #fff;
    background-color: var(--cor-primaria-700);
    border-color: var(--cor-primaria-900);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--cor-primaria-900);
    border-color: var(--cor-primaria-900);
}

.btn-primary:disabled {
    background-color: var(--cor-primaria-400);
    border-color: var(--cor-primaria-400);
}

a, .btn-link {
    color: var(--cor-primaria-700);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--cor-superficie), 0 0 0 0.25rem var(--cor-foco);
}

/* Estado de carregamento — texto fica transparente (mas continua no DOM, leitor de
   tela ainda anuncia "Entrando..."/"Salvando..." etc.) e um spinner sobrepõe. Opt-in
   por classe (@(_carregando ? "btn-loading" : "")); páginas continuam trocando o
   texto do botão também, os dois reforçam o mesmo estado. */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: medon-spin 0.6s linear infinite;
}

.btn-outline-primary.btn-loading::after,
.btn-outline-secondary.btn-loading::after,
.btn-outline-danger.btn-loading::after,
.btn-link.btn-loading::after {
    border-color: var(--cor-neutro-200);
    border-top-color: var(--cor-primaria-700);
}

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

/* ---------- Formulários ---------- */
.form-label {
    font-weight: var(--peso-medio);
    font-size: var(--texto-sm);
    color: var(--cor-texto);
    margin-bottom: var(--espaco-1);
}

.form-control, .form-select {
    border-radius: var(--raio-sm);
    border-color: var(--cor-borda);
    min-height: 2.75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--cor-primaria-500);
}

/* Classes que o Blazor EditForm aplica sozinho conforme o EditContext (não são as
   .is-invalid/.is-valid do Bootstrap) — usadas em todo InputText/InputDate/etc. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cor-sucesso-600);
}

.invalid {
    outline: 1px solid var(--cor-erro-600);
}

.validation-message {
    color: var(--cor-erro-600);
    font-size: var(--texto-xs);
    display: block;
    margin-top: var(--espaco-1);
}

/* ---------- Tabelas / listas ---------- */
.table {
    font-size: var(--texto-sm);
}

.table thead th {
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    font-size: var(--texto-xs);
    letter-spacing: 0.02em;
    border-bottom-width: 1px;
    border-color: var(--cor-borda);
}

.table td, .table th {
    padding: var(--espaco-3);
    vertical-align: middle;
    border-color: var(--cor-borda);
}

.list-group-item {
    border-color: var(--cor-borda);
    background-color: var(--cor-superficie);
    padding: var(--espaco-3) var(--espaco-4);
}

.list-group-item-action:hover {
    background-color: var(--cor-fundo-secao);
}

/* ---------- Badges de status ----------
 * Nunca só cor — sempre acompanhado de texto (WCAG: informação não pode depender
 * só de cor). Ver Components/BadgeStatus.razor para o componente que usa essas
 * classes a partir de um enum/string de status. */
.badge {
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    padding: 0.35em 0.65em;
    border-radius: var(--raio-sm);
}

/* Os pares -texto e não os -600: medido sobre o próprio fundo do badge, o
   --cor-sucesso-600 dá 3,9:1 e o --cor-aviso-600 dá 2,9:1 — o segundo reprova até o
   mínimo de 3:1 de elemento gráfico, e os dois são TEXTO, que pede 4,5:1. A intenção
   original ("--cor-aviso-600 pensado para badge pequeno", em tokens.css) não se
   sustenta na medição; tamanho pequeno não afrouxa o mínimo, aperta. Com os pares
   escuros fecham 6,2:1 e 9,0:1. O -erro já passava (4,7:1) e fica como está. */
.badge-sucesso { background-color: var(--cor-sucesso-100); color: var(--cor-sucesso-texto); }
.badge-erro { background-color: var(--cor-erro-100); color: var(--cor-erro-600); }
.badge-aviso { background-color: var(--cor-aviso-100); color: var(--cor-aviso-texto); }
.badge-neutro { background-color: var(--cor-neutro-100); color: var(--cor-texto-secundario); }
.badge-primario { background-color: var(--cor-primaria-100); color: var(--cor-primaria-700); }

/* ---------- Alertas ---------- */
.alert {
    border: none;
    border-radius: var(--raio-md);
    font-size: var(--texto-sm);
}

/* ---------- Estado vazio / carregamento ----------
 * Classes usadas por Components/EstadoVazio.razor e Components/Carregando.razor. */
.estado-vazio {
    text-align: center;
    padding: var(--espaco-8) var(--espaco-4);
    color: var(--cor-texto-secundario);
}

.estado-vazio-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--espaco-3);
    border-radius: var(--raio-completo);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    font-size: 1.5rem;
}

.estado-vazio-titulo {
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    margin-bottom: var(--espaco-1);
}

.spinner-carregando {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--cor-borda);
    border-top-color: var(--cor-primaria-600);
    border-radius: 50%;
    animation: medon-spin 0.7s linear infinite;
}

.spinner-carregando-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* ---------- Blazor / infraestrutura (inalterado) ---------- */
h1:focus {
    outline: none;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--cor-primaria-600);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---------- Paleta das páginas públicas (login, registro, esqueci/redefinir senha) ----------
 * Nomes "--teal-*" são legado da primeira versão dessas telas — mantidos porque
 * várias páginas (Login.razor.css, Medico/Fila.razor.css, Medico/Disponibilidade.razor.css)
 * já referenciam essas variáveis diretamente. Desde a revisão de tema (azul como
 * cor principal do produto), os valores são os MESMOS de --cor-primaria-*
 * (assets/design-tokens/tokens.css) — não uma cor separada. */
:root {
  --teal-50:  #F0F9FF;
  --teal-600: #0284C7;
  --teal-700: #0369A1;
  --teal-900: #0C4A6E;

  --bg-page:      #F7F9F8;
  --bg-surface:   #FFFFFF;
  --border:       #E4E7E5;
  --text-primary:   #1A1D1C;
  --text-secondary: #5F6663;
  --text-muted:     #90948F;

  --danger-border: #E24B4A;
  --danger-text:   #A32D2D;
}

/* ---------- Página pública (sem sidebar) ----------
 * Fundo com formas geométricas suaves nos cantos, card centralizado vertical e
 * horizontalmente — nunca no centro, onde fica o card. */
.pagina-publica {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-page);
    padding: var(--espaco-4);
}

/* Dois círculos sólidos via ::before/::after (não elementos extra no DOM) — valores
   exatos, sem "recriar o efeito": 300px/440px, opacity 0.05, cantos opostos, longe
   do card central. */
.pagina-publica::before,
.pagina-publica::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--teal-600);
    opacity: 0.05;
    pointer-events: none;
}

.pagina-publica::before {
    width: 300px;
    height: 300px;
    top: -80px;
    left: -80px;
}

.pagina-publica::after {
    width: 440px;
    height: 440px;
    bottom: -160px;
    right: -160px;
}

.pagina-publica-ponto {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--teal-600);
    opacity: 0.15;
    pointer-events: none;
}

.pagina-publica-ponto-1 { top: 16%; left: 14%; }
.pagina-publica-ponto-2 { top: 45%; right: 8%; width: 8px; height: 8px; }
.pagina-publica-ponto-3 { bottom: 24%; right: 32%; }

/* Terceiro círculo, menor, no canto superior direito — faltava */
.pagina-publica-circulo-extra {
    position: absolute;
    width: 140px;
    height: 140px;
    top: -20px;
    right: 60px;
    border-radius: 50%;
    background-color: var(--teal-600);
    opacity: 0.06;
    pointer-events: none;
}

/* Quadrado arredondado rotacionado, canto inferior esquerdo */
.pagina-publica-quadrado {
    position: absolute;
    width: 130px;
    height: 130px;
    bottom: 40px;
    left: 60px;
    border-radius: 28px;
    background-color: var(--teal-600);
    opacity: 0.05;
    transform: rotate(18deg);
    pointer-events: none;
}

/* Linha curva fina cruzando o topo */
.pagina-publica-linha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pagina-publica-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background-color: var(--bg-surface);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(15, 110, 86, 0.08);
    padding: var(--espaco-6) var(--espaco-5);
}

.pagina-publica-card--larga {
    max-width: 480px;
}

/* Saída secundária das telas públicas (criar conta, já tenho conta, esqueci a
   senha, voltar ao site). Mesmo desenho do .btn-google e do .login-botao do
   Login: 44px de altura, borda de 1px, fundo de superfície e ícone à esquerda
   do rótulo — em vez de um link sublinhado solto no pé do card.

   Mora aqui, e não numa folha isolada, porque já são duas telas (Login e
   Registro) usando o mesmo desenho; a cópia scoped em Login.razor.css é
   anterior a isto e deve migrar para cá.

   text-decoration e color explícitos porque o elemento é um <a>: sem isso o
   reset do Bootstrap deixa sublinhado e azul de link dentro do botão. */
.pagina-publica-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: var(--peso-medio);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida);
}

.pagina-publica-botao:hover,
.pagina-publica-botao:focus {
    background-color: var(--bg-page);
    border-color: var(--text-muted);
    color: var(--text-primary);
    text-decoration: none;
}

/* Empilhados e não lado a lado: a 360px um rótulo com ícone não cabe em metade
   da largura do card sem quebrar em duas linhas. Mesma razão do
   .login-secundarios. */
.pagina-publica-secundarios {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin-top: var(--espaco-5);
}

/* ---------- Avatar (barra superior) ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--raio-completo);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    flex-shrink: 0;
}

/* ---------- Banners de aviso (MainLayout: acesso inativo / perfil incompleto) ----------
 * Substituem alert-warning/alert-info crus do Bootstrap (amarelo/azul saturados,
 * brigam com o teal da marca) por tons suaves derivados dos tokens. */
/* Aviso de página (acesso inativo, cadastro incompleto). É um RECADO, não um card de
   conteúdo: --espaco-3 e --texto-xs em vez de --espaco-4/--texto-sm, porque ele mora
   no topo de toda página e cada pixel dele sai do conteúdo. A margem de baixo vem do
   próprio elemento na marcação (mt-3 mx-3, sem mb) — quem separa do conteúdo é o
   padding-top do .content, e somar os dois dava 48px de vão. */
.banner-medon {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    border-radius: var(--raio-md);
    padding: var(--espaco-3);
    font-size: var(--texto-xs);
}

.banner-medon-icone {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.banner-aviso {
    background-color: var(--cor-aviso-bg, var(--cor-aviso-100));
    color: var(--cor-aviso-texto);
}

/* Só dentro da faixa. Houve uma versão disto como classe solta (.btn-aviso), para
   reusar o botão na Consulta por fila; sobre o branco do card o salmão ficou feio e
   a classe saiu junto — o salmão só funciona sobre o creme da faixa. */
.banner-aviso .btn {
    background-color: var(--cor-aviso-botao);
    color: var(--cor-aviso-botao-texto);
    border-color: var(--cor-aviso-botao);
}

.banner-aviso .btn:hover, .banner-aviso .btn:focus {
    background-color: var(--cor-aviso-botao-texto);
    border-color: var(--cor-aviso-botao-texto);
    color: #fff;
}

.banner-info {
    background-color: var(--cor-info-100);
    color: var(--cor-info-600);
}

/* Tons que faltavam. Sem eles, quem precisava de faixa de erro ou de sucesso caía no
   .alert-danger/.alert-success do Bootstrap, que trazem um verde e um vermelho de
   outra paleta — dava para ver a diferença lado a lado com um card do Medon. */
.banner-erro {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
}

.banner-sucesso {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-texto);
}

/* Botão de dispensar, para a faixa que dá uma NOTÍCIA em vez de pedir uma ação —
   "seu reembolso foi processado" é notícia, e notícia já lida tem que poder sair da
   tela. Faixa que exige ação (acesso inativo) não leva este botão: fechar não
   resolveria nada.

   color: inherit e fundo transparente porque cada tom (.banner-erro, .banner-sucesso,
   .banner-info) já define a cor do texto — o X herda dela e nenhum tom precisa de
   regra própria.

   36px, e não os 44px dos botões do projeto: a faixa toda tem 12px de padding e texto
   de 0.8rem, e um alvo de 44px aqui ficaria mais alto que o próprio recado. O alvo é o
   botão inteiro, não o glifo. */
.banner-medon-fechar {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--raio-sm);
    background-color: transparent;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    transition: opacity var(--transicao-rapida), background-color var(--transicao-rapida);
}

.banner-medon-fechar:hover, .banner-medon-fechar:focus {
    opacity: 1;
    background-color: rgba(22, 33, 31, 0.07);
}

/* Faz o texto ocupar o vão entre o ícone e o X. flex: 1 1 0 e não 1 1 auto: com auto,
   a quebra de linha do flex é decidida pela largura hipotética do bloco, e o texto
   inteiro desceria para uma linha própria mesmo sobrando espaço (mesmo caso já
   documentado em Paciente/Fila.razor.css). */
.banner-medon-texto {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- Badge informativo (pill) ----------
 * Distinto dos badges de status (retângulo, raio-sm) — usado quando o rótulo é uma
 * observação contextual, não um estado (ex: "Enviado pelo médico"). */
.badge-info {
    background-color: var(--cor-info-100);
    color: var(--cor-info-600);
    border-radius: var(--raio-completo);
    font-weight: var(--peso-medio);
    font-size: var(--texto-xs);
    padding: 0.3em 0.75em;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

/* ---------- Card de atalho (destaque sólido + atalhos com ícone) ----------
 * Ver 4.5 do guia de redesign: bloco de ação principal em teal sólido, atalhos
 * secundários com ícone em quadrado 34x34 + título + descrição. */
.card-destaque {
    background-color: var(--cor-primaria-700);
    color: #fff;
}

.card-destaque .card-title, .card-destaque p {
    color: #fff;
}

.card-destaque p {
    opacity: 0.85;
}

.card-destaque .btn-primary {
    background-color: #fff;
    color: var(--cor-primaria-700);
    border-color: #fff;
}

.card-destaque .btn-primary:hover, .card-destaque .btn-primary:focus {
    background-color: var(--cor-primaria-100);
    border-color: var(--cor-primaria-100);
}

.card-atalho-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--raio-sm);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    margin-bottom: var(--espaco-2);
    flex-shrink: 0;
}

.card-destaque .card-atalho-icone {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.card-atalho-icone-perigo {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
}

/* ---------- Listas (Meus atendimentos, Notificações) ----------
 * Linhas dentro de um único card (não um card por item) — ícone à esquerda, sempre
 * duas linhas de informação (título + metadado). Ver 4.8 do guia. */
.lista-linhas {
    display: flex;
    flex-direction: column;
}

.lista-linha {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-bottom: 0.5px solid var(--cor-borda);
    color: inherit;
    text-decoration: none;
}

.lista-linha:last-child {
    border-bottom: none;
}

a.lista-linha:hover {
    background-color: var(--cor-fundo-secao);
    text-decoration: none;
}

.lista-linha-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--raio-sm);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    flex-shrink: 0;
}

.lista-linha-corpo {
    flex: 1;
    min-width: 0;
}

.lista-linha-titulo {
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.lista-linha-meta {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.lista-linha-acao {
    flex-shrink: 0;
}

/* Modificadores da linha de lista — usados primeiro em Medico/AnexosPendentes,
 * mas propositalmente genéricos: qualquer lista de itens com estado pode usar.
 * Ficam aqui, e não num .razor.css da página, porque a família .lista-linha já
 * mora neste arquivo e porque parte da marcação da página é montada num
 * RenderFragment do bloco @code — CSS isolado por página é território menos
 * previsível ali. */
/* Pastilha inteira no tom do estado — fundo claro e traço forte, o mesmo par que os
   badges de status usam. Cheguei a deixar o fundo sempre azul com o traço colorido,
   mas verde sobre azul lia como duas cores brigando dentro do mesmo quadradinho. */
.lista-linha-icone--aviso {
    /* --cor-aviso-texto, não --cor-aviso-600: sobre o creme do fundo o 600 mede
       2,9:1, abaixo do mínimo de 3:1 para elemento gráfico. Este fecha 9:1. */
    background-color: var(--cor-aviso-100);
    color: var(--cor-aviso-texto);
}

.lista-linha-icone--erro {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
}

.lista-linha-icone--sucesso {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-600);
}

.lista-linha-icone--primaria {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* Tempo de espera. Passado o limite vira âmbar e ganha peso — mas o texto ("há
   32 dias") já diz tudo sozinho; a cor só reforça, nunca carrega a informação. */
.lista-linha-espera--antiga {
    color: var(--cor-aviso-600);
    font-weight: var(--peso-medio);
}

.lista-linha-rodape {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

/* Botão só na aparência: a linha inteira já é o link, então isto é um <span>
   dentro do <a> (um <button> aninhado em <a> seria marcação inválida). */
.lista-linha-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.875rem;
    padding: 0 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background-color: var(--cor-superficie);
    color: var(--cor-primaria-700);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    white-space: nowrap;
}

a.lista-linha:hover .lista-linha-botao {
    background-color: var(--cor-primaria-50);
    border-color: var(--cor-primaria-100);
}

/* As variantes de cor do botão (--aviso/--erro/--sucesso) foram removidas: a ação é
   sempre azul. Quem carrega o estado é o traço do ícone e o texto da linha. */

/* Cabeçalho de seção que abre e fecha — a seta gira. Usado nos "Confirmados" da lista
   de anexos e no histórico de versões do prontuário. */
.secao-alternar {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--cor-texto);
    cursor: pointer;
    text-align: left;
}

.secao-alternar > :first-child {
    color: var(--cor-neutro-500);
    transition: transform var(--transicao-rapida);
    flex-shrink: 0;
}

.secao-alternar--aberta > :first-child {
    transform: rotate(90deg);
}

.secao-alternar-titulo {
    margin: 0;
}

.secao-alternar:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--cor-superficie), 0 0 0 0.25rem var(--cor-foco);
    border-radius: var(--raio-sm);
}

/* Celular (360x640 e 640x360): badge e botão descem para uma segunda linha em
   vez de espremer o nome do paciente. Só nas linhas que têm rodapé — as demais
   listas do app seguem intactas. */
@media (max-width: 640.98px) {
    .lista-linha--com-acao {
        flex-wrap: wrap;
    }

    .lista-linha--com-acao .lista-linha-rodape {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* "Preencher prontuário" é o rótulo mais longo e estourava a tela a 360px:
       o botão pode encolher e quebrar em duas linhas em vez de empurrar a linha
       para fora. */
    .lista-linha--com-acao .lista-linha-botao {
        min-width: 0;
        height: auto;
        min-height: 1.875rem;
        padding: 0.25rem 0.625rem;
        white-space: normal;
        text-align: left;
    }
}

/* Cabeçalho de seção com contador */
.lista-secao {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-3);
}

.lista-secao h2 {
    margin: 0;
}

.lista-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--raio-completo);
    background-color: var(--cor-neutro-100);
    color: var(--cor-texto-secundario);
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
}

/* ---------- Cabeçalho de pessoa ----------
 * Avatar + nome + linha de apoio, com um badge ancorado no canto superior direito.
 * Global porque é usado pela tela de atendimento e pelo Meu perfil do médico —
 * nasceu escopado em EnviarAnexos.razor.css e foi promovido aqui quando a segunda
 * tela precisou do mesmo bloco. */
.cabecalho-pessoa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
    margin-bottom: var(--espaco-3);
    min-height: 4.75rem;
    text-align: center;
}

.cabecalho-pessoa .badge {
    position: absolute;
    top: var(--espaco-3);
    right: var(--espaco-4);
}

.cabecalho-pessoa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: var(--raio-completo);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
}

/* Sem flex-grow: o bloco tem a largura do próprio conteúdo, e é o
   justify-content: center do pai que o coloca no meio do card. */
.cabecalho-pessoa-identificacao {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cabecalho-pessoa-nome {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.cabecalho-pessoa-meta {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-neutro-500);
}

@media (max-width: 640.98px) {
    .cabecalho-pessoa {
        flex-wrap: wrap;
    }

    .cabecalho-pessoa .badge {
        position: static;
        margin-top: var(--espaco-2);
    }
}

/* ---------- Abas em pastilha ----------
 * Mesmo vocabulário do item ativo do menu lateral (primaria-100 + primaria-700,
 * raio md). Global porque já é usado por mais de uma tela.
 * NOTA: VideoConsulta.razor.css tem hoje uma cópia deste mesmo visual sob os
 * nomes .consulta-aba/.consulta-aba--ativa, escrita antes destas classes
 * existirem. Migrar aquela tela para cá é troca de nome de classe e apagar o
 * bloco de lá — deixei como está para não mexer numa tela já aprovada. */
.abas-medon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: var(--espaco-4);
}

.aba-medon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: var(--raio-md);
    background-color: transparent;
    color: var(--cor-texto-secundario);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
}

.aba-medon:hover {
    background-color: var(--cor-fundo-secao);
    color: var(--cor-texto);
}

.aba-medon--ativa,
.aba-medon--ativa:hover {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    font-weight: var(--peso-negrito);
}

.aba-medon:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--cor-superficie), 0 0 0 0.25rem var(--cor-foco);
}

.aba-medon-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3rem;
    border-radius: var(--raio-completo);
    background-color: var(--cor-neutro-100);
    color: var(--cor-neutro-500);
    font-size: 0.7rem;
    font-weight: var(--peso-negrito);
}

.aba-medon--ativa .aba-medon-contador {
    background-color: var(--cor-superficie);
    color: var(--cor-primaria-700);
}

/* ---------- Prontuário (Medico/ProntuarioForm.razor) ----------
 * Fica aqui, e não num ProntuarioForm.razor.css, porque o formulário é montado
 * dentro de um RenderFragment do bloco @code — CSS isolado por página depende do
 * compilador aplicar o atributo de escopo lá dentro, e uma falha nisso seria
 * silenciosa (a tela renderiza sem estilo nenhum). Pode migrar depois de
 * confirmar num build. */
.prontuario-layout {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
}

.prontuario-principal {
    min-width: 0;
}

.prontuario-indice {
    display: none;
}

@media (min-width: 1024px) {
    .prontuario-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--espaco-5);
    }

    .prontuario-principal {
        flex: 1 1 auto;
    }

    .prontuario-indice {
        display: block;
        flex: 0 0 232px;
        width: 232px;
        position: sticky;
        top: var(--espaco-4);
    }
}

.prontuario-indice .card-body {
    padding: var(--espaco-4);
}

.prontuario-indice-titulo {
    margin: 0 0 var(--espaco-2);
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
    color: var(--cor-neutro-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prontuario-indice-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.prontuario-indice-item {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: 0.5rem 0.625rem;
    border-radius: var(--raio-sm);
    color: var(--cor-texto-secundario);
    text-decoration: none;
    font-size: var(--texto-xs);
}

.prontuario-indice-item:hover {
    background-color: var(--cor-fundo-secao);
    color: var(--cor-texto);
    text-decoration: none;
}

.prontuario-indice-item--completo {
    color: var(--cor-primaria-700);
    font-weight: var(--peso-medio);
}

.prontuario-indice-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    flex-shrink: 0;
}

.prontuario-indice-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.prontuario-indice-contagem {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--cor-neutro-500);
}

.prontuario-indice-divisor {
    border: 0;
    border-top: 1px solid var(--cor-borda);
    margin: var(--espaco-3) 0;
    opacity: 1;
}

.prontuario-progresso-texto {
    margin: 0 0 var(--espaco-2);
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.prontuario-progresso {
    height: 5px;
    border-radius: 3px;
    background-color: var(--cor-neutro-100);
    overflow: hidden;
}

.prontuario-progresso-barra {
    height: 100%;
    background-color: var(--cor-primaria-600);
    transition: width var(--transicao-normal);
}

/* Cabeçalho de seção — antes eram <h6>, o menor da escala, para o que são os
   marcos da tela. */
.prontuario-secao-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-3);
}

.prontuario-secao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: var(--raio-sm);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

.prontuario-secao-titulo {
    margin: 0;
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
}

.prontuario-campo {
    margin-bottom: var(--espaco-3);
}

.prontuario-dupla {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}

@media (min-width: 576px) {
    .prontuario-dupla {
        flex-direction: row;
    }

    .prontuario-dupla > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Identificação: dado, não campo. */
.prontuario-dados {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-radius: var(--raio-md);
    background-color: var(--cor-fundo-secao);
}

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

.prontuario-dado {
    min-width: 0;
}

.prontuario-dado-rotulo {
    display: block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-neutro-500);
    margin-bottom: 2px;
}

.prontuario-dado-valor {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

/* Sintomas atuais: pastilhas no lugar da string separada por vírgula. */
.prontuario-pastilhas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    background-color: var(--cor-superficie);
}

.prontuario-pastilhas:focus-within {
    border-color: var(--cor-primaria-600);
}

.prontuario-pastilha {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.75rem;
    padding: 0 0.35rem 0 0.6rem;
    border-radius: var(--raio-completo);
    background-color: var(--cor-primaria-50);
    border: 1px solid var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    white-space: nowrap;
}

.prontuario-pastilha-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--raio-completo);
    background-color: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
}

.prontuario-pastilha-remover:hover {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
    opacity: 1;
}

.prontuario-pastilha-entrada {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: 0;
    padding: 0 0.25rem;
    font-size: var(--texto-sm);
    color: var(--cor-texto);
    background: transparent;
}

.prontuario-rodape {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-3);
    margin-top: var(--espaco-4);
}

/* Cabeçalho do histórico de versões: ícone da seção + botão que abre/fecha +
   contador, tudo numa linha. */
.prontuario-versoes-cabecalho {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
}

.prontuario-versoes-cabecalho .secao-alternar {
    flex: 1 1 auto;
    min-width: 0;
}

.prontuario-versao {
    padding: var(--espaco-4) var(--espaco-5);
    border-bottom: 1px solid var(--cor-borda);
    font-size: var(--texto-sm);
}

.prontuario-versao:last-child {
    border-bottom: none;
}

/* ---------- Dropzone (upload de anexo) ---------- */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    text-align: center;
    padding: var(--espaco-6) var(--espaco-4);
    border: 1.5px dashed var(--cor-borda);
    border-radius: var(--raio-md);
    background-color: var(--cor-fundo-secao);
    color: var(--cor-texto-secundario);
    transition: border-color var(--transicao-rapida), background-color var(--transicao-rapida);
}

.dropzone:has(input:focus-visible) {
    border-color: var(--cor-primaria-500);
}

.dropzone-icone {
    color: var(--cor-primaria-600);
}

.dropzone-titulo {
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.dropzone input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Resumo em tabela de 2 colunas (Anexos do atendimento) ---------- */
.resumo-tabela {
    display: flex;
    flex-direction: column;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: var(--espaco-4);
    padding: var(--espaco-2) 0;
    border-bottom: 0.5px solid var(--cor-borda);
    font-size: var(--texto-sm);
}

.resumo-linha:last-child {
    border-bottom: none;
}

.resumo-label {
    color: var(--cor-texto-secundario);
    flex-shrink: 0;
}

.resumo-valor {
    color: var(--cor-texto);
    font-weight: var(--peso-medio);
    text-align: right;
}

/* ---------- Cabeçalho de página ----------
 * Componente Components/CabecalhoPagina.razor. Global e não isolado: o conteúdo de
 * <Fim> é marcado com o escopo da página que o passou, não com o do componente, e
 * folha global alcança os dois sem depender de ::deep.
 *
 * PILHA CENTRADA: pastilha em cima, título, descrição e o dado da ponta por último —
 * irmão do .cabecalho-pessoa do Meu perfil. flex-direction: column explícito porque
 * este elemento É o .card, e o .card do Bootstrap já vem em column: contar com o
 * padrão dele funcionaria hoje e quebraria no dia que o Bootstrap mudar. O
 * align-items e o text-align são o que de fato centra. */
.cabecalho-pagina {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: var(--espaco-5) var(--espaco-4);
    margin-bottom: var(--espaco-4);
}

/* Maior que a pastilha das listas (2.375rem): aqui ela é o primeiro elemento da
   página e sustenta sozinha o bloco inteiro. */
.cabecalho-pagina-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* Um degrau acima do --texto-sm dos outros títulos: no centro, sem nada ao lado
   para dar contraste, --texto-sm sumia dentro do respiro do card. margin: 0 anula
   o --espaco-3 que h1 traz da tipografia global. */
.cabecalho-pagina-titulo {
    margin: var(--espaco-3) 0 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

/* max-width em ch e não em px: limita pela quantidade de caracteres, que é o que
   define linha confortável de leitura, e acompanha o tamanho da fonte. */
.cabecalho-pagina-descricao {
    max-width: 62ch;
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.cabecalho-pagina-fim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    margin-top: var(--espaco-3);
}

/* Rótulo e valor lado a lado ("Pendências: 5"), com o valor no badge azul padrão. */
.cabecalho-pagina-fim-par {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-2);
    white-space: nowrap;
}

.cabecalho-pagina-fim-rotulo {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    line-height: 1.3;
}

/* ---------- Celular (360x640 e 640x360) ----------
   A pilha centrada já é vertical, então não há o que reempilhar — só menos respiro,
   que a 360px é o que separa o cabeçalho de ocupar meia tela. */
@media (max-width: 640.98px) {
    .cabecalho-pagina {
        padding: var(--espaco-4) var(--espaco-3);
    }
}

/* ---------- Responsivo ----------
 * Bootstrap cobre o grid; isto aqui é só o ajuste específico do Medon que faltava:
 * títulos um pouco menores ainda em telas muito estreitas, e cards com menos padding
 * (o padding "confortável" de desktop sobra em 380px). */
@media (max-width: 480px) {
    .card-body {
        padding: var(--espaco-4);
    }

    .content {
        padding-top: var(--espaco-4);
    }
}