/* /Components/CabecalhoPagina.razor.rz.scp.css */
/* ARQUIVO OBSOLETO — pode ser apagado.
 *
 * Este era o CSS isolado da primeira versão do CabecalhoPagina. As regras foram
 * movidas para wwwroot/css/app.css porque o conteúdo passado em <Fim> carrega o
 * escopo da PÁGINA que o passou, não o deste componente, e folha global alcança os
 * dois sem depender de ::deep.
 *
 * O arquivo continuou aqui e o build seguiu empacotando as regras VELHAS dentro de
 * Medon.Client.styles.css — que o index.html carrega DEPOIS de app.css e cujos
 * seletores ainda ganham o atributo de escopo [b-xxxxx], ou seja, mais específicos.
 * Resultado: as regras antigas venciam as novas, e mudanças em app.css pareciam não
 * fazer efeito (título grande demais, rótulo e valor empilhados).
 *
 * Esvaziado em vez de apagado porque a sessão que edita este projeto não consegue
 * remover arquivos — apague-o quando puder.
 */
/* /Components/CheckoutMercadoPago.razor.rz.scp.css */
/* Prefixo mpg-. Toda a marcação deste componente vive no próprio template, então o
   CSS isolado alcança tudo — exceto o que o SDK do Mercado Pago desenha dentro do
   iframe dele, que é inalcançável por definição (e é exatamente por isso que o cartão
   fica seguro ali). Aparência interna do Brick se ajusta pela opção `customization.visual`
   no mercadopago.js, não daqui. */

/* ---------- Aviso de indisponível ---------- */
.mpg-aviso[b-blbrrw7yci] {
    display: flex;
    /* flex-direction: row EXPLÍCITO — este elemento É o .card, e o .card do Bootstrap
       já vem com flex-direction: column. Sem isto, o align-items abaixo centralizaria
       na horizontal e a faixa viraria uma pilha. Mesma armadilha de .pagpac-estado. */
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
    margin-bottom: var(--espaco-4);
}

.mpg-aviso-icone[b-blbrrw7yci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
    /* --cor-aviso-texto e não --cor-aviso-600: sobre o creme 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);
}

.mpg-aviso-texto[b-blbrrw7yci] {
    flex: 1 1 auto;
    min-width: 0;
}

.mpg-aviso-titulo[b-blbrrw7yci] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.mpg-aviso-apoio[b-blbrrw7yci] {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Faixa de título, igual às outras seções do app ---------- */
.mpg-checkout[b-blbrrw7yci],
.mpg-pix[b-blbrrw7yci] {
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

.mpg-secao-cabecalho[b-blbrrw7yci] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.mpg-secao-icone[b-blbrrw7yci] {
    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);
}

.mpg-secao-titulo[b-blbrrw7yci] {
    margin: 0;
}

/* ---------- Formulário (Brick) ---------- */
.mpg-checkout-corpo[b-blbrrw7yci] {
    padding: 0 var(--espaco-4) var(--espaco-4);
}

/* min-height reserva o espaço antes do iframe existir: sem isso o card nasce com a
   altura da faixa de título e "salta" quando o Brick carrega. */
.mpg-brick[b-blbrrw7yci] {
    min-height: 320px;
}

.mpg-processando[b-blbrrw7yci] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-top: var(--espaco-3);
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.mpg-erro[b-blbrrw7yci] {
    margin: 0 0 var(--espaco-3);
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    background-color: var(--cor-erro-100);
    font-size: var(--texto-xs);
    color: var(--cor-erro-600);
}

/* ---------- PIX ---------- */
.mpg-pix-corpo[b-blbrrw7yci] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-4);
    padding: 0 var(--espaco-4) var(--espaco-4);
}

.mpg-pix-qr[b-blbrrw7yci] {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    border-radius: var(--raio-md);
    /* O PNG do MP vem com margem branca própria; a borda sutil só separa do card. */
    border: 1px solid var(--cor-borda);
}

.mpg-pix-instrucoes[b-blbrrw7yci] {
    flex: 1 1 auto;
    min-width: 0;
}

.mpg-pix-passo[b-blbrrw7yci] {
    margin: 0 0 var(--espaco-3);
    font-size: var(--texto-sm);
    color: var(--cor-texto);
}

/* O copia-e-cola tem ~200 caracteres. Mostrado por inteiro (e não truncado) de
   propósito: quando a cópia automática falha — contexto não seguro, permissão negada —
   selecionar à mão é a única saída, e não dá para selecionar o que está escondido. */
.mpg-pix-codigo[b-blbrrw7yci] {
    max-height: 5.5rem;
    overflow-y: auto;
    padding: var(--espaco-2) var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background-color: var(--cor-fundo-secao);
}

.mpg-pix-codigo code[b-blbrrw7yci] {
    font-size: var(--texto-xs);
    /* anywhere e não break-all: o código não tem espaços, então sem isto ele estoura a
       largura do card em vez de quebrar. */
    overflow-wrap: anywhere;
    color: var(--cor-texto-secundario);
}

.mpg-pix-acoes[b-blbrrw7yci] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-top: var(--espaco-3);
}

.mpg-pix-vivo[b-blbrrw7yci] {
    display: flex;
    /* flex-start: a 360px esta frase quebra em duas linhas, e a bolinha centrada
       contra o bloco de duas linhas fica flutuando entre elas. */
    align-items: flex-start;
    gap: 0.4rem;
    margin: var(--espaco-3) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* Mesma bolinha verde do "atualiza sozinho" da fila — é o mesmo significado. */
.mpg-pix-bolinha[b-blbrrw7yci] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    /* Alinha com a PRIMEIRA linha do texto, não com o topo da caixa. */
    margin-top: 0.32rem;
    border-radius: var(--raio-completo);
    background-color: var(--cor-sucesso-600);
}

.mpg-pix-prazo[b-blbrrw7yci] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .mpg-aviso[b-blbrrw7yci] {
        padding: var(--espaco-3);
    }

    /* SEM respiro lateral no celular — e isto é deliberado, não descuido.
       O formulário do MP tem largura mínima própria e a 356px o que sobrava era pouco:
       24px do px-4 da página de cada lado, a borda do card, mais 12px de respiro aqui.
       O Brick ficava com 284px, o formulário dele tirava 16px de cada lado
       (--form-padding) e os campos eram recortados em 252px — o ícone do CVV sumia
       pela borda.

       A primeira tentativa foi margem negativa no .mpg-brick para recuperar estes
       24px. NÃO FUNCIONA, e vale saber por quê: o SDK do Mercado Pago escreve
       `max-width: 100%` INLINE no container ao montar o Brick (junto com as variáveis
       --form-padding e companhia). `max-width: 100%` resolve contra a largura do PAI,
       então a margem negativa só deslocava o container 12px para a esquerda e o
       max-width devolvia a largura ao valor de antes — sobrava card vazio à direita e
       os campos continuavam cortados. Tirar esse max-width na mão resolve até a
       próxima montagem, porque quem escreve é o SDK.

       Zerar o padding daqui resolve na raiz: o container passa a ter exatamente a
       largura do card, e aí `max-width: 100%` é justamente o que a gente quer. O
       respiro do texto de erro e do "processando" volta na regra abaixo. */
    .mpg-checkout-corpo[b-blbrrw7yci] {
        padding: 0 0 var(--espaco-3);
    }

    .mpg-erro[b-blbrrw7yci], .mpg-processando[b-blbrrw7yci] {
        margin-left: var(--espaco-3);
        margin-right: var(--espaco-3);
    }

    /* Rede de segurança: se o formulário do MP ainda pedir mais largura que a tela
       tem, ele rola na horizontal aqui dentro em vez de ser cortado pelo
       overflow: hidden do .mpg-checkout. Campo que rola é campo utilizável; campo
       cortado, não. */
    .mpg-brick[b-blbrrw7yci] {
        overflow-x: auto;
    }

    /* QR e instruções não cabem lado a lado a 360px: o QR vai para cima, centrado, e o
       texto abaixo dele. */
    .mpg-pix-corpo[b-blbrrw7yci] {
        flex-direction: column;
        align-items: center;
        gap: var(--espaco-3);
        padding: 0 var(--espaco-3) var(--espaco-3);
    }

    .mpg-pix-qr[b-blbrrw7yci] {
        width: 200px;
        height: 200px;
    }

    .mpg-pix-instrucoes[b-blbrrw7yci] {
        width: 100%;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-6hic0v6b4b] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--cor-fundo-secao);
    min-height: 100vh;
}

main[b-6hic0v6b4b] {
    flex: 1;
}

.sidebar[b-6hic0v6b4b] {
    background-color: var(--cor-superficie);
    border-right: 1px solid var(--cor-borda);
}

.top-row[b-6hic0v6b4b] {
    background-color: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-6hic0v6b4b]  a, .top-row[b-6hic0v6b4b]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        color: var(--cor-texto-secundario);
    }

    .top-row[b-6hic0v6b4b]  .btn-instalar-app {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row[b-6hic0v6b4b]  .btn-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    /* Os itens do menu do avatar TAMBÉM são <a> dentro do .top-row — e por isso
       herdavam o margin-left: 1.5rem da regra acima, que existe para separar os links
       da barra entre si. Era isso que empurrava "Meu perfil" e "Alterar senha" para
       dentro do card enquanto o "Sair" (um <button>, que a regra não pega) ficava
       rente à borda. Mais específico que .top-row a por ser classe contra tipo. */
    .top-row[b-6hic0v6b4b]  .avatar-dropdown-item {
        margin-left: 0;
    }

    .top-row[b-6hic0v6b4b]  a:hover, .top-row[b-6hic0v6b4b]  .btn-link:hover {
        text-decoration: none;
        color: var(--cor-primaria-700);
    }

    .top-row[b-6hic0v6b4b]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-6hic0v6b4b] {
        justify-content: space-between;
    }

    /* Respiro lateral de 16px no celular, em vez dos 24px do px-4 que a marcação pede.
       24px de cada lado numa tela de 356px são 13% da largura gastos em nada — 16px é o
       que a maioria dos apps usa nessa faixa, e devolve 16px de conteúdo em TODA tela.
       Quem mais precisava disso é o formulário do Mercado Pago, que tem largura mínima
       própria e era recortado (ver CheckoutMercadoPago.razor.css), mas o ganho não é só
       dele. Casa com o .banner-medon do app.css, que usa o mesmo respiro aqui.

       .content e não article (como faz o bloco de desktop lá embaixo): o px-4 do
       Bootstrap é `.px-4 { padding: … !important }`, então !important contra
       !important quem decide é a especificidade — e `article` (0-0-1) perde de
       `.px-4` (0-1-0). Aqui só empata e ganha por vir depois. */
    .top-row[b-6hic0v6b4b], .content[b-6hic0v6b4b] {
        padding-left: var(--espaco-4) !important;
        padding-right: var(--espaco-4) !important;
    }

    .top-row[b-6hic0v6b4b]  a, .top-row[b-6hic0v6b4b]  .btn-link {
        margin-left: 0;
    }

    /* No celular a sidebar é só a barra da marca + hambúrguer (3.5rem de altura).
       Ancorá-la no topo é o que sustenta o menu drawer do NavMenu, que abre como
       painel fixo logo abaixo dela: sem isto o painel descolaria da barra assim
       que a página rolasse. Vale só até 640px — 360x640 e 640x360. */
    .sidebar[b-6hic0v6b4b] {
        position: sticky;
        top: 0;
        z-index: 1060;
        border-right: 0;
    }
}

.avatar-dropdown[b-6hic0v6b4b] {
    position: relative;
}

    .avatar-dropdown[b-6hic0v6b4b]  .avatar-dropdown-toggle {
        display: inline-flex;
        align-items: center;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: inherit;
        font: inherit;
    }

    .avatar-dropdown[b-6hic0v6b4b]  .avatar-dropdown-caret {
        color: var(--cor-texto-secundario);
        font-size: 0.7rem;
    }

    .avatar-dropdown[b-6hic0v6b4b]  .avatar-dropdown-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 0.5rem);
        min-width: 12rem;
        background-color: var(--cor-superficie);
        border: 1px solid var(--cor-borda);
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        padding: 0.35rem;
        z-index: 20;
        display: flex;
        flex-direction: column;
    }

    .avatar-dropdown[b-6hic0v6b4b]  .avatar-dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        text-align: left;
        background: none;
        border: 0;
        border-radius: 0.35rem;
        padding: 0.5rem 0.65rem;
        color: var(--cor-texto);
        text-decoration: none;
        font: inherit;
        cursor: pointer;
    }

    .avatar-dropdown[b-6hic0v6b4b]  .avatar-dropdown-item:hover {
        background-color: var(--cor-fundo-secao);
        text-decoration: none;
        color: var(--cor-texto);
    }

    .avatar-dropdown[b-6hic0v6b4b]  .avatar-dropdown-overlay {
        position: fixed;
        inset: 0;
        z-index: 10;
    }

@media (min-width: 641px) {
    .page[b-6hic0v6b4b] {
        flex-direction: row;
    }

    /* A sidebar tem exatamente a altura da janela e NÃO pode transbordar: os dois
       filhos dela (a barra da marca e a lista de navegação) tinham altura fixa
       somando 3.5rem + calc(100vh - 3.5rem). Só que a barra da marca é mais alta
       que 3.5rem de verdade (o min-height é mínimo, não travado: o padding do
       .navbar mais o logo de 32px passam disso), então a coluna estourava a janela
       em 2px e TODA tela do app ficava com rolagem, mesmo vazia.
       Agora a lista é o item flexível (flex: 1 1 auto no NavMenu.razor.css) e a
       conta desaparece: a altura real da marca deixa de importar. O overflow:
       hidden é o cinto de segurança — nada aqui dentro empurra o documento. */
    .sidebar[b-6hic0v6b4b] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .top-row[b-6hic0v6b4b] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-6hic0v6b4b]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-6hic0v6b4b], article[b-6hic0v6b4b] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-6iz8kiawpm] {
    background-color: var(--cor-fundo-secao);
    border: 1px solid var(--cor-borda);
}

/* Ícone de hamburguer escuro fixo — independe da classe navbar-dark/navbar-light
   do Bootstrap no elemento pai, que continua "navbar-dark" na marcação mas não
   se aplica mais visualmente (sidebar deixou de ser escura). */
.navbar-toggler-icon[b-6iz8kiawpm] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(61, 87, 84, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.top-row[b-6iz8kiawpm] {
    min-height: 3.5rem;
    background-color: var(--cor-superficie);
}

.navbar-brand[b-6iz8kiawpm] {
    font-size: 1.1rem;
    font-weight: var(--peso-negrito);
    color: var(--cor-primaria-700);
}

.nav-item[b-6iz8kiawpm]  .nav-icone {
    flex-shrink: 0;
    margin-right: 0.65rem;
}

.nav-item[b-6iz8kiawpm] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}

/* O badge de não lidas ficava encostado no texto do item. ::deep porque ele vem do
   componente BadgeStatus, dentro do NavLink. */
.nav-item[b-6iz8kiawpm]  .badge {
    margin-left: var(--espaco-2);
}

    .nav-item:first-of-type[b-6iz8kiawpm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-6iz8kiawpm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-6iz8kiawpm]  a {
        color: var(--cor-texto-secundario);
        border-radius: var(--raio-md);
        height: 2.75rem;
        display: flex;
        align-items: center;
        padding: 0 0.75rem;
        line-height: 1;
        font-weight: var(--peso-medio);
        transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
    }

.nav-item[b-6iz8kiawpm]  a.active {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

.nav-item[b-6iz8kiawpm]  a:hover {
    background-color: var(--cor-fundo-secao);
    color: var(--cor-texto);
}

/* ==========================================================================
   Menu do celular: drawer lateral (off-canvas)
   --------------------------------------------------------------------------
   Vale só até 640px, o que cobre as duas orientações do alvo: 360x640 em pé e
   640x360 deitado. Acima disso (>= 641px) nada aqui se aplica e a sidebar
   continua sendo a coluna fixa de sempre — as regras de desktop no fim do
   arquivo seguem intocadas.

   O painel é `position: fixed` abaixo do cabeçalho (3.5rem), e não um bloco no
   fluxo: por isso ele passa por cima do conteúdo em vez de empurrá-lo para
   baixo, que é o comportamento antigo do collapse do Bootstrap.
   ========================================================================== */
@media (max-width: 640.98px) {
    .nav-backdrop[b-6iz8kiawpm] {
        position: fixed;
        inset: 3.5rem 0 0 0;
        z-index: 1040;
        background-color: rgba(22, 33, 31, 0.5);
        animation: nav-backdrop-entra-b-6iz8kiawpm var(--transicao-normal) both;
    }

    /* Sem a classe .collapse = menu aberto. O seletor precisa ser :not(.collapse)
       e não .nav-scrollable puro para que o painel só vire drawer quando aberto. */
    .nav-scrollable:not(.collapse)[b-6iz8kiawpm] {
        position: fixed;
        top: 3.5rem;
        left: 0;
        bottom: 0;
        z-index: 1050;
        width: min(80%, 288px);
        background-color: var(--cor-superficie);
        border-right: 1px solid var(--cor-borda);
        box-shadow: var(--sombra-lg);
        /* Em 640x360 (deitado) sobram ~304px de altura e a lista não cabe inteira;
           overscroll-behavior impede que a rolagem "vaze" para a página atrás. */
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: nav-drawer-entra-b-6iz8kiawpm var(--transicao-normal) both;
    }

    /* Fica acima do fundo escurecido e do painel. Quem ancora a barra no topo da
       tela é `.sidebar` (MainLayout.razor.css), para que o drawer — fixo em
       top: 3.5rem — nunca descole dela com a página rolada. */
    .top-row[b-6iz8kiawpm] {
        position: relative;
        z-index: 1060;
        border-bottom: 1px solid var(--cor-borda);
    }

    .navbar-toggler[b-6iz8kiawpm] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        color: var(--cor-texto-secundario);
    }
}

/* Paisagem curta (640x360): mantém o alvo de toque de 44px nos itens e só
   aperta os respiros das pontas, deixando a lista rolar dentro do painel. */
@media (max-width: 640.98px) and (max-height: 480px) {
    .nav-item:first-of-type[b-6iz8kiawpm] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-6iz8kiawpm] {
        padding-bottom: 0.5rem;
    }
}

@keyframes nav-drawer-entra-b-6iz8kiawpm {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: none;
    }
}

@keyframes nav-backdrop-entra-b-6iz8kiawpm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-backdrop[b-6iz8kiawpm],
    .nav-scrollable:not(.collapse)[b-6iz8kiawpm] {
        animation: none;
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-6iz8kiawpm] {
        display: none;
    }

    .collapse[b-6iz8kiawpm] {
        display: block;
    }

    /* Era `height: calc(100vh - 3.5rem)`, que só fechava a conta se a barra da
       marca acima medisse 3.5rem cravados — e ela mede mais (o min-height é um
       mínimo; o padding do .navbar somado ao logo de 32px passa disso). A sobra
       estourava a .sidebar de 100vh e punha rolagem em toda tela do app.
       Como item flexível dentro da .sidebar (que agora é flex column), a lista
       fica com o que restar da altura, qualquer que seja a da marca. O
       min-height: 0 é obrigatório: sem ele o mínimo automático do flex é o
       tamanho do conteúdo e o overflow-y nunca entra em ação. */
    .nav-scrollable[b-6iz8kiawpm] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* Resíduo possível ao girar/redimensionar de celular para desktop com o
       menu aberto: o backdrop continuaria no DOM, então é escondido aqui. */
    .nav-backdrop[b-6iz8kiawpm] {
        display: none;
    }
}

.navbar-brand[b-6iz8kiawpm] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 500;
}

.site-header__logo-icone[b-6iz8kiawpm] {
    flex-shrink: 0;
}

.logo-med[b-6iz8kiawpm] {
    color: var(--cor-primaria-900, #0c4a6e);
}

.logo-on[b-6iz8kiawpm] {
    color: var(--cor-primaria-500, #0ea5e9);
}
/* /Pages/Admin/Auditoria.razor.rz.scp.css */
/* Prefixo aud-. A folha nasceu só para a aba "Créditos" — as outras quatro eram tabela
   crua do Bootstrap. Com o redesenho da tela inteira ela cobre agora as cinco: abas,
   filtro de período, as tabelas de leitura, a linha do tempo da trilha e a aba de
   crédito (esta última sem mudança de anatomia: já nasceu neste padrão).

   As classes não são copiadas de Medicos.razor.css nem de Reembolsos.razor.css porque
   folha isolada tem escopo próprio: .med-* e .reem-* não alcançam esta página. O que é
   compartilhável de verdade (.badge, .banner-medon, .table, .cabecalho-pagina-fim-par)
   já vive no app.css global. */

/* ---------- Abas ----------
   Mesma gramática das abas de Administrar médicos (.med-aba): pastilha com ícone e 44px
   de alvo de toque. Antes eram .nav-tabs do Bootstrap — duas gramáticas de aba no mesmo
   painel de administração, e a única que o resto do app usa é esta. */
.aud-abas[b-2rf5giimaf] {
    display: flex;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-4);
}

.aud-aba[b-2rf5giimaf] {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    min-height: 44px;
    padding: var(--espaco-2) var(--espaco-4);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-completo);
    background-color: var(--cor-superficie);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
    cursor: pointer;
    transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}

.aud-aba:hover:not(.aud-aba--ativa)[b-2rf5giimaf] {
    border-color: var(--cor-neutro-300);
    color: var(--cor-texto);
}

.aud-aba--ativa[b-2rf5giimaf] {
    background-color: var(--cor-primaria-700);
    border-color: var(--cor-primaria-700);
    color: #fff;
}

/* ---------- Filtro ---------- */
.aud-filtro[b-2rf5giimaf] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding: var(--espaco-4) var(--espaco-5);
    margin-bottom: var(--espaco-4);
}

.aud-filtro-linha[b-2rf5giimaf] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* Empurra o que vem depois para a direita. flex: 1 1 0 e não margin-left: auto porque
   com flex-wrap o auto some junto com a linha quando ela quebra. */
.aud-filtro-espaco[b-2rf5giimaf] {
    flex: 1 1 0;
    min-width: 0;
}

.aud-rotulo--inline[b-2rf5giimaf] {
    white-space: nowrap;
}

.aud-presets[b-2rf5giimaf] {
    display: flex;
    gap: var(--espaco-1);
    flex-wrap: wrap;
}

/* 32px e não 44px: atalho ao lado de dois campos de data, e é o campo que manda — o
   preset só os preenche. Empilhado no celular ele cresce (ver o corte de 640px). */
.aud-preset[b-2rf5giimaf] {
    min-height: 32px;
    padding: var(--espaco-1) var(--espaco-3);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-completo);
    background-color: var(--cor-superficie);
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    cursor: pointer;
    transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}

.aud-preset:hover:not(.aud-preset--ativo)[b-2rf5giimaf] {
    border-color: var(--cor-neutro-300);
    color: var(--cor-texto);
}

/* Tinta clara e não o azul chapado das abas: aceso, o preset não é a ação da tela — a
   ação é o Filtrar ao lado. --cor-primaria-700 sobre --cor-primaria-100 mede 7,6:1. */
.aud-preset--ativo[b-2rf5giimaf] {
    background-color: var(--cor-primaria-100);
    border-color: var(--cor-primaria-100);
    font-weight: var(--peso-negrito);
    color: var(--cor-primaria-700);
}

.aud-datas[b-2rf5giimaf] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

.aud-data-rotulo[b-2rf5giimaf] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* Largura fixa: o seletor de data nativo pede espaço para dd/mm/aaaa e nada além. */
.aud-data[b-2rf5giimaf] {
    width: 9.5rem;
    flex-shrink: 0;
    font-size: var(--texto-xs);
    padding: var(--espaco-1) var(--espaco-2);
}

/* flex: 1 1 14rem e não 1 1 auto, mesmo caso do .aud-busca-linha: com auto a quebra do
   flex é decidida pela largura hipotética do campo, e o botão desceria sobrando espaço. */
.aud-campo[b-2rf5giimaf] {
    flex: 1 1 14rem;
    min-width: 0;
}

.aud-campo--codigo[b-2rf5giimaf] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    flex-basis: 24rem;
}

.aud-filtro-botao[b-2rf5giimaf] {
    flex-shrink: 0;
}

/* ---------- Tabelas de leitura ---------- */
.aud-tabela-card[b-2rf5giimaf] {
    overflow: hidden;
    margin-bottom: 0;
}

/* A tabela encosta na borda do card, então as células levam o recuo que o card teria. */
.aud-tabela[b-2rf5giimaf] {
    margin-bottom: 0;
}

.aud-tabela thead th[b-2rf5giimaf],
.aud-tabela td[b-2rf5giimaf] {
    padding-left: var(--espaco-4);
    padding-right: var(--espaco-4);
}

.aud-tabela thead th[b-2rf5giimaf] {
    white-space: nowrap;
}

/* Sem borda na primeira linha: o cabeçalho da tabela já tem a dele embaixo. */
.aud-tabela tbody tr:first-child td[b-2rf5giimaf] {
    border-top: 0;
}

/* tabular-nums porque a coluna de hora é varrida na vertical, e algarismo de largura
   variável faz os dois-pontos dançarem de linha em linha. */
.aud-hora[b-2rf5giimaf] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto-secundario);
}

/* Célula alinhada ao topo nas linhas que têm detalhe embaixo da ação (ações
   administrativas): centrada, a hora flutuava no meio de um bloco de três linhas. */
.aud-topo-celula[b-2rf5giimaf] {
    vertical-align: top;
}

/* Separador de dia. Numa trilha de 500 linhas quase todas repetem a mesma data: ela sai
   de dentro da linha e vira esta faixa, e o que fica na coluna é só a hora. */
.aud-dia td[b-2rf5giimaf] {
    padding-top: var(--espaco-2);
    padding-bottom: var(--espaco-2);
    background-color: var(--cor-fundo-secao);
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* O IP continua cru e sem tradução — é trilha de auditoria, e reescrever "::1" como
   "local" seria a tela editando a prova. Só perde peso visual: ele não disputa atenção
   com quem acessou o prontuário de quem. */
.aud-origem[b-2rf5giimaf] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aud-conta[b-2rf5giimaf] {
    overflow-wrap: anywhere;
}

/* Ausência de dado, e não dado fraco: em UsuarioNaoEncontrado não existe usuário para
   ligar, e o e-mail tentado não é gravado em lugar nenhum. Peso normal é o que diz
   isso — não uma cor fraca, que a --cor-neutro-300 já provou não passar em contraste. */
.aud-conta--ausente[b-2rf5giimaf] {
    font-weight: var(--peso-normal);
    color: var(--cor-texto-secundario);
}

.aud-motivo[b-2rf5giimaf] {
    font-size: var(--texto-xs);
    color: var(--cor-erro-600);
    overflow-wrap: anywhere;
}

/* Código cru (ação administrativa, evento de pagamento, Guid do alvo): monoespaçado
   porque é o que se copia e se procura no banco. */
.aud-codigo[b-2rf5giimaf] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

.aud-acao-linha[b-2rf5giimaf] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

/* ValorAnterior e ValorNovo são texto livre — podem ser uma frase inteira. Como coluna
   de tabela quebravam a linha; aqui ficam embaixo da ação, com a largura toda. */
.aud-mudanca[b-2rf5giimaf] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-top: var(--espaco-1);
    font-size: var(--texto-xs);
}

.aud-mudanca-rotulo[b-2rf5giimaf] {
    color: var(--cor-texto-secundario);
}

.aud-mudanca-de[b-2rf5giimaf],
.aud-mudanca-para[b-2rf5giimaf] {
    padding: 2px 6px;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.aud-mudanca-de[b-2rf5giimaf] {
    background-color: var(--cor-neutro-100);
    color: var(--cor-texto);
}

.aud-mudanca-para[b-2rf5giimaf] {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* ::deep porque o <svg> é renderizado pelo componente Icone e carrega o escopo DELE,
   não o desta página — classe passada por CssClass não é alcançada por seletor simples
   de folha isolada. Mesma armadilha documentada em CabecalhoPagina.razor. */
.aud-mudanca[b-2rf5giimaf]  .aud-mudanca-seta,
.aud-transicao[b-2rf5giimaf]  .aud-mudanca-seta {
    flex-shrink: 0;
    color: var(--cor-texto-secundario);
}

.aud-detalhe[b-2rf5giimaf] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

.aud-alvo-tipo[b-2rf5giimaf] {
    display: block;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Trilha de cobrança ----------
   Linha do tempo e não tabela: é a única lista desta tela em ordem crescente, porque é
   uma história — do checkout ao repasse. */
.aud-trilha[b-2rf5giimaf] {
    padding: var(--espaco-4) var(--espaco-5);
    margin-bottom: 0;
}

.aud-trilha-cabecalho[b-2rf5giimaf] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-4);
}

.aud-trilha-icone[b-2rf5giimaf] {
    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);
}

.aud-trilha-titulo[b-2rf5giimaf] {
    margin: 0;
}

.aud-evento[b-2rf5giimaf] {
    position: relative;
    display: flex;
    gap: var(--espaco-3);
    padding-bottom: var(--espaco-4);
}

/* O fio que liga os pontos, desenhado no próprio evento e não como borda do container:
   assim ele começa embaixo do ponto e termina no ponto seguinte. */
.aud-evento[b-2rf5giimaf]::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background-color: var(--cor-borda);
}

.aud-evento--ultimo[b-2rf5giimaf] {
    padding-bottom: 0;
}

.aud-evento--ultimo[b-2rf5giimaf]::before {
    display: none;
}

.aud-evento-ponto[b-2rf5giimaf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--raio-completo);
    /* Acima do fio: sem isto a linha atravessa o ponto. */
    position: relative;
    z-index: 1;
}

/* --cor-sucesso-texto e --cor-erro-600 sobre as tintas claras: o par 600/tinta clara do
   verde mede 3,9:1, abaixo do mínimo de 4,5:1. Mesma decisão já tomada nos badges. */
.aud-evento-ponto--ok[b-2rf5giimaf] {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-texto);
}

.aud-evento-ponto--erro[b-2rf5giimaf] {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
}

.aud-evento-corpo[b-2rf5giimaf] {
    flex: 1 1 0;
    min-width: 0;
}

.aud-evento-titulo-linha[b-2rf5giimaf] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

.aud-evento-titulo[b-2rf5giimaf] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.aud-evento-meta[b-2rf5giimaf] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-top: 2px;
}

.aud-evento-erro[b-2rf5giimaf] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-erro-600);
    overflow-wrap: anywhere;
}

/* Só aparece quando houve transição de verdade: na maioria dos eventos StatusAnterior e
   StatusNovo são nulos, e a tabela antiga mostrava duas colunas de "—". */
.aud-transicao[b-2rf5giimaf] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--espaco-1);
    font-size: var(--texto-xs);
}

.aud-transicao-de[b-2rf5giimaf] {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--cor-neutro-100);
    color: var(--cor-texto-secundario);
}

.aud-transicao-para[b-2rf5giimaf] {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--cor-primaria-100);
    font-weight: var(--peso-medio);
    color: var(--cor-primaria-700);
}

/* ---------- Busca de paciente (aba Créditos) ---------- */
.aud-busca[b-2rf5giimaf] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    padding: var(--espaco-4) var(--espaco-5);
    margin-bottom: var(--espaco-4);
}

.aud-busca-linha[b-2rf5giimaf] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

/* flex: 1 1 16rem e não 1 1 auto: com auto, a quebra de linha do flex é decidida pela
   largura hipotética do campo, e o botão desceria mesmo sobrando espaço (mesmo caso
   documentado em Paciente/Fila.razor.css). */
.aud-busca-linha .form-control[b-2rf5giimaf] {
    flex: 1 1 16rem;
    min-width: 0;
}

.aud-busca-linha .btn[b-2rf5giimaf] {
    flex-shrink: 0;
}

/* ---------- Card do paciente ---------- */
.aud-card[b-2rf5giimaf] {
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

.aud-topo[b-2rf5giimaf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) var(--espaco-3);
}

.aud-identidade[b-2rf5giimaf] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado (mesmo degrau do .cand-nome). */
.aud-nome[b-2rf5giimaf] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

.aud-meta[b-2rf5giimaf] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

.aud-rodape[b-2rf5giimaf] {
    border-top: 1px solid var(--cor-borda);
    padding: var(--espaco-3) var(--espaco-5);
}

/* ---------- Ação (conceder / retirar) ---------- */
.aud-acao[b-2rf5giimaf] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-4) var(--espaco-5);
}

.aud-acao--erro[b-2rf5giimaf] {
    background-color: var(--cor-erro-100);
}

/* Campo branco sobre a tinta vermelha da faixa: é o que marca onde escrever. */
.aud-acao--erro .form-control[b-2rf5giimaf] {
    background-color: #fff;
}

.aud-rotulo[b-2rf5giimaf] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.aud-rotulo--erro[b-2rf5giimaf] {
    color: var(--cor-erro-600);
}

.aud-ajuda[b-2rf5giimaf] {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.aud-ajuda--erro[b-2rf5giimaf] {
    color: var(--cor-erro-600);
}

.aud-erro[b-2rf5giimaf] {
    margin: 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* O que o clique vai provocar, antes de acontecer. --cor-aviso-texto e não
   --cor-aviso-600: sobre o creme do --cor-aviso-100 o 600 mede 2,9:1, abaixo até do
   mínimo de 3:1 de elemento gráfico. */
.aud-consequencia[b-2rf5giimaf] {
    margin: var(--espaco-2) 0 0;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-aviso-100);
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

/* Dentro da faixa vermelha, o fundo do bloco já é --cor-erro-100: repetir a mesma tinta
   não cria banda, só um recuo que parece desalinho (mesma correção feita em
   Reembolsos.razor.css). Aqui o aviso é texto separado por uma linha. */
.aud-consequencia--erro[b-2rf5giimaf] {
    padding: var(--espaco-3) 0 0;
    border-top: 1px solid var(--cor-borda);
    border-radius: 0;
    background-color: transparent;
    color: var(--cor-erro-600);
}

.aud-acoes[b-2rf5giimaf] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-top: var(--espaco-2);
}

/* Único vermelho chapado desta aba, como o .cand-btn-recusar: retirar crédito não se
   desfaz, e num crédito pago não devolve dinheiro. */
.aud-btn-perigo[b-2rf5giimaf] {
    background-color: var(--cor-erro-600);
    border-color: var(--cor-erro-600);
    color: #fff;
}

.aud-btn-perigo:hover[b-2rf5giimaf],
.aud-btn-perigo:focus[b-2rf5giimaf] {
    background-color: #a32020;
    border-color: #a32020;
    color: #fff;
}

/* ---------- Histórico ---------- */
.aud-historico[b-2rf5giimaf] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cor-borda);
}

.aud-historico-titulo[b-2rf5giimaf] {
    padding: var(--espaco-3) var(--espaco-5) var(--espaco-2);
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

/* flex-wrap com o motivo em flex-basis: 100%: a linha é uma linha, e o motivo (texto
   livre, pode ser longo) ganha a largura toda por baixo em vez de comprimir data,
   origem e valor. Mesmo desenho do .reem-linha. */
.aud-linha[b-2rf5giimaf] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    padding: var(--espaco-3) var(--espaco-5);
    border-top: 1px solid var(--cor-borda);
}

.aud-linha-data[b-2rf5giimaf] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

.aud-linha-origem[b-2rf5giimaf] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.aud-linha-valor[b-2rf5giimaf] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

.aud-linha-acao[b-2rf5giimaf] {
    flex-shrink: 0;
}

.aud-linha-motivo[b-2rf5giimaf] {
    flex-basis: 100%;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

/* ---------- Faixa do meio (tablet / janela estreita no desktop) ----------
   A sidebar de 260px come a largura antes do ponto de corte do celular: numa janela de
   768px sobram 508px de conteúdo. A coluna de origem é a primeira a sair — o IP é o dado
   menos consultado das duas tabelas que o têm, e é o único que a tela pode esconder sem
   perder o sentido da linha (ele continua na resposta e volta ao alargar a janela). */
@media (max-width: 1023.98px) {
    .aud-col-origem[b-2rf5giimaf] {
        display: none;
    }

    .aud-datas[b-2rf5giimaf] {
        /* Linha própria: ao lado dos presets, a 508px os dois campos de data empurravam
           o "Filtrar" para uma terceira linha. */
        flex-basis: 100%;
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .aud-filtro[b-2rf5giimaf] {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    /* Uma aba por linha inteira não caberia: cinco abas com ícone e rótulo longo
       ("Ações administrativas") viram cinco linhas. Duas por linha é o que 360px
       aceitam sem quebrar rótulo. */
    .aud-aba[b-2rf5giimaf] {
        flex: 1 1 42%;
        justify-content: center;
        padding-left: var(--espaco-2);
        padding-right: var(--espaco-2);
    }

    /* Alvo de toque de 44px também nos presets quando eles ganham a linha toda. */
    .aud-preset[b-2rf5giimaf] {
        flex: 1 1 0;
        min-height: 44px;
    }

    .aud-data[b-2rf5giimaf] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .aud-filtro-botao[b-2rf5giimaf] {
        flex: 1 1 100%;
    }

    .aud-tabela thead th[b-2rf5giimaf],
    .aud-tabela td[b-2rf5giimaf],
    .aud-dia td[b-2rf5giimaf] {
        padding-left: var(--espaco-3);
        padding-right: var(--espaco-3);
    }

    /* Abaixo daqui a tabela não cabe, e o overflow: hidden do card fazia a última
       coluna ficar CORTADA e fora de alcance — medido na réplica a 360px: a tabela de
       acesso a prontuário pede 418px dentro de um card de 328px, e a coluna Ação (que é
       o dado da trilha) sumia. Rolagem lateral no card é o preço certo aqui: esconder a
       coluna perderia o registro, e espremer as colunas dá uma palavra por linha.
       O eixo Y segue escondido para o raio de 20px do card continuar valendo. */
    .aud-tabela-card[b-2rf5giimaf] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .aud-trilha[b-2rf5giimaf] {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    /* O botão de trilha desce para linha própria: ao lado de data, origem, valor e
       status a 360px ele espremeria o resto até uma palavra por linha (mesmo caso
       medido em Reembolsos.razor.css). */
    .aud-linha-acao[b-2rf5giimaf] {
        flex-basis: 100%;
    }

    .aud-linha-acao .btn[b-2rf5giimaf] {
        width: 100%;
    }
    .aud-busca[b-2rf5giimaf],
    .aud-topo[b-2rf5giimaf],
    .aud-rodape[b-2rf5giimaf],
    .aud-acao[b-2rf5giimaf],
    .aud-historico-titulo[b-2rf5giimaf],
    .aud-linha[b-2rf5giimaf] {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    /* Botões de largura cheia: "Conceder crédito" e "Retirar crédito" não cabem em
       metade da largura de uma tela de 360px sem quebrar o rótulo em duas linhas, e são
       ações que não se desfazem. */
    .aud-acoes .btn[b-2rf5giimaf],
    .aud-busca-linha .btn[b-2rf5giimaf] {
        flex: 1 1 100%;
    }
}
/* /Pages/Admin/Candidaturas.razor.rz.scp.css */
/* Vazio de propósito. O conteúdo desta folha mudou de casa junto com a tela: as classes
   cand-* agora vivem em Medicos.razor.css, porque CSS isolado é casado por NOME com o
   componente, e a tela de candidaturas virou uma aba de Medicos.razor.

   O Candidaturas.razor que sobrou só redireciona a rota antiga e não tem marcação
   própria. Este arquivo pode ser apagado junto com ele. */
/* /Pages/Admin/Configuracao.razor.rz.scp.css */
/* Prefixo cfg-. Folha nova: a tela não tinha nenhuma — era .card > .card-body com
   .row/.col-md-4 do Bootstrap, e a única tela do admin que ainda usava a grade de 12
   colunas em vez de flex/grid como as outras.

   Um card só, desde que o segundo ("Textos legais e FAQ") saiu — ver o comentário no
   topo de Configuracao.razor para o motivo. Cabeçalho com pastilha de ícone é a mesma
   anatomia das seções de Reembolsos (.reem-decididos) e Repasses (.rep-feitos). */

.cfg-card[b-9pnraqux0f] {
    /* O corpo tem fundo próprio e encosta na borda inferior do card — sem overflow:
       hidden o fundo passaria por cima do raio de 20px. */
    overflow: hidden;
    margin-bottom: 0;
}

.cfg-cabecalho[b-9pnraqux0f] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-5);
}

.cfg-icone[b-9pnraqux0f] {
    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);
}

.cfg-titulo[b-9pnraqux0f] {
    margin: 0;
}

.cfg-corpo[b-9pnraqux0f] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-4) var(--espaco-5);
}

/* Grid de duas colunas e não .row/.col-md-4: são dois campos irmãos de mesmo peso, e o
   terceiro .col-md-4 daquela grade existia só para pendurar o botão — que agora vive na
   linha da ação, junto do texto que explica o que salvar provoca. */
.cfg-campos[b-9pnraqux0f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-4);
    /* Dois campos numéricos curtos não precisam da largura toda de 1100px: acima disto
       eles ficariam largos o suficiente para caber um CEP, o que engana sobre o que se
       espera ali. */
    max-width: 34rem;
}

.cfg-campo[b-9pnraqux0f] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    min-width: 0;
}

.cfg-rotulo[b-9pnraqux0f] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

/* ---------- A divisão do valor ----------
   Calculada ao digitar, antes de salvar: é a conta que o checkout faz, e a tela pedia
   dois números sem nunca mostrar quanto sobrava para cada lado. */
.cfg-divisao[b-9pnraqux0f] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
    border-radius: var(--raio-sm);
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    /* Mesmo teto dos campos: o bloco fica alinhado com eles e encosta no conteúdo. Com
       a largura toda de 1100px os três valores ficavam encolhidos num canto de uma
       caixa vazia (visto na réplica). */
    max-width: 34rem;
}

.cfg-divisao-titulo[b-9pnraqux0f] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cor-texto-secundario);
}

.cfg-divisao-linhas[b-9pnraqux0f] {
    display: flex;
    align-items: flex-end;
    gap: var(--espaco-4);
    flex-wrap: wrap;
}

.cfg-parcela[b-9pnraqux0f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cfg-parcela-rotulo[b-9pnraqux0f] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

/* --texto-lg é o teto da escala do app logado. tabular-nums porque os três valores
   ficam lado a lado e mudam a cada tecla digitada — com algarismo de largura variável
   eles pulariam de posição enquanto se digita. */
.cfg-parcela-valor[b-9pnraqux0f] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

/* O que o médico recebe em verde: é a única das três parcelas que é dinheiro saindo
   para outra pessoa, e é o número que o repasse vai pagar. --cor-sucesso-texto e não
   --cor-sucesso-600: sobre branco o 600 mede 3,9:1, abaixo do mínimo de 4,5:1. */
.cfg-parcela-valor--medico[b-9pnraqux0f] {
    color: var(--cor-sucesso-texto);
}

/* ::deep porque o <svg> é renderizado pelo componente Icone e carrega o escopo DELE,
   não o desta página — classe passada por CssClass não é alcançada por seletor simples
   de folha isolada. Mesma armadilha documentada em CabecalhoPagina.razor. */
.cfg-divisao-linhas[b-9pnraqux0f]  .cfg-divisao-seta {
    flex-shrink: 0;
    /* Alinha a seta com a linha dos VALORES, não com a do rótulo acima. */
    margin-bottom: 0.3rem;
    color: var(--cor-texto-secundario);
}

/* ---------- Ação ---------- */
.cfg-acao[b-9pnraqux0f] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex: 1 1 0 e não 1 1 auto: com auto a quebra de linha do flex é decidida pela
   largura hipotética do texto, e a frase iria sozinha para uma linha própria mesmo
   sobrando espaço. Mesmo caso documentado em Admin/Reembolsos.razor.css. */
.cfg-ajuda[b-9pnraqux0f] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.cfg-botao[b-9pnraqux0f] {
    flex-shrink: 0;
}

.cfg-erro[b-9pnraqux0f] {
    margin: 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .cfg-cabecalho[b-9pnraqux0f],
    .cfg-corpo[b-9pnraqux0f] {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    /* Um campo por linha: "Comissão da plataforma (%)" não cabe em metade de 328px sem
       quebrar o rótulo em duas linhas. */
    .cfg-campos[b-9pnraqux0f] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
    }

    /* A seta sai: empilhadas, as três parcelas não formam mais uma sequência da
       esquerda para a direita, e uma seta apontando para baixo do lado de um rótulo
       seria decoração. */
    .cfg-divisao-linhas[b-9pnraqux0f] {
        gap: var(--espaco-3);
    }

    .cfg-divisao-linhas[b-9pnraqux0f]  .cfg-divisao-seta {
        display: none;
    }

    .cfg-parcela[b-9pnraqux0f] {
        flex-basis: 100%;
    }

    .cfg-botao[b-9pnraqux0f] {
        flex: 1 1 100%;
    }
}
/* /Pages/Admin/Dashboard.razor.rz.scp.css */
/* Prefixo adm-. Primeira folha isolada desta tela: antes ela era só grid do Bootstrap
   com <p> dentro de .card-body, o que dava 16 números com exatamente o mesmo peso
   visual e nenhuma hierarquia.

   A faixa de pendências é passada no <Fim> do CabecalhoPagina, e o conteúdo de um
   RenderFragment carrega o escopo da PÁGINA que o passou (está documentado no
   CabecalhoPagina.razor) — por isso .adm-chip é alcançado daqui, sem ::deep. */

/* ---------- Rótulo de seção ----------
   --cor-texto-secundario e não --cor-neutro-500: em caixa alta de 0.8rem o 500 mede
   4,19:1 sobre o fundo da seção, abaixo do mínimo de 4,5:1 para texto normal. */
.adm-rotulo-secao[b-q53izi5a8u] {
    margin: 0 0 var(--espaco-3);
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cor-texto-secundario);
}

.adm-grade-2[b-q53izi5a8u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-4);
    margin-bottom: var(--espaco-6);
}

.adm-grade-3[b-q53izi5a8u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-4);
}

/* ---------- Pendências (chips do cabeçalho) ---------- */
.adm-chip[b-q53izi5a8u] {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-2) 0.875rem;
    border-radius: var(--raio-completo);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    white-space: nowrap;
    text-decoration: none;
}

/* O .top-row do layout dá margin-left: 1.5rem a todo <a>; aqui os chips são irmãos
   num flex com gap próprio, então a margem herdada abriria um vão duplo. */
a.adm-chip[b-q53izi5a8u] {
    margin-left: 0;
}

a.adm-chip:hover[b-q53izi5a8u] {
    text-decoration: none;
    filter: brightness(0.96);
}

.adm-chip--ok[b-q53izi5a8u] {
    background-color: var(--cor-sucesso-100);
    /* --cor-sucesso-texto e não --cor-sucesso-600: o 600 sobre o verde-claro mede
       3,9:1, abaixo de 4,5:1. Mesmo par que --cor-aviso-texto já resolve no creme. */
    color: var(--cor-sucesso-texto);
}

.adm-chip--aviso[b-q53izi5a8u] {
    background-color: var(--cor-aviso-100);
    color: var(--cor-aviso-texto);
}

.adm-chip--erro[b-q53izi5a8u] {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
}

.adm-chip--info[b-q53izi5a8u] {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* ---------- Agora (números ao vivo) ---------- */
.adm-agora[b-q53izi5a8u] {
    display: flex;
    /* flex-direction: row EXPLÍCITO — este elemento É o .card, e o .card do Bootstrap
       já vem com flex-direction: column; só "display: flex" não desfaz isso. Mesma
       armadilha de .pagpac-estado e .fil-estado. */
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5);
}

.adm-agora-icone[b-q53izi5a8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
}

.adm-agora-icone--neutro[b-q53izi5a8u] {
    background-color: var(--cor-neutro-100);
    color: var(--cor-neutro-500);
}

.adm-agora-icone--sucesso[b-q53izi5a8u] {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-600);
}

.adm-agora-icone--atencao[b-q53izi5a8u] {
    background-color: var(--cor-aviso-100);
    color: var(--cor-aviso-texto);
}

/* Presença: bolinha em vez de ícone. É o mesmo sinal de "ao vivo" que a espera da fila
   e o PIX já usam, e ele marca os DOIS cards de presença igual — eles medem a mesma
   coisa para plateias diferentes. Os outros dois cards de "Agora" medem outra coisa
   (tamanho da fila e aptidão cadastral), e por isso continuam com ícone. */
.adm-agora-icone--vivo[b-q53izi5a8u] {
    background-color: var(--cor-sucesso-100);
}

.adm-agora-bolinha[b-q53izi5a8u] {
    width: 8px;
    height: 8px;
    border-radius: var(--raio-completo);
    background-color: var(--cor-sucesso-600);
}

/* Na pastilha neutra (ninguém online) a bolinha acompanha, senão um verde vivo ao lado
   de um zero diria o contrário do número. */
.adm-agora-icone--neutro .adm-agora-bolinha[b-q53izi5a8u] {
    background-color: var(--cor-neutro-300);
}

/* A definição do número, onde ela é lida. "Online" sem dizer a janela é promessa vaga;
   o servidor conta quem deu sinal na janela do PresencaService (2 min). */
.adm-agora-nota[b-q53izi5a8u] {
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* flex-basis 0 e não auto: sem isso, num flex que pode quebrar linha o bloco de texto
   "pede" a largura da frase inteira e desce inteiro para baixo da pastilha. Mesma
   correção de .pagpac-estado-texto. */
.adm-agora-texto[b-q53izi5a8u] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

/* --texto-lg, o teto da escala no app logado. O .pag-kpi-valor do Pagamentos do
   médico já tinha litigado exatamente isto: "--texto-lg e não --texto-xl: com a escala
   de títulos achatada em --texto-sm, o valor a 1,4rem virou de longe a maior coisa da
   tela e desequilibrava o card. A 1,15rem ele continua sendo o elemento dominante, só
   que agora por pouco, que é o suficiente." Vale igual aqui.

   Figuras proporcionais (o padrão da fonte), não tabular-nums: em tamanho grande o
   tabular abre buracos entre os dígitos, e este número é solto, não uma coluna. O
   tabular fica nas linhas do acumulado, que alinham verticalmente. */
.adm-agora-valor[b-q53izi5a8u] {
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

/* A 1,15rem isto é texto NORMAL pela WCAG (mínimo 4,5:1), então a de-ênfase do zero é
   pelo peso e não por cinza fraco — --cor-neutro-500 mede 4,19:1 e reprovaria. */
.adm-agora-valor--zero[b-q53izi5a8u] {
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
}

.adm-agora-rotulo[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

/* ---------- Blocos do acumulado ---------- */
.adm-bloco[b-q53izi5a8u] {
    display: flex;
    flex-direction: column;
}

.adm-bloco-topo[b-q53izi5a8u] {
    padding: var(--espaco-4) var(--espaco-5) var(--espaco-3);
}

.adm-bloco-rotulo[b-q53izi5a8u] {
    margin: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

/* Mesmo degrau e mesmo raciocínio do .adm-agora-valor: --texto-lg é o teto da escala
   do app logado, e é o que o .pag-kpi-valor já usa para um valor de destaque em card.
   white-space: nowrap é a correção do bug visível no print antigo: com o card ocupando
   um quarto da largura, "R$ 119,76" quebrava entre o "R$" e o número. */
.adm-bloco-valor[b-q53izi5a8u] {
    margin: 2px 0 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    white-space: nowrap;
    color: var(--cor-texto);
}

.adm-linha[b-q53izi5a8u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    padding: var(--espaco-3) var(--espaco-5);
    border-top: 1px solid var(--cor-borda);
}

.adm-linha-rotulo[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.adm-linha-valor[b-q53izi5a8u] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

/* Um zero é CONTEÚDO, não decoração — então a de-ênfase aqui é pelo PESO da fonte e
   não por uma cor fraca. Cinza claro o bastante para "sumir" num texto de 1rem
   reprovaria contraste (--cor-neutro-300 mede 2:1 sobre branco). */
.adm-linha-valor--zero[b-q53izi5a8u] {
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
}

.adm-linha-taxa[b-q53izi5a8u] {
    font-weight: var(--peso-medio);
    color: var(--cor-sucesso-texto);
}

/* ---------- Cadastro (contexto, sem ação) ---------- */
.adm-cadastro[b-q53izi5a8u] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--espaco-3) var(--espaco-8);
    padding: var(--espaco-4) var(--espaco-5);
    margin-bottom: var(--espaco-6);
}

.adm-cadastro-par[b-q53izi5a8u] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
}

/* Bloco de contexto, sem ação: o valor não passa do tamanho de um valor de linha.
   --texto-xl aqui fazia "1 médico ativo" competir com a receita bruta. */
.adm-cadastro-valor[b-q53izi5a8u] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
}

.adm-cadastro-valor--zero[b-q53izi5a8u] {
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
}

.adm-cadastro-rotulo[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

/* ---------- Impedimentos ----------
   Uma linha por bloqueio: quem, quando, por quê. Grade e não flex para que as três
   colunas fiquem alinhadas entre linhas — é uma lista para varrer, e coluna que dança
   de linha em linha obriga a reler cada uma. */
.adm-imped[b-q53izi5a8u] {
    margin-bottom: var(--espaco-6);
}

.adm-imped-linha[b-q53izi5a8u] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--espaco-3) var(--espaco-4);
    align-items: baseline;
    padding: var(--espaco-3) var(--espaco-5);
}

.adm-imped-linha + .adm-imped-linha[b-q53izi5a8u] {
    border-top: 1px solid var(--cor-borda);
}

.adm-imped-medico[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
    min-width: 0;
}

/* tabular-nums porque são datas e horas empilhadas em coluna: os dígitos precisam
   alinhar de linha em linha. */
.adm-imped-quando[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
    white-space: nowrap;
}

.adm-imped-motivo[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
    min-width: 0;
    overflow-wrap: anywhere;
}

.adm-imped-vazio[b-q53izi5a8u] {
    margin: 0;
    padding: var(--espaco-4) var(--espaco-5);
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.adm-imped-nota[b-q53izi5a8u] {
    margin: 0;
    padding: var(--espaco-3) var(--espaco-5);
    border-top: 1px solid var(--cor-borda);
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Seções ---------- */
.adm-secao[b-q53izi5a8u] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    padding: var(--espaco-4);
    text-decoration: none;
    transition: box-shadow var(--transicao-rapida), transform var(--transicao-rapida);
}

.adm-secao:hover[b-q53izi5a8u] {
    text-decoration: none;
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
}

.adm-secao-icone[b-q53izi5a8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

.adm-secao-titulo[b-q53izi5a8u] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.adm-secao-apoio[b-q53izi5a8u] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Faixa do meio (tablet / janela estreita no desktop) ----------
   Aqui a sidebar de 260px já existe e come a largura: numa janela de 768px sobram
   508px de conteúdo, e duas colunas deixariam cada bloco com 222px — "Saldo devido a
   terceiros" quebraria em três linhas ao lado do valor. Então o acumulado e o "agora"
   passam a uma coluna antes do ponto de corte do celular, e as seções a duas. */
@media (max-width: 1023.98px) {
    .adm-grade-2[b-q53izi5a8u] {
        grid-template-columns: minmax(0, 1fr);
    }

    .adm-grade-3[b-q53izi5a8u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    /* Duas colunas a 360px deixariam cada card com ~140px — menos que o próprio
       número de 2.5rem precisa. Uma coluna, e o valor principal desce um degrau. */
    .adm-grade-2[b-q53izi5a8u],
    .adm-grade-3[b-q53izi5a8u] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
    }

    .adm-agora[b-q53izi5a8u],
    .adm-cadastro[b-q53izi5a8u] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    .adm-bloco-topo[b-q53izi5a8u] {
        padding: var(--espaco-3) var(--espaco-4) var(--espaco-2);
    }

    .adm-linha[b-q53izi5a8u] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    /* Três colunas a 360px dariam ~100px por coluna. Empilha, e o nome do médico fica
       em cima, que é a chave da linha. */
    .adm-imped-linha[b-q53izi5a8u] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: var(--espaco-3) var(--espaco-4);
    }

    .adm-imped-vazio[b-q53izi5a8u],
    .adm-imped-nota[b-q53izi5a8u] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    /* Os quatro pares empilham: lado a lado, a 360px, "pendentes de aprovação" já não
       cabe numa linha com o número. */
    .adm-cadastro[b-q53izi5a8u] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--espaco-2);
    }
}
/* /Pages/Admin/Lgpd.razor.rz.scp.css */
/* Prefixo lgpd-. Folha nova: a tela não tinha nenhuma — era um h1, um parágrafo
   .text-muted e uma <table> crua do Bootstrap.

   A anatomia é a mesma dos reembolsos (reem-) e das candidaturas (cand-): IDENTIDADE
   (de quem é o pedido), FATOS (o que existe por trás deste titular) e DECISÃO (o que
   você faz, e o que o clique provoca). São filas de decisão do admin, e repetir o
   desenho custa menos para aprender que inventar um novo.

   As classes não são copiadas de Reembolsos.razor.css porque folha isolada tem escopo
   próprio: .reem-* não alcança esta página. O que é compartilhável de verdade (.badge,
   .banner-medon, .cabecalho-pagina-fim-par) já vive no app.css global. */

/* ---------- Fila vazia ----------
   É o estado normal desta tela, e por isso ganhou desenho em vez da frase cinza solta
   que havia antes. Verde e não neutro: fila de pedido de titular vazia é boa notícia —
   significa que ninguém está esperando resposta. */
.lgpd-vazio[b-rj95srhy93] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--espaco-6) var(--espaco-5);
    margin-bottom: var(--espaco-4);
}

.lgpd-vazio-icone[b-rj95srhy93] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--raio-completo);
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-texto);
}

.lgpd-vazio-titulo[b-rj95srhy93] {
    margin: var(--espaco-3) 0 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.lgpd-vazio-texto[b-rj95srhy93] {
    max-width: 58ch;
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Card do pedido ---------- */
.lgpd-card[b-rj95srhy93] {
    /* Os blocos de decisão têm fundo próprio e encostam na borda inferior do card — sem
       overflow: hidden o fundo passaria por cima do raio. */
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

.lgpd-topo[b-rj95srhy93] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) 0;
}

.lgpd-identidade[b-rj95srhy93] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado (mesmo degrau do .reem-nome e do
   .cabecalho-pagina-titulo). O nome domina o card porque é a pessoa de quem se está
   falando — e é a identidade dela que o clique apaga. */
.lgpd-nome[b-rj95srhy93] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

.lgpd-espera[b-rj95srhy93] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

/* ---------- Fatos ---------- */
.lgpd-fatos[b-rj95srhy93] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5);
}

.lgpd-fato[b-rj95srhy93] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lgpd-fato-rotulo[b-rj95srhy93] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.lgpd-fato-valor[b-rj95srhy93] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

/* E-mail longo estoura a coluna do grid sem isto. */
.lgpd-fato-valor--quebra[b-rj95srhy93] {
    overflow-wrap: anywhere;
}

/* ---------- Decisão (as duas saídas) ---------- */
.lgpd-decisao[b-rj95srhy93] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-4) var(--espaco-5);
}

.lgpd-pergunta-linha[b-rj95srhy93] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex: 1 1 0 e não 1 1 auto: com auto a quebra de linha do flex é decidida pela
   largura hipotética do texto (o flex-basis), não pela largura já encolhida — e a frase
   iria sozinha para uma linha própria mesmo sobrando espaço. Mesmo caso documentado em
   Paciente/Fila.razor.css e Admin/Reembolsos.razor.css. */
.lgpd-pergunta[b-rj95srhy93] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.lgpd-acoes[b-rj95srhy93] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

.lgpd-rotulo[b-rj95srhy93] {
    display: block;
    margin-bottom: var(--espaco-3);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.lgpd-rotulo--erro[b-rj95srhy93] {
    color: var(--cor-erro-600);
}

.lgpd-ajuda[b-rj95srhy93] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.lgpd-ajuda--erro[b-rj95srhy93] {
    color: var(--cor-erro-600);
}

/* Ocupa o mesmo lugar da ajuda, então o card não muda de altura quando a validação
   falha — e fica a um palmo do campo, não numa faixa no topo da página. */
.lgpd-erro[b-rj95srhy93] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* ---------- Painel de confirmação ----------
   A tinta vermelha da faixa é o que separa este painel do resto do card: o que vai
   acontecer aqui não se desfaz. */
.lgpd-confirmacao[b-rj95srhy93] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-erro-100);
    padding: var(--espaco-4) var(--espaco-5);
}

/* Duas colunas lado a lado, e não uma lista só: "vai ser apagado" e "continua intacto"
   se leem em contraste — é a distinção central da LGPD nesta plataforma, e ler as duas
   de uma vez é o que faz a decisão ser informada. */
.lgpd-quadro[b-rj95srhy93] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-4);
}

.lgpd-coluna[b-rj95srhy93] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
    min-width: 0;
}

/* A coluna do que NÃO é tocado ganha fundo branco: lado a lado já se leem em contraste,
   mas no celular as duas empilham (ver o corte de 640px) e viravam uma lista só, metade
   vermelha e metade verde sobre a mesma tinta rosa — medido na réplica a 360px. O bloco
   branco diz "esta parte fica de fora" em qualquer largura, e sobe o contraste do verde
   de 4,7:1 para 7,6:1 de passagem. */
.lgpd-coluna--intacto[b-rj95srhy93] {
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-superficie);
}

.lgpd-coluna-titulo[b-rj95srhy93] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lgpd-coluna-titulo--erro[b-rj95srhy93] {
    color: var(--cor-erro-600);
}

/* --cor-sucesso-texto e não --cor-sucesso-600: sobre o rosa do --cor-erro-100 o 600
   mede 3,9:1, abaixo do mínimo de 4,5:1 para texto normal. Mesma decisão já tomada nos
   badges e na trilha da auditoria. */
.lgpd-coluna-titulo--ok[b-rj95srhy93] {
    color: var(--cor-sucesso-texto);
}

.lgpd-item[b-rj95srhy93] {
    font-size: var(--texto-xs);
    overflow-wrap: anywhere;
}

.lgpd-item--erro[b-rj95srhy93] {
    color: var(--cor-erro-600);
}

.lgpd-item--ok[b-rj95srhy93] {
    color: var(--cor-sucesso-texto);
}

.lgpd-confirmacao-acao[b-rj95srhy93] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    margin-top: var(--espaco-4);
    padding-top: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.lgpd-confirmacao-texto[b-rj95srhy93] {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--cor-erro-600);
}

/* ---------- Negativa ---------- */
.lgpd-negativa[b-rj95srhy93] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-erro-100);
    padding: var(--espaco-4) var(--espaco-5);
}

.lgpd-negativa-linha[b-rj95srhy93] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex-basis 320px: acima disso campo e botões dividem a linha; abaixo, os botões
   descem inteiros em vez de espremer o campo. */
.lgpd-negativa-campo[b-rj95srhy93] {
    flex: 1 1 320px;
    min-width: 0;
}

/* Sobre o fundo --cor-erro-100 da faixa, o campo branco é o que marca onde escrever. */
.lgpd-negativa .form-control[b-rj95srhy93] {
    background-color: #fff;
}

/* ---------- O que o clique vai provocar ----------
   --cor-aviso-texto e não --cor-aviso-600: sobre o creme do --cor-aviso-100 o 600 mede
   2,9:1, abaixo até do mínimo de 3:1 de elemento gráfico. */
.lgpd-consequencia[b-rj95srhy93] {
    margin: var(--espaco-3) 0 0;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-aviso-100);
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

/* Na faixa de negativa o fundo JÁ é --cor-erro-100: repetir a mesma tinta num bloco
   interno não cria banda nenhuma — só um recuo que parece desalinho (correção já feita
   em Reembolsos.razor.css e em Auditoria). Aqui o aviso é texto separado por uma linha. */
.lgpd-consequencia--erro[b-rj95srhy93] {
    padding: var(--espaco-3) 0 0;
    border-top: 1px solid var(--cor-borda);
    border-radius: 0;
    background-color: transparent;
    color: var(--cor-erro-600);
}

/* Vermelho chapado, como o .cand-btn-recusar e o .reem-btn-negar: é a ação que encerra
   o pedido de alguém com uma resposta que ele vai ler — ou, no outro painel, a que apaga
   a identidade de uma pessoa. O .btn-secondary ao lado é o caminho de volta. */
.lgpd-btn-perigo[b-rj95srhy93] {
    background-color: var(--cor-erro-600);
    border-color: var(--cor-erro-600);
    color: #fff;
}

.lgpd-btn-perigo:hover[b-rj95srhy93],
.lgpd-btn-perigo:focus[b-rj95srhy93] {
    background-color: #a32020;
    border-color: #a32020;
    color: #fff;
}

/* ---------- Histórico ----------
   Mesma anatomia do .reem-decididos e do .rep-feitos: cabeçalho com pastilha de ícone e
   linhas separadas por borda. É o único lugar de onde DetalhesResposta e DataConclusao
   são alcançáveis — eram gravados e nunca lidos por ninguém. */
.lgpd-historico[b-rj95srhy93] {
    overflow: hidden;
}

.lgpd-historico-cabecalho[b-rj95srhy93] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.lgpd-historico-icone[b-rj95srhy93] {
    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);
}

.lgpd-historico-titulo[b-rj95srhy93] {
    margin: 0;
}

/* flex-wrap com o detalhe em flex-basis: 100% embaixo: a linha é uma linha, e o
   DetalhesResposta (texto livre, pode ser uma frase inteira) ganha a largura toda por
   baixo dela em vez de comprimir nome, tipo e status. */
.lgpd-linha[b-rj95srhy93] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.lgpd-linha-nome[b-rj95srhy93] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

.lgpd-linha-data[b-rj95srhy93] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

.lgpd-linha-detalhe[b-rj95srhy93] {
    flex-basis: 100%;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

/* ---------- Faixa do meio (tablet / janela estreita no desktop) ----------
   A sidebar de 260px come a largura antes do ponto de corte do celular: numa janela de
   768px sobram 508px de conteúdo, e três colunas deixariam cada fato com 126px — menos
   do que um e-mail precisa. */
@media (max-width: 1023.98px) {
    .lgpd-fatos[b-rj95srhy93] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .lgpd-topo[b-rj95srhy93] {
        padding: var(--espaco-3) var(--espaco-4) 0;
    }

    .lgpd-fatos[b-rj95srhy93] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
        padding: var(--espaco-3) var(--espaco-4);
    }

    .lgpd-decisao[b-rj95srhy93],
    .lgpd-confirmacao[b-rj95srhy93],
    .lgpd-negativa[b-rj95srhy93] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    /* O quadro empilha: duas colunas de 148px não cabem "Conta desativada e sessões
       encerradas" sem quebrar em quatro linhas por item. */
    .lgpd-quadro[b-rj95srhy93] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
    }

    /* Um botão por linha, cada um com a largura toda — mesma decisão do .reem-acoes: a
       360px sobram 296px para dois botões, e "Processar exclusão" não cabe em 144px sem
       quebrar o rótulo, o que deixaria um botão mais alto ao lado de um mais baixo. São
       duas ações que não se desfazem; altura desigual num par assim é o tipo de
       desalinho que faz clicar no errado. */
    .lgpd-acoes[b-rj95srhy93] {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .lgpd-acoes .btn[b-rj95srhy93] {
        flex: 1 1 100%;
    }

    .lgpd-linha[b-rj95srhy93] {
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* Nome em linha própria: a 360px, dividindo a linha com tipo, status e data, um nome
       inteiro quebrava em três linhas ao lado de um bloco de uma (mesmo caso medido em
       Reembolsos.razor.css). */
    .lgpd-linha-nome[b-rj95srhy93] {
        flex-basis: 100%;
    }
}
/* /Pages/Admin/Medicos.razor.rz.scp.css */
/* Prefixo cand-. O card de candidatura tem três partes com papéis diferentes, e a
   separação entre elas é o ponto do redesenho: IDENTIDADE (quem é, para você varrer a
   fila), EVIDÊNCIA (o que sustenta a decisão) e DECISÃO (o que você faz). Antes eram
   sete <p> de mesmo peso dentro de um .card-body. */

.cand-card[b-2xl2yl268f] {
    /* overflow: hidden porque os blocos de decisão/bloqueio/recusa têm fundo próprio e
       encostam na borda inferior do card — sem isto o fundo passaria por cima do raio. */
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

/* ---------- Identidade ---------- */
.cand-topo[b-2xl2yl268f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) 0;
}

.cand-identidade[b-2xl2yl268f] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado (mesmo degrau do .pag-kpi-valor e do
   .cabecalho-pagina-titulo). O nome é o elemento dominante do card: é por ele que se
   varre a fila. Antes era um h2 .h5, que a escala global achata para --texto-sm — o
   mesmo tamanho do e-mail. */
.cand-nome[b-2xl2yl268f] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

.cand-especialidade[b-2xl2yl268f] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.cand-espera[b-2xl2yl268f] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

/* ---------- Evidência ---------- */
.cand-fatos[b-2xl2yl268f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5);
}

.cand-fato[b-2xl2yl268f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cand-fato-rotulo[b-2xl2yl268f] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.cand-fato-valor[b-2xl2yl268f] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

/* E-mail não tem espaço para quebrar: sem isto ele estoura a coluna do grid. */
.cand-fato-valor--quebra[b-2xl2yl268f] {
    overflow-wrap: anywhere;
}

.cand-fato-valor--ausente[b-2xl2yl268f] {
    font-weight: var(--peso-normal);
    color: var(--cor-texto-secundario);
}

/* Um botão por arquivo (currículo, documento 1, documento 2...). Envolve e não fica
   numa linha só: o candidato pode mandar quantos documentos quiser, e a coluna do grid
   tem largura de um terço do card.

   margin-top de 2px para casar com o gap do .cand-fato, que é o que separa rótulo de
   valor nos outros dois fatos. */
.cand-arquivos[b-2xl2yl268f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin-top: 2px;
}

/* ---------- Decisão ---------- */
.cand-decisao[b-2xl2yl268f] {
    border-top: 1px solid var(--cor-borda);
    background-color: #e3f6ea;
    padding: var(--espaco-4) var(--espaco-5);
}

.cand-rotulo[b-2xl2yl268f] {
    display: block;
    margin-bottom: var(--espaco-1);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.cand-rotulo--erro[b-2xl2yl268f] {
    color: var(--cor-erro-600);
}

.cand-decisao-linha[b-2xl2yl268f] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex-basis 320px: acima disso campo e botões dividem a linha; abaixo, os botões
   descem inteiros em vez de espremer o campo até caber uma palavra por linha. */
.cand-decisao-campo[b-2xl2yl268f] {
    flex: 1 1 320px;
    min-width: 0;
}

.cand-acoes[b-2xl2yl268f] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

.cand-ajuda[b-2xl2yl268f] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.cand-ajuda--erro[b-2xl2yl268f] {
    color: var(--cor-erro-600);
}

/* Ocupa o mesmo lugar da ajuda, então o card não muda de altura quando a validação
   falha — e fica a um palmo do campo, não numa faixa no topo da página. */
.cand-erro[b-2xl2yl268f] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* ---------- Bloqueio (substitui a decisão) ---------- */
.cand-bloqueio[b-2xl2yl268f] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-aviso-100);
    padding: var(--espaco-4) var(--espaco-5);
}

/* --cor-aviso-texto e não --cor-aviso-600: sobre o creme o 600 mede 2,9:1, abaixo até
   do mínimo de 3:1 de elemento gráfico. */
.cand-bloqueio-icone[b-2xl2yl268f] {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--cor-aviso-texto);
}

.cand-bloqueio-texto[b-2xl2yl268f] {
    flex: 1 1 0;
    min-width: 0;
}

.cand-bloqueio-titulo[b-2xl2yl268f] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-aviso-texto);
}

.cand-bloqueio-apoio[b-2xl2yl268f] {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

.cand-bloqueio-acao[b-2xl2yl268f] {
    flex-shrink: 0;
}

/* ---------- Recusa ---------- */
.cand-recusa[b-2xl2yl268f] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-erro-100);
    padding: var(--espaco-4) var(--espaco-5);
}

/* Único botão vermelho chapado do app, e de propósito: é a ação irreversível que
   manda e-mail para o candidato. O .btn-secondary ao lado é o caminho de volta. */
.cand-btn-recusar[b-2xl2yl268f] {
    background-color: var(--cor-erro-600);
    border-color: var(--cor-erro-600);
    color: #fff;
}

.cand-btn-recusar:hover[b-2xl2yl268f],
.cand-btn-recusar:focus[b-2xl2yl268f] {
    background-color: #a32020;
    border-color: #a32020;
    color: #fff;
}

/* ---------- Faixa do meio (tablet / janela estreita no desktop) ----------
   A sidebar de 260px come a largura antes do ponto de corte do celular: numa janela de
   768px sobram 508px de conteúdo, e três colunas deixavam cada fato com 126px — menos
   do que o e-mail precisa mesmo quebrando em qualquer caractere. */
@media (max-width: 1023.98px) {
    .cand-fatos[b-2xl2yl268f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .cand-topo[b-2xl2yl268f] {
        padding: var(--espaco-3) var(--espaco-4) 0;
    }

    /* Três colunas a 360px dariam ~100px por fato — menos que "ana.marques@..." pede
       mesmo quebrando em qualquer caractere. */
    .cand-fatos[b-2xl2yl268f] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
        padding: var(--espaco-3) var(--espaco-4);
    }

    .cand-decisao[b-2xl2yl268f],
    .cand-recusa[b-2xl2yl268f] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    /* O aviso de bloqueio empilha: ícone e título em cima, botão numa linha própria
       ocupando a largura, em vez de um botão de 90px espremido na direita. */
    .cand-bloqueio[b-2xl2yl268f] {
        flex-wrap: wrap;
        padding: var(--espaco-3) var(--espaco-4);
    }

    .cand-bloqueio-acao[b-2xl2yl268f] {
        flex-basis: 100%;
    }

    /* Botões de largura cheia: a 360px "Confirmar recusa" e "Cancelar" lado a lado
       ficam com alvo de toque menor que os 44px do padrão do projeto. */
    .cand-acoes[b-2xl2yl268f] {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .cand-acoes .btn[b-2xl2yl268f] {
        flex: 1 1 140px;
    }
}

/* ============================================================================
   Prefixo med- — a aba "Médicos ativos".

   Convive com o cand- acima porque as duas abas são a MESMA tela (esta folha é o CSS
   isolado de Medicos.razor, que atende /admin/medicos e /admin/candidaturas). O card
   do médico repete a anatomia do card de candidatura de propósito: identidade,
   evidência, ação num bloco com fundo próprio.
   ============================================================================ */

/* ---------- Pastilhas do cabeçalho ----------
   Não reusa .adm-chip: aquela vive em Dashboard.razor.css, e CSS isolado é por
   componente. O conteúdo passado em <Fim> carrega o escopo DESTA página, então a
   classe tem que estar aqui. */
.med-chip[b-2xl2yl268f] {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-1) var(--espaco-3);
    border-radius: var(--raio-completo);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    white-space: nowrap;
}

.med-chip--aviso[b-2xl2yl268f] { background-color: var(--cor-aviso-100); color: var(--cor-aviso-texto); }
.med-chip--info[b-2xl2yl268f] { background-color: var(--cor-neutro-100); color: var(--cor-texto-secundario); }
.med-chip--erro[b-2xl2yl268f] { background-color: var(--cor-erro-100); color: var(--cor-erro-600); }

/* ---------- Abas ----------
   Pastilhas, mesmo vocabulário do item ativo do menu lateral e do .consulta-aba da
   videochamada. O nav-tabs do Bootstrap traz azul de link e borda de outra paleta. */
.med-abas[b-2xl2yl268f] {
    display: flex;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-bottom: var(--espaco-4);
}

.med-aba[b-2xl2yl268f] {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-2);
    /* 44px de alvo de toque, o padrão do projeto: é o controle que troca metade da
       tela, e a 360px as duas pastilhas ficam lado a lado. */
    min-height: 44px;
    padding: var(--espaco-2) var(--espaco-4);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-completo);
    background-color: var(--cor-superficie);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
    cursor: pointer;
    transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}

.med-aba:hover:not(.med-aba--ativa)[b-2xl2yl268f] {
    border-color: var(--cor-neutro-300);
    color: var(--cor-texto);
}

.med-aba--ativa[b-2xl2yl268f] {
    background-color: var(--cor-primaria-700);
    border-color: var(--cor-primaria-700);
    color: #fff;
}

/* ---------- Busca ---------- */
.med-busca[b-2xl2yl268f] {
    padding: var(--espaco-4) var(--espaco-5);
    margin-bottom: var(--espaco-4);
}

.med-busca-linha[b-2xl2yl268f] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

/* flex-basis em rem e não auto: com auto a quebra do flex é decidida pela largura
   hipotética do campo, e o botão desceria sobrando espaço. */
.med-busca-linha .form-control[b-2xl2yl268f] {
    flex: 1 1 18rem;
    min-width: 0;
}

.med-busca-linha .btn[b-2xl2yl268f] {
    flex-shrink: 0;
}

/* ---------- Card do médico ---------- */
.med-card[b-2xl2yl268f] {
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

.med-topo[b-2xl2yl268f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) 0;
}

.med-identidade[b-2xl2yl268f] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado, mesmo degrau do .cand-nome. */
.med-nome[b-2xl2yl268f] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

/* Suspenso recua para o texto secundário — é o único lugar da tela onde a cor do nome
   muda, e serve para varrer a lista e achar quem está fora. */
.med-nome--suspenso[b-2xl2yl268f] {
    color: var(--cor-texto-secundario);
}

.med-especialidade[b-2xl2yl268f] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

/* ---------- Evidência ---------- */
.med-fatos[b-2xl2yl268f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5);
}

/* O card do suspenso tem dois fatos, e o segundo é texto livre (o motivo): uma coluna
   estreita para ele deixaria o motivo em cinco linhas ao lado de um vão vazio. */
.med-fatos--2[b-2xl2yl268f] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.med-fato[b-2xl2yl268f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.med-fato-rotulo[b-2xl2yl268f] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.med-fato-valor[b-2xl2yl268f] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.med-fato-valor--quebra[b-2xl2yl268f] {
    overflow-wrap: anywhere;
}

/* --cor-aviso-texto e não --cor-aviso-600: sobre branco o 600 (#b8860b) mede 3,4:1,
   abaixo do mínimo de 4,5:1 de texto normal. */
.med-fato-valor--alerta[b-2xl2yl268f] {
    color: var(--cor-aviso-texto);
}

/* ---------- Rodapé de ação ---------- */
.med-rodape[b-2xl2yl268f] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    border-top: 1px solid var(--cor-borda);
    background-color: #e3f6ea;
    padding: var(--espaco-4) var(--espaco-5);
}

/* flex: 1 1 0 e não 1 1 auto, pelo motivo já documentado em Paciente/Fila.razor.css:
   com auto a frase inteira desce para uma linha própria mesmo sobrando espaço. */
.med-rodape-texto[b-2xl2yl268f] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.med-acoes[b-2xl2yl268f] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ---------- Suspensão ---------- */
.med-suspensao[b-2xl2yl268f] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-erro-100);
    padding: var(--espaco-4) var(--espaco-5);
}

.med-suspensao .form-control[b-2xl2yl268f] {
    background-color: #fff;
}

.med-linha[b-2xl2yl268f] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex-basis 320px: acima disso campo e botões dividem a linha; abaixo, os botões
   descem inteiros em vez de espremer o campo. */
.med-campo[b-2xl2yl268f] {
    flex: 1 1 320px;
    min-width: 0;
}

.med-rotulo[b-2xl2yl268f] {
    display: block;
    margin-bottom: var(--espaco-1);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.med-rotulo--erro[b-2xl2yl268f] {
    color: var(--cor-erro-600);
}

.med-ajuda[b-2xl2yl268f] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.med-ajuda--erro[b-2xl2yl268f] {
    color: var(--cor-erro-600);
}

/* Ocupa o mesmo lugar da ajuda, então o card não muda de altura quando a validação
   falha. */
.med-erro[b-2xl2yl268f] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* O que o clique provoca. Sem tinta própria: o bloco já está sobre --cor-erro-100, e
   repetir a mesma cor num filho cria recuo sem banda (erro que já corrigi em
   Reembolsos.razor.css). Uma linha separa. */
.med-consequencia[b-2xl2yl268f] {
    margin-top: var(--espaco-4);
    padding-top: var(--espaco-3);
    border-top: 1px solid var(--cor-borda);
    font-size: var(--texto-xs);
    color: var(--cor-erro-600);
}

.med-consequencia p[b-2xl2yl268f] {
    margin: 0 0 var(--espaco-1);
}

.med-consequencia p:last-child[b-2xl2yl268f] {
    margin-bottom: 0;
}

.med-consequencia-titulo[b-2xl2yl268f] {
    font-weight: var(--peso-negrito);
}

.med-consequencia-alerta[b-2xl2yl268f] {
    margin-top: var(--espaco-2) !important;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: #fff;
}

/* Único vermelho chapado desta aba, como o .cand-btn-recusar: tira o acesso de alguém
   que hoje atende. */
.med-btn-perigo[b-2xl2yl268f] {
    background-color: var(--cor-erro-600);
    border-color: var(--cor-erro-600);
    color: #fff;
}

.med-btn-perigo:hover[b-2xl2yl268f],
.med-btn-perigo:focus[b-2xl2yl268f] {
    background-color: #a32020;
    border-color: #a32020;
    color: #fff;
}

/* ---------- Faixa do meio (tablet / janela estreita) ----------
   A sidebar de 260px come a largura antes do corte de celular: numa janela de 768px
   sobram 508px, e quatro colunas deixariam cada fato com 116px — menos do que o e-mail
   pede mesmo quebrando em qualquer caractere. */
@media (max-width: 1023.98px) {
    .med-fatos[b-2xl2yl268f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .med-fatos--2[b-2xl2yl268f] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .med-topo[b-2xl2yl268f] {
        padding: var(--espaco-3) var(--espaco-4) 0;
    }

    .med-fatos[b-2xl2yl268f],
    .med-fatos--2[b-2xl2yl268f] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
        padding: var(--espaco-3) var(--espaco-4);
    }

    .med-busca[b-2xl2yl268f],
    .med-rodape[b-2xl2yl268f],
    .med-suspensao[b-2xl2yl268f] {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    /* As duas pastilhas dividem a linha em vez de uma descer sozinha. */
    .med-aba[b-2xl2yl268f] {
        flex: 1 1 0;
        justify-content: center;
        padding-left: var(--espaco-2);
        padding-right: var(--espaco-2);
    }

    /* Botões de largura cheia: "Reenviar primeiro acesso" não cabe em metade de 360px,
       e suspender é ação que não se desfaz. */
    .med-acoes[b-2xl2yl268f],
    .med-busca-linha .btn[b-2xl2yl268f] {
        flex-basis: 100%;
    }

    .med-acoes .btn[b-2xl2yl268f] {
        flex: 1 1 100%;
    }
}
/* /Pages/Admin/Reembolsos.razor.rz.scp.css */
/* Prefixo reem-. A anatomia é a mesma das candidaturas (cand-) de propósito: são duas
   filas de decisão do admin, e repetir o desenho custa menos para aprender que inventar
   um segundo. IDENTIDADE (de quem é o pedido e quanto vale), EVIDÊNCIA (o que sustenta
   a decisão) e DECISÃO (o que você faz, e o que o clique provoca).

   Antes esta tela eram quatro <p> de mesmo peso dentro de um .card-body, sendo dois
   deles GUIDs — e uma única saída, "Sim, reembolso feito".

   As classes não são copiadas de Candidaturas.razor.css porque folha isolada tem escopo
   próprio: .cand-* não alcança esta página. O que é compartilhável de verdade (.badge,
   .banner-medon, .cabecalho-pagina-fim-par) já vive no app.css global. */

.reem-card[b-zl1m0khmcr] {
    /* Os blocos de decisão e de negativa têm fundo próprio e encostam na borda inferior
       do card — sem overflow: hidden o fundo passaria por cima do raio. */
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

/* ---------- Identidade ---------- */
.reem-topo[b-zl1m0khmcr] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) 0;
}

.reem-identidade[b-zl1m0khmcr] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado (mesmo degrau do .cand-nome e do
   .cabecalho-pagina-titulo). O nome domina o card porque é por ele que se varre a
   fila — antes o valor e o GUID tinham o mesmo peso dele. */
.reem-nome[b-zl1m0khmcr] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

.reem-espera[b-zl1m0khmcr] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

/* ---------- Evidência ---------- */
.reem-fatos[b-zl1m0khmcr] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5);
}

.reem-fato[b-zl1m0khmcr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.reem-fato-rotulo[b-zl1m0khmcr] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* O motivo é texto livre digitado pelo paciente: sem isto uma palavra longa estoura a
   coluna do grid. */
.reem-fato-valor[b-zl1m0khmcr] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

/* "Não informado" é ausência de dado, e peso normal é o que diz isso — não uma cor
   fraca, que a --cor-neutro-300 já provou não passar em contraste. */
.reem-fato-valor--ausente[b-zl1m0khmcr] {
    font-weight: var(--peso-normal);
    color: var(--cor-texto-secundario);
}

/* ---------- Decisão ---------- */
.reem-decisao[b-zl1m0khmcr] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-4) var(--espaco-5);
}

.reem-rotulo[b-zl1m0khmcr] {
    display: block;
    margin-bottom: var(--espaco-1);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.reem-rotulo--erro[b-zl1m0khmcr] {
    color: var(--cor-erro-600);
}

.reem-decisao-linha[b-zl1m0khmcr] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex-basis 320px: acima disso campo e botões dividem a linha; abaixo, os botões
   descem inteiros em vez de espremer o campo. */
.reem-decisao-campo[b-zl1m0khmcr] {
    flex: 1 1 320px;
    min-width: 0;
}

/* A pergunta e as duas saídas na mesma linha. align-items: center e não flex-start
   porque aqui não há campo nem texto de ajuda — é uma frase ao lado de dois botões. */
.reem-pergunta-linha[b-zl1m0khmcr] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex: 1 1 0 e não 1 1 auto: com auto a quebra de linha do flex é decidida pela
   largura hipotética do texto (o flex-basis), não pela largura já encolhida — e a
   frase iria sozinha para uma linha própria mesmo sobrando espaço. Mesmo caso já
   documentado em Paciente/Fila.razor.css e Paciente/Pagamentos.razor.css. */
.reem-pergunta[b-zl1m0khmcr] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.reem-acoes[b-zl1m0khmcr] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

.reem-ajuda[b-zl1m0khmcr] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.reem-ajuda--erro[b-zl1m0khmcr] {
    color: var(--cor-erro-600);
}

/* Ocupa o mesmo lugar da ajuda, então o card não muda de altura quando a validação
   falha — e fica a um palmo do campo, não numa faixa no topo da página. */
.reem-erro[b-zl1m0khmcr] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* ---------- O que o clique vai provocar ----------
   --cor-aviso-texto e não --cor-aviso-600: sobre o creme do --cor-aviso-100 o 600 mede
   2,9:1, abaixo até do mínimo de 3:1 de elemento gráfico. Mesma decisão do
   .cand-bloqueio. */
.reem-consequencia[b-zl1m0khmcr] {
    margin: var(--espaco-3) 0 0;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-aviso-100);
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

/* Na faixa de negativa o fundo JÁ é --cor-erro-100: repetir a mesma tinta num bloco
   interno não cria banda nenhuma — só um recuo de 12px que parece desalinho (visto na
   réplica). Aqui o aviso é texto separado por uma linha, sem tinta nem recuo. */
.reem-consequencia--erro[b-zl1m0khmcr] {
    padding: var(--espaco-3) 0 0;
    border-top: 1px solid var(--cor-borda);
    border-radius: 0;
    background-color: transparent;
    color: var(--cor-erro-600);
}

/* ---------- Negativa ---------- */
.reem-negativa[b-zl1m0khmcr] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-erro-100);
    padding: var(--espaco-4) var(--espaco-5);
}

/* Vermelho chapado, como o .cand-btn-recusar: é a ação que encerra o pedido de alguém
   com uma resposta que ele vai ler. O .btn-secondary ao lado é o caminho de volta. */
.reem-btn-negar[b-zl1m0khmcr] {
    background-color: var(--cor-erro-600);
    border-color: var(--cor-erro-600);
    color: #fff;
}

.reem-btn-negar:hover[b-zl1m0khmcr],
.reem-btn-negar:focus[b-zl1m0khmcr] {
    background-color: #a32020;
    border-color: #a32020;
    color: #fff;
}

/* Sobre o fundo --cor-erro-100 da faixa, o campo branco é o que marca onde escrever. */
.reem-negativa .form-control[b-zl1m0khmcr] {
    background-color: #fff;
}

/* ---------- Decididos recentemente ----------
   Mesma anatomia do .pagpac-historico: cabeçalho com pastilha de ícone e linhas
   separadas por borda. É o único lugar do app de onde o comprovante é alcançável. */
.reem-decididos[b-zl1m0khmcr] {
    overflow: hidden;
    margin-top: 20px;
}

.reem-decididos-cabecalho[b-zl1m0khmcr] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.reem-decididos-icone[b-zl1m0khmcr] {
    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);
}

.reem-decididos-titulo[b-zl1m0khmcr] {
    margin: 0;
}

.reem-decididos-erro[b-zl1m0khmcr] {
    margin: 0 var(--espaco-4) var(--espaco-3);
}

/* flex-wrap com o motivo em flex-basis: 100% embaixo: a linha é uma linha, e o motivo
   da negativa (texto livre, pode ser longo) ganha a largura toda por baixo dela em vez
   de comprimir nome, valor e status. */
.reem-linha[b-zl1m0khmcr] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.reem-linha-nome[b-zl1m0khmcr] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

.reem-linha-valor[b-zl1m0khmcr] {
    font-size: 12px;
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

.reem-linha-data[b-zl1m0khmcr] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

.reem-linha-acao[b-zl1m0khmcr] {
    flex-shrink: 0;
}

.reem-linha-motivo[b-zl1m0khmcr] {
    flex-basis: 100%;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

/* ---------- Faixa do meio (tablet / janela estreita no desktop) ----------
   A sidebar de 260px come a largura antes do ponto de corte do celular: numa janela de
   768px sobram 508px de conteúdo, e três colunas deixariam cada fato com 126px — menos
   do que "Cartão de crédito · pago em 20/08/2026" precisa. */
@media (max-width: 1023.98px) {
    .reem-fatos[b-zl1m0khmcr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .reem-topo[b-zl1m0khmcr] {
        padding: var(--espaco-3) var(--espaco-4) 0;
    }

    .reem-fatos[b-zl1m0khmcr] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
        padding: var(--espaco-3) var(--espaco-4);
    }

    .reem-decisao[b-zl1m0khmcr],
    .reem-negativa[b-zl1m0khmcr] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    /* Um botão por linha, cada um com a largura toda. Aqui não vale o `flex: 1 1 140px`
       das candidaturas: a 360px sobram 296px para dois botões, e "Registrar devolução"
       não cabe em 144px — ele quebrava em duas linhas e ficava com 53px de altura ao
       lado de um "Cancelar" de 40px (medido na réplica). São duas ações que não se
       desfazem; altura desigual num par de botões assim é o tipo de desalinho que faz
       clicar no errado. */
    .reem-acoes[b-zl1m0khmcr] {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .reem-acoes .btn[b-zl1m0khmcr] {
        flex: 1 1 100%;
    }

    .reem-linha[b-zl1m0khmcr] {
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* Nome numa linha só dele. A 360px, dividindo a linha com valor, status e data, um
       nome inteiro ("Marcos Vinícius de Almeida") quebrava em três linhas ao lado de um
       bloco de uma — medido na réplica. */
    .reem-linha-nome[b-zl1m0khmcr] {
        flex-basis: 100%;
    }

    /* O botão do comprovante desce para uma linha própria: ao lado do status a 360px
       ele espremeria o nome do paciente até uma palavra por linha. */
    .reem-linha-acao[b-zl1m0khmcr] {
        flex-basis: 100%;
    }

    .reem-linha-acao .btn[b-zl1m0khmcr] {
        width: 100%;
    }
}
/* /Pages/Admin/Repasses.razor.rz.scp.css */
/* Prefixo rep-. Mesma anatomia dos reembolsos (reem-) e das candidaturas (cand-), de
   propósito: são as filas de decisão do admin, e repetir o desenho custa menos para
   aprender que inventar um terceiro. IDENTIDADE (de quem é o saldo e quanto vale),
   CONTA ABERTA (de que o número é feito) e DECISÃO (o que você faz, e o que o clique
   provoca).

   Antes esta tela era uma <table> de três colunas — nome, valor, botão: você transferia
   um número sem saber de quantas consultas ele era feito, de que período, nem quanto
   daquilo era comissão da plataforma.

   As classes não são copiadas de Reembolsos.razor.css porque folha isolada tem escopo
   próprio: .reem-* não alcança esta página. O que é compartilhável de verdade (.badge,
   .banner-medon, .cabecalho-pagina-fim-par) já vive no app.css global. */

.rep-card[b-1dqkac9h27] {
    /* O bloco de decisão tem fundo próprio e encosta na borda inferior do card — sem
       overflow: hidden o fundo passaria por cima do raio. */
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

/* ---------- Identidade ---------- */
.rep-topo[b-1dqkac9h27] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) 0;
}

.rep-identidade[b-1dqkac9h27] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado (mesmo degrau do .reem-nome e do
   .cabecalho-pagina-titulo). O nome domina o card porque é por ele que se varre a
   fila. */
.rep-nome[b-1dqkac9h27] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

/* O líquido é o número que vai ser digitado no app do banco: é o único dado da tela que
   sobe um degrau na escala, para não se confundir com o bruto e a comissão logo abaixo.
   tabular-nums porque a coluna de valores é varrida na vertical. */
.rep-valor[b-1dqkac9h27] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- Conta aberta ---------- */
.rep-fatos[b-1dqkac9h27] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--espaco-4);
    padding: var(--espaco-4) var(--espaco-5);
}

.rep-fato[b-1dqkac9h27] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rep-fato-rotulo[b-1dqkac9h27] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.rep-fato-valor[b-1dqkac9h27] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

/* ---------- Decisão ---------- */
.rep-decisao[b-1dqkac9h27] {
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-4) var(--espaco-5);
}

.rep-rotulo[b-1dqkac9h27] {
    display: block;
    margin-bottom: var(--espaco-1);
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.rep-decisao-linha[b-1dqkac9h27] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex-basis 320px: acima disso campo e botões dividem a linha; abaixo, os botões
   descem inteiros em vez de espremer o campo. */
.rep-decisao-campo[b-1dqkac9h27] {
    flex: 1 1 320px;
    min-width: 0;
}

/* A frase e a ação na mesma linha. align-items: flex-start e não center porque a frase
   aqui tem duas linhas em boa parte das larguras — centrada, o botão flutuaria no meio
   dela. */
.rep-pergunta-linha[b-1dqkac9h27] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    flex-wrap: wrap;
}

/* flex: 1 1 0 e não 1 1 auto: com auto a quebra de linha do flex é decidida pela
   largura hipotética do texto (o flex-basis), não pela largura já encolhida — e a
   frase iria sozinha para uma linha própria mesmo sobrando espaço. Mesmo caso já
   documentado em Paciente/Fila.razor.css e Admin/Reembolsos.razor.css. */
.rep-pergunta[b-1dqkac9h27] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.rep-acoes[b-1dqkac9h27] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

.rep-ajuda[b-1dqkac9h27] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* Ocupa o mesmo lugar da ajuda, então o card não muda de altura quando a validação
   falha — e fica a um palmo do campo, não numa faixa no topo da página. */
.rep-erro[b-1dqkac9h27] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

/* ---------- O que o clique vai provocar ----------
   --cor-aviso-texto e não --cor-aviso-600: sobre o creme do --cor-aviso-100 o 600 mede
   2,9:1, abaixo até do mínimo de 3:1 de elemento gráfico. Mesma decisão do
   .reem-consequencia e do .cand-bloqueio. */
.rep-consequencia[b-1dqkac9h27] {
    margin: var(--espaco-3) 0 0;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-aviso-100);
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

/* ---------- Repasses feitos ----------
   Mesma anatomia do .reem-decididos e do .pagpac-historico: cabeçalho com pastilha de
   ícone e linhas separadas por borda. É o único lugar do app de onde o comprovante do
   repasse é alcançável — o arquivo era gravado em disco e nunca lido por ninguém. */
.rep-feitos[b-1dqkac9h27] {
    overflow: hidden;
}

.rep-feitos-cabecalho[b-1dqkac9h27] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.rep-feitos-icone[b-1dqkac9h27] {
    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);
}

.rep-feitos-titulo[b-1dqkac9h27] {
    margin: 0;
}

.rep-feitos-erro[b-1dqkac9h27] {
    margin: 0 var(--espaco-4) var(--espaco-3);
}

.rep-linha[b-1dqkac9h27] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.rep-linha-nome[b-1dqkac9h27] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow-wrap: anywhere;
}

.rep-linha-lote[b-1dqkac9h27] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

.rep-linha-valor[b-1dqkac9h27] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

.rep-linha-data[b-1dqkac9h27] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    white-space: nowrap;
}

.rep-linha-acao[b-1dqkac9h27] {
    flex-shrink: 0;
}

/* O bloco "confirmar pagamento simulado" saiu da tela (ver o comentário em
   Repasses.razor): com credencial do Mercado Pago configurada ele sempre falhava com
   "Assinatura inválida", porque quem responde por IPagamentoGatewayService passa a ser
   o MercadoPagoGatewayService e o VerificarAssinaturaWebhook dele é `false` por
   definição. As classes .rep-dev-* foram embora com ele. */

/* ---------- Faixa do meio (tablet / janela estreita no desktop) ----------
   A sidebar de 260px come a largura antes do ponto de corte do celular: numa janela de
   768px sobram 508px de conteúdo, e quatro colunas deixariam cada fato com 89px — menos
   do que "Comissão da plataforma" precisa. */
@media (max-width: 1023.98px) {
    .rep-fatos[b-1dqkac9h27] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* O nome desce para uma linha própria já AQUI, e não só no celular: lote, valor,
       data e o botão do comprovante são todos white-space: nowrap, então quem encolhe é
       só o nome — numa janela de 768px ("Marcos Vinícius de Almeida") ele virava quatro
       linhas de uma palavra ao lado de um bloco de uma linha só (medido na réplica). */
    .rep-linha-nome[b-1dqkac9h27] {
        flex-basis: 100%;
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .rep-topo[b-1dqkac9h27] {
        padding: var(--espaco-3) var(--espaco-4) 0;
    }

    .rep-fatos[b-1dqkac9h27] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espaco-3);
        padding: var(--espaco-3) var(--espaco-4);
    }

    .rep-decisao[b-1dqkac9h27] {
        padding: var(--espaco-3) var(--espaco-4);
    }

    /* Um botão por linha, cada um com a largura toda — mesma decisão do .reem-acoes: a
       360px sobram 296px para dois botões, e "Registrar repasse" não cabe em 144px sem
       quebrar em duas linhas, o que deixaria um botão de 53px ao lado de um de 40px. */
    .rep-acoes[b-1dqkac9h27] {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .rep-acoes .btn[b-1dqkac9h27] {
        flex: 1 1 100%;
    }

    .rep-linha[b-1dqkac9h27] {
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* Nome e lote em linhas próprias: a 360px, dividindo a linha com valor e data, um
       nome inteiro quebrava em três linhas ao lado de um bloco de uma. */
    .rep-linha-nome[b-1dqkac9h27],
    .rep-linha-lote[b-1dqkac9h27] {
        flex-basis: 100%;
    }

    .rep-linha-lote[b-1dqkac9h27] {
        white-space: normal;
    }

    /* O botão do comprovante desce para uma linha própria: ao lado do valor e da data a
       360px ele espremeria o resto até uma palavra por linha. */
    .rep-linha-acao[b-1dqkac9h27] {
        flex-basis: 100%;
    }

    .rep-linha-acao .btn[b-1dqkac9h27] {
        width: 100%;
    }
}
/* /Pages/Admin/Termos.razor.rz.scp.css */
/* Prefixo ter-. Um card por TIPO de termo (não por versão), porque a regra que a tela
   precisa tornar óbvia é "uma versão ativa por tipo": o card é o tipo, as linhas dentro
   dele são as versões disputando aquele lugar.

   Mesma anatomia dos outros cards do admin (cand-, reem-): identidade no topo, corpo
   com os fatos, e os blocos de ação com fundo próprio encostados na borda de baixo. */

.ter-card[b-2tc3naoiop] {
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

/* ---------- Identidade ---------- */
.ter-topo[b-2tc3naoiop] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-4);
    flex-wrap: wrap;
    padding: var(--espaco-4) var(--espaco-5) var(--espaco-3);
}

.ter-identidade[b-2tc3naoiop] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* --texto-lg é o teto da escala do app logado (mesmo degrau do .cand-nome e do
   .cabecalho-pagina-titulo). */
.ter-nome[b-2tc3naoiop] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

.ter-exigencia[b-2tc3naoiop] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Alerta de "sem versão ativa" ----------
   --cor-aviso-texto e não --cor-aviso-600: sobre o creme do --cor-aviso-100 o 600 mede
   2,9:1, abaixo até do mínimo de 3:1 de elemento gráfico. */
.ter-alerta[b-2tc3naoiop] {
    display: flex;
    align-items: flex-start;
    gap: var(--espaco-3);
    background-color: var(--cor-aviso-100);
    padding: var(--espaco-3) var(--espaco-5);
}

.ter-alerta-icone[b-2tc3naoiop] {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--cor-aviso-texto);
}

.ter-alerta-texto[b-2tc3naoiop] {
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

.ter-vazio[b-2tc3naoiop] {
    padding: 0 var(--espaco-5) var(--espaco-4);
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

/* ---------- Versões ---------- */
.ter-versoes[b-2tc3naoiop] {
    border-top: 1px solid var(--cor-borda);
}

/* Grid de três colunas e não flex: o rótulo da versão precisa de largura fixa para as
   linhas alinharem entre si, os metadados ocupam o vão e as ações ficam na direita.
   A terceira linha (nota / texto aberto) atravessa as três colunas. */
.ter-versao[b-2tc3naoiop] {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espaco-2) var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-5);
    border-bottom: 1px solid var(--cor-borda);
}

.ter-versao:last-child[b-2tc3naoiop] {
    border-bottom: 0;
}

/* A vigente ganha uma barra à esquerda em vez de fundo colorido: o card já tem dois
   blocos com fundo próprio (alerta e confirmação), e um terceiro tom aqui faria a
   lista competir com eles. */
.ter-versao--ativa[b-2tc3naoiop] {
    box-shadow: inset 3px 0 0 var(--cor-sucesso-600);
    background-color: var(--cor-fundo-secao);
}

.ter-versao-rotulo[b-2tc3naoiop] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    color: var(--cor-texto);
}

.ter-versao-meta[b-2tc3naoiop] {
    min-width: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.ter-versao-acoes[b-2tc3naoiop] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Atravessa as três colunas: é explicação da linha, não uma quarta coluna. */
.ter-versao-nota[b-2tc3naoiop],
.ter-texto[b-2tc3naoiop] {
    grid-column: 1 / -1;
}

.ter-versao-nota[b-2tc3naoiop] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* O termo é aceito como texto puro (a tela de consentimento não formata nada), então
   mostrar em <pre> é mostrar o que a pessoa vê de verdade. white-space: pre-wrap e não
   pre: parágrafo de termo jurídico vem numa linha só e estouraria o card.

   max-height + overflow porque um termo real tem páginas, e esta é uma tela de
   configuração — quem precisa ler inteiro rola dentro do bloco. */
.ter-texto[b-2tc3naoiop] {
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--espaco-3);
    border-radius: var(--raio-sm);
    background-color: var(--cor-neutro-50);
    border: 1px solid var(--cor-borda);
    font-family: inherit;
    font-size: var(--texto-xs);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--cor-texto);
}

/* ---------- Confirmações ---------- */
.ter-confirmacao[b-2tc3naoiop],
.ter-editor[b-2tc3naoiop] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    border-top: 1px solid var(--cor-borda);
    background-color: var(--cor-fundo-secao);
    padding: var(--espaco-4) var(--espaco-5);
}

/* Ativar troca o termo vigente de todo mundo; desativar tira a exigência. As duas são
   consequências grandes o bastante para o bloco mudar de tom. */
.ter-confirmacao[b-2tc3naoiop] {
    background-color: var(--cor-aviso-100);
}

.ter-confirmacao--erro[b-2tc3naoiop] {
    background-color: var(--cor-erro-100);
}

.ter-confirmacao-titulo[b-2tc3naoiop] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-aviso-texto);
}

.ter-confirmacao--erro .ter-confirmacao-titulo[b-2tc3naoiop] {
    color: var(--cor-erro-600);
}

.ter-confirmacao-texto[b-2tc3naoiop] {
    font-size: var(--texto-xs);
    color: var(--cor-aviso-texto);
}

.ter-confirmacao--erro .ter-confirmacao-texto[b-2tc3naoiop] {
    color: var(--cor-erro-600);
}

.ter-confirmacao-acoes[b-2tc3naoiop] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
}

/* Único vermelho chapado desta tela, como o .cand-btn-recusar: é a ação que remove uma
   exigência legal. */
.ter-btn-perigo[b-2tc3naoiop] {
    background-color: var(--cor-erro-600);
    border-color: var(--cor-erro-600);
    color: #fff;
}

.ter-btn-perigo:hover[b-2tc3naoiop],
.ter-btn-perigo:focus[b-2tc3naoiop] {
    background-color: #a32020;
    border-color: #a32020;
    color: #fff;
}

/* ---------- Editor ---------- */
.ter-editor-titulo[b-2tc3naoiop] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.ter-editor-linha[b-2tc3naoiop] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-1);
}

.ter-rotulo[b-2tc3naoiop] {
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

/* O número da versão é curto ("1.0", "2.0"): um campo de largura cheia para três
   caracteres sugere que se espera um texto. */
.ter-campo-versao[b-2tc3naoiop] {
    max-width: 10rem;
}

/* monospace no texto do termo: é o único campo do app onde o alinhamento de caracteres
   ajuda a conferir numeração de cláusula e recuo. */
.ter-campo-texto[b-2tc3naoiop] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--texto-xs);
    line-height: 1.6;
}

.ter-ajuda[b-2tc3naoiop],
.ter-editor-nota[b-2tc3naoiop] {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.ter-erro[b-2tc3naoiop] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-erro-600);
}

.ter-rodape[b-2tc3naoiop] {
    border-top: 1px solid var(--cor-borda);
    padding: var(--espaco-3) var(--espaco-5);
}

/* ---------- Faixa do meio (tablet / janela estreita) ----------
   A sidebar de 260px come a largura antes do corte de celular: numa janela de 768px
   sobram 508px, e os três botões de ação da linha da versão não caberiam ao lado dos
   metadados. */
@media (max-width: 1023.98px) {
    .ter-versao[b-2tc3naoiop] {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .ter-versao-acoes[b-2tc3naoiop] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .ter-topo[b-2tc3naoiop] {
        padding: var(--espaco-3) var(--espaco-4) var(--espaco-2);
    }

    .ter-alerta[b-2tc3naoiop],
    .ter-vazio[b-2tc3naoiop],
    .ter-confirmacao[b-2tc3naoiop],
    .ter-editor[b-2tc3naoiop],
    .ter-rodape[b-2tc3naoiop],
    .ter-versao[b-2tc3naoiop] {
        padding-left: var(--espaco-4);
        padding-right: var(--espaco-4);
    }

    /* Rótulo da versão sai da coluna fixa: a 360px 4rem de coluna reservada tiram um
       sexto da largura de quem precisa dela (os metadados). */
    .ter-versao[b-2tc3naoiop] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ter-versao-acoes .btn[b-2tc3naoiop] {
        flex: 1 1 8rem;
    }

    .ter-campo-versao[b-2tc3naoiop] {
        max-width: none;
    }
}
/* /Pages/Medico/AnexosPendentes.razor.rz.scp.css */
/* Colunas por estado do fechamento. Toda a marcação desta página vive no template
   (nada de RenderFragment no @code), então o CSS isolado alcança tudo aqui. */
.anx-colunas[b-wqd0ym3133] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-5);
}

@media (min-width: 992px) {
    .anx-colunas[b-wqd0ym3133] {
        flex-direction: row;
        align-items: stretch;
    }

    .anx-colunas .anx-coluna[b-wqd0ym3133] {
        flex: 1 1 0;
        min-width: 0;
    }
}

.anx-coluna[b-wqd0ym3133] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* O estado é dito uma vez, aqui — por isso a linha lá embaixo não precisa mais do
   badge que antes repetia o mesmo texto em todo item. */
/* O estado é dito uma vez, aqui — por isso a linha lá embaixo não precisa do badge
   que antes repetia o mesmo texto em todo item. O CORPO da lista (ação, tempo de
   espera) é azul independente da coluna; a cor do estado vive só nesta faixa. */
.anx-coluna-cabecalho[b-wqd0ym3133] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

/* Sem pastilha: o ícone toma a cor do próprio cabeçalho, por herança. */
.anx-coluna-icone[b-wqd0ym3133] {
    display: inline-flex;
    flex-shrink: 0;
}

.anx-coluna-titulo[b-wqd0ym3133] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
}

.anx-coluna-contador[b-wqd0ym3133] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    padding: 0 0.375rem;
    border-radius: var(--raio-completo);
    background-color: var(--cor-superficie);
    font-size: var(--texto-xs);
    font-weight: var(--peso-negrito);
}

/* Pares tom-claro/tom-forte, os mesmos dos badges de status. A cor nunca é a única
   portadora do estado: o nome dele está escrito ao lado, em todas as colunas. */
.anx-coluna-cabecalho--erro[b-wqd0ym3133] {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
}

.anx-coluna-cabecalho--aviso[b-wqd0ym3133] {
    /* --cor-aviso-texto e não --cor-aviso-600: sobre o creme o 600 fica em 2,9:1,
       abaixo do mínimo para o ícone. Este fecha 9:1 e ainda lê como âmbar. */
    background-color: var(--cor-aviso-100);
    color: var(--cor-aviso-texto);
}

.anx-coluna-cabecalho--sucesso[b-wqd0ym3133] {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-600);
}

.anx-coluna-cabecalho--primaria[b-wqd0ym3133] {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

.anx-item[b-wqd0ym3133] {
    display: block;
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
    color: inherit;
    text-decoration: none;
}

.anx-item:hover[b-wqd0ym3133] {
    background-color: var(--cor-fundo-secao);
    text-decoration: none;
    color: inherit;
}

.anx-item-nome[b-wqd0ym3133] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anx-item-data[b-wqd0ym3133] {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-neutro-500);
}

.anx-item-rodape[b-wqd0ym3133] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-2);
    margin-top: var(--espaco-2);
}

.anx-espera[b-wqd0ym3133] {
    font-size: var(--texto-xs);
    color: var(--cor-neutro-500);
}

/* Passado o limiar vira âmbar e ganha peso — mas o texto ("há 32 dias") já diz
   tudo sozinho; a cor só reforça. */
.anx-espera--antiga[b-wqd0ym3133] {
    color: var(--cor-aviso-600);
    font-weight: var(--peso-medio);
}

/* Botão só na aparência: a entrada inteira é o link, então isto é um <span> dentro
   do <a> (um <button> aninhado em <a> seria marcação inválida). */
.anx-acao[b-wqd0ym3133] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.875rem;
    padding: 0 0.625rem;
    flex-shrink: 0;
    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;
}

.anx-item:hover .anx-acao[b-wqd0ym3133] {
    background-color: var(--cor-primaria-100);
}

.anx-vazio[b-wqd0ym3133] {
    margin: 0;
    padding: var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
    text-align: center;
    font-size: var(--texto-xs);
    color: var(--cor-neutro-500);
}

.anx-confirmados[b-wqd0ym3133] {
    margin-bottom: var(--espaco-3);
}

/* Mesma anatomia do cabeçalho das colunas (ícone + título + contador), só que este
   é um <button>: por isso o reset de borda/fundo e a largura cheia, para a área
   clicável ser a faixa inteira e não só o texto. */
.anx-confirmados-alternar[b-wqd0ym3133] {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
    /* a cor vem do modificador --sucesso, como nas outras colunas vem da sua */
}

.anx-confirmados-seta[b-wqd0ym3133] {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform var(--transicao-rapida);
}

.anx-confirmados-alternar[aria-expanded="true"] .anx-confirmados-seta[b-wqd0ym3133] {
    transform: rotate(90deg);
}

/* A primeira linha da lista precisa do filete que a separa do cabeçalho; as demais
   já vêm com o de baixo de .lista-linha. */
.anx-confirmados-lista[b-wqd0ym3133] {
    border-top: 1px solid var(--cor-borda);
}

@media (prefers-reduced-motion: reduce) {
    .anx-confirmados-seta[b-wqd0ym3133] {
        transition: none;
    }
}

/* Celular (360x640 e 640x360): as colunas empilham e o nome do estado fica no
   cabeçalho de cada bloco, então nada se perde. */
@media (max-width: 640.98px) {
    .anx-item-rodape[b-wqd0ym3133] {
        flex-wrap: wrap;
    }

    .anx-acao[b-wqd0ym3133] {
        height: auto;
        min-height: 1.875rem;
        padding: 0.25rem 0.625rem;
        white-space: normal;
    }
}
/* /Pages/Medico/Disponibilidade.razor.rz.scp.css */
/* ---------- Layout de duas colunas ----------
   A partir de --breakpoint-lg (1024px) a leitura da agenda fica à esquerda e os
   formulários viram uma coluna lateral que acompanha a rolagem. Abaixo disso é
   uma coluna só, com os formulários no fim — que é também o formato que serve
   para 360x640 e 640x360. */
.agenda-colunas[b-zgjg5kdxgl] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
}

.agenda-principal[b-zgjg5kdxgl] {
    min-width: 0;
}

.agenda-lateral[b-zgjg5kdxgl] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-4);
}

@media (min-width: 1024px) {
    .agenda-colunas[b-zgjg5kdxgl] {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--espaco-5);
    }

    .agenda-principal[b-zgjg5kdxgl] {
        flex: 1 1 auto;
    }

    .agenda-lateral[b-zgjg5kdxgl] {
        flex: 0 0 288px;
        width: 288px;
        position: sticky;
        top: var(--espaco-4);
    }
}

/* ---------- Lista da semana e dos bloqueios ---------- */
.agenda-lista[b-zgjg5kdxgl] {
    display: flex;
    flex-direction: column;
}

/* Sete linhas de dia são o que decide a altura da página. Encolher a linha é o
   que tira a rolagem sem espremer a coluna lateral; o alvo de toque volta ao
   normal no celular, na regra do fim do arquivo. */
.agenda-linha[b-zgjg5kdxgl] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: 0.375rem 1rem;
    border-bottom: 1px solid var(--cor-borda);
    min-height: 2.5rem;
}

.agenda-linha:last-child[b-zgjg5kdxgl] {
    border-bottom: none;
}

.agenda-dia-nome[b-zgjg5kdxgl] {
    width: 5.5rem;
    flex-shrink: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.agenda-vazio[b-zgjg5kdxgl] {
    font-size: var(--texto-sm);
    color: var(--cor-neutro-500);
}

.agenda-chips[b-zgjg5kdxgl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* A faixa de horário virou pastilha com o remover embutido. Antes cada faixa
   trazia um botão "Remover" de borda vermelha, e com sete dias na tela eles eram
   o elemento mais chamativo da página inteira. */
.agenda-chip[b-zgjg5kdxgl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 1.75rem;
    padding: 0 0.3rem 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;
}

.agenda-chip-remover[b-zgjg5kdxgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--raio-completo);
    background-color: transparent;
    color: var(--cor-primaria-700);
    opacity: 0.6;
    cursor: pointer;
    transition: background-color var(--transicao-rapida), opacity var(--transicao-rapida), color var(--transicao-rapida);
}

.agenda-chip-remover:hover[b-zgjg5kdxgl] {
    background-color: var(--cor-erro-100);
    color: var(--cor-erro-600);
    opacity: 1;
}

.agenda-remover-icone[b-zgjg5kdxgl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    margin-left: auto;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    background-color: var(--cor-superficie);
    color: var(--cor-erro-600);
    cursor: pointer;
    transition: background-color var(--transicao-rapida);
}

.agenda-remover-icone:hover[b-zgjg5kdxgl] {
    background-color: var(--cor-erro-100);
}

/* Anel de foco igual ao dos .btn em app.css — estes não são .btn. */
.agenda-chip-remover:focus-visible[b-zgjg5kdxgl],
.agenda-remover-icone:focus-visible[b-zgjg5kdxgl] {
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--cor-superficie), 0 0 0 0.25rem var(--cor-foco);
}

.bloqueio-icone[b-zgjg5kdxgl] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--cor-neutro-500);
}

.bloqueio-texto[b-zgjg5kdxgl] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto);
}

.bloqueio-motivo[b-zgjg5kdxgl] {
    color: var(--cor-texto-secundario);
}

/* ---------- Formulários da coluna lateral ---------- */
/* Respiro entre o título da seção e o card, pedido junto com o item do scroll. */
.agenda-principal > .h4[b-zgjg5kdxgl] {
    margin-top: 0;
    margin-bottom: var(--espaco-3);
}

/* Espaço entre os cards menor que o mb-4 (1.5rem) do Bootstrap, e o último sem
   nada embaixo — juntos com a linha mais baixa, é o que fecha a conta da altura. */
.agenda-principal .card[b-zgjg5kdxgl] {
    margin-bottom: var(--espaco-4) !important;
}

.agenda-principal .card:last-child[b-zgjg5kdxgl],
.agenda-lateral .card:last-child[b-zgjg5kdxgl] {
    margin-bottom: 0 !important;
}

/* A coluna lateral encolheu para a página caber sem rolagem em 1080p: card mais
   justo, campos de 36px em vez de 40 e menos espaço entre eles. Os alvos de toque
   do celular não mudam — abaixo de 1024px a lateral vira uma coluna só e os campos
   voltam a 44px na regra do fim do arquivo. */
.agenda-form .card-body[b-zgjg5kdxgl] {
    padding: var(--espaco-3) var(--espaco-4);
}

.agenda-form .card-title[b-zgjg5kdxgl] {
    font-size: var(--texto-sm);
    margin-bottom: var(--espaco-2);
}

/* Campos empilhados, um por linha: a coluna tem 288px, e essa é também a forma
   que funciona no celular — some a linha de col-auto que estourava em 360px. */
.agenda-campos[b-zgjg5kdxgl] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
}

.agenda-campos .form-control[b-zgjg5kdxgl],
.agenda-campos .form-select[b-zgjg5kdxgl],
.agenda-campos .btn[b-zgjg5kdxgl] {
    width: 100%;
    height: 36px;
    min-height: 36px;
}

.agenda-campos .form-label[b-zgjg5kdxgl] {
    margin-bottom: 2px;
}

.bloqueio-checkbox[b-zgjg5kdxgl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
    cursor: pointer;
    margin-bottom: 0;
}

.bloqueio-checkbox input[b-zgjg5kdxgl] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    /* No celular os campos voltam ao alvo de toque confortável — o aperto acima
       existe só para a coluna lateral do desktop caber sem rolagem. */
    .agenda-campos .form-control[b-zgjg5kdxgl],
    .agenda-campos .form-select[b-zgjg5kdxgl],
    .agenda-campos .btn[b-zgjg5kdxgl] {
        height: 44px;
        min-height: 44px;
    }

    .agenda-campos[b-zgjg5kdxgl] {
        gap: var(--espaco-3);
    }

    .agenda-linha[b-zgjg5kdxgl] {
        padding: 0.625rem 0.875rem;
        min-height: 3rem;
    }

    /* A linha continua sem quebrar: quem quebra é .agenda-chips, por dentro. Com
       wrap na linha, um dia de dois horários jogava as pastilhas para baixo e
       deixava o nome do dia sozinho na primeira linha. */
    .agenda-dia-nome[b-zgjg5kdxgl] {
        width: 4.5rem;
        align-self: center;
    }
}
/* /Pages/Medico/EnviarAnexos.razor.rz.scp.css */
/* Bloco de confirmação — ação irreversível que vale para todos os tipos. */
.atendimento-confirmar[b-oytzniqxcn] {
    display: flex;
    align-items: center;
    gap: var(--espaco-4);
    padding: var(--espaco-4);
}

.atendimento-confirmar-texto[b-oytzniqxcn] {
    flex: 1 1 auto;
    min-width: 0;
}

.atendimento-confirmar-titulo[b-oytzniqxcn] {
    margin: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.atendimento-confirmar-resumo[b-oytzniqxcn] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto);
}

.atendimento-confirmar-aviso[b-oytzniqxcn] {
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    line-height: 1.45;
}

.atendimento-confirmar .btn[b-oytzniqxcn] {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Celular (360x640 e 640x360) */
@media (max-width: 640.98px) {
    .atendimento-confirmar[b-oytzniqxcn] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--espaco-3);
    }

    .atendimento-confirmar .btn[b-oytzniqxcn] {
        width: 100%;
    }

}
/* /Pages/Medico/Fila.razor.rz.scp.css */
.fila-ao-vivo[b-7ksn9vccdg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.fila-ao-vivo-bolinha[b-7ksn9vccdg] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2FAE7F;
    flex-shrink: 0;
}

.fila-stats[b-7ksn9vccdg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-4);
}

.fila-stat-card[b-7ksn9vccdg] {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--espaco-4);
}

.fila-stat-label[b-7ksn9vccdg] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.fila-stat-valor[b-7ksn9vccdg] {
    font-size: 28px;
    font-weight: var(--peso-negrito);
    color: var(--text-primary);
    margin-bottom: 0;
}

/* Este botão foi o modelo do padrão que agora vive em app.css (.btn) — sobrou aqui
   só o espaço que ele reserva abaixo de si, que é ritmo desta página, não do botão. */
.fila-atender[b-7ksn9vccdg] {
    margin-bottom: var(--espaco-5);
}

/* Faixa de título dentro do card, igual à do histórico de repasses em Pagamentos. */
.fila-na-fila-cabecalho[b-7ksn9vccdg] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.fila-na-fila-icone[b-7ksn9vccdg] {
    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);
}

.fila-na-fila-titulo[b-7ksn9vccdg] {
    margin: 0;
}

.fila-lista[b-7ksn9vccdg] {
    display: flex;
    flex-direction: column;
}

/* Dentro do card os itens deixam de ser cartões próprios (cartão dentro de cartão) e
   viram linhas separadas por filete, como o extrato de Pagamentos. */
.fila-item-card[b-7ksn9vccdg] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.fila-item-posicao[b-7ksn9vccdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--teal-50);
    color: var(--teal-700);
    font-weight: var(--peso-negrito);
    font-size: 13px;
    flex-shrink: 0;
}

.fila-item-posicao-primeiro[b-7ksn9vccdg] {
    background-color: var(--teal-700);
    color: #fff;
}

.fila-item-corpo[b-7ksn9vccdg] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fila-item-nome[b-7ksn9vccdg] {
    font-size: 13.5px;
    font-weight: var(--peso-medio);
    color: var(--text-primary);
}

.fila-item-meta[b-7ksn9vccdg] {
    font-size: 12px;
    color: var(--text-muted);
}

.fila-item-tag[b-7ksn9vccdg] {
    flex-shrink: 0;
    background-color: #FEF0E4;
    color: #9A5B1F;
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--peso-medio);
    padding: 3px 10px;
}
/* /Pages/Medico/Pagamentos.razor.rz.scp.css */
/* ---------- Faixa de indicadores ----------
   Ícone em pastilha com o tom claro da cor e o traço no tom forte — o mesmo par
   tom-claro/tom-forte que os badges de status já usam em app.css, para não
   inventar vocabulário novo. A cor tem significado: conquistado (troféu),
   entrou (seta subindo), vem aí (calendário). */
.pag-kpis[b-arfq4o8rga] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    margin-bottom: var(--espaco-5);
}

@media (min-width: 576px) {
    .pag-kpis[b-arfq4o8rga] {
        flex-direction: row;
        align-items: stretch;
    }

    .pag-kpis .pag-kpi[b-arfq4o8rga] {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Os três cards têm exatamente a mesma estrutura interna (ícone + rótulo + valor);
   é isso que mantém ícones e valores alinhados entre eles. */
.pag-kpi[b-arfq4o8rga] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--espaco-4);
}

.pag-kpi-topo[b-arfq4o8rga] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
}

/* Os três iguais: pastilha azul e traço azul. Quem diferencia os cards é o ícone em
   si (troféu, seta, calendário) e o rótulo — não a cor. */
.pag-kpi-icone[b-arfq4o8rga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

.pag-kpi-texto[b-arfq4o8rga] {
    min-width: 0;
}

.pag-kpi-rotulo[b-arfq4o8rga] {
    margin: 0 0 var(--espaco-1);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
}

/* --texto-lg e não --texto-xl: com a escala de títulos achatada em --texto-sm, o
   valor a 1,4rem virou de longe a maior coisa da tela e desequilibrava o card. A
   1,15rem ele continua sendo o elemento dominante — é o dado que a tela existe para
   mostrar —, só que agora por pouco, que é o suficiente.

   Figuras proporcionais (o padrão da fonte), não tabular-nums: em tamanho grande o
   tabular abre buracos entre os dígitos. O tabular fica para as colunas do extrato,
   que precisam alinhar verticalmente. */
.pag-kpi-valor[b-arfq4o8rga] {
    margin: 0;
    font-size: var(--texto-lg);
    font-weight: var(--peso-negrito);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--cor-texto);
}

/* ---------- Histórico de repasses ----------
   O título é uma faixa dentro do card, não um h2 solto acima dele. Mesmo tamanho de
   fonte dos outros títulos que vivem dentro de card (ver app.css). */
.pag-historico[b-arfq4o8rga] {
    overflow: hidden;
}

.pag-historico-cabecalho[b-arfq4o8rga] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

/* Mesma pastilha da faixa de indicadores, em escala menor porque a faixa do título
   é mais baixa que um card. O relógio continua sendo o ícone do histórico. */
.pag-historico-icone[b-arfq4o8rga] {
    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);
}

.pag-historico-titulo[b-arfq4o8rga] {
    margin: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

/* A primeira faixa de mês precisa do filete que a separa do cabeçalho. */
.pag-extrato > .pag-mes:first-child[b-arfq4o8rga] {
    border-top: 1px solid var(--cor-borda);
}

.pag-mes[b-arfq4o8rga] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espaco-3);
    padding: var(--espaco-2) var(--espaco-4);
    background-color: var(--cor-fundo-secao);
    border-bottom: 1px solid var(--cor-borda);
}

.pag-mes:not(:first-child)[b-arfq4o8rga] {
    border-top: 1px solid var(--cor-borda);
}

.pag-mes-nome[b-arfq4o8rga] {
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    color: var(--cor-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pag-mes-total[b-arfq4o8rga] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    font-variant-numeric: tabular-nums;
}

.pag-linha[b-arfq4o8rga] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-bottom: 1px solid var(--cor-borda);
}

.pag-linha:last-child[b-arfq4o8rga] {
    border-bottom: none;
}

.pag-linha-icone[b-arfq4o8rga] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--cor-neutro-500);
}

.pag-periodo[b-arfq4o8rga] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

.pag-valor[b-arfq4o8rga] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .pag-linha[b-arfq4o8rga] {
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* O ícone da linha é redundante com a data ao lado — a 360px ele só rouba
       largura de quem precisa (o período e o valor). */
    .pag-linha-icone[b-arfq4o8rga] {
        display: none;
    }

    .pag-periodo[b-arfq4o8rga] {
        font-size: var(--texto-xs);
    }

    .pag-valor[b-arfq4o8rga] {
        font-size: var(--texto-sm);
    }
}
/* /Pages/Notificacoes/Minhas.razor.rz.scp.css */
.notificacoes-preferencias[b-kkc22b2aco] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-completo, 999px);
    color: var(--cor-texto-secundario);
    flex-shrink: 0;
}

.notificacoes-preferencias:hover[b-kkc22b2aco], .notificacoes-preferencias:focus[b-kkc22b2aco] {
    background-color: var(--cor-fundo-secao);
    color: var(--cor-primaria-700);
}
/* /Pages/Paciente/AnexosAtendimentos.razor.rz.scp.css */
/* Toda a marcação desta página vive no template, então o CSS isolado alcança tudo.

   .atd-lista é o próprio .card e fica na direção COLUNA, que é o que o .card do
   Bootstrap já faz — por isso aqui não precisa de flex-direction explícito. Quem
   precisa dele é card que vira linha (ver .pagpac-estado e .cabecalho-pagina). */
.atd-lista[b-vcpxle6pzq] {
    overflow: hidden;
}

/* ---------- Faixa de título dentro do card ----------
   Mesma anatomia do "Histórico de repasses" em Pagamentos. */
.atd-cabecalho[b-vcpxle6pzq] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.atd-cabecalho-icone[b-vcpxle6pzq] {
    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);
}

.atd-cabecalho-titulo[b-vcpxle6pzq] {
    margin: 0;
}

/* ---------- Item ----------
   A linha inteira é o link; por isso a "ação" à direita é um <span> com cara de
   botão e não um <button> (button dentro de <a> é marcação inválida). */
.atd-item[b-vcpxle6pzq] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
    color: inherit;
    text-decoration: none;
}

.atd-item:hover[b-vcpxle6pzq] {
    background-color: var(--cor-fundo-secao);
    color: inherit;
    text-decoration: none;
}

.atd-item-icone[b-vcpxle6pzq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--raio-sm);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

.atd-item-corpo[b-vcpxle6pzq] {
    flex: 1 1 auto;
    min-width: 0;
}

/* O dado que diferencia uma linha da outra é este — daí o negrito e a cor cheia. */
.atd-item-quando[b-vcpxle6pzq] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.atd-item-medico[b-vcpxle6pzq] {
    display: block;
    margin-top: 1px;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atd-item-acao[b-vcpxle6pzq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.875rem;
    padding: 0 0.75rem;
    flex-shrink: 0;
    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;
}

.atd-item:hover .atd-item-acao[b-vcpxle6pzq] {
    background-color: var(--cor-primaria-100);
    border-color: var(--cor-primaria-100);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .atd-item[b-vcpxle6pzq] {
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* O calendário é redundante com a data ao lado, que agora é o título da linha —
       a 360px ele só rouba largura de quem precisa. */
    .atd-item-icone[b-vcpxle6pzq] {
        display: none;
    }

    /* Só a seta: "Ver anexos" por extenso não cabe ao lado da data por extenso, e a
       linha inteira já é clicável — o rótulo era reforço, não a única porta.
       display: none no texto e não font-size: 0 no botão: o leitor de tela pula o
       que está com display: none, e aqui é isso mesmo que se quer (o destino já é
       anunciado pelo link que envolve a linha toda). */
    .atd-item-acao[b-vcpxle6pzq] {
        width: 1.875rem;
        padding: 0;
        justify-content: center;
        gap: 0;
    }

    .atd-item-acao-texto[b-vcpxle6pzq] {
        display: none;
    }
}
/* /Pages/Paciente/Avaliacao.razor.rz.scp.css */
/* Toda a marcação desta página vive no template, então o CSS isolado alcança tudo —
   exceto o <svg> das estrelas, que vem do componente Icone e por isso precisa de
   ::deep (ver mais abaixo). */

.aval-coluna[b-jesnnakgp1] {
    max-width: 480px;
}

.aval-card[b-jesnnakgp1] {
    padding: var(--espaco-5);
}

.aval-estrelas[b-jesnnakgp1] {
    display: flex;
    gap: var(--espaco-2);
}

/* Botão de verdade (foco de teclado, papel de radio, área de toque), sem cara de
   botão: o reset tira borda, fundo e padding do Bootstrap. */
.aval-estrela[b-jesnnakgp1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    color: var(--cor-neutro-300);
}

.aval-estrela:focus-visible[b-jesnnakgp1] {
    outline: 2px solid var(--cor-foco);
    outline-offset: 3px;
    border-radius: var(--raio-sm);
}

/* Acesa = traço E preenchimento no dourado. --cor-aviso-600 mede ~4,4:1 sobre o
   branco, acima do mínimo de 3:1 para elemento gráfico — e a cor nunca fica sozinha:
   a palavra ("Boa", "Excelente") diz a mesma coisa logo abaixo. */
.aval-estrela--acesa[b-jesnnakgp1] {
    color: var(--cor-aviso-600);
}

/* ::deep obrigatório: o <svg> é gerado dentro do componente Icone e carrega o escopo
   DELE, não o desta página. O Icone escreve fill="none" no elemento; atributo de
   apresentação perde para CSS, então esta regra vence e preenche a estrela. */
.aval-estrela--acesa[b-jesnnakgp1]  svg {
    fill: currentColor;
}

/* min-height reserva a linha desde o começo: sem isso o card cresce quando a nota
   aparece e empurra o botão para debaixo do dedo no celular. */
.aval-rotulo[b-jesnnakgp1] {
    min-height: 1.5rem;
    margin: var(--espaco-3) 0 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.aval-rotulo--escolhido[b-jesnnakgp1] {
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.aval-campo[b-jesnnakgp1] {
    margin-top: var(--espaco-4);
}

.aval-rodape[b-jesnnakgp1] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    margin-top: var(--espaco-4);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .aval-card[b-jesnnakgp1] {
        padding: var(--espaco-4);
    }

    /* Estrela é alvo de toque: o espaço entre elas cresce para não errar a vizinha. */
    .aval-estrelas[b-jesnnakgp1] {
        gap: var(--espaco-3);
    }
}
/* /Pages/Paciente/EnviarAnexos.razor.rz.scp.css */
/* Toda a marcação desta página vive no template, então o CSS isolado alcança tudo. */

/* ---------- Faixa de avaliação pendente ----------
   É o próprio .card e vira LINHA — daí o flex-direction: row explícito. O .card do
   Bootstrap já vem com flex-direction: column, e só "display: flex" não desfaz isso;
   sem esta linha o align-items: center centralizaria tudo na horizontal. */
.anx-avaliar[b-h9wdj1m920] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    margin-bottom: var(--espaco-4);
}

.anx-avaliar-icone[b-h9wdj1m920] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--raio-sm);
    /* --cor-aviso-texto e não --cor-aviso-600: sobre o creme 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);
}

.anx-avaliar-texto[b-h9wdj1m920] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

/* ---------- Cabeçalho de seção dentro do card ----------
   Mesma anatomia do "Histórico de repasses" em Pagamentos. */
.anx-envio[b-h9wdj1m920],
.anx-lista[b-h9wdj1m920] {
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

.anx-secao-cabecalho[b-h9wdj1m920] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.anx-secao-icone[b-h9wdj1m920] {
    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);
}

.anx-secao-titulo[b-h9wdj1m920] {
    margin: 0;
}

/* ---------- Envio ---------- */
.anx-envio-corpo[b-h9wdj1m920] {
    padding: 0 var(--espaco-4) var(--espaco-4);
}

.anx-tipo-rotulo[b-h9wdj1m920] {
    display: block;
    margin-bottom: var(--espaco-2);
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.anx-tipos[b-h9wdj1m920] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    margin-bottom: var(--espaco-3);
}

/* Pastilha selecionável no lugar do <select>. aria-pressed no botão carrega o estado
   para o leitor de tela; a cor sozinha nunca diz qual está escolhido. */
.anx-tipo[b-h9wdj1m920] {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-completo);
    background-color: var(--cor-superficie);
    color: var(--cor-texto-secundario);
    font-size: var(--texto-xs);
    font-weight: var(--peso-medio);
    cursor: pointer;
}

.anx-tipo:hover[b-h9wdj1m920] {
    background-color: var(--cor-fundo-secao);
}

.anx-tipo--ativo[b-h9wdj1m920] {
    background-color: var(--cor-primaria-100);
    border-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* ---------- Item da lista ---------- */
.anx-item[b-h9wdj1m920] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.anx-item-icone[b-h9wdj1m920] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--raio-sm);
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* Verde para o que veio do médico — mesma leitura do badge ao lado, que continua
   dizendo a origem por escrito. */
.anx-item-icone--medico[b-h9wdj1m920] {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-600);
}

.anx-item-corpo[b-h9wdj1m920] {
    flex: 1 1 auto;
    min-width: 0;
}

.anx-item-nome[b-h9wdj1m920] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anx-item-meta[b-h9wdj1m920] {
    display: block;
    margin-top: 1px;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.anx-item-acoes[b-h9wdj1m920] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .anx-avaliar[b-h9wdj1m920] {
        flex-wrap: wrap;
        padding: var(--espaco-3);
    }

    /* O botão não cabe ao lado da frase a 360px: desce para a linha de baixo. */
    .anx-avaliar .btn[b-h9wdj1m920] {
        flex-basis: 100%;
    }

    .anx-envio-corpo[b-h9wdj1m920] {
        padding: 0 var(--espaco-3) var(--espaco-3);
    }

    /* O nome do arquivo e as duas ações não convivem numa linha só: as ações descem,
       e o badge de origem sai (o quadradinho verde do ícone já diferencia, e o texto
       do tipo continua na linha de apoio). */
    .anx-item[b-h9wdj1m920] {
        flex-wrap: wrap;
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* ::deep obrigatório: o <span class="badge"> é gerado dentro do componente
       BadgeStatus e carrega o escopo DELE, não o desta página — sem ::deep a regra
       vira .anx-item .badge[b-desta-pagina] e não casa com nada. */
    .anx-item[b-h9wdj1m920]  .badge {
        display: none;
    }

    .anx-item-acoes[b-h9wdj1m920] {
        flex-basis: 100%;
    }
}
/* /Pages/Paciente/Fila.razor.rz.scp.css */
/* Toda a marcação desta página vive no template, então o CSS isolado alcança tudo. */

/* Tela de tarefa única: nada aqui se compara lado a lado, e campo de formulário
   esticado até os 1100px do .content é desconfortável de ler. */
.fil-coluna[b-q1ga5n7dv8] {
    max-width: 520px;
}

/* A margem inferior do ÚLTIMO card é sempre espaço morto: embaixo dele já vem o
   padding-bottom do .content. Medido: com ela, a tela dá 769px e não cabe numa janela
   de 768 por 1px — literalmente 1px de barra de rolagem por causa de uma margem que
   não separa nada de nada. */
.fil-coluna > :last-child[b-q1ga5n7dv8] {
    margin-bottom: 0;
}

/* ---------- Faixa de estado ----------
   Prima da faixa do Pagamento do paciente, mas com uma diferença que importa: lá o
   card ocupa a largura toda do .content e texto e botões cabem lado a lado; aqui a
   página inteira vive numa coluna de 520px. Com dois botões ao lado, sobravam ~170px
   para o texto — título quebrando em duas linhas, apoio em três, e os botões
   centralizados verticalmente contra esse bloco alto. Era isso que lia como torto.

   Então nesta página a faixa SEMPRE empilha: pastilha + texto na primeira linha, as
   ações na linha de baixo, ocupando a largura toda. Não é regra de celular — é a
   consequência da coluna estreita, e vale em qualquer tamanho de tela.

   flex-direction: row EXPLÍCITO porque este elemento é o próprio .card, e o .card do
   Bootstrap já vem com flex-direction: column — só "display: flex" não desfaz isso. */
.fil-estado[b-q1ga5n7dv8] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
    margin-bottom: var(--espaco-4);
}

.fil-estado-icone[b-q1ga5n7dv8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
}

.fil-estado-icone--sucesso[b-q1ga5n7dv8] {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-600);
}

.fil-estado-icone--aviso[b-q1ga5n7dv8] {
    /* --cor-aviso-texto e não --cor-aviso-600: sobre o creme 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);
}

.fil-estado-icone--primaria[b-q1ga5n7dv8] {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* flex-basis 0, e não auto — mesma correção de .pagpac-estado-texto, e o mesmo bug
   estava aqui. No celular esta faixa é flex-wrap: wrap, e a quebra de linha do flex
   é decidida pelo flex-basis, antes de qualquer encolhimento: com basis auto o bloco
   de texto "pedia" a largura da frase inteira e descia todo para a linha de baixo,
   deixando a pastilha sozinha em cima. O min-width: 0 não cobre isso — ele só age
   depois de a linha já estar escolhida. */
.fil-estado-texto[b-q1ga5n7dv8] {
    flex: 1 1 0;
    min-width: 0;
}

.fil-estado-titulo[b-q1ga5n7dv8] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.fil-estado-apoio[b-q1ga5n7dv8] {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.fil-estado-acoes[b-q1ga5n7dv8] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-wrap: wrap;
    /* Linha própria, abaixo do texto — ver o comentário de .fil-estado. */
    flex-basis: 100%;
}

/* ---------- Espera ----------
   O estado mais longo da jornada do paciente ganha o bloco maior da tela. */
.fil-espera[b-q1ga5n7dv8] {
    padding: var(--espaco-5);
    margin-bottom: var(--espaco-4);
}

.fil-espera-numero[b-q1ga5n7dv8] {
    display: flex;
    align-items: baseline;
    gap: var(--espaco-2);
}

/* Único número grande do app do paciente. Figuras proporcionais (o padrão da fonte):
   é um número solto, não uma coluna que precise alinhar dígito com dígito. */
.fil-espera-posicao[b-q1ga5n7dv8] {
    font-size: 2.5rem;
    font-weight: var(--peso-negrito);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cor-primaria-700);
}

.fil-espera-rotulo[b-q1ga5n7dv8] {
    font-size: var(--texto-sm);
    color: var(--cor-texto-secundario);
}

.fil-espera-tempo[b-q1ga5n7dv8] {
    margin: var(--espaco-3) 0 0;
    font-size: var(--texto-sm);
    color: var(--cor-texto);
}

.fil-espera-vivo[b-q1ga5n7dv8] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: var(--espaco-1) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* Mesma bolinha verde do "Atualiza a cada 5s" da fila do médico. */
.fil-espera-bolinha[b-q1ga5n7dv8] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: var(--raio-completo);
    background-color: var(--cor-sucesso-600);
}

.fil-aviso[b-q1ga5n7dv8] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    margin-top: var(--espaco-4);
    padding: var(--espaco-3);
    border-radius: var(--raio-md);
    background-color: var(--cor-primaria-50);
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.fil-aviso-icone[b-q1ga5n7dv8] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--cor-primaria-700);
}

.fil-espera-acao[b-q1ga5n7dv8] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    margin-top: var(--espaco-4);
}

.fil-espera-nota[b-q1ga5n7dv8] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Triagem ---------- */
.fil-triagem[b-q1ga5n7dv8] {
    overflow: hidden;
    margin-bottom: var(--espaco-4);
}

.fil-secao-cabecalho[b-q1ga5n7dv8] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.fil-secao-icone[b-q1ga5n7dv8] {
    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);
}

.fil-secao-titulo[b-q1ga5n7dv8] {
    margin: 0;
}

.fil-triagem-corpo[b-q1ga5n7dv8] {
    padding: 0 var(--espaco-4) var(--espaco-4);
}

.fil-campo[b-q1ga5n7dv8] {
    margin-bottom: var(--espaco-3);
}

/* O asterisco é decorativo (aria-hidden na marcação): quem usa leitor de tela recebe
   o obrigatório pelo atributo required do próprio campo, que é o canal certo. */
.fil-obrigatorio[b-q1ga5n7dv8] {
    color: var(--cor-erro-600);
}

.fil-triagem-rodape[b-q1ga5n7dv8] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    flex-wrap: wrap;
    margin-top: var(--espaco-4);
}

.fil-custo[b-q1ga5n7dv8] {
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.fil-ajuda[b-q1ga5n7dv8] {
    margin: var(--espaco-2) 0 0;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    .fil-estado[b-q1ga5n7dv8] {
        padding: var(--espaco-3);
    }

    .fil-espera[b-q1ga5n7dv8] {
        padding: var(--espaco-4);
    }

    .fil-espera-posicao[b-q1ga5n7dv8] {
        font-size: 2.125rem;
    }

    .fil-triagem-corpo[b-q1ga5n7dv8] {
        padding: 0 var(--espaco-3) var(--espaco-3);
    }
}
/* /Pages/Paciente/Pagamentos.razor.rz.scp.css */
/* Toda a marcação desta página vive no template (nada de RenderFragment no @code),
   então o CSS isolado alcança tudo daqui. Prefixo pagpac- porque o Pagamentos do
   médico já usa pag- na folha isolada DELE — nomes iguais em folhas isoladas
   diferentes não colidem, mas ler o bundle depois fica confuso. */

/* ---------- Faixa de estado ----------
   Um só desenho para os três estados (tem crédito / pendente / sem crédito). O que
   muda é o tom da pastilha e o texto — antes eram três cards idênticos e nada dizia
   qual era qual antes de ler. */
.pagpac-estado[b-ilxbtnl2zp] {
    display: flex;
    /* flex-direction: row EXPLÍCITO. Este elemento É o .card, e o .card do Bootstrap
       já vem com flex-direction: column — declarar só "display: flex" não desfaz
       isso. Sem esta linha o align-items: center abaixo passava a centralizar na
       HORIZONTAL e a faixa virava uma pilha centralizada: pastilha em cima, texto no
       meio, botão embaixo. Mesmo motivo do flex-direction: row em .cabecalho-pagina.
       text-align: left pela mesma razão — não herdar centralização de cima. */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: var(--espaco-3);
    padding: var(--espaco-4);
    margin-bottom: var(--espaco-4);
}

.pagpac-estado-icone[b-ilxbtnl2zp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    flex-shrink: 0;
    border-radius: var(--raio-md);
}

.pagpac-estado-icone--sucesso[b-ilxbtnl2zp] {
    background-color: var(--cor-sucesso-100);
    color: var(--cor-sucesso-600);
}

.pagpac-estado-icone--aviso[b-ilxbtnl2zp] {
    /* --cor-aviso-texto e não --cor-aviso-600: sobre o creme 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);
}

.pagpac-estado-icone--primaria[b-ilxbtnl2zp] {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
}

/* flex-basis 0, e não auto. No celular a faixa é flex-wrap: wrap (para as ações
   descerem de linha), e a quebra de linha do flex é decidida pelo tamanho HIPOTÉTICO
   dos itens — o flex-basis — antes de qualquer encolhimento. Com basis auto esse
   tamanho é a largura do texto inteiro numa linha, muito maior que o que resta ao lado
   da pastilha, então o bloco de texto ia inteiro para a linha de baixo e a pastilha
   ficava sozinha em cima. O min-width: 0 não resolve isso: ele só permite encolher
   depois de a linha já estar escolhida. Com basis 0 o item nunca "pede" largura, então
   nunca quebra, e o flex-grow devolve todo o espaço que sobra. */
.pagpac-estado-texto[b-ilxbtnl2zp] {
    flex: 1 1 0;
    min-width: 0;
}

.pagpac-estado-titulo[b-ilxbtnl2zp] {
    display: block;
    font-size: var(--texto-sm);
    font-weight: var(--peso-negrito);
    color: var(--cor-texto);
}

.pagpac-estado-apoio[b-ilxbtnl2zp] {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--cor-texto-secundario);
}

.pagpac-estado-acoes[b-ilxbtnl2zp] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    flex-shrink: 0;
}

.pagpac-estado-aviso[b-ilxbtnl2zp] {
    font-size: var(--texto-xs);
    color: var(--cor-sucesso-600);
}

/* ---------- Histórico ----------
   Mesma anatomia do extrato do médico: faixa de título dentro do card e uma linha
   por pagamento. Substitui a <table class="table"> crua do Bootstrap. */
.pagpac-historico[b-ilxbtnl2zp] {
    overflow: hidden;
}

.pagpac-historico-cabecalho[b-ilxbtnl2zp] {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-3) var(--espaco-4);
}

.pagpac-historico-icone[b-ilxbtnl2zp] {
    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);
}

.pagpac-historico-titulo[b-ilxbtnl2zp] {
    margin: 0;
}

.pagpac-linha[b-ilxbtnl2zp] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-4);
    border-top: 1px solid var(--cor-borda);
}

.pagpac-linha-icone[b-ilxbtnl2zp] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--cor-neutro-500);
}

.pagpac-data[b-ilxbtnl2zp] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--texto-sm);
    font-weight: var(--peso-medio);
    color: var(--cor-texto);
}

/* tabular-nums aqui e não na faixa de estado: são valores empilhados em coluna, que
   precisam alinhar dígito com dígito. */
.pagpac-valor[b-ilxbtnl2zp] {
    font-size: var(--texto-base);
    font-weight: var(--peso-negrito);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cor-texto);
}

/* ---------- Celular (360x640 e 640x360) ---------- */
@media (max-width: 640.98px) {
    /* Os botões não cabem ao lado do texto a 360px sem espremer os dois: a faixa
       quebra e as ações descem para a linha de baixo, ocupando a largura toda. */
    .pagpac-estado[b-ilxbtnl2zp] {
        flex-wrap: wrap;
        padding: var(--espaco-3);
    }

    .pagpac-estado-acoes[b-ilxbtnl2zp] {
        flex-basis: 100%;
        flex-wrap: wrap;
    }

    .pagpac-linha[b-ilxbtnl2zp] {
        gap: var(--espaco-2);
        padding: var(--espaco-3);
    }

    /* O calendário é redundante com a data ao lado — a 360px ele só rouba largura de
       quem precisa (a data e o valor). */
    .pagpac-linha-icone[b-ilxbtnl2zp] {
        display: none;
    }

    .pagpac-data[b-ilxbtnl2zp] {
        font-size: var(--texto-xs);
    }

    .pagpac-valor[b-ilxbtnl2zp] {
        font-size: var(--texto-sm);
    }
}
/* /Pages/Publico/Login.razor.rz.scp.css */
.login-marca[b-1sy1cywy95] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--espaco-5);
}

.login-logo[b-1sy1cywy95] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.login-marca span:last-child[b-1sy1cywy95] {
    font-weight: var(--peso-negrito);
    font-size: var(--texto-lg);
    color: var(--teal-700);
}

/* Botão secundário desta tela. É o mesmo desenho do .btn-google logo abaixo, de
   propósito: 44px de altura, borda de 1px, fundo de superfície, ícone à esquerda do
   rótulo. Três saídas (voltar, criar conta, recuperar senha) com o mesmo formato, em
   vez de uma seta de texto no topo e dois links sublinhados no pé.

   text-decoration e color explícitos porque são <a>: sem isso o reset do Bootstrap
   deixa sublinhado e azul de link dentro do botão. */
.login-botao[b-1sy1cywy95] {
    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);
}

.login-botao:hover[b-1sy1cywy95], .login-botao:focus[b-1sy1cywy95] {
    background-color: var(--bg-page);
    border-color: var(--text-muted);
    color: var(--text-primary);
    text-decoration: none;
}

/* O "voltar" vem antes do formulário e é o mais fraco dos três: só ele usa o texto
   secundário, para não competir com o "Entrar". */
.login-voltar-site[b-1sy1cywy95] {
    margin-bottom: var(--espaco-4);
    color: var(--cor-texto-secundario);
}

.login-voltar-site:hover[b-1sy1cywy95], .login-voltar-site:focus[b-1sy1cywy95] {
    color: var(--text-primary);
}

/* Empilhados, não lado a lado: a 360px "Esqueci minha senha" com ícone não cabe em
   metade da largura do card sem quebrar o rótulo em duas linhas. */
.login-secundarios[b-1sy1cywy95] {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    margin-top: var(--espaco-5);
}

.login-card[b-1sy1cywy95]  .form-control,
.login-card[b-1sy1cywy95]  .form-select {
    border-radius: 8px;
    border-color: var(--border);
    min-height: 40px;
}

.login-card[b-1sy1cywy95]  .btn {
    border-radius: 8px;
}

/* O override do primário SAIU daqui. Ele trocava o azul do app (--cor-primaria-700,
   #0369A1) pelo tom um degrau mais claro (--teal-600, #0284C7), e branco sobre #0284C7
   mede 4,10:1 — abaixo do mínimo de 4,5:1 de texto normal (WCAG AA). Medido na réplica.
   Era justamente o botão mais importante da tela.

   Sem o override, o "Entrar" fica igual a todo primário do app: 5,2:1, e uma tela a
   menos com paleta própria. O :hover também volta ao do app (--cor-primaria-900), que
   antes era o mesmo tom do estado normal do resto do sistema — clicar dava a impressão
   de nada ter mudado. */

.login-divider[b-1sy1cywy95] {
    display: flex;
    align-items: center;
    gap: var(--espaco-3);
    margin: var(--espaco-4) 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.login-divider[b-1sy1cywy95]::before, .login-divider[b-1sy1cywy95]::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.btn-google[b-1sy1cywy95] {
    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);
    cursor: pointer;
    transition: background-color var(--transicao-rapida), border-color var(--transicao-rapida);
}

.btn-google:hover[b-1sy1cywy95] {
    background-color: var(--bg-page);
    border-color: var(--text-muted);
}

/* .login-links saiu junto com o <p> de links sublinhados que existia no pé — as duas
   saídas agora são .login-botao dentro de .login-secundarios. */
/* /Pages/VideoConsulta.razor.rz.scp.css */
/* ---------- Barra de abas Consulta / Prontuário ----------
   Reaproveita o vocabulário do item ativo do menu lateral (NavMenu.razor.css):
   pastilha com fundo primaria-100 e texto primaria-700, raio md. O contraste do
   estado ativo vem do fundo claro da marca, não de um azul cheio — assim a barra
   não disputa atenção com o vermelho de "Encerrar chamada". */
.consulta-toolbar[b-zkec724dxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.consulta-abas[b-zkec724dxn] {
    display: flex;
    gap: 0.375rem;
}

.consulta-aba[b-zkec724dxn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    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);
}

/* ::deep porque o SVG vem do componente Icone, não desta marcação. A cor ele já
   herda sozinho (stroke="currentColor"). */
.consulta-aba[b-zkec724dxn]  svg {
    flex-shrink: 0;
}

.consulta-aba:hover[b-zkec724dxn] {
    background-color: var(--cor-fundo-secao);
    color: var(--cor-texto);
}

.consulta-aba--ativa[b-zkec724dxn],
.consulta-aba--ativa:hover[b-zkec724dxn] {
    background-color: var(--cor-primaria-100);
    color: var(--cor-primaria-700);
    font-weight: var(--peso-negrito);
}

/* As abas deixaram de ser .btn, então o anel de foco de app.css não as alcança
   mais — repetido aqui com os mesmos valores para não perder acessibilidade. */
.consulta-aba:focus-visible[b-zkec724dxn] {
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--cor-superficie), 0 0 0 0.25rem var(--cor-foco);
}

.consulta-acoes[b-zkec724dxn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Celular (360x640 em pé e 640x360 deitado): a barra quebra em duas linhas. Antes,
   com justify-content: space-between e sem quebra, os dois botões de ação
   espremiam as abas nessa largura. */
@media (max-width: 640.98px) {
    .consulta-toolbar[b-zkec724dxn] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .consulta-abas[b-zkec724dxn],
    .consulta-acoes[b-zkec724dxn] {
        width: 100%;
    }

    /* "Reportar falha técnica" quebra em duas linhas nessa largura; sem o stretch
       os dois botões da linha ficariam com alturas diferentes. */
    .consulta-acoes[b-zkec724dxn] {
        align-items: stretch;
    }

    .consulta-aba[b-zkec724dxn],
    .consulta-acoes .btn[b-zkec724dxn] {
        flex: 1 1 0;
    }
}

.consulta-layout[b-zkec724dxn] {
    display: flex;
    flex-direction: column;
}

.video-painel[b-zkec724dxn] {
    width: 100%;
}

.video-iframe[b-zkec724dxn] {
    width: 100%;
    height: 75vh;
    border: 0;
    display: block;
}

.prontuario-painel[b-zkec724dxn] {
    width: 100%;
}

/* Médico na aba Prontuário: a chamada encolhe para um painel fixo lateral em vez
   de sumir, para não derrubar a conexão de vídeo/áudio ao trocar de aba. */
.consulta-layout--prontuario[b-zkec724dxn] {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1rem;
}

.consulta-layout--prontuario .video-painel[b-zkec724dxn] {
    width: 320px;
    flex: 0 0 320px;
    position: sticky;
    top: 1rem;
}

.consulta-layout--prontuario .video-iframe[b-zkec724dxn] {
    height: 220px;
}

.consulta-layout--prontuario .prontuario-painel[b-zkec724dxn] {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 768px) {
    .consulta-layout--prontuario[b-zkec724dxn] {
        flex-direction: column;
    }

    .consulta-layout--prontuario .video-painel[b-zkec724dxn] {
        width: 100%;
        flex: 0 0 auto;
        position: static;
    }
}