/* ===========================================================================
   VetOrbit — folha de estilo global. Fonte de verdade das cores/tipografia/forma:
   Ui/EvetTheme.cs (tokens MudBlazor) + docs/identidade-visual-v1.5.md.
   ⚠ O PDF do manual ainda é o v1.3 e está DESATUALIZADO desde 22/09/2026: a paleta
   subiu de intensidade e os botões de diálogo inverteram. Ver o .md acima.
   Aqui só o que o tema do MudBlazor não alcança: forma dos controles, logotipo,
   tabelas, app shell (menu inferior no celular), navegação secundária, entrada
   avançada, avatares, landing. Sem cores novas fora dos tokens abaixo.
   =========================================================================== */
:root {
    color-scheme: light;
    --evet-verde-agua-500: #2FD3BE;
    --evet-verde-agua-300: #5FE0D0;
    --evet-verde-agua-700: #17786B;
    --evet-verde-agua-800: #115B51;
    --evet-verde-agua-50: #D8FAF4;
    --evet-coral-200: #FFD3C4;
    --evet-coral-400: #FF8C88;
    --evet-coral-600: #C43028;
    --evet-ardosia-700: #333C4E;
    --evet-ambar-300: #FFC15E;
    /* Âmbar escuro: a cor de prazo e de atenção. **Ele é a tinta do módulo Estoque**, e por isso subiu junto
       com ela em 28/09/2026 (#876012 → #895F00) — inclusive nos três PDFs que carregam o hex à mão, que foi
       o que o canário dos impressos cobrou. Coral fica reservado a erro e bloqueio legal. */
    --evet-ambar-escuro: #895F00;
    --evet-ambar-50: #F4E8CF;
    --evet-coral-50: #EFD5D9;
    --evet-lavanda-300: #9077EE;
    --evet-ceu-300: #6CC5FB;
    --evet-nevoa-50: #F3F8F8;
    --evet-nevoa-200: #CBDDDD;
    --evet-nevoa-500: #5D6B80;
    --evet-erro: #C43028;

    --evet-shadow: 0 2px 8px rgba(51, 60, 78, 0.10);
    --evet-radius-control: 10px;
    --evet-radius-card: 12px;
    --evet-radius-modal: 16px;
    --evet-branco: #FFFFFF;
    --evet-bottom-nav-height: 64px;
}

/* ---- Papel e tinta: os tokens que MUDAM com o tema (28/09/2026) -----------------------
   Os nomes da paleta da marca (acima) valem o mesmo em todo tema — verde-água 700 é sempre
   #17786B. Estes são PAPÉIS: qual superfície, qual texto, qual borda. É por eles que o escuro
   existe sem reescrever regra nenhuma.
   ⚠️ `--evet-branco` continua branco de verdade em todo tema: ele é o texto sobre preenchimento
   colorido (item selecionado, faixa do título), e não uma superfície.
   ⚠️ Cada bloco tem um segundo seletor de CLASSE (`.evet-como-*`). É ele que permite a um pedaço
   de tela ser pintado com um tema que não é o ativo — a amostra da tela de conta — **sem uma
   segunda cópia dos valores**, que é como uma amostra começa a mentir. */
:root,
.evet-como-padrao {
    --evet-fundo: #F3F8F8;
    --evet-superficie: #FFFFFF;
    --evet-superficie-2: #F3F8F8;
    --evet-borda: #CBDDDD;
    --evet-texto: #333C4E;
    --evet-texto-2: #5D6B80;
    /* O ponto de interrogação da Ajuda. ⚠️ É mais CLARO que o texto secundário de propósito
       (Marcelo, 05/10/2026): são 473 deles no produto, um ao lado de cada campo, e com peso de
       texto eles competiam com o conteúdo em vez de esperar por quem precisa. Calculado, não
       escolhido a olho: 3,16:1 no pior fundo do tema, que é o mínimo da WCAG 1.4.11 para
       componente de interface. No hover e no foco ele volta à cor cheia. */
    --evet-ajuda-glifo: #7D8CAA;
    --evet-primaria: #17786B;
    --evet-primaria-forte: #115B51;
    --evet-tint-primaria: #D8FAF4;
    --evet-primaria-texto: #17786B;
    --evet-erro-texto: #C43028;
    --evet-atencao-texto: #895F00;
    --evet-sucesso-texto: #1C7A4C;
    --evet-info-texto: #0F6BC2;
    --evet-sombra: 0 2px 8px rgba(51, 60, 78, 0.10);
}

/* ---- Os quatro temas (Marcelo, 28/09/2026) -------------------------------------------
   São DOIS eixos e não quatro paletas: **intensidade** (padrão | vivo) × **fundo** (claro |
   escuro). Padrão é a v1.5 intacta; vivo sobe a chroma das cores de identidade em OKLCH e
   deixa o papel onde está; escuro troca o papel e a tinta e mantém a matiz de cada módulo.
   Todos os valores foram **calculados e medidos**, nunca estimados — ver §3.6 do manual e
   `TemasTests`, que refaz cada razão de contraste.
   O `color-scheme` faz a barra de rolagem, os controles nativos e o `::selection` do navegador
   acompanharem; sem ele o escuro aparece com barra de rolagem branca. */
:root[data-evet-tema="vivo"],
.evet-como-vivo {
    color-scheme: light;
    --evet-fundo: #F3F8F8;
    --evet-superficie: #FFFFFF;
    --evet-superficie-2: #F3F8F8;
    --evet-borda: #CBDDDD;
    --evet-texto: #333C4E;
    --evet-texto-2: #5D6B80;
    /* O ponto de interrogação da Ajuda. ⚠️ É mais CLARO que o texto secundário de propósito
       (Marcelo, 05/10/2026): são 473 deles no produto, um ao lado de cada campo, e com peso de
       texto eles competiam com o conteúdo em vez de esperar por quem precisa. Calculado, não
       escolhido a olho: 3,16:1 no pior fundo do tema, que é o mínimo da WCAG 1.4.11 para
       componente de interface. No hover e no foco ele volta à cor cheia. */
    --evet-ajuda-glifo: #7D8CAA;
    --evet-primaria: #00796B;
    --evet-primaria-forte: #005C51;
    --evet-tint-primaria: #D8FAF4;
    --evet-primaria-texto: #00796B;
    --evet-erro-texto: #C43028;
    --evet-atencao-texto: #895F00;
    --evet-sucesso-texto: #1C7A4C;
    --evet-info-texto: #0F6BC2;
    --evet-sombra: 0 2px 8px rgba(51, 60, 78, 0.10);
}

:root[data-evet-tema="escuro"],
.evet-como-escuro {
    color-scheme: dark;
    --evet-fundo: #0F131B;
    --evet-superficie: #242830;
    --evet-superficie-2: #31353D;
    --evet-borda: #44484F;
    --evet-texto: #EBEDF1;
    --evet-texto-2: #ADB1BA;
    /* O ponto de interrogação da Ajuda. ⚠️ É mais CLARO que o texto secundário de propósito
       (Marcelo, 05/10/2026): são 473 deles no produto, um ao lado de cada campo, e com peso de
       texto eles competiam com o conteúdo em vez de esperar por quem precisa. Calculado, não
       escolhido a olho: 3,14:1 no pior fundo do tema, que é o mínimo da WCAG 1.4.11 para
       componente de interface. No hover e no foco ele volta à cor cheia. */
    --evet-ajuda-glifo: #7A818F;
    --evet-primaria: #288476;
    --evet-primaria-forte: #0A7265;
    --evet-tint-primaria: #00120F;
    --evet-primaria-texto: #459C8E;
    --evet-erro-texto: #F25D4F;
    --evet-atencao-texto: #B18842;
    --evet-sucesso-texto: #489F6E;
    --evet-info-texto: #3E90EB;
    --evet-sombra: 0 2px 8px rgba(0, 0, 0, 0.45);
}

:root[data-evet-tema="vivo-escuro"],
.evet-como-vivo-escuro {
    color-scheme: dark;
    --evet-fundo: #0F131B;
    --evet-superficie: #242830;
    --evet-superficie-2: #31353D;
    --evet-borda: #44484F;
    --evet-texto: #EBEDF1;
    --evet-texto-2: #ADB1BA;
    /* O ponto de interrogação da Ajuda. ⚠️ É mais CLARO que o texto secundário de propósito
       (Marcelo, 05/10/2026): são 473 deles no produto, um ao lado de cada campo, e com peso de
       texto eles competiam com o conteúdo em vez de esperar por quem precisa. Calculado, não
       escolhido a olho: 3,14:1 no pior fundo do tema, que é o mínimo da WCAG 1.4.11 para
       componente de interface. No hover e no foco ele volta à cor cheia. */
    --evet-ajuda-glifo: #7A818F;
    --evet-primaria: #008576;
    --evet-primaria-forte: #0A7265;
    --evet-tint-primaria: #00120F;
    --evet-primaria-texto: #00A08E;
    --evet-erro-texto: #FF4F42;
    --evet-atencao-texto: #C28312;
    --evet-sucesso-texto: #00A362;
    --evet-info-texto: #1D90FF;
    --evet-sombra: 0 2px 8px rgba(0, 0, 0, 0.45);
}

html, body {
    background: var(--evet-fundo);
    color: var(--evet-texto);
    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* ---- Blazor boot / errors (template) ------------------------------------ */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #55B98A;
}

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

.validation-message {
    color: var(--evet-erro-texto);
}

#blazor-error-ui {
    color-scheme: light only;
    background: #FBEFEF;
    color: var(--evet-ardosia-700);
    border-top: 3px solid var(--evet-erro);
    bottom: 0;
    box-shadow: var(--evet-shadow);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.blazor-error-boundary {
    background: var(--evet-erro);
    border-radius: var(--evet-radius-card);
    padding: 1rem 1.25rem;
    color: var(--evet-branco);
}

    .blazor-error-boundary::after {
        content: "Ocorreu um erro nesta área da tela.";
    }

/* A marca fica acima do medidor, e o conjunto (marca + anéis + percentual) é o que a pessoa vê enquanto o
   app baixa — no Azure SQL serverless a primeira carga depois da ociosidade demora, e uma tela só com um
   anél girando não diz sequer de que sistema ela é (manual §1, SPEC Q22). */
.evet-loading-brand {
    position: absolute;
    display: flex;
    justify-content: center;
    inset: 12vh 0 auto 0;
}

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

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

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

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

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

code {
    color: var(--evet-texto);
    background: var(--evet-superficie-2);
    border-radius: 6px;
    padding: 0 4px;
}

/* ---- §6 Botões: raio 9–10 px, 36 px padrão (44 grande, 28 compacto), Inter 600 sem caixa alta.
        Primário = verde-água 700 (tema): o único verde que carrega texto branco (§17). ---- */
.mud-button-root.mud-button {
    border-radius: var(--evet-radius-control);
    min-height: 36px;
    padding: 0 16px;
    box-shadow: none;
}

.mud-button-root.mud-button.mud-button-size-large {
    min-height: 44px;
    padding: 0 22px;
    font-size: 0.9375rem;
}

.mud-button-root.mud-button.mud-button-size-small {
    min-height: 28px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

.mud-button-root.mud-button.mud-button-filled:hover {
    box-shadow: none;
}

/* §17 alvo de toque mínimo 44×44 px em telas de toque */
@media (pointer: coarse) {
    .mud-button-root.mud-button {
        min-height: 44px;
    }

    .mud-button-root.mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Foco visível: anel verde-água 500 (§17, acessibilidade) */
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
.mud-link:focus-visible,
.evet-bottom-link:focus-visible,
.evet-dropzone:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: 2px;
}

/* §17 componentes SEM texto voltam ao verde-água 500: switch, checkbox, radio, barras, indicador de aba */
.mud-checkbox .mud-primary-text,
.mud-radio .mud-primary-text,
.mud-switch .mud-primary-text {
    color: var(--evet-verde-agua-500) !important;
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--evet-verde-agua-500) !important;
}

.mud-progress-linear.mud-progress-linear-color-primary .mud-progress-linear-bar {
    background-color: var(--evet-verde-agua-500) !important;
}

.mud-progress-circular.mud-primary-text {
    color: var(--evet-verde-agua-500) !important;
}

/* ---- §8 Cards e superfícies: brancos sobre Névoa 50, raio 12, sombra única ---- */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-dialog):not(.mud-popover):not(.mud-menu-list) {
    border-radius: var(--evet-radius-card);
}

.mud-card {
    border-radius: var(--evet-radius-card);
}

.mud-dialog {
    border-radius: var(--evet-radius-modal);
    box-shadow: 0 8px 32px rgba(64, 73, 90, 0.14);
}

.mud-popover, .mud-menu-list {
    border-radius: var(--evet-radius-control);
}

.mud-alert {
    border-radius: var(--evet-radius-control);
}

.mud-chip {
    font-weight: 600;
}

/* ---- §8 Tabela: cabeçalho em tint da primária, zebra Névoa 50, linha de 40 px, números tabulares ---- */
.mud-table .mud-table-head .mud-table-cell {
    background: var(--evet-tint-primaria);
    color: var(--evet-texto);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.mud-table .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell {
    background: var(--evet-superficie-2);
}

.mud-table .mud-table-body .mud-table-cell {
    height: 40px;
    font-variant-numeric: tabular-nums;
}

.mud-table.mud-table-dense .mud-table-body .mud-table-cell {
    height: 40px;
}

/* ---- §5 Área de trabalho: abaixo da barra fixa; centralizada, gutter de 24 px.
        Largura máxima 1440 px e não 1200 px: pedido de Marcelo em 14/09/2026 para a área usar mais
        das laterais em monitor grande — desvio do manual §5 registrado na SPEC §4.5. ---- */
.mud-main-content {
    padding-top: var(--mud-appbar-height);
}

.evet-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 24px 48px;
}

@media (min-width: 1600px) {
    .evet-page {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 600px) {
    .evet-page {
        padding: 16px 16px 40px;
    }
}

/* ---- Cabeçalho da página: a MESMA caixa do item selecionado no menu (Marcelo, 28/09/2026) ----

   Caixa cheia na tinta do módulo, texto branco e o ícone do item, ocupando a largura do conteúdo. Até aqui
   era uma barra de 4 px à esquerda com o título na tinta — discreta demais para ser o eco do menu, e quem
   entra numa tela pelo menu perde o único lugar em que a tela se identifica assim que rola a página.

   O fundo cai no verde-água 700 fora de uma página com módulo (o guia público, um diálogo) — a mesma queda
   da aba ativa. ⚠️ Branco sobre a tinta é AA nos doze módulos (EvetThemeTests), e **é por isso que o
   subtítulo aqui é branco puro**: as tintas foram calibradas em 4,5:1 com branco, então qualquer opacidade
   abaixo de 1 reprovaria. A hierarquia sai do tamanho e do peso, que não custam contraste. */
.evet-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    border-radius: var(--evet-radius-card);
    background: var(--evet-mod-ink, var(--evet-verde-agua-700));
    color: var(--evet-branco);
    box-shadow: var(--evet-sombra);
}

/* O texto empurra as ações para a direita e, quando não cabem, quebra a linha inteira em vez de espremer o
   título. */
.evet-page-header-text {
    flex: 1 1 240px;
    min-width: 0;
}

.evet-page-header h1,
.evet-page-header .evet-muted {
    color: var(--evet-branco);
}

/* O tile do ícone se inverte sobre o fundo escuro: o tint do módulo sumiria contra a tinta dele mesmo. */
.evet-page-header .evet-mod-tile {
    background: rgba(255, 255, 255, 0.16);
}

.evet-page-header .evet-mod-tile .mud-icon-root {
    color: var(--evet-branco);
}

.evet-page-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* As ações são de 71 telas e nenhuma sabe que virou faixa escura: quem as adapta é o CSS, e não um
   parâmetro novo. Botão de texto em verde-água 700 sobre a tinta do módulo seria quase invisível. */
.evet-page-header-actions .mud-button-root.mud-button-text-primary,
.evet-page-header-actions .mud-button-root.mud-button-text-default,
.evet-page-header-actions .mud-icon-button.mud-primary-text {
    color: var(--evet-branco);
}

.evet-page-header-actions .mud-button-root.mud-button-text-primary:hover,
.evet-page-header-actions .mud-button-root.mud-button-text-default:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

/* E o primário troca de lado: branco cheio com o texto na tinta. A razão de contraste é a mesma dos 4,5:1,
   porque é o mesmo par de cores invertido. */
.evet-page-header-actions .mud-button-root.mud-button-filled-primary {
    /* Branco de verdade, não superfície: a faixa é colorida em todo tema, e um botão "da cor do papel"
       sumiria dentro dela no escuro. E o texto é a TINTA, não o glifo — o glifo é claro no escuro. */
    background-color: var(--evet-branco);
    color: var(--evet-mod-ink, var(--evet-verde-agua-700));
}

.evet-page-header-actions .mud-button-root.mud-button-filled-primary:hover {
    background-color: var(--evet-nevoa-50);
}

@media (max-width: 600px) {
    .evet-page-header {
        padding: 16px;
    }

    /* O ícone não fica sozinho numa linha: com a base menor, ele e o título continuam juntos e quem quebra
       é só o bloco de ações. Medido no navegador a 400 px — com 240 px o ícone órfão aparecia. */
    .evet-page-header-text {
        flex-basis: 160px;
    }
}

/* ---- §6 Campos de entrada: caixa com borda névoa 200, raio 10, rótulo ACIMA em Inter 600 ---- */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol,
.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:has(:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol {
    position: static;
    order: -1;
    transform: none;
    max-width: none;
    margin: 0 0 6px;
    font-family: "Inter", "Segoe UI", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--evet-texto);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-text-with-label {
    margin-top: 0;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    background: var(--evet-superficie);
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-control);
    padding: 0 12px;
    min-height: 36px;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mud-input.mud-input-text.mud-input-underline:before,
.mud-input.mud-input-text.mud-input-underline:after {
    display: none;
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text:hover:not(.mud-disabled):not(:focus-within) {
    border-color: var(--evet-nevoa-500);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text:focus-within {
    border-color: var(--evet-verde-agua-500);
    box-shadow: 0 0 0 3px rgba(91, 196, 184, 0.22);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-input-error,
.mud-input-control.mud-input-error > .mud-input-control-input-container > div.mud-input.mud-input-text {
    border-color: var(--evet-erro-texto);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-disabled {
    background: var(--evet-superficie-2);
    color: var(--evet-texto-2);
}

.mud-input.mud-input-text > .mud-input-slot.mud-input-root-text {
    padding: 7px 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.mud-input.mud-input-text > textarea.mud-input-slot.mud-input-root-text {
    padding: 8px 0;
}

.mud-input-slot::placeholder {
    color: var(--evet-texto-2);
    opacity: 1;
}

.mud-input-helper-text {
    margin-top: 4px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--evet-texto-2);
}

/* ---- §6 Botão secundário: tint verde-água 50 + texto verde-água 700 (Color.Default filled) ---- */
.mud-button-root.mud-button.mud-button-filled.mud-button-filled-default {
    background: var(--evet-tint-primaria);
    color: var(--evet-primaria-texto);
}

.mud-button-root.mud-button.mud-button-filled.mud-button-filled-default:hover {
    background: #D9F1ED;
}

/* ---- §7 Badges de classificação (faixa da rotulagem): A/B ardósia, C coral 600 ---- */
.evet-lista {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font: 600 0.6875rem/1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
    color: var(--evet-branco);
}

.evet-lista-ab {
    background: var(--evet-ardosia-700);
}

.evet-lista-c {
    background: var(--evet-coral-600);
}

/* ---- §7 Chips de filtro / status: tint + texto na cor escura ---- */
.mud-chip.mud-chip-text.mud-chip-color-primary {
    background: var(--evet-tint-primaria);
    color: var(--evet-primaria-texto);
}

/* ---- Cartão de indicador do painel: o número é o conteúdo, o link é o número ---- */

/* Indicadores da mesma fileira têm SEMPRE a mesma altura. O painel existe para comparar números lado a lado,
   e cartão mais baixo que o vizinho — porque a legenda dele coube em uma linha e a do outro em duas — faz o
   olho procurar a diferença no lugar errado. A MudItem já estica (o flex da MudGrid é stretch por padrão),
   então basta o cartão ocupar a altura inteira dela. */
.evet-kpi-card {
    height: 100%;
}

.evet-kpi-card .mud-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* E a legenda encosta no rodapé: com as alturas iguais, é isto que alinha as legendas entre os cartões em vez
   de deixar cada uma flutuando na altura em que o texto acima dela terminou. */
.evet-kpi-card .mud-card-content > .mud-typography-caption {
    margin-top: auto;
}

.evet-kpi-card .mud-link .evet-kpi {
    color: var(--evet-texto);
}

.evet-kpi-card .mud-link:hover .evet-kpi {
    color: var(--evet-primaria-texto);
}

/* ---- Números de destaque (Quicksand) e amostras de cor do guia ---- */
.evet-kpi {
    font-family: "Quicksand", "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--evet-texto);
}

/* Indicador que pede atenção — falta e atraso — vai em âmbar escuro, que é a cor de prazo do manual; coral
   fica reservado a erro e bloqueio legal. */
.evet-kpi-atencao {
    color: var(--evet-atencao-texto);
}

.evet-kpi-card .mud-link .evet-kpi-atencao,
.evet-kpi-card .mud-link:hover .evet-kpi-atencao {
    color: var(--evet-atencao-texto);
}

/* A hora na agenda do dia carrega a cor do serviço numa faixa à esquerda — o mesmo código do manual §11. */
.evet-hora-do-dia {
    display: inline-block;
    padding-left: 8px;
    border-left: 3px solid var(--evet-servico, var(--evet-verde-agua-500));
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.evet-swatch {
    height: 56px;
    border-radius: var(--evet-radius-control);
    border: 1px solid var(--evet-borda);
}

/* ---- §8 Abas: sem caixa alta, EM VÁRIAS LINHAS, e a ativa como caixa cheia ----

   Marcelo, 25/09/2026: "colocar as tabs do atendimento (e em qualquer outro lugar que precisar de 2 linhas)
   em 2 linhas, e deixar bem marcado qual a tab que está ativa".

   **Por que quebrar linha em vez de rolar.** O padrão do MudBlazor é uma faixa só com setas nas pontas: o
   `.mud-tabs-tabbar-content` tem `overflow:hidden` e o wrapper é deslocado por transform. Com as onze abas do
   atendimento, isso esconde metade delas atrás de uma seta — e aba escondida é aba que ninguém abre. Em duas
   linhas, todas ficam à vista de uma vez.

   **Vale para TODAS as abas do app, e não por classe de tela.** Tela com três abas cabe numa linha e não muda
   nada; tela com onze quebra sozinha. Uma classe opt-in seria uma coisa a lembrar em cada tela nova — a mesma
   razão pela qual o espaçamento do painel mora aqui e não em cada uma.

   ⚠️ **O `.mud-tab` do MudBlazor é `width:100%`**, o que num container que quebra linha põe UMA aba por
   linha. `width:auto` é o que faz a quebra funcionar, e não um detalhe de acabamento. */
.mud-tabs .mud-tabs-tabbar-content {
    overflow: visible;
    white-space: normal;
}

.mud-tabs .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;

    /* O wrapper é deslocado por transform quando o MudBlazor rola a faixa. Sem rolagem ele fica em zero, mas
       um transform remanescente empurraria a faixa inteira para fora da tela — e isso não se descobre num
       teste, descobre-se numa clínica. */
    transform: none !important;
    transition: none;
}

/* As setas não têm mais o que rolar: tudo está à vista. */
.mud-tabs .mud-tabs-scroll-button {
    display: none;
}

/* O indicador deslizante é posicionado em ABSOLUTO a partir da medida de UMA linha. Em duas linhas ele
   apontaria para o lugar errado, que é pior do que não apontar — quem marca a aba ativa agora é a caixa
   cheia abaixo. */
.mud-tabs .mud-tab-slider {
    display: none;
}

.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    min-height: 44px;
    width: auto;
    border-radius: var(--evet-radius-control);

    /* ⚠️ A largura mínima de 160 px NÃO se mexe daqui: o MudBlazor a escreve **inline** em cada aba
       (`style="min-width:160px"`, do parâmetro `MinimumTabWidth`), e inline vence folha de estilo. Uma regra
       aqui ficaria aplicada e sem efeito — pior que não existir, porque parece que resolve. Se um dia as abas
       precisarem ser estreitas, é `MinimumTabWidth` no componente. Como está, as 160 px uniformes dão duas
       fileiras alinhadas, que é o que se quer de uma faixa que quebra linha. */
}

/* Hover da aba inativa: a mesma lavagem de 14% da tinta do módulo que a barra lateral usa, e pela mesma
   razão — o cinza do MudBlazor é a única cor da tela que não pertence a lugar nenhum. */
.mud-tabs .mud-tab:not(.mud-tab-active):hover {
    background: color-mix(in srgb, var(--evet-mod-glifo, var(--evet-primaria-texto)) 14%, transparent);
}

/* **Aba ativa: CAIXA CHEIA na tinta do módulo, texto e glifo em branco.** É a mesma decisão que a barra
   lateral tomou em 22/09/2026, e aqui ela é ainda mais necessária: com as abas em duas linhas, um sublinhado
   de 2 px não diz de relance qual está aberta — e a linha de baixo nem tem "embaixo" que sirva de âncora.
   A tinta carrega branco a 4,5:1 nos doze módulos (canário em EvetThemeTests), e fora de uma página com
   módulo — um diálogo, por exemplo — cai no verde-água 700, que é a primária e faz 5,3:1. */
.mud-tabs .mud-tab.mud-tab-active {
    background: var(--evet-mod-ink, var(--evet-verde-agua-700));
    color: var(--evet-branco);
    box-shadow: var(--evet-sombra);
}

.mud-tabs .mud-tab.mud-tab-active .mud-icon-root {
    color: var(--evet-branco);
}

/* O hover do MudBlazor clareia o fundo, e sobre a caixa cheia isso apagaria o texto branco. */
.mud-tabs .mud-tab.mud-tab-active:hover {
    background: var(--evet-mod-ink, var(--evet-verde-agua-700));
    filter: brightness(1.12);
}

/* O conteúdo não encosta na barra de abas. São os mesmos 16 px que separam a barra de ações da tabela
   (`.evet-table-toolbar`): quem lê precisa ver onde a navegação termina e o conteúdo começa. Fica aqui, e não
   numa classe por tela, porque são 39 painéis no app e o espaçamento não pode variar entre eles. */
.mud-tabs .mud-tabs-panels {
    padding-top: 16px;
}

/* ---- Gravação em curso: o aviso da barra do topo (F-16, 25/09/2026) ----

   Vermelho porque é a convenção universal de gravação. Aqui ele não sinaliza erro e sim **estado que exige
   atenção agora** — usar o âmbar de prazo seria purismo contra o reflexo de quem olha.

   O ponto pulsa, e a animação respeita `prefers-reduced-motion`: piscar é o que faz o aviso ser notado de
   canto de olho, e é também o que incomoda quem pediu para o sistema parar de se mexer. */
.evet-gravando {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 6px 0 10px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--evet-erro);
    color: var(--evet-branco);
}

.evet-gravando-tempo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .02em;
}

.evet-gravando-ponto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--evet-branco);
    animation: evet-pulsa 1.6s ease-in-out infinite;
}

/* Os botões dentro do badge herdam o branco: o padrão do MudBlazor os deixaria ardósia sobre vermelho. */
.evet-gravando .mud-icon-button {
    color: var(--evet-branco);
    padding: 4px;
}

@keyframes evet-pulsa {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    .evet-gravando-ponto { animation: none; }
}

/* ---- §5 App shell: busca global, sidebar mini, avatar, âncoras do site ---- */
.evet-global-search {
    width: 720px;
    max-width: 45vw;   /* a barra tem logo, seletor e avatar do lado: 720 px fixos os empurrariam para fora */
    margin-left: 24px;
}

.evet-global-search .mud-input-control {
    margin: 0;
}

/* ⚠ As três regras abaixo precisam dos DOIS seletores, e é por isso que elas parecem repetidas.
   O MudBlazor nem sempre põe `mud-drawer--closed` no drawer mini: há estado em que ele é mini e não
   carrega nem `--closed` nem `--open`. Com só o primeiro seletor, o modo de 64 px ficava com o texto do
   item visível e cortado, e o ícone encostado à esquerda em vez de centrado (Marcelo, 28/09/2026) — o
   resto da barra já usava o par, e só estas três tinham ficado para trás. Há canário. */
.mud-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text,
.mud-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-link-text {
    display: none;
}

.mud-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link,
.mud-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.mud-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link-icon,
.mud-drawer.mud-drawer-mini:not(.mud-drawer--open) .mud-nav-link-icon {
    margin: 0;
}

/* ── O logotipo da clínica no alto da barra lateral (08/10/2026, Marcelo, SPEC Q50 = B) ─────────────────
   ⚠️ A marca do VetOrbit CONTINUA na barra superior, e isso é desvio declarado da alternativa que ele escolheu:
   ela previa o logotipo "no lugar do selo do VetOrbit". Pôr o da clínica aqui dá a ela o sistema como dela sem
   apagar de quem é o produto — e quem presta suporte precisa reconhecer o VetOrbit numa captura de tela. As duas
   marcas não competem: estão em superfícies diferentes, uma por vez no campo de visão.
   ⚠️ A borda inferior é a mesma do resto da casca, para o logotipo não parecer um cartão solto. */
.evet-logo-da-clinica {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--evet-borda);
    overflow: hidden;
}

.evet-logo-da-clinica img {
    /* O teto é a ALTURA, e a largura acompanha: logotipo é quase sempre largo e baixo. */
    max-height: 32px;
    max-width: 100%;
    height: auto;
    width: auto;
}

/* ⚠️ Os DOIS seletores, pela mesma razão das três regras acima: o MudBlazor nem sempre põe
   `mud-drawer--closed` no drawer mini. No trilho de 64 px o logotipo encolhe em vez de sumir — ele é a
   única coisa na barra que diz de quem é a casa, e sumir deixaria o modo estreito sem nada dela. */
.mud-drawer.mud-drawer-mini.mud-drawer--closed .evet-logo-da-clinica,
.mud-drawer.mud-drawer-mini:not(.mud-drawer--open) .evet-logo-da-clinica {
    padding: 10px 8px;
}

.mud-drawer.mud-drawer-mini.mud-drawer--closed .evet-logo-da-clinica img,
.mud-drawer.mud-drawer-mini:not(.mud-drawer--open) .evet-logo-da-clinica img {
    max-height: 24px;
}

.evet-site-nav {
    display: flex;
    gap: 24px;
    margin-left: 40px;
}

.evet-site-nav .mud-link {
    color: var(--evet-texto);
    font-weight: 500;
}

/* ---- §5/§17 Menu inferior (< 768 px): substitui a sidebar e o botão de menu ---- */
.evet-bottom-nav {
    display: none;
}

/* ⚠️ AQUI NASCEU O DEFEITO de 06/10/2026 (Marcelo: "o menu lateral não está aparecendo quando abri o VetOrbit
   no celular"). Esta media query escondia `.mud-layout .evet-drawer` E `.evet-menu-toggle` — a barra e o
   botão que a abre —, deixando o menu inferior como a ÚNICA navegação do celular. Ele leva a cinco destinos
   escolhidos; os outros oito blocos, Tutores e Animais entre eles, ficavam inalcançáveis.

   ⚠️ E as duas faixas abaixo são DUAS porque resolvem coisas diferentes, não por capricho:

   - até 767,98 px manda o menu inferior, que é decisão de desenho (manual §5);
   - até 599,98 px some o TRILHO mini de 64 px, que é uma restrição de espaço — 64 px de 390 px é um sexto
     da tela. Nessa faixa o `MainLayout` já pôs a barra em `Temporary`, então esta regra só alcança o
     quadro anterior à primeira medição da janela.

   ⚠️ Entre 600 e 767 px o trilho FICA, de propósito: se a medição da janela falhar (o MudBlazor manda o
   tamanho nulo em certas situações), o layout cai no breakpoint e mantém o modo mini ali. Esconder o
   trilho nessa faixa recriaria o defeito — barra escondida pelo CSS e nunca sobreposta pelo C# — e um
   trilho a mais ao lado do menu inferior é redundância visível, enquanto a outra falha é invisível. */
@media (max-width: 767.98px) {
    .mud-layout .mud-main-content {
        padding-bottom: calc(var(--evet-bottom-nav-height) + 8px);
    }

    .evet-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: flex;
        height: calc(var(--evet-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--evet-superficie);
        border-top: 1px solid var(--evet-borda);
    }

    .evet-bottom-link {
        flex: 1 1 0;
        min-width: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: var(--evet-texto);
        font: 600 0.6875rem/1.2 "Inter", "Segoe UI", sans-serif;
    }

    .evet-bottom-link .mud-icon-root {
        font-size: 24px;
        color: var(--evet-texto);
    }

    .evet-bottom-link.active {
        color: var(--evet-primaria-texto);
    }

    .evet-bottom-link.active .mud-icon-root {
        color: var(--evet-verde-agua-500);
    }
}

/* O trilho mini de 64 px não cabe num celular. Nesta faixa a barra é sobreposta (`DrawerVariant.Temporary`,
   no MainLayout): fechada ela sai da tela sozinha, aberta cobre o conteúdo com o fundo escurecido.

   ⚠️ O botão de menu NÃO entra aqui — é ele que mantém alcançável tudo o que o menu inferior não leva. */
@media (max-width: 599.98px) {
    .mud-layout .evet-drawer.mud-drawer-mini {
        display: none !important;
    }

    .mud-layout .mud-main-content {
        margin-left: 0 !important;
    }
}

/* ---- Pesquisa pública (F-14): a pergunta inteira acima do campo, sem corte ---- */
.evet-pergunta {
    margin-top: 24px;
}

.evet-pergunta > .mud-typography {
    display: block;
    margin-bottom: 6px;
    line-height: 1.35;
}

/* Campo de e-mail: uma linha, largura fixa. Sem isto ele cresce com o cartão da pesquisa (960 px) e fica
   desproporcional ao conteúdo que recebe (14/09/2026). */
.evet-campo-email {
    flex: 0 1 320px;
    max-width: 320px;
}

/* ---- Pergunta e resposta lado a lado no detalhe da pesquisa (F-14) ---- */
.evet-qa + .evet-qa {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--evet-borda);
}

/* ---- §18 Módulos e cores (v1.3): a cor diz onde a pessoa está.
        --evet-mod paints chrome (barra, tile, indicador de aba); --evet-mod-ink paints texto e glifo (AA sobre
        branco e sobre o tint, §17); o tint sai do próprio módulo. Botão primário, cores semânticas e cores de
        dados NÃO mudam: chrome colorido, ação consistente. ---- */
.evet-mod-painel { --evet-mod: #00A08E; --evet-mod-ink: #007669; --evet-mod-glifo: #007669; --evet-mod-tint: #C8F4EF; }
.evet-mod-agenda { --evet-mod: #0077A3; --evet-mod-ink: #006B92; --evet-mod-glifo: #006B92; --evet-mod-tint: #CDE9F6; }
.evet-mod-prontuarios { --evet-mod: #C153EC; --evet-mod-ink: #9600C5; --evet-mod-glifo: #9600C5; --evet-mod-tint: #ECD2F6; }
.evet-mod-receitas { --evet-mod: #ED4B70; --evet-mod-ink: #BC003E; --evet-mod-glifo: #BC003E; --evet-mod-tint: #F7D2D7; }
.evet-mod-estoque { --evet-mod: #BE8300; --evet-mod-ink: #895F00; --evet-mod-glifo: #895F00; --evet-mod-tint: #F9E7C3; }
.evet-mod-livros { --evet-mod: #7002F6; --evet-mod-ink: #6A00EF; --evet-mod-glifo: #6A00EF; --evet-mod-tint: #DDD3F8; }
.evet-mod-financeiro { --evet-mod: #008444; --evet-mod-ink: #00783F; --evet-mod-glifo: #00783F; --evet-mod-tint: #C7F5DC; }
.evet-mod-escala { --evet-mod: #6C89D1; --evet-mod-ink: #405CA6; --evet-mod-glifo: #405CA6; --evet-mod-tint: #D8DEEF; }
.evet-mod-internacao { --evet-mod: #CF00A0; --evet-mod-ink: #B00088; --evet-mod-glifo: #B00088; --evet-mod-tint: #F5D1EB; }
.evet-mod-loja { --evet-mod: #BC4600; --evet-mod-ink: #A73F00; --evet-mod-glifo: #A73F00; --evet-mod-tint: #F5DACE; }
.evet-mod-inteligencia { --evet-mod: #55A300; --evet-mod-ink: #3F7400; --evet-mod-glifo: #3F7400; --evet-mod-tint: #DAF1C8; }
.evet-mod-ajustes { --evet-mod: #747A86; --evet-mod-ink: #5E626B; --evet-mod-glifo: #5E626B; --evet-mod-tint: #E0E1E3; }

[data-evet-tema="vivo"] .evet-mod-painel { --evet-mod: #00A08E; --evet-mod-ink: #007669; --evet-mod-glifo: #007669; --evet-mod-tint: #9AFFF4; }
[data-evet-tema="vivo"] .evet-mod-agenda { --evet-mod: #0077A3; --evet-mod-ink: #006B92; --evet-mod-glifo: #006B92; --evet-mod-tint: #C0EBFF; }
[data-evet-tema="vivo"] .evet-mod-prontuarios { --evet-mod: #CB37FF; --evet-mod-ink: #9600C5; --evet-mod-glifo: #9600C5; --evet-mod-tint: #F1CDFF; }
[data-evet-tema="vivo"] .evet-mod-receitas { --evet-mod: #FF2569; --evet-mod-ink: #BC003E; --evet-mod-glifo: #BC003E; --evet-mod-tint: #FFCED6; }
[data-evet-tema="vivo"] .evet-mod-estoque { --evet-mod: #BE8300; --evet-mod-ink: #895F00; --evet-mod-glifo: #895F00; --evet-mod-tint: #FFE6B3; }
[data-evet-tema="vivo"] .evet-mod-livros { --evet-mod: #7000F7; --evet-mod-ink: #6A00EF; --evet-mod-glifo: #6A00EF; --evet-mod-tint: #DED1FF; }
[data-evet-tema="vivo"] .evet-mod-financeiro { --evet-mod: #008444; --evet-mod-ink: #00783F; --evet-mod-glifo: #00783F; --evet-mod-tint: #A5FFD2; }
[data-evet-tema="vivo"] .evet-mod-escala { --evet-mod: #5582FF; --evet-mod-ink: #1B35FF; --evet-mod-glifo: #1B35FF; --evet-mod-tint: #D2DDFF; }
[data-evet-tema="vivo"] .evet-mod-internacao { --evet-mod: #CF00A0; --evet-mod-ink: #B00088; --evet-mod-glifo: #B00088; --evet-mod-tint: #FFCBF1; }
[data-evet-tema="vivo"] .evet-mod-loja { --evet-mod: #BC4600; --evet-mod-ink: #A73F00; --evet-mod-glifo: #A73F00; --evet-mod-tint: #FFD7C5; }
[data-evet-tema="vivo"] .evet-mod-inteligencia { --evet-mod: #55A300; --evet-mod-ink: #3F7400; --evet-mod-glifo: #3F7400; --evet-mod-tint: #BEFF82; }
[data-evet-tema="vivo"] .evet-mod-ajustes { --evet-mod: #747A86; --evet-mod-ink: #5E626B; --evet-mod-glifo: #5E626B; --evet-mod-tint: #E0E1E3; }

[data-evet-tema="escuro"] .evet-mod-painel { --evet-mod: #00A08E; --evet-mod-ink: #008576; --evet-mod-glifo: #00A08E; --evet-mod-tint: #00120F; }
[data-evet-tema="escuro"] .evet-mod-agenda { --evet-mod: #0077A3; --evet-mod-ink: #007FAC; --evet-mod-glifo: #2598CA; --evet-mod-tint: #00101B; }
[data-evet-tema="escuro"] .evet-mod-prontuarios { --evet-mod: #C153EC; --evet-mod-ink: #B631E9; --evet-mod-glifo: #D056FF; --evet-mod-tint: #1F002B; }
[data-evet-tema="escuro"] .evet-mod-receitas { --evet-mod: #ED4B70; --evet-mod-ink: #E42253; --evet-mod-glifo: #FF4875; --evet-mod-tint: #270007; }
[data-evet-tema="escuro"] .evet-mod-estoque { --evet-mod: #BE8300; --evet-mod-ink: #9D6E00; --evet-mod-glifo: #BD8300; --evet-mod-tint: #180C00; }
[data-evet-tema="escuro"] .evet-mod-livros { --evet-mod: #7002F6; --evet-mod-ink: #8154FF; --evet-mod-glifo: #9578FF; --evet-mod-tint: #130434; }
[data-evet-tema="escuro"] .evet-mod-financeiro { --evet-mod: #008444; --evet-mod-ink: #008748; --evet-mod-glifo: #00A556; --evet-mod-tint: #001304; }
[data-evet-tema="escuro"] .evet-mod-escala { --evet-mod: #6C89D1; --evet-mod-ink: #5674C0; --evet-mod-glifo: #6D8DDB; --evet-mod-tint: #020936; }
[data-evet-tema="escuro"] .evet-mod-internacao { --evet-mod: #CF00A0; --evet-mod-ink: #D422A7; --evet-mod-glifo: #F346C0; --evet-mod-tint: #25001A; }
[data-evet-tema="escuro"] .evet-mod-loja { --evet-mod: #BC4600; --evet-mod-ink: #C65318; --evet-mod-glifo: #E26C39; --evet-mod-tint: #240500; }
[data-evet-tema="escuro"] .evet-mod-inteligencia { --evet-mod: #55A300; --evet-mod-ink: #498400; --evet-mod-glifo: #58A119; --evet-mod-tint: #031200; }
[data-evet-tema="escuro"] .evet-mod-ajustes { --evet-mod: #747A86; --evet-mod-ink: #71767F; --evet-mod-glifo: #8A8F98; --evet-mod-tint: #0B0F15; }

[data-evet-tema="vivo-escuro"] .evet-mod-painel { --evet-mod: #00A08E; --evet-mod-ink: #008576; --evet-mod-glifo: #00A08E; --evet-mod-tint: #00120F; }
[data-evet-tema="vivo-escuro"] .evet-mod-agenda { --evet-mod: #0077A3; --evet-mod-ink: #007FAC; --evet-mod-glifo: #0098CF; --evet-mod-tint: #00101B; }
[data-evet-tema="vivo-escuro"] .evet-mod-prontuarios { --evet-mod: #CB37FF; --evet-mod-ink: #BD00F7; --evet-mod-glifo: #D056FF; --evet-mod-tint: #1F002B; }
[data-evet-tema="vivo-escuro"] .evet-mod-receitas { --evet-mod: #FF2569; --evet-mod-ink: #EA004F; --evet-mod-glifo: #FF4875; --evet-mod-tint: #270007; }
[data-evet-tema="vivo-escuro"] .evet-mod-estoque { --evet-mod: #BE8300; --evet-mod-ink: #9D6E00; --evet-mod-glifo: #BD8300; --evet-mod-tint: #180C00; }
[data-evet-tema="vivo-escuro"] .evet-mod-livros { --evet-mod: #7000F7; --evet-mod-ink: #8154FF; --evet-mod-glifo: #9578FF; --evet-mod-tint: #130434; }
[data-evet-tema="vivo-escuro"] .evet-mod-financeiro { --evet-mod: #008444; --evet-mod-ink: #008748; --evet-mod-glifo: #00A556; --evet-mod-tint: #001304; }
[data-evet-tema="vivo-escuro"] .evet-mod-escala { --evet-mod: #5582FF; --evet-mod-ink: #3A69FF; --evet-mod-glifo: #5D88FF; --evet-mod-tint: #020936; }
[data-evet-tema="vivo-escuro"] .evet-mod-internacao { --evet-mod: #CF00A0; --evet-mod-ink: #DC00AB; --evet-mod-glifo: #FF2BC7; --evet-mod-tint: #25001A; }
[data-evet-tema="vivo-escuro"] .evet-mod-loja { --evet-mod: #BC4600; --evet-mod-ink: #CB4F00; --evet-mod-glifo: #F45E00; --evet-mod-tint: #240500; }
[data-evet-tema="vivo-escuro"] .evet-mod-inteligencia { --evet-mod: #55A300; --evet-mod-ink: #498400; --evet-mod-glifo: #54A000; --evet-mod-tint: #031200; }
[data-evet-tema="vivo-escuro"] .evet-mod-ajustes { --evet-mod: #747A86; --evet-mod-ink: #71767F; --evet-mod-glifo: #8A8F98; --evet-mod-tint: #0B0F15; }

/* Sidebar: o ícone leva a tinta do módulo do GRUPO, e as variáveis vêm do `.evet-nav-bloco` — que é o
   elemento que carrega a classe `.evet-mod-<slug>`. Mirar o BLOCO, e não cada item, é o que garante que
   todos os ícones de um grupo tenham a mesma cor (Marcelo, 22/09/2026): antes cada item trazia a sua, e
   Atendimento saía com três cores lado a lado — painel, agenda e prontuários.
   Continua valendo a lição de 15/09/2026: o `Class` do MudNavLink cai no invólucro `.mud-nav-item`, e não
   no `<a class="mud-nav-link">`, então é o invólucro que o CSS alcança. */
.evet-drawer .evet-nav-bloco .mud-nav-item .mud-nav-link-icon {
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
}

/* Hover: o fundo vem da cor do BLOCO, e não do cinza que o MudBlazor usa por padrão (Marcelo,
   23/09/2026). Num menu em que cada bloco tem o seu tom, um realce cinza é a única coisa da barra que não
   pertence a lugar nenhum — e, por cima do tint do bloco, ele ainda suja a cor em vez de realçá-la.
   É uma lavagem da TINTA do módulo sobre o tint do bloco: mais forte que o fundo e bem mais fraca que a
   caixa cheia do item selecionado, que continua sendo o que responde "onde eu estou?" de relance. */
.evet-drawer .evet-nav-bloco .mud-nav-item .mud-nav-link:hover {
    background: color-mix(in srgb, var(--evet-mod-glifo, var(--evet-mod-ink)) 14%, transparent);
}

/* Item selecionado: CAIXA CHEIA na tinta do módulo, texto e glifo em branco (Marcelo, 22/09/2026).
   Antes era um tint claro com uma barra de 4 px à esquerda — correto e discreto demais: numa barra de treze
   itens, "um pouco mais claro que o vizinho" não responde "onde eu estou?" de relance, ainda menos numa tela
   de recepção mal calibrada. A tinta é a mesma cor que já pintava o texto do módulo, e ela carrega branco a
   4,5:1 nos doze módulos — há teste (EvetThemeTests). */
.evet-drawer .evet-nav-bloco .mud-nav-item .mud-nav-link.active {
    background: var(--evet-mod-ink);
    color: var(--evet-branco);
    font-weight: 600;
    border-radius: var(--evet-radius-control);
    margin: 2px 8px;
    box-shadow: var(--evet-sombra);
}

.evet-drawer .evet-nav-bloco .mud-nav-item .mud-nav-link.active .mud-nav-link-icon,
.evet-drawer .evet-nav-bloco .mud-nav-item .mud-nav-link.active .mud-nav-link-text {
    color: var(--evet-branco);
}

/* O hover do MudBlazor clareia o fundo, e sobre a caixa cheia isso apagaria o texto branco. */
.evet-drawer .evet-nav-bloco .mud-nav-item .mud-nav-link.active:hover {
    background: var(--evet-mod-ink);
    filter: brightness(1.12);
}

/* No modo mini de 64 px só o ícone aparece: a caixa vira um quadrado, sem a margem que a alongava. */
.mud-drawer--closed.mud-drawer-mini .evet-drawer .evet-nav-bloco .mud-nav-link.active,
.mud-drawer-mini:not(.mud-drawer--open) .evet-drawer .evet-nav-bloco .mud-nav-link.active {
    margin: 2px 6px;
}

/* ---- Barra lateral agrupada (Marcelo, 15/09/2026) ----
   Doze itens numa lista corrida viram uma parede. O rótulo do grupo é pequeno, em névoa, e some no modo mini
   de 64 px — onde só cabe o ícone — deixando no lugar um traço que continua separando os blocos. */
.evet-nav-grupo {
    padding: 16px 16px 4px;
    font: 600 11px/1.4 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--evet-texto-2);
    white-space: nowrap;
    overflow: hidden;

    /* ⚠ A CAIXA é a mesma dos dois tipos de rótulo, e isso é o que os alinha (Marcelo, 02/10/2026:
       *"deixe o Cadastros e Atendimento igual ao Inteligência"*).

       Medido antes: o rótulo FIXO (Atendimento, Cadastros) tinha **4 px** acima do texto e o RECOLHÍVEL
       (Inteligência, Internação…) tinha **8,3 px** — dois rótulos iguais na tela, desalinhados em quase
       o dobro. A diferença não era padding: o recolhível é um <button> que levava `min-height: 32px` e
       `align-items: center`, então a linha de 15,4 px era centrada numa caixa de 24 px e ganhava 4,3 px
       de folga que o <div> fixo não tinha.

       Por isso estas três declarações vivem AQUI e não na regra do botão: a caixa é do rótulo, não do
       controle. Quem acrescentar um terceiro tipo de rótulo herda o alinhamento em vez de redescobri-lo. */
    display: flex;
    align-items: center;
    min-height: 32px;
}

/* Cada bloco do menu leva o tom do seu módulo (manual §18). O tom é o --evet-mod-tint da classe
   .evet-mod-<slug> que o MainLayout aplica ao bloco — não há hex aqui, como em todo o resto. */
.evet-nav-bloco {
    background: var(--evet-mod-tint, transparent);
    border-radius: 12px;
    margin: 4px 8px;
    padding-bottom: 4px;
}

/* ⚠ Bloco RECOLHIDO não leva o respiro de baixo, senão o rótulo sai torto (Marcelo, 02/10/2026).

   O `padding-bottom: 4px` acima existe para o ÚLTIMO ITEM não encostar na borda do bloco. Fechado não há
   item nenhum, e os 4 px viram só um empurrão: o cabeçalho ficava com **6 px acima e 10 px abaixo** do
   conteúdo — medido no Edge, não estimado —, e o texto subia 4 px dentro da caixa colorida.

   A conta de onde saem os 6 e os 10, porque ela não é óbvia: o botão tem `min-height: 32px` e padding
   vertical de 4, então a caixa de conteúdo fica com 24 px; o chevron tem 20 px e o `align-items: center`
   o centra, sobrando 2 px de cada lado. Acima: 4 + 2 = 6. Abaixo: 2 + 4 + os 4 do bloco = 10.
   Zerando o do bloco a conta fecha em 6 e 6, e a altura cai de 36 para 32 px.

   É `:has()` em vez de uma classe no markup porque o estado já está no DOM — o irmão de baixo leva
   `.evet-nav-itens-recolhido` —, e uma segunda marca para o mesmo estado é a próxima a divergir. */
.evet-nav-bloco:has(> .evet-nav-itens-recolhido) {
    padding-bottom: 0;
}

/* No mini de 64 px o "recolhido" é mentira: o CSS mais abaixo devolve `grid-template-rows: 1fr` para os
   itens não ficarem inalcançáveis atrás de um botão que ali nem se vê. Então o respiro volta junto. */
.mud-drawer--closed.mud-drawer-mini .evet-nav-bloco:has(> .evet-nav-itens-recolhido),
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-bloco:has(> .evet-nav-itens-recolhido) {
    padding-bottom: 4px;
}

.evet-nav-bloco .mud-nav-link {
    background: transparent;
}

/* O rótulo vira botão quando o bloco recolhe. Ele é um <button> de verdade, e não uma div com onclick:
   teclado e leitor de tela precisam alcançá-lo. */
.evet-nav-grupo-botao {
    /* `display: flex`, `align-items: center` e `min-height: 32px` saíram daqui em 02/10/2026 e subiram para
       o `.evet-nav-grupo`: eram eles que faziam o rótulo recolhível ficar 4,3 px mais baixo que o fixo. */
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

/* ⚠ NÃO devolva `font: inherit` nem `color: inherit` à regra acima.
   O elemento já leva `.evet-nav-grupo`, que define os dois — mas as duas regras têm a MESMA
   especificidade, e esta vem depois, então o `inherit` vencia e o rótulo do grupo recolhível
   saía com a fonte do corpo (14 px, peso normal) em vez dos 11 px em versalete dos grupos fixos.
   O resultado era um menu com dois tamanhos de rótulo: Atendimento e Cadastros num, os outros
   seis noutro (Marcelo, 22/09/2026). As duas linhas existiam para neutralizar o padrão de
   <button> do navegador, o que é desnecessário: regra de autor vence folha do agente de usuário
   sem precisar de `inherit`. Há teste. */

.evet-nav-grupo-botao:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: -2px;
    border-radius: 8px;
}

/* Abrir e fechar com animação (Marcelo, 28/09/2026). Era `display: none`, que não anima — e num acordeão,
   em que abrir um bloco fecha o outro, o salto é duplo: uma lista some e outra aparece no mesmo quadro, e o
   olho perde onde estava.

   A conta é `grid-template-rows: 1fr -> 0fr`, e não `max-height`: o `max-height` exige adivinhar uma altura
   máxima, e ou ela é curta demais (corta o bloco de nove itens) ou é longa demais (a animação fica com uma
   pausa no fim, porque percorre o que não existe). O grid anima até a altura real, seja ela qual for.

   Ela exige um filho único que role — daí o `.evet-nav-itens-interno` no MainLayout. Sem ele, cada item
   viraria uma linha do grid e só a primeira encolheria. */
.evet-nav-itens {
    display: grid;
    grid-template-rows: 1fr;

    /* 420 ms ao ABRIR (Marcelo, 28/09/2026, terceira passada: “movimento suave”). A curva vale tanto quanto
       o tempo, e aqui ela mudou de sentido: `cubic-bezier(0.2, 0, 0, 1)` arranca forte e freia no fim, que
       é a leitura de gaveta empurrada. A de seno (`0.37, 0, 0.63, 1`) começa devagar E termina devagar, sem
       arranque nem batida — é o que se pede de um movimento suave. */
    transition: grid-template-rows 420ms cubic-bezier(0.37, 0, 0.63, 1);
}

/* A altura sozinha revela o bloco por recorte: o texto entra inteiro, só tapado. Com o esmaecido junto ele
   **aparece** em vez de ser descoberto, e é daí que vem a maior parte da suavidade. O atraso de 120 ms deixa
   a linha começar a abrir antes de o conteúdo acender, senão o texto flutua sobre o que ainda não é espaço. */
.evet-nav-itens > .evet-nav-itens-interno {
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    transition: opacity 300ms cubic-bezier(0.37, 0, 0.63, 1) 120ms;
}

/* **Fecha um pouco mais rápido do que abre**, e é de propósito. Quem abre um bloco quer ver o que
   apareceu, e vale a pena revelar com calma; quem fecha já decidiu, e o que sobra é esperar. No acordeão os
   dois acontecem juntos — o que fecha sai na frente e deixa o lugar pronto para o que entra. A diferença continua
   em 60 ms, mas agora é um sexto do todo em vez de um quarto — fechar num sopro era justamente o que
   tirava a suavidade do conjunto. */
.evet-nav-itens-recolhido {
    grid-template-rows: 0fr;
    transition-duration: 360ms;
}

/* Ao fechar, o conteúdo apaga primeiro e sem atraso — esmaecer depois seria assistir ao texto ser cortado. */
.evet-nav-itens-recolhido > .evet-nav-itens-interno {
    opacity: 0;
    transition-duration: 200ms;
    transition-delay: 0ms;
}

/* Quem pediu menos movimento recebe o resultado sem o caminho — a mesma regra do aviso de gravação. */
@media (prefers-reduced-motion: reduce) {
    .evet-nav-itens,
    .evet-nav-itens > .evet-nav-itens-interno {
        transition: none;
    }
}

/* No modo mini (64 px) o rótulo é um traço e o botão não se vê — esconder itens atrás dele os deixaria
   inalcançáveis, então ali tudo aparece. ⚠️ São DUAS coisas desde o esmaecido: devolver a altura sem
   devolver a opacidade deixaria o item ocupando espaço e invisível, que é a pior das duas. */
.mud-drawer--closed.mud-drawer-mini .evet-nav-itens-recolhido,
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-itens-recolhido {
    grid-template-rows: 1fr;
}

.mud-drawer--closed.mud-drawer-mini .evet-nav-itens-recolhido > .evet-nav-itens-interno,
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-itens-recolhido > .evet-nav-itens-interno {
    opacity: 1;
}

.mud-drawer--closed.mud-drawer-mini .evet-nav-bloco,
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-bloco {
    background: transparent;
    margin: 0;
}

.evet-nav-grupo:first-child {
    padding-top: 4px;
}

.mud-drawer--closed.mud-drawer-mini .evet-nav-grupo,
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-grupo {
    height: 1px;
    /* ⚠ `min-height: 0` é obrigatório desde 02/10/2026: o rótulo ganhou `min-height: 32px` para alinhar fixo
       e recolhível, e `min-height` VENCE `height` — sem esta linha o traço de 1 px do menu de 64 px viraria
       uma barra de 32 px em cada bloco. */
    min-height: 0;
    padding: 0;
    margin: 8px 12px;
    background: var(--evet-nevoa-200);
    color: transparent;
    font-size: 0;
}

/* O rótulo-botão precisa virar o MESMO traço que o rótulo fixo vira: sem isto ele mantém o min-height de
   32 px e o seu ícone, e o menu de 64 px fica com um buraco no lugar de cada bloco recolhível (Marcelo,
   17/09/2026). O conteúdo some junto — um ícone de expandir num menu onde nada expande é um botão que mente. */
.mud-drawer--closed.mud-drawer-mini .evet-nav-grupo-botao,
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-grupo-botao {
    display: block;
    min-height: 0;
    gap: 0;
    pointer-events: none;
}

.mud-drawer--closed.mud-drawer-mini .evet-nav-grupo-botao > *,
.mud-drawer-mini:not(.mud-drawer--open) .evet-nav-grupo-botao > * {
    display: none;
}

/* Menu inferior no celular */
.evet-bottom-link[class*="evet-mod-"].active,
.evet-bottom-link[class*="evet-mod-"].active .mud-icon-root {
    color: var(--evet-branco);
}

/* Mesma regra da barra lateral, em pílula: no celular a pergunta "onde eu estou?" é ainda mais frequente,
   porque não há rótulo de grupo à vista para se orientar. */
.evet-bottom-link[class*="evet-mod-"].active {
    background: var(--evet-mod-ink);
    border-radius: 999px;
    padding: 4px 10px;
}

/* A barra de 4 px à esquerda e o título na tinta saíram em 28/09/2026: o cabeçalho virou a caixa cheia do
   item selecionado, e a cor chega pelo `--evet-mod-ink` que esta mesma classe já define. Ver o bloco
   `.evet-page-header` lá em cima. */

/* Estados vazios do módulo.

   A aba ativa saiu daqui em 25/09/2026: ela passou a ser caixa cheia na tinta com texto branco (ver §8), e a
   regra que pintava o TEXTO com a tinta do módulo passaria branco sobre branco. O `--evet-mod-ink` continua
   chegando por herança da página, que é o que faz a caixa nascer com a cor do módulo sem uma regra por aqui. */

.evet-page[class*="evet-mod-"] .evet-empty-icon {
    background: var(--evet-mod-tint);
}

.evet-page[class*="evet-mod-"] .evet-empty-icon .mud-icon-root {
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
}

/* Tile do ícone do módulo: fundo no tint, glifo na tinta (manual §18) */
.evet-mod-tile {
    width: 44px;
    height: 44px;
    border-radius: var(--evet-radius-control);
    background: var(--evet-mod-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.evet-mod-tile .mud-icon-root {
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
}

.evet-mod-name {
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
    font-weight: 600;
}

.evet-mod-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* O traço da assinatura do tutor (SVG). Fica aqui e não no componente porque variável CSS não
   vale em atributo de apresentação do SVG — e era por isso que aquele arquivo carregava hex cru,
   parado na paleta v1.3 até 22/09/2026. */
.evet-assinatura-base {
    stroke: var(--evet-nevoa-200);
}

.evet-assinatura-traco {
    stroke: var(--evet-ardosia-700);
}

/* As três cores utilizáveis de cada módulo, lado a lado no guia de estilo (/estilo §18). */
.evet-mod-amostras {
    display: flex;
    gap: 4px;
    margin: 6px 0 4px;
}

.evet-mod-amostra {
    width: 20px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--evet-borda);
}

/* Demonstração do item de menu: o mesmo par (normal | selecionado) para quatro módulos, lado a lado. */
.evet-nav-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.evet-nav-demo > div {
    background: var(--evet-mod-tint);
    border-radius: var(--evet-radius-card);
    padding: 8px;
    min-width: 168px;
}

.evet-nav-demo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--evet-radius-control);
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
    font: 400 0.875rem/1.4 "Inter", "Segoe UI", sans-serif;
}

.evet-nav-demo-ativo {
    background: var(--evet-mod-ink);
    color: var(--evet-branco);
    font-weight: 600;
    box-shadow: var(--evet-sombra);
    margin-top: 4px;
}

/* ---- §15 Avatares: redondos; pessoas em lavanda/céu/âmbar (tom estável), pacientes em verde-água; 40/32/24 px ---- */
.mud-avatar.evet-avatar {
    font: 600 0.8125rem/1 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
    letter-spacing: 0.01em;
    cursor: inherit;
}

.mud-avatar.evet-avatar-40 {
    width: 40px;
    height: 40px;
}

.mud-avatar.evet-avatar-32 {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
}

.mud-avatar.evet-avatar-24 {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
}

.mud-avatar.evet-avatar-lavanda {
    background: var(--evet-lavanda-300);
}

.mud-avatar.evet-avatar-ceu {
    background: var(--evet-ceu-300);
}

.mud-avatar.evet-avatar-ambar {
    background: var(--evet-ambar-300);
}

.mud-avatar.evet-avatar-paciente {
    background: var(--evet-superficie);
    border: 2px solid var(--evet-verde-agua-500);
    color: var(--evet-primaria-texto);
}

.mud-menu .mud-avatar.evet-avatar {
    cursor: pointer;
}

/* ---- §2 Logotipo: tagline e empilhado ---- */
.evet-wordmark-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.evet-tagline {
    font: 500 calc(var(--evet-s) * 0.42) / 1.2 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
    color: var(--evet-texto-2);
    margin-top: calc(var(--evet-s) * 0.14);
    white-space: nowrap;
}

.evet-lockup-stacked {
    flex-direction: column;
    gap: calc(var(--evet-s) * 0.25);
}

.evet-lockup-stacked .evet-wordmark-block {
    align-items: center;
    text-align: center;
}

.evet-lockup-ondark .evet-tagline {
    color: rgba(255, 255, 255, 0.8);
}

.evet-scale-row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

/* ---- §9 Modais (máx. 480 px) e toasts ---- */
.mud-dialog.mud-dialog-width-xs {
    max-width: 480px;
    width: 100%;
}

.mud-snackbar {
    border-radius: var(--evet-radius-control);
}

/* ---- §15 Spinner dentro do botão enquanto o servidor não responde (Shared/BusyButton) ---- */
.mud-button-root .evet-busy-spinner {
    margin-right: 8px;
}

.mud-button-root[aria-busy="true"] {
    cursor: progress;
}

/* ---- Logotipo clicável na barra: sem sublinhado, com o anel de foco do manual ---- */
.evet-lockup-link {
    display: inline-flex;
    text-decoration: none;
    border-radius: var(--evet-radius-control);
}

.evet-lockup-link:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: 4px;
}

/* ---- §10 Estados vazios ---- */
.evet-empty {
    text-align: center;
    padding: 40px 24px;
}

.evet-empty-compact {
    padding: 20px 16px;
}

.evet-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--evet-tint-primaria);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.evet-empty-icon .mud-icon-root {
    font-size: 32px;
    color: var(--evet-verde-agua-500);
}

.evet-empty-compact .evet-empty-icon {
    width: 44px;
    height: 44px;
}

.evet-empty-compact .evet-empty-icon .mud-icon-root {
    font-size: 24px;
}

/* ---- §11–§12 Legenda de cores por serviço; mini calendário inline ---- */
.evet-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--evet-texto);
}

.evet-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.evet-mini-calendar .mud-picker-container {
    border-radius: var(--evet-radius-card);
    border: 1px solid var(--evet-borda);
    box-shadow: none;
}

/* ---- §13 Navegação secundária: breadcrumbs, paginação, stepper, menu de ações ---- */
.mud-breadcrumbs {
    padding: 0;
    font-size: 0.875rem;
}

.mud-breadcrumb-item > a {
    color: var(--evet-primaria-texto);
    font-weight: 500;
    text-decoration: none;
}

.mud-breadcrumb-item > a:hover {
    text-decoration: underline;
}

.mud-breadcrumb-item.mud-disabled > a {
    color: var(--evet-texto);
    font-weight: 500;
}

.mud-breadcrumb-separator > span {
    color: var(--evet-texto-2);
    opacity: 1;
}

.mud-pagination .mud-pagination-item > * {
    border-radius: 8px;
}

.evet-pagination-summary {
    color: var(--evet-texto-2);
    font-size: 0.8125rem;
}

.mud-stepper .mud-stepper-nav .mud-step {
    padding: 16px 12px;
}

.mud-stepper .mud-stepper-nav .mud-step .mud-step-label .mud-step-label-icon {
    width: 28px;
    height: 28px;
    font-weight: 600;
}

.mud-menu-item.evet-destructive,
.mud-menu-item.evet-destructive .mud-icon-root,
.mud-menu-item.evet-destructive .mud-menu-item-icon {
    color: var(--evet-erro-texto);
}

/* ---- §14 Entrada avançada: upload por arraste, busca global agrupada ---- */
.mud-file-upload .mud-file-upload-dragarea {
    padding: 0;
    border: 0;
    background: transparent;
}

/* ── Logotipo da clínica (08/10/2026) ───────────────────────────────────────────
   A prévia mostra a marca sobre DOIS fundos, claro e escuro, e isso é correção e não enfeite: logotipo com
   letra branca desaparece no tema claro e logotipo com letra escura desaparece no escuro, e o VetOrbit tem quatro
   temas. Quem sobe vê isso aqui em vez de descobrir pelo suporte.
   ⚠️ Os dois fundos são escritos à mão de propósito — são AMOSTRAS de tema, não superfícies do tema atual, e
   por isso NÃO podem usar `--evet-fundo`/`--evet-superficie`, que mudam com o tema e deixariam os dois
   quadrados iguais justamente no tema em que um deles importa. */
.evet-logo-previa {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.evet-logo-fundo {
    flex: 1 1 200px;
    min-width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: var(--evet-radius-card);
    border: 1px solid var(--evet-borda);
}

.evet-logo-fundo img {
    /* O logotipo é quase sempre largo e baixo: o teto é a ALTURA, e a largura acompanha. */
    max-height: 72px;
    max-width: 100%;
    height: auto;
    width: auto;
}

.evet-logo-fundo-claro {
    background: #FFFFFF;
}

.evet-logo-fundo-escuro {
    background: #1F2633;
}

.evet-dropzone {
    border: 2px dashed var(--evet-verde-agua-300);
    border-radius: var(--evet-radius-card);
    background: var(--evet-tint-primaria);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.evet-dropzone:hover {
    border-color: var(--evet-verde-agua-500);
    background: #D9F1ED;
}

/* Com um arquivo pairando sobre a área. A classe é posta pelo js/arrastar.js, e não pelo MudBlazor: com
   CustomContent ele não renderiza a dragarea nem liga o arraste (ver o comentário no arquivo). O realce é
   mais forte que o de hover de propósito — é o que diz "solte aqui" em vez de "clique aqui". */
.evet-dropzone.arrastando {
    border-color: var(--evet-primaria-texto);
    border-style: solid;
    background: #D9F1ED;
}

.evet-dropzone-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--evet-superficie);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.evet-dropzone-icon .mud-icon-root {
    color: var(--evet-primaria-texto);
}

/* A espera enquanto o arquivo escolhido é lido (06/10/2026, pedido de Marcelo). Mesma métrica da área de
   seleção, para a janela não saltar quando um estado troca pelo outro.

   ⚠️ NÃO leva a classe `.evet-dropzone`, e isso é a decisão: o `js/arrastar.js` acende o realce "solte
   aqui" em tudo que a tiver, e aqui não há input nenhum para receber o arquivo — prometer um alvo que
   acabou de sair do DOM é pior que não realçar. Borda sólida em vez de tracejada pela mesma razão: o
   tracejado é o convite a soltar algo. */
.evet-nota-lendo {
    border: 2px solid var(--evet-verde-agua-300);
    border-radius: var(--evet-radius-card);
    background: var(--evet-tint-primaria);
    padding: 24px 16px;
    text-align: center;
}

.evet-search-results {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie);
    box-shadow: var(--evet-sombra);
    padding: 8px;
    max-width: 480px;
}

.evet-search-group {
    display: block;
    padding: 8px 12px 4px;
    font: 600 0.6875rem/1.2 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--evet-texto-2);
}

.evet-search-item {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--evet-texto);
}

.evet-search-item.active {
    background: var(--evet-tint-primaria);
}

/* ---- §15 Carregamento e progresso ---- */
.evet-progress-label {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--evet-texto-2);
}

/* ---- §16 Documentos e e-mail (mocks do guia) ---- */
.evet-doc-mock {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie);
    padding: 16px;
}

.evet-doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--evet-borda);
}

.evet-doc-title {
    font: 600 0.75rem/1.4 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: right;
    color: var(--evet-texto);
}

.evet-doc-number {
    font: 400 0.75rem/1.4 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: var(--evet-texto-2);
    font-variant-numeric: tabular-nums;
}

.evet-doc-line {
    height: 8px;
    border-radius: 4px;
    background: var(--evet-nevoa-200);
    opacity: 0.6;
    margin-top: 10px;
}

.evet-seal {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: var(--evet-radius-control);
    background: var(--evet-tint-primaria);
}

.evet-seal .mud-icon-root {
    color: var(--evet-sucesso-texto);
}

.evet-mail-mock {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie);
    overflow: hidden;
}

.evet-mail-header {
    background: var(--evet-verde-agua-500);
    padding: 14px 16px;
}

.evet-mail-footer {
    border-top: 1px solid var(--evet-borda);
    padding: 10px 16px 12px;
    font-size: 0.75rem;
    color: var(--evet-texto-2);
}

/* ---- §17 Tabela de contraste (guia) ---- */
.evet-contrast-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--evet-borda);
    font: 600 0.75rem/1 "Inter", "Segoe UI", sans-serif;
}

.evet-pass {
    color: var(--evet-sucesso-texto);
    font-weight: 600;
}

.evet-fail {
    color: var(--evet-erro-texto);
    font-weight: 600;
}

/* Barra de ações de uma tabela: título à esquerda, gatilho à direita. O respiro até a tabela é de 16 px —
   com os 8 px de antes o botão encostava no cabeçalho e os dois liam como um bloco só (Marcelo, 14/09/2026).
   Toda tela com tabela + "Adicionar X" usa esta classe, para o espaçamento ser o mesmo em todas. */
.evet-table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* ---- Formulário em duas colunas (Marcelo, 15/09/2026) ----
   Formulário longo em coluna única vira rolagem: a pessoa perde de vista o que já preencheu e o botão de
   salvar some abaixo da dobra. Da largura de tablet para cima os campos passam a duas colunas; abaixo disso
   voltam a uma, porque no celular duas colunas espremem o rótulo mais do que ajudam.
   Um campo que precisa da linha inteira — endereço, observações, resenha — leva `.evet-campo-inteiro`.
   Vale para qualquer tela com muitos campos: diálogo de cadastro, seção de configuração, ficha em edição. */
.evet-form-2col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 24px;
    align-items: start;
}

@media (min-width: 720px) {
    .evet-form-2col {
        grid-template-columns: 1fr 1fr;
    }
}

.evet-form-2col > .evet-campo-inteiro {
    grid-column: 1 / -1;
}

/* Título de seção dentro do formulário: ocupa a linha inteira e separa os blocos sem virar outro cartão. */
.evet-form-2col > .evet-form-secao {
    grid-column: 1 / -1;
    margin-top: 8px;
}

.evet-form-2col > .evet-form-secao:first-child {
    margin-top: 0;
}

/* Diálogo que carrega um formulário longo. O manual §9 fixa 480 px para os modais, que é a medida certa para
   confirmação e para formulário curto; um cadastro de quatorze campos nessa largura é uma coluna de rolagem.
   Desvio registrado na SPEC §4.5. */
.mud-dialog.evet-dialog-largo {
    max-width: 880px;
}

/* ---- O diálogo que carrega uma TABELA editável (04/10/2026) ----
   O terceiro tamanho, e a terceira exceção declarada ao modal de 480 px do manual §9. Ele existe para a
   importação da nota fiscal: cada linha tem destino, produto, quantidade e valor, e empilhar isso em
   880 px viraria trinta cartões e sessenta rolagens. A conferência linha a linha é o que torna aceitável
   aproveitar um arquivo que veio de fora, então a largura serve à conferência. */
.mud-dialog.evet-dialog-tabela {
    max-width: 1200px;
}

.evet-nota-cabecalho {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 20px;
    padding: 14px 16px;
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie-2);
}

.evet-nota-descricao {
    font: 600 14px/1.35 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

/* O que veio do arquivo e não se edita: código do fornecedor, lote, validade, unidade. Fica pequeno e
   junto, porque é referência — o que a pessoa decide está nas colunas à direita. */
.evet-nota-origem {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    font: 400 12px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

/* Por que o VetOrbit sugeriu aquele destino. ⚠️ Sugestão sem razão é palpite, e quem confere trinta linhas
   precisa saber em qual pode confiar de olhos fechados. */
.evet-nota-porque {
    margin-top: 4px;
    font: 400 12px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-primaria-texto);
}

.evet-nota-bloqueado {
    color: var(--evet-erro-texto);
}

.evet-nota-itens td {
    vertical-align: top;
}

/* ⚠️ "R$ 1.139,40" quebrava em duas linhas numa coluna de 120 px, e a tabela inteira ficava com alturas
   diferentes por linha — só a imagem pegou. Número de dinheiro não quebra, e alinha à direita para a
   vírgula ficar na mesma coluna: é assim que se confere uma nota de quarenta e cinco itens de relance. */
.evet-nota-itens th.text-right,
.evet-nota-itens td.text-right {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.evet-nota-numero {
    color: var(--evet-texto-2);
    font-variant-numeric: tabular-nums;
}

/* Onde a linha entra, como etiqueta e não como campo: a tabela virou leitura em 05/10/2026, e o que
   decide fica no diálogo que o lápis abre. */
.evet-nota-destino {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font: 600 12px/1.5 "Inter", "Segoe UI", sans-serif;
    white-space: nowrap;
}

.evet-nota-destino.entra {
    background: var(--evet-tint-primaria);
    color: var(--evet-primaria-texto);
}

.evet-nota-destino.fora {
    background: var(--evet-superficie-2);
    color: var(--evet-texto-2);
}

/* ⚠️ Coral, e não âmbar. Cheguei a escrever âmbar aqui com o argumento de que a linha de controlado não é
   erro de quem digitou — mas o manual §18 é explícito: coral 600 é erro, ação destrutiva E BLOQUEIO LEGAL.
   Isto é um bloqueio legal (RG-05). A etiqueta e o texto da célula precisavam concordar, e quem decide
   não é o meu argumento: é a paleta. */
/* ⚠️ Sem preenchimento, de propósito, e o motivo é um número: o coral do tema escuro sobre a
   superfície-2 dá 3,78:1 — abaixo dos 4,5:1 que a WCAG pede para texto de 12 px. Sobre a superfície da
   própria linha dá 4,54:1 e passa. Um preenchimento bonito que reprova contraste não é bonito: é um
   rótulo que parte da equipe não consegue ler. */
.evet-nota-destino.controlado {
    background: transparent;
    padding-left: 0;
    color: var(--evet-erro-texto);
}

/* O que a pessoa mexeu em relação ao que veio na nota. Quem confere trinta itens precisa ver de relance o
   que foi corrigido, senão a correção some no meio do que veio pronto. */
.evet-nota-corrigido {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--evet-tint-primaria);
    color: var(--evet-primaria-texto);
    font-weight: 600;
}

/* A ficha do item dentro do diálogo de edição: o que veio na nota, que não se edita. */
.evet-nota-origem-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 20px;
    padding: 14px 16px;
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie-2);
}

.evet-nota-danfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.evet-nota-danfe .mud-typography {
    flex: 1 1 320px;
}

/* Um dado só de leitura dentro do mesmo grid de duas colunas: rótulo pequeno em cima, valor embaixo. É a
   versão "ficha" do formulário — a tabela de rótulo/valor em coluna única desperdiçava metade da largura e
   obrigava a rolar uma ficha que cabe numa tela. */
/* O par rótulo/valor da ficha: nome pequeno em cinza em cima, valor embaixo.

   ⚠️ **A regra é por POSIÇÃO e não por tag**, e isso é conserto de um defeito real (Marcelo, 25/09/2026).
   A forma canônica é `<dl><dt>Total</dt><dd>R$ 180,00</dd></dl>`, e 82 lugares a usam. Mas 36 escreveram
   `<div><span>Total</span><strong>R$ 180,00</strong></div>` — e o `<span>` e o `<strong>` não recebiam estilo
   nenhum: sendo os dois inline, saíam **colados**, "TotalR$ 180,00", na conta do atendimento, no caixa e no
   DRE. Uma regra que só entende uma das duas formas é uma armadilha em que já se pisou 36 vezes, então ela
   passou a entender as duas: o primeiro filho é o rótulo, o que vier depois é o valor.

   Para código novo, prefira `<dl>/<dt>/<dd>`: é o que o leitor de tela anuncia como par nome/valor. */
.evet-dado {
    min-width: 0;
}

.evet-dado > :first-child {
    display: block;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--evet-texto-2);
}

.evet-dado > :first-child ~ * {
    display: block;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Campo de busca da lista de tutores: largo o bastante para um nome inteiro, sem tomar a barra toda. */
.evet-busca-tutor {
    flex: 0 1 320px;
    max-width: 320px;
}

/* Busca da lista de contas da plataforma: a mesma medida do campo de tutores — cabe um nome inteiro. */
.evet-busca {
    flex: 0 1 320px;
    max-width: 320px;
}

/* Seletor de período da escala: cabe "Outubro/2026 (01/10 a 31/10)". */
.evet-filtro-largo {
    flex: 0 1 320px;
    max-width: 320px;
}

/* A grade da escala (F-22): pessoas nas linhas, dias nas colunas — o formato da planilha que ela substitui.
   Rola no eixo X porque um mês tem 31 colunas e nenhuma tela tem. A coluna da pessoa fica grudada à
   esquerda: sem isso, rolar até o dia 28 faz perder de vista de quem é a linha. */
.evet-escala-grade {
    overflow-x: auto;
    border: 1px solid var(--evet-borda);
    border-radius: 12px;
    background: var(--evet-superficie);
}

.evet-escala-grade table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

.evet-escala-grade th,
.evet-escala-grade td {
    border-bottom: 1px solid var(--evet-borda);
    padding: 4px 2px;
    text-align: center;
    min-width: 30px;
}

.evet-escala-grade thead th {
    position: sticky;
    top: 0;
    background: var(--evet-superficie-2);
    font-weight: 600;
    line-height: 1.2;
    z-index: 1;
}

.evet-escala-grade thead th span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--evet-texto-2);
}

.evet-escala-pessoa {
    position: sticky;
    left: 0;
    background: var(--evet-superficie);
    text-align: left !important;
    min-width: 170px;
    padding-left: 12px !important;
    z-index: 2;
}

.evet-escala-grade thead .evet-escala-pessoa {
    background: var(--evet-superficie-2);
    z-index: 3;
}

.evet-escala-pessoa span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--evet-texto-2);
}

.evet-escala-fds {
    background: var(--evet-superficie-2);
}

.evet-escala-horas {
    min-width: 56px;
    font-variant-numeric: tabular-nums;
    padding-right: 12px !important;
}

/* A célula: um botão pequeno com a sigla do turno. A cor vem do turno quando ele declarou uma. */
.evet-escala-celula {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: var(--evet-turno, var(--evet-mod-tint));
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

.evet-escala-celula:disabled {
    cursor: default;
}

/* Sobreaviso não está na casa: fica só contornado, e é isso que a cobertura mínima também entende. */
.evet-escala-sobreaviso {
    background: transparent;
    border: 1px dashed var(--evet-mod);
}

.evet-escala-cancelada,
.evet-escala-trocada {
    background: transparent;
    color: var(--evet-texto-2);
    text-decoration: line-through;
}

/* Ausência não é turno: entra como marca discreta, para a coluna do dia não parecer vazia por engano. */
.evet-escala-ausente {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 6px;
    background: repeating-linear-gradient(45deg, var(--evet-superficie-2), var(--evet-superficie-2) 3px, var(--evet-nevoa-200) 3px, var(--evet-nevoa-200) 6px);
    color: var(--evet-texto-2);
    font-size: 11px;
    font-weight: 700;
}

/* Os dias do diálogo de escalar (F-22): quadradinhos que se clicam, porque marcar 22 dias num date picker
   um a um seria o motivo de a coordenação voltar para a planilha. */
.evet-alocar-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.evet-dia {
    width: 46px;
    padding: 4px 0;
    border: 1px solid var(--evet-borda);
    border-radius: 8px;
    background: var(--evet-superficie);
    color: var(--evet-texto);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.1;
}

.evet-dia span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--evet-texto-2);
}

.evet-dia-on {
    background: var(--evet-mod-tint);
    border-color: var(--evet-mod);
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
}

.evet-dia-on span {
    color: var(--evet-mod-glifo, var(--evet-mod-ink));
}

/* O mapa de leitos (F-23): cartões por setor, e a cor diz o ESTADO. Higienização tem cor própria porque
   ela não é "livre" — entre a alta e a próxima internação existe limpeza, e mostrar vaga antes dela é como um
   canil sujo recebe o próximo animal. */
.evet-leitos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.evet-leito {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 116px;
    padding: 10px 12px;
    border: 1px solid var(--evet-borda);
    border-left: 4px solid var(--evet-borda);
    border-radius: 10px;
    background: var(--evet-superficie);
    color: var(--evet-texto);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.evet-leito:disabled {
    cursor: default;
}

.evet-leito span {
    font-size: 11px;
    color: var(--evet-texto-2);
}

.evet-leito-livre {
    border-left-color: var(--evet-verde-agua-500);
}

.evet-leito-ocupado {
    border-left-color: var(--evet-mod);
    background: var(--evet-mod-tint);
}

.evet-leito-higiene {
    border-left-color: var(--evet-ambar-escuro);
    background: repeating-linear-gradient(45deg, var(--evet-superficie), var(--evet-superficie) 5px, var(--evet-superficie-2) 5px, var(--evet-superficie-2) 10px);
}

.evet-leito-fora {
    border-left-color: var(--evet-nevoa-500);
    background: var(--evet-superficie-2);
    color: var(--evet-texto-2);
}

/* A folha de medicação (F-23): um botão por horário, e a cor diz o que aconteceu com a dose. Âmbar é a cor
   de prazo — a dose que passou da hora sem registro é exatamente isso. Coral fica para o que foi recusado. */
.evet-doses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.evet-dose {
    padding: 4px 8px;
    border: 1px solid var(--evet-borda);
    border-radius: 8px;
    background: var(--evet-superficie);
    color: var(--evet-texto);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.evet-dose:disabled {
    cursor: default;
}

.evet-dose-ok {
    background: var(--evet-tint-primaria);
    border-color: var(--evet-verde-agua-500);
}

.evet-dose-atraso {
    background: var(--evet-ambar-50);
    border-color: var(--evet-ambar-escuro);
}

/* Passou da hora e ninguém registrou: é o que o painel da internação cobra. */
.evet-dose-vencida {
    background: var(--evet-ambar-50);
    border-color: var(--evet-ambar-escuro);
    color: var(--evet-ambar-escuro);
    font-weight: 700;
}

.evet-dose-nao {
    background: var(--evet-coral-50);
    border-color: var(--evet-erro-texto);
    text-decoration: line-through;
}

.evet-dose-suspensa {
    background: var(--evet-superficie-2);
    color: var(--evet-texto-2);
    text-decoration: line-through;
}

/* O que já está na conta continua listado, riscado: esconder faria a lista de itens da internação encolher
   a cada lançamento, e quem confere precisa ver o conjunto. */
.evet-riscado {
    color: var(--evet-texto-2);
    text-decoration: line-through;
}

/* Uma evolução corrigida continua na linha do tempo, esmaecida: apagá-la apagaria o que foi corrigido. */
.evet-corrigido {
    opacity: .6;
    border-left: 3px solid var(--evet-ambar-escuro);
}

/* Filtro de situação da lista de erros: estreito, porque são quatro palavras. */
.evet-filtro {
    flex: 0 1 200px;
    max-width: 200px;
}

/* A pilha de um erro registrado (F-21). Monoespaçada e rolável nos dois eixos: uma pilha de .NET tem linhas
   longas, e quebrá-las no meio do nome do método é o que torna a leitura impossível. A altura é limitada
   para o bloco de tratamento continuar visível sem rolar o modal inteiro. */
.evet-pilha {
    margin: 0 0 8px;
    padding: 12px;
    max-height: 320px;
    overflow: auto;
    background: var(--evet-superficie-2);
    border: 1px solid var(--evet-borda);
    border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    color: var(--evet-texto);
}

/* Prévia da exclusão de conta (AUTH.md §8.4): o que acontece com cada estabelecimento, lado a lado. */
.evet-tabela-exclusao td {
    padding: 3px 6px;
    vertical-align: top;
}

/* Coral 600 é bloqueio legal; âmbar escuro é o que muda de estado e pede atenção — nunca o contrário. */
.evet-exclusao-bloqueio {
    color: var(--evet-erro-texto);
    font-weight: 600;
}

.evet-exclusao-desativa {
    color: var(--evet-atencao-texto);   /* o mesmo âmbar escuro do .evet-kpi-atencao */
    font-weight: 600;
}

/* Número e senha do app do tutor: monoespaçado e espaçado, porque são ditados em voz alta no balcão. */
.evet-senha-tutor {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    letter-spacing: 0.08em;
}

/* ---- Agenda (manual §11) ----
   A grade é de 15 minutos (o slot do F-04) e cada bloco ocupa as linhas que a sua duração pede. No modo dia há
   uma coluna por veterinário; no modo semana, uma por dia. A rolagem horizontal fica no invólucro: sete colunas
   espremidas num celular não são sete colunas, são sete tiras ilegíveis. */
.evet-agenda-rolagem {
    overflow-x: auto;
}

.evet-agenda {
    display: grid;
    gap: 1px;
    background: var(--evet-nevoa-200);
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    overflow: hidden;
    min-width: 520px;
}

.evet-agenda-cabecalho,
.evet-agenda-coluna {
    background: var(--evet-superficie);
}

.evet-agenda-cabecalho {
    padding: 8px 12px;
    font: 600 13px/1.35 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

.evet-agenda-cabecalho span {
    display: block;
    font-weight: 400;
    color: var(--evet-texto-2);
}

/* A coluna é a pista onde os blocos se posicionam por linha de slot. */
.evet-agenda-coluna {
    display: grid;
    position: relative;
}

/* O slot vazio é clicável: é assim que se agenda no horário em que se clicou. */
.evet-agenda-linha {
    grid-column: 1;
    border: 0;
    border-top: 1px solid var(--evet-nevoa-50);
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.evet-agenda-linha:hover {
    background: var(--evet-tint-primaria);
}

.evet-agenda-linha.evet-agenda-cheia {
    border-top-color: var(--evet-borda);
}

.evet-agenda-hora {
    grid-column: 1;
    padding: 2px 8px 0 0;
    text-align: right;
    font: 400 11px/1 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
    border-top: 1px solid var(--evet-borda);
}

/* O invólucro do MudTooltip é quem ocupa a linha da grade: o bloco só o preenche. Sem isto o tooltip
   empurraria o botão para fora da posição calculada em Bloco(). */
.evet-agenda-ancora {
    grid-column: 1;
    display: block;
    margin: 1px 4px;
    min-width: 0;
}

/* O bloco é pintado com a cor do serviço da legenda (Marcelo, 23/09/2026) — antes era uma faixa de 3 px sobre
   névoa, e com quinze blocos na tela ninguém distinguia consulta de cirurgia.

   Os 70%: com a cor CHEIA, quatro dos cinco serviços passam AA com ardósia 700, e lavanda 300 (Exame) fica em
   3,19:1 — e branco sobre ela é pior ainda (3,47:1). A 70% o pior caso é 4,85:1. O número foi calculado, não
   estimado, e há canário que refaz a conta (EvetThemeTests). A faixa da esquerda fica na cor cheia, então a borda
   do bloco continua sendo exatamente o quadradinho da legenda. */
.evet-agenda-bloco {
    display: flex;
    /* O bloco é um <button>, e o navegador centraliza o conteúdo dele: sem o `justify-content` o nome sai no
       meio da largura e uma coluna de nomes não alinha nada. No eixo vertical o centro FICA: alinhar ao topo
       encosta o nome no primeiro slot e corta o bloco de 15 minutos, que é a duração mais comum. */
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 3px 8px;
    border: 0;
    border-left: 3px solid var(--evet-servico, var(--evet-verde-agua-500));
    border-radius: 6px;
    background: color-mix(in srgb, var(--evet-servico, var(--evet-verde-agua-500)) 70%, #fff);
    font: 400 12px/1.3 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-ardosia-700);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
}

/* O hover levanta o bloco em vez de apagá-lo: a cor é a informação, e lavá-la ao passar o mouse tiraria
   justamente o que o bloco veio dizer. Os 75% são o teto: acima disso lavanda 300 (Exame) reprova AA com
   ardósia 700, e o texto do bloco continua ali durante o hover. */
.evet-agenda-bloco:hover {
    background: color-mix(in srgb, var(--evet-servico, var(--evet-verde-agua-500)) 75%, #fff);
    box-shadow: var(--evet-shadow);
}

.evet-agenda-bloco strong {
    font-weight: 600;
}

/* A espécie do paciente, em disco, à esquerda do nome: é o mesmo símbolo que o avatar do paciente sem foto
   usa (manual §15). Inicial, e não pictograma, porque a lista de espécies é aberta — a clínica digita o que
   precisar — e um mapa de desenhos deixaria a maioria delas sem símbolo. */
.evet-agenda-especie {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: var(--evet-texto);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.evet-agenda-quem {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evet-agenda-bloco.evet-agenda-cancelado {
    opacity: 0.55;
    text-decoration: line-through;
}

/* Quem não veio aparece hachurado — o mesmo tratamento que o manual dá a bloqueado. A hachura é de branco
   translúcido, para valer sobre qualquer uma das cinco cores de serviço. */
.evet-agenda-bloco.evet-agenda-faltou {
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.65) 0, rgba(255, 255, 255, 0.65) 6px, rgba(255, 255, 255, 0) 6px, rgba(255, 255, 255, 0) 12px);
}

/* O quadro que abre ao parar o mouse sobre um bloco. */
.evet-agenda-detalhe {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 260px;
    text-align: left;
    font: 400 12px/1.4 "Inter", "Segoe UI", sans-serif;
}

.evet-agenda-detalhe strong {
    font-size: 13px;
    font-weight: 600;
}

.evet-agenda-detalhe-obs {
    margin-top: 2px;
    font-style: italic;
    opacity: 0.85;
    white-space: pre-wrap;
}

/* ---- A lista da busca global (manual §5) ----
   Ela abre embaixo do campo, agrupada por tipo. O cabeçalho do grupo é do tamanho de um rótulo, em névoa,
   para não competir com o nome — quem lê procura o nome, e o grupo só o situa.

   DUAS COLUNAS (Marcelo, 24/09/2026): com a barra dobrada, uma coluna só deixaria metade da largura vazia e
   o dobro de rolagem. O `break-inside: avoid` é o que mantém cada linha inteira — sem ele o nome ficaria numa
   coluna e o subtítulo na outra, que é o pior resultado possível de um layout em colunas.

   E o GRUPO não se parte (Marcelo, 24/09/2026): quem decide onde a segunda coluna começa é o C#, que marca o
   primeiro item do grupo escolhido; o `:has()` sobe essa marca para o item da lista, que é o bloco da coluna.
   Sem a quebra forçada o navegador equilibraria por altura e cortaria um grupo ao meio — e um grupo partido
   faz procurar duas vezes. */
.mud-list.evet-busca-lista {
    column-count: 2;
    column-gap: 24px;
}

/* Um grupo só não vira duas colunas: parti-lo é exatamente o que a quebra existe para evitar. */
.mud-list.evet-busca-lista.evet-busca-uma-coluna {
    column-count: 1;
}

.evet-busca-lista .mud-list-item {
    /* O item do MudBlazor é `display: flex`, e por isso o cabeçalho do grupo ia PARA O LADO do nome em vez
       de ficar em cima dele. A lista em si já é bloco — ela não precisa de nada. */
    display: block;
    break-inside: avoid;
}

.evet-busca-lista .mud-list-item:has(.evet-busca-quebra) {
    break-before: column;
    -webkit-column-break-before: always;   /* Safari ainda pede a forma antiga */
}

/* Numa tela estreita a lista volta a ser uma coluna: duas de 150 px não ajudam ninguém. */
@media (max-width: 960px) {
    .mud-list.evet-busca-lista {
        column-count: 1;
    }
}

.evet-busca-pesquisando {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font: 400 13px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

.evet-busca-grupo {
    margin: 2px 0 2px -8px;
    padding: 4px 8px 2px;
    font: 600 11px/1.2 "Inter", "Segoe UI", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--evet-texto-2);
}

.evet-busca-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.evet-busca-titulo {
    font: 400 14px/1.3 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

.evet-busca-subtitulo {
    font: 400 12px/1.3 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

.evet-busca-vazio {
    padding: 8px 12px;
    font: 400 13px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

/* A foto do Gravatar, por cima das iniciais (F-01, 24/09/2026). Ela cobre o avatar inteiro; se o pedido
   falhar — e ele falha de propósito para quem não tem foto, por causa do `d=404` — o que sobra à vista são
   as iniciais, que estão desenhadas embaixo. */
.mud-avatar.evet-avatar-pessoa {
    position: relative;
}

.evet-avatar-pessoa .evet-gravatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* A foto inteira, ao parar o mouse sobre o avatar (F-02, 24/09/2026). O que está guardado é o QUADRADO do
   recorte — o círculo do avatar esconde os cantos dele —, então aqui ela aparece quadrada, que é o "inteira"
   que existe. Cantos arredondados de 12 px, como um card do manual §6. */
.evet-avatar-ampliada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.evet-avatar-ampliada img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
}

.evet-avatar-ampliada span {
    font: 600 12px/1.2 "Inter", "Segoe UI", sans-serif;
}

/* O invólucro do MudTooltip não pode virar uma caixa no meio da linha: ele envolve o avatar e mais nada. */
.evet-avatar-ancora {
    display: inline-flex;
    line-height: 0;
}

/* O avatar do paciente quando ele abre a troca da foto (F-02, 24/09/2026). É botão de verdade — foco,
   Enter e nome para o leitor de tela —, sem nenhuma moldura própria: o que se vê continua sendo o retrato. */
.evet-avatar-botao {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.evet-avatar-botao:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: 2px;
}

/* A câmera aparece por cima do retrato ao passar o mouse ou ao receber foco. Fora disso ela some: o avatar
   é, antes de tudo, o retrato do paciente. */
.evet-avatar-troca {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(51, 60, 78, 0.55);
    color: var(--evet-branco);
    opacity: 0;
    transition: opacity 120ms ease-in-out;
}

.evet-avatar-botao:hover .evet-avatar-troca,
.evet-avatar-botao:focus-visible .evet-avatar-troca {
    opacity: 1;
}

/* ---- Recorte da foto do paciente (F-02) ----
   O palco é MAIOR que o círculo (Marcelo, 24/09/2026): a foto aparece inteira e o que fica de fora do
   recorte é escurecido, em vez de sumir. Antes o palco era o próprio círculo, então uma foto deitada abria
   já cortada nas laterais — e, como o mínimo do zoom é cobrir o círculo, não havia como afastar.

   A imagem cabe no palco por `max-width/max-height` (emitidos pelo C#, que é quem sabe a medida), com
   `width/height: auto`. **O max-* é o que faz a foto abrir inteira**: sem ele o <img> renderiza no tamanho
   NATURAL, e a foto de um celular abre com dez vezes o zoom — foi o defeito de 24/09/2026. Não há
   `object-fit`, e isso importa: assim a caixa do <img> É a caixa da imagem pintada, e a medida que o C# pede
   ao navegador não precisa descontar tarja nenhuma. */
.evet-recorte-area {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    touch-action: none;   /* sem isto o arraste vira rolagem no celular */
}

.evet-recorte-palco {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--evet-ardosia-700);
    box-shadow: var(--evet-sombra);
    cursor: grab;
}

.evet-recorte-palco:active {
    cursor: grabbing;
}

.evet-recorte-imagem {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* O recorte, desenhado por cima. A sombra gigante é o que escurece TODO o resto do palco — o `overflow`
   dele é que a recorta. Não recebe ponteiro: quem se arrasta é a foto embaixo. */
.evet-recorte-circulo {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(51, 60, 78, 0.55);
    pointer-events: none;
}

.evet-recorte-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 24px 8px;
}

/* Legenda das cores de serviço, abaixo da grade. */
.evet-agenda-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font: 400 12px/1 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-nevoa-500);
}

.evet-agenda-legenda i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    background: var(--evet-servico);
}

/* ---- Prontuário (F-05) ----
   O cartão da linha do tempo fica sem sombra e com a borda de névoa: são muitos na mesma tela, e a sombra
   única do manual, repetida vinte vezes, vira ruído. */
.evet-prontuario-card {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie);
}

/* ---- Receituário (F-06) ----
   O cartão do documento é o mesmo do prontuário; o número do documento vai em fonte tabular, porque é um
   número que se confere caractere a caractere contra o papel (manual §16). */
.evet-receita-card {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie);
}

.evet-numero-documento {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* O assistente de receita usa o stepper do manual §13: no máximo cinco passos, o último regulatório. */
.evet-stepper-receita .mud-stepper-nav-step-label-content {
    font-weight: 600;
}

/* ---- Calendário de 30 dias (painel do veterinário) ----
   Sete colunas, começando na segunda — é assim que uma clínica pensa a semana. A carga do dia vira fundo em
   três faixas, e não um degradê: o que se lê num calendário é "tranquilo, cheio, lotado", e uma escala contínua
   obrigaria a comparar tons para chegar à mesma conclusão. Verde-água, e não âmbar: agenda cheia é o normal
   de uma clínica que vai bem, e não um alerta. */
.evet-calendario {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.evet-calendario-cabecalho {
    font: 600 11px/2 "Inter", "Segoe UI", sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--evet-texto-2);
    text-align: center;
}

.evet-calendario-dia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    border-radius: var(--evet-radius-control);
    border: 1px solid var(--evet-borda);
    background: var(--evet-superficie);
    color: var(--evet-texto);
    text-decoration: none;
}

.evet-calendario-dia:hover {
    border-color: var(--evet-verde-agua-500);
}

.evet-calendario-numero {
    font: 600 14px/1.2 "Inter", "Segoe UI", sans-serif;
}

.evet-calendario-contagem {
    font: 400 11px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

/* Fora dos trinta dias: fica na grade para a semana não ficar com buraco, mas não disputa o olho. */
.evet-calendario-dia.fora {
    background: var(--evet-superficie-2);
    color: var(--evet-texto-2);
    border-color: transparent;
    pointer-events: none;
}

.evet-calendario-dia.hoje {
    border-color: var(--evet-primaria-texto);
    box-shadow: inset 0 0 0 1px var(--evet-verde-agua-700);
}

.evet-calendario-dia.carga-leve {
    background: #EDF8F6;
}

.evet-calendario-dia.carga-media {
    background: #D6EFEA;
}

.evet-calendario-dia.carga-cheia {
    background: #B9E4DC;
}

.evet-calendario-dia.carga-cheia .evet-calendario-contagem,
.evet-calendario-dia.carga-media .evet-calendario-contagem {
    color: var(--evet-texto);
}

/* ---- Encaixe (F-04) ----
   Quem chegou sem hora marcada não tem hora para mostrar, e inventar uma seria mentir. O rótulo ocupa o lugar
   da hora em âmbar escuro — a cor de "isto pede atenção" do manual §17, que é o que uma fila de espera é. Não
   é coral: coral é erro, e chegar sem hora marcada não é erro de ninguém. */
.evet-encaixe {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #FDF3E3;
    color: var(--evet-atencao-texto);   /* o mesmo âmbar escuro do .evet-kpi-atencao — 4,6:1 sobre este fundo */
    font: 600 11px/1.8 "Inter", "Segoe UI", sans-serif;
    white-space: nowrap;
    cursor: help;
}

/* ---- Ajuda ----
   Barra lateral fixa com busca no topo e o conteúdo à direita, no modelo do StatusPulse. A lateral rola
   sozinha: a lista de tópicos é longa e o conteúdo é mais longo ainda, e rolar os dois juntos faria perder o
   índice justo quando ele é mais útil. No celular vira uma coluna só, com o índice antes do texto. */
.evet-ajuda {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

@media (max-width: 899px) {
    .evet-ajuda {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .evet-ajuda-lateral {
        position: static !important;
        max-height: none !important;
    }
}

.evet-ajuda-lateral {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
}

.evet-ajuda-busca {
    margin-bottom: 12px;
}

/* A lateral da Ajuda tem a MESMA forma da barra do produto (Marcelo, 03/10/2026) — bloco arredondado com o
   rótulo em versalete dentro e o item selecionado como caixa cheia —, com uma diferença declarada: **a cor é
   a mesma em todos os grupos**. O tom vem de `.evet-mod-ajustes`, o módulo neutro, aplicado pelo Razor a
   cada bloco; por isso aqui não há hex nenhum e os quatro temas continuam valendo sozinhos.

   As medidas repetem as de `.evet-nav-bloco` / `.evet-nav-grupo` de propósito: são duas listas que a pessoa
   vê lado a lado no mesmo produto, e divergir em 2 px faria a Ajuda parecer de outro aplicativo. */
.evet-ajuda-bloco {
    background: var(--evet-mod-tint, transparent);
    border-radius: 12px;
    margin: 4px 0 8px;
    padding-bottom: 4px;
}

.evet-ajuda-grupo {
    /* Mesma caixa do rótulo da barra: 11 px em versalete, altura mínima de 32 e centrado — foi ela que
       alinhou os dois tipos de rótulo lá em 02/10/2026, e é ela que alinha este aqui. */
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 16px 16px 4px;
    font: 600 11px/1.4 "Inter", "Segoe UI", sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--evet-texto-2);
}

.evet-ajuda-item {
    display: block;
    margin: 2px 8px;
    padding: 6px 8px;
    border-radius: var(--evet-radius-control);
    font: 400 14px/1.5 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
    text-decoration: none;
}

.evet-ajuda-item:hover {
    /* A lavagem da tinta do módulo, como no menu — aqui sempre a neutra. O cinza do MudBlazor seria a única
       coisa da tela que não pertence a lugar nenhum. */
    background: color-mix(in srgb, var(--evet-mod-ink) 14%, transparent);
}

/* O item aberto é caixa cheia na tinta, com texto branco: o mesmo item selecionado da barra lateral. */
.evet-ajuda-item.ativa {
    background: var(--evet-mod-ink);
    color: var(--evet-branco);
    font-weight: 600;
    box-shadow: var(--evet-sombra);
}

.evet-ajuda-item.ativa:hover {
    background: var(--evet-mod-ink);
    filter: brightness(1.12);
}

.evet-ajuda-ancora {
    display: block;
    margin: 0 8px;
    padding: 3px 8px 3px 20px;
    font: 400 13px/1.5 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
    text-decoration: none;
}

.evet-ajuda-ancora:hover {
    color: var(--evet-texto);
}

/* O conteúdo é texto corrido de verdade: medida de leitura confortável, e não a largura da tela. */
.evet-ajuda-conteudo {
    max-width: 72ch;
    color: var(--evet-texto);
}

.evet-ajuda-conteudo h2 {
    font: 700 22px/1.3 "Quicksand", "Segoe UI", sans-serif;
    margin: 0 0 12px;
}

.evet-ajuda-conteudo h3 {
    font: 700 16px/1.4 "Quicksand", "Segoe UI", sans-serif;
    margin: 28px 0 8px;
    scroll-margin-top: 88px;   /* a âncora não pode parar debaixo da barra fixa */
}

.evet-ajuda-conteudo p,
.evet-ajuda-conteudo li {
    font: 400 15px/1.7 "Inter", "Segoe UI", sans-serif;
}

.evet-ajuda-conteudo p {
    margin: 0 0 12px;
}

.evet-ajuda-conteudo ul,
.evet-ajuda-conteudo ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.evet-ajuda-conteudo li {
    margin-bottom: 6px;
}

.evet-ajuda-conteudo a {
    color: var(--evet-primaria-texto);
}

/* A frase de abertura de cada seção — a resposta curta, para quem não vai ler o resto. */
.evet-ajuda-linha {
    background: var(--evet-superficie-2);
    border-left: 3px solid var(--evet-verde-agua-500);
    border-radius: 0 var(--evet-radius-control) var(--evet-radius-control) 0;
    padding: 10px 14px;
    margin-bottom: 20px !important;
}

.evet-ajuda-rodape {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--evet-borda);
}

/* Campo e subtítulo de formulário com o ponto de interrogação ao lado. O gatilho não entra no fluxo da
   grade de duas colunas: ele acompanha o campo, e a célula continua medindo o que media. */
.evet-campo-com-ajuda {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.evet-campo-com-ajuda > .mud-input-control {
    flex: 1;
    min-width: 0;
}

.evet-campo-com-ajuda > .evet-ajuda-gatilho {
    margin-top: 22px;   /* desce até a altura da caixa, abaixo do rótulo */
}

.evet-secao-com-ajuda {
    display: flex;
    align-items: center;
    gap: 2px;
}

.evet-page-header-titulo {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Dentro do cabeçalho a caixa é cheia na tinta do módulo, com texto branco: o gatilho acompanha. */
.evet-page-header .evet-ajuda-gatilho {
    color: var(--evet-branco);
}

.evet-page-header .evet-ajuda-gatilho:hover {
    background: rgba(255, 255, 255, .18);
    color: var(--evet-branco);
}

/* A variante com rótulo: no topo de um formulário o ícone sozinho passa despercebido. */
.evet-ajuda-gatilho.rotulado {
    /* ⚠️ O rotulado fica na cor do texto secundário, e não no glifo claro dos outros: é UM por
       formulário, não polui, e o trabalho dele é justamente se anunciar para quem nunca usou o
       sistema. Clarear os dois pelo mesmo token apagaria o único que precisa ser visto. */
    color: var(--evet-texto-2);
    /* ⚠️ width e height do gatilho redondo são fixos (28 px): sem soltar os dois aqui, o rótulo quebra
       em duas linhas e o ícone é espremido para fora. */
    width: auto;
    height: auto;
    min-height: 28px;
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 4px;
    padding: 2px 10px 2px 6px;
    border-radius: var(--evet-radius-control);
    font: 500 12px/1.3 "Inter", "Segoe UI", sans-serif;
}

@media (pointer: coarse) {
    /* O alvo de toque cresce em altura; a largura já acompanha o texto. */
    .evet-ajuda-gatilho.rotulado {
        width: auto;
        height: auto;
        min-height: 44px;
    }
}

/* No formulário ele fica à direita, acima dos campos, e não entra na grade de duas colunas. */
.evet-ajuda-no-formulario {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 4px;
}

.evet-ajuda-gatilho:hover {
    background: rgba(255, 255, 255, .18);
    color: var(--evet-branco);
}

/* ---- O ponto de interrogação que abre a ajuda ao lado (03/10/2026) ----
   Discreto por padrão e com cor só no hover: ele aparece em dezenas de lugares, e um ícone colorido em
   cada rótulo competiria com o conteúdo da tela. Alvo de 28 px dentro de uma linha de rótulo; nas telas de
   toque ele cresce, porque 28 px não se acerta com o polegar. */
.evet-ajuda-gatilho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--evet-ajuda-glifo);
    cursor: pointer;
    vertical-align: middle;
}

/* O glifo também encolhe: 18 px em vez dos 20 do Size.Small. O alvo de toque continua sendo o botão de
   28 px (44 no celular) — o que diminui é o desenho, não a área clicável. */
.evet-ajuda-gatilho .mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
}


.evet-ajuda-gatilho:hover {
    background: var(--evet-superficie-2);
    color: var(--evet-primaria-texto);
}

.evet-ajuda-gatilho:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .evet-ajuda-gatilho {
        width: 44px;
        height: 44px;
    }
}

/* ---- O painel de ajuda ao lado da tela ----
   ⚠️ z-index acima do modal do MudBlazor (1400): a dúvida de cadastro nasce DENTRO de um diálogo, e um
   painel atrás dele não serviria para nada. Sem fundo escurecido de propósito — a pessoa lê e preenche ao
   mesmo tempo, e escurecer o formulário diria que ele está desativado. */
.evet-ajuda-painel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--evet-superficie);
    border-left: 1px solid var(--evet-borda);
    box-shadow: -8px 0 32px rgba(64, 73, 90, .18);
}

.evet-ajuda-painel-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 12px 16px;
    border-bottom: 1px solid var(--evet-borda);
    color: var(--evet-texto);
}

.evet-ajuda-painel-titulo {
    flex: 1;
    font: 700 15px/1.3 "Quicksand", "Segoe UI", sans-serif;
}

.evet-ajuda-painel-conteudo {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    color: var(--evet-texto);
}

/* O conteúdo é o MESMO componente da tela de Ajuda, então ele herda a tipografia dela — num painel
   estreito, com um corpo um ponto menor. */
.evet-ajuda-painel-conteudo h2 {
    font: 700 19px/1.3 "Quicksand", "Segoe UI", sans-serif;
    margin: 0 0 12px;
}

.evet-ajuda-painel-conteudo h3 {
    font: 700 15px/1.4 "Quicksand", "Segoe UI", sans-serif;
    margin: 24px 0 8px;
    scroll-margin-top: 8px;
}

.evet-ajuda-painel-conteudo p,
.evet-ajuda-painel-conteudo li {
    font: 400 14px/1.65 "Inter", "Segoe UI", sans-serif;
}

.evet-ajuda-painel-conteudo p {
    margin: 0 0 10px;
}

.evet-ajuda-painel-conteudo ul,
.evet-ajuda-painel-conteudo ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.evet-ajuda-painel-conteudo a {
    color: var(--evet-primaria-texto);
}

.evet-ajuda-painel-rodape {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    border-top: 1px solid var(--evet-borda);
}

/* ---- O painel mostrando UM campo (04/10/2026) ----
   ⚠️ A altura é do painel e não do conteúdo: ele vai de cima a baixo mesmo com três linhas de texto
   (pedido de Marcelo). Quem garante isso é o `top: 0; bottom: 0` do .evet-ajuda-painel mais o `flex: 1`
   do conteúdo — uma caixa que terminasse no fim do texto pareceria um balão solto no meio da tela. */
.evet-ajuda-onde {
    margin: 0 0 4px;
    font: 600 12px/1.4 "Inter", "Segoe UI", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--evet-texto-2);
}

.evet-ajuda-exigido {
    display: inline-block;
    margin: 0 0 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--evet-superficie-2);
    font: 600 12px/1.5 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

.evet-ajuda-campo-texto {
    font: 400 14px/1.65 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

/* ---- A tela desenhada dentro da ajuda, com os campos numerados ----
   Não é captura de tela: é desenho em CSS, com os mesmos papéis de cor do produto, então ele acompanha os
   quatro temas e não guarda dado de paciente nenhum. */
.evet-ajuda-tela-figura {
    margin: 0 0 16px;
}

.evet-ajuda-tela {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    background: var(--evet-superficie);
    overflow: hidden;
}

.evet-ajuda-tela-topo {
    padding: 10px 14px;
    background: var(--evet-superficie-2);
    border-bottom: 1px solid var(--evet-borda);
    font: 700 14px/1.3 "Quicksand", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

.evet-ajuda-tela-corpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 14px;
}

/* No painel estreito e no celular as duas colunas viram uma — a mesma regra do formulário de verdade. */
@media (max-width: 720px) {
    .evet-ajuda-tela-corpo {
        grid-template-columns: 1fr;
    }
}

.evet-ajuda-painel-conteudo .evet-ajuda-tela-corpo {
    grid-template-columns: 1fr;
}

.evet-ajuda-tela-campo.inteiro,
.evet-ajuda-tela-divisoria {
    grid-column: 1 / -1;
}

.evet-ajuda-tela-divisoria {
    margin-top: 4px;
    font: 700 12px/1.3 "Inter", "Segoe UI", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--evet-texto-2);
}

.evet-ajuda-tela-campo {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: 2px 8px;
}

.evet-ajuda-tela-rotulo {
    grid-column: 2;
    font: 500 12px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

.evet-ajuda-tela-caixa {
    grid-column: 2;
    display: block;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-control);
    background: var(--evet-fundo);
    font: 400 13px/1.3 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

.evet-ajuda-tela-caixa.area {
    min-height: 56px;
}

.evet-ajuda-tela-caixa.selecao::after {
    content: "▾";
    float: right;
    color: var(--evet-texto-2);
}

.evet-ajuda-tela-caixa.interruptor {
    border: 0;
    background: transparent;
    padding-left: 0;
}

/* O número. Mesma bolinha na tela e na legenda, para o olho casar os dois sem procurar. */
.evet-ajuda-marcador {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--evet-primaria);
    color: var(--evet-branco);
    font: 700 12px/1 "Inter", "Segoe UI", sans-serif;
}

.evet-ajuda-tela-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--evet-borda);
    background: var(--evet-superficie-2);
}

.evet-ajuda-tela-botao {
    padding: 6px 14px;
    border-radius: var(--evet-radius-control);
    font: 600 12px/1.3 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

.evet-ajuda-tela-botao.primario {
    background: var(--evet-primaria);
    color: var(--evet-branco);
}

.evet-ajuda-tela-nota {
    margin-top: 6px;
    font: 400 12px/1.5 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

/* A legenda: números em bolinha, iguais aos do desenho. */
.evet-ajuda-legenda {
    list-style: none;
    margin: 0 0 16px !important;
    padding: 0 !important;
    counter-reset: evet-legenda;
}

.evet-ajuda-legenda > li {
    counter-increment: evet-legenda;
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
}

.evet-ajuda-legenda > li::before {
    content: counter(evet-legenda);
    position: absolute;
    left: 0;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--evet-primaria);
    color: var(--evet-branco);
    font: 700 12px/1 "Inter", "Segoe UI", sans-serif;
}

/* ---- Resultado laboratorial (F-15) ----
   Fora da faixa vai em coral 600, que é a cor de bloqueio e alerta do manual §17 — e só aparece quando dá
   para <b>afirmar</b> que está fora. "Não sei" não ganha cor nenhuma: pintar de verde o que não foi
   comparado diria que está normal. */
.evet-analise-fora {
    color: var(--evet-erro-texto);
    font-weight: 600;
}

/* A tabela de valores em edição é densa de propósito: conferir lado a lado com o papel é o que a pessoa
   faz, e um hemograma tem vinte linhas. */
.evet-tabela-analises td {
    padding: 2px 6px;
    vertical-align: middle;
}

.evet-tabela-analises th {
    font: 600 12px/1.6 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
    padding: 4px 6px;
}

/* O contato do tutor na fila de lembretes. Ele só aparece quando o VetOrbit NÃO vai falar — é a deixa da
   recepção para ligar —, então merece peso, e não o cinza de dado secundário. */
.evet-contato-ligar {
    color: var(--evet-primaria-texto);
    font-weight: 600;
}

/* ---- Evolução laboratorial (F-18) ----
   O mapa de analitos: linhas de analito, colunas de data. Tabela é a única coisa que pode passar da largura
   da tela, e por isso vai dentro do próprio contêiner de rolagem. */
.evet-tabela-rolagem {
    overflow-x: auto;
}

.evet-mapa-evolucao td,
.evet-mapa-evolucao th {
    padding: 4px 10px;
    white-space: nowrap;
    text-align: right;
}

/* A primeira coluna é o nome do analito: à esquerda, e é ela que ancora a leitura da linha. */
.evet-mapa-evolucao th:first-child,
.evet-mapa-evolucao tbody th {
    text-align: left;
    font: 600 13px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

.evet-mapa-evolucao thead th {
    font: 600 12px/1.6 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

/* Fora da faixa do laudo. Coral 600 é a cor de erro e de bloqueio legal — e um valor fora de referência é,
   para quem lê, exatamente o que precisa saltar da tabela. */
.evet-valor-fora {
    color: var(--evet-erro-texto);
    font-weight: 600;
}

/* A variação é informação, não julgamento: subir creatinina é ruim e subir hematócrito pode ser bom, e o
   VetOrbit não sabe qual é qual. A seta diz a direção; a cor fica neutra de propósito. */
.evet-variacao {
    color: var(--evet-texto);
    font-weight: 600;
}

/* ---- Vacinação (F-17) ----
   As séries do paciente em cima da carteira: uma faixa por protocolo, com a situação legível de longe. */
.evet-series {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.evet-serie {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 3px solid var(--evet-borda);
    border-radius: var(--evet-radius-control);
    background: var(--evet-superficie-2);
    padding: 8px 12px;
    min-width: 200px;
}

.evet-serie-nome {
    font: 600 13px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
}

.evet-serie-situacao {
    font: 600 12px/1.4 "Inter", "Segoe UI", sans-serif;
}

.evet-serie-detalhe {
    font: 400 12px/1.4 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto-2);
}

/* Em dia é verde-água; atrasada é âmbar escuro, que é a cor de prazo — coral fica para erro e bloqueio
   legal, e uma dose vencida não é nenhum dos dois. Concluída não pede atenção: fica neutra. */
.evet-serie-emdia {
    border-left-color: var(--evet-verde-agua-500);
}

.evet-serie-emdia .evet-serie-situacao {
    color: var(--evet-primaria-texto);
}

.evet-serie-atrasada {
    border-left-color: #D89A3E;
    background: #FAF3E8;
}

.evet-serie-atrasada .evet-serie-situacao {
    color: var(--evet-atencao-texto);
}

.evet-serie-concluida .evet-serie-situacao {
    color: var(--evet-texto-2);
}

.evet-tabela-carteira td {
    padding: 4px 6px;
    vertical-align: top;
}

.evet-tabela-carteira th {
    font: 600 12px/1.6 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
    padding: 4px 6px;
}

/* A linha corrigida ou anulada continua na carteira — riscada, porque registro selado não some. */
.evet-vacina-riscada td {
    text-decoration: line-through;
    color: var(--evet-texto-2);
}

.evet-vacina-motivo {
    color: var(--evet-erro-texto);
    text-decoration: none;
}

/* As doses de um protocolo vacinal, em edição: densa porque um esquema tem três ou quatro linhas e elas
   dividem o diálogo com o resto do formulário. */
.evet-tabela-doses td {
    padding: 2px 6px;
    vertical-align: middle;
}

.evet-tabela-doses th {
    font: 600 12px/1.6 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
    padding: 4px 6px;
}

/* O histórico de atendimentos dentro da ficha do paciente: denso, porque divide a tela com o resto da
   ficha, e com a situação em duas linhas quando há exame sem laudo. */
.evet-tabela-prontuario td {
    padding: 4px 6px;
    vertical-align: top;
}

.evet-tabela-prontuario th {
    font: 600 12px/1.6 "Inter", "Segoe UI", sans-serif;
    color: var(--evet-texto);
    padding: 4px 6px;
}

/* ---- Controlados (F-07) ----
   A faixa da rotulagem é como a equipe reconhece o produto na prateleira (arts. 18–21): listas A e B levam
   faixa preta, listas C levam vermelha. O badge repete isso na tela, para a tabela e o frasco combinarem. */
.evet-faixa-preta,
.evet-faixa-vermelha {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font: 600 11px/1.6 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.02em;
}

.evet-faixa-preta {
    background: var(--evet-ardosia-700);
    color: var(--evet-branco);
}

.evet-faixa-vermelha {
    background: var(--evet-erro);
    color: var(--evet-branco);
}

/* Validade: âmbar escuro é a cor de prazo do manual; coral fica para o que já venceu. */
.evet-vencendo {
    color: var(--evet-atencao-texto);
    font-weight: 600;
}

.evet-vencido {
    color: var(--evet-erro-texto);
    font-weight: 600;
}

/* ---- Casca do app ---- */
.evet-appbar {
    border-bottom: 1px solid var(--evet-borda);
}

/* Barra da equipe da plataforma: quem está aqui enxerga dados que não são de um estabelecimento só, e precisa
   perceber isso sem procurar. Tom de ardósia diluído — diferencia sem virar alarme, e o texto continua ardósia
   700 sobre ele (contraste bem acima de AA). */
.evet-appbar-admin {
    background: #E7E9ED !important;
    border-bottom-color: var(--evet-nevoa-500);
}

.evet-appbar-admin .evet-chip-plataforma {
    background: var(--evet-ardosia-700);
    color: var(--evet-branco);
    font: 600 0.6875rem/1 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 5px 10px;
    margin-right: 8px;
    white-space: nowrap;
}

/* O FocusOnNavigate do App.razor põe o foco no <h1> a cada navegação, para o leitor de tela anunciar a página
   nova. O Blazor marca o elemento com tabindex="-1", então ele nunca é alcançado pelo Tab — o anel azul do
   navegador ali é só ruído, e aparecia em volta do título a cada login. O anúncio continua; o retângulo sai. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

.evet-drawer {
    border-right: 1px solid var(--evet-borda);
}

.evet-drawer .mud-nav-link {
    border-radius: var(--evet-radius-control);
    margin: 2px 8px;
    color: var(--evet-texto);
}

.evet-drawer .mud-nav-link.active {
    background: var(--evet-tint-primaria);
    color: var(--evet-primaria-texto);
    font-weight: 600;
}

.evet-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--evet-verde-agua-500);
}

.evet-muted {
    color: var(--evet-texto-2);
}

/* ---- §1 Logotipo (Shared/Brand.razor): selo verde-água 300 em órbita verde-água 700 com satélite coral;
   "Vet" verde-água 700 + "Orbit" coral 400. S é a altura do SELO, e o símbolo mede 1,58 S porque a órbita
   escapa dele nos dois lados — é esse fator que faz S significar o mesmo de antes do rebrand. ---- */
.evet-lockup {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--evet-s) * 0.35);
    line-height: 1;
    white-space: nowrap;
}

.evet-selo {
    width: calc(var(--evet-s) * 1.58);
    height: calc(var(--evet-s) * 1.58);
    flex: 0 0 auto;
    display: block;
}

.evet-selo-bg {
    fill: var(--evet-verde-agua-300);
}

.evet-selo-cross {
    fill: #fff;
}

.evet-marca-orbita {
    stroke: var(--evet-verde-agua-700);
}

.evet-marca-satelite {
    fill: var(--evet-coral-400);
}

.evet-wordmark {
    font-family: "Quicksand", "Inter", sans-serif;
    font-weight: 700;
    font-size: calc(var(--evet-s) * 1.38);
    letter-spacing: -0.01em;
    color: var(--evet-primaria-texto);
}

.evet-wordmark-orbit {
    color: var(--evet-coral-400);
}

/* Monocromática: tudo em verde-água profundo — rodapé do site, cabeçalho de documentos a 8 mm */
.evet-lockup-mono .evet-selo-bg,
.evet-lockup-mono .evet-marca-satelite {
    fill: var(--evet-verde-agua-700);
}

.evet-lockup-mono .evet-wordmark,
.evet-lockup-mono .evet-wordmark-orbit {
    color: var(--evet-primaria-texto);
}

/* Sobre fundo escuro: selo e órbita brancos, cruz verde-água, e o satélite e o "Orbit" em CORAL 200.
   O coral 400 sobre o verde-água 700 dá 2,38:1 e some; o coral 200 dá 3,90:1 (medido). Trocá-lo por
   branco apagaria o "Orbit em coral", que é o conceito inteiro da marca. */
.evet-lockup-ondark .evet-selo-bg {
    fill: #fff;
}

.evet-lockup-ondark .evet-selo-cross {
    fill: var(--evet-verde-agua-700);
}

.evet-lockup-ondark .evet-marca-orbita {
    stroke: #fff;
}

.evet-lockup-ondark .evet-marca-satelite {
    fill: var(--evet-coral-200);
}

.evet-lockup-ondark .evet-wordmark {
    color: var(--evet-branco);
}

.evet-lockup-ondark .evet-wordmark-orbit {
    color: var(--evet-coral-200);
}

/* ---- Landing (F-00) ---- */
.evet-hero {
    background: linear-gradient(135deg, var(--evet-tint-primaria) 0%, var(--evet-superficie-2) 55%, var(--evet-superficie) 100%);
    border-bottom: 1px solid var(--evet-borda);
}

.evet-hero-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
}

.evet-hero-title .evet-accent {
    color: var(--evet-primaria-texto);
}

.evet-hero-sub {
    font-family: "Inter", "Segoe UI", sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    color: var(--evet-texto);
}

/* Ilustrações da landing: SVG próprio, na paleta do manual — nunca foto de banco de imagens. */
.evet-ilustra {
    display: block;
    width: 100%;
    height: auto;
    max-width: 560px;
    margin: 0 auto;
}

.evet-feature {
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    height: 100%;
    box-shadow: var(--evet-sombra);
    transition: transform .15s ease;
}

.evet-feature:hover {
    transform: translateY(-2px);
}


.evet-band {
    background: var(--evet-superficie);
    border-top: 1px solid var(--evet-borda);
    border-bottom: 1px solid var(--evet-borda);
}

.evet-step {
    text-align: center;
    padding: 8px 12px;
}

.evet-step-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--evet-tint-primaria);
}

.evet-step-icon .mud-icon-root {
    color: var(--evet-primaria-texto);
}

/* Faixa de chamada no fim da landing */
.evet-cta {
    background: var(--evet-tint-primaria);
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
}

.evet-footer {
    background: var(--evet-superficie);
    border-top: 1px solid var(--evet-borda);
}

/* Honeypot: fora da tela para pessoas, presente para robôs. */
.evet-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Aviso de nova versão do PWA (index.html, SPEC Q19 = A) ---- */
/* O carregamento travou (03/10/2026). Centralizado porque aqui não há aplicação atrás para a pessoa
   continuar usando — esta é a tela inteira dela. O coral é o semântico de erro, que é o que isto é.
   ⚠️ Até 06/10/2026 este comentário dizia "e não um toast no rodapé como o aviso de versão". O aviso de
   versão passou a ser centralizado também (pedido de Marcelo), então os dois são irmãos de desenho — e a
   diferença que sobra é a que importa: este NÃO tem como ser dispensado, porque não há nada atrás dele. */
#evet-travou {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 420px;
    margin: 0 16px;
    padding: 24px;
    text-align: center;
    background: var(--evet-superficie);
    color: var(--evet-texto);
    border: 1px solid var(--evet-borda);
    border-top: 4px solid var(--evet-erro);
    border-radius: var(--evet-radius-card);
    box-shadow: 0 8px 32px rgba(64, 73, 90, 0.24);
    font: 400 14px/1.45 "Inter", "Segoe UI", sans-serif;
}

#evet-travou[hidden] {
    display: none;
}

#evet-travou-detalhe {
    /* O nome do arquivo que não veio. É a única linha da caixa que é dado, e não explicação. */
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    color: var(--evet-erro);
    word-break: break-all;
}

#evet-travou-detalhe[hidden] {
    display: none;
}

#evet-travou strong {
    font: 700 16px/1.3 "Quicksand", "Inter", sans-serif;
}

#evet-travou button {
    margin-top: 6px;
    border: 0;
    border-radius: var(--evet-radius-control);
    padding: 10px 18px;
    min-height: 44px;
    background: var(--evet-primaria);
    color: var(--evet-branco);
    font: 600 14px/1.2 "Inter", "Segoe UI", sans-serif;
    cursor: pointer;
}

#evet-travou button:disabled {
    opacity: .7;
    cursor: default;
}

/* O aviso de versão nova, NO MEIO DA TELA desde 06/10/2026 (Marcelo) — era um toast no rodapé.
   Irmão de desenho do #evet-travou acima: mesma caixa, mesmos tokens de superfície, e o acento no topo
   dizendo qual dos dois é. Lá o acento é o coral de erro; aqui é a primária, porque versão nova é notícia
   boa e não defeito.
   ⚠️ O raio é o de MODAL (16 px) e não o de card: visualmente isto passou a ser um diálogo. */
#evet-update {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1301;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100vw - 32px);
    max-width: 440px;
    padding: 24px;
    background: var(--evet-superficie);
    color: var(--evet-texto);
    border: 1px solid var(--evet-borda);
    border-top: 4px solid var(--evet-primaria);
    border-radius: var(--evet-radius-modal);
    box-shadow: 0 8px 32px rgba(64, 73, 90, 0.24);
    font: 400 14px/1.45 "Inter", "Segoe UI", sans-serif;
}

#evet-update[hidden],
#evet-update-fundo[hidden] {
    display: none;
}

/* O escurecido. ⚠️ Ele existe para a caixa não parecer um pedaço de tela solto no meio do conteúdo — e é
   clicável para FECHAR, nunca para bloquear: a aplicação atrás está em uso. */
#evet-update-fundo {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(64, 73, 90, 0.32);
}

#evet-update-titulo {
    font: 700 18px/1.3 "Quicksand", "Inter", sans-serif;
}

/* Os dois à direita, a ação primeiro e Cancelar por último (SPEC Q23 = C). Isto é HTML cru e o
   `OrdemDosBotoesTests` só lê os `.razor`, então quem cobra a ordem aqui é o `AvisoDeVersaoTests`. */
.evet-update-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

#evet-update button {
    border: 0;
    border-radius: var(--evet-radius-control);
    padding: 10px 18px;
    min-height: 44px;
    background: var(--evet-primaria);
    color: var(--evet-branco);
    font: 600 14px/1.2 "Inter", "Segoe UI", sans-serif;
    cursor: pointer;
}

/* O secundário do manual: tint de fundo e o texto na primária de TEXTO, que é a que passa AA como texto
   (a `--evet-primaria` é preenchimento, e no tema escuro dá 2,8:1 escrita). */
#evet-update button.evet-update-secundario {
    background: var(--evet-tint-primaria);
    color: var(--evet-primaria-texto);
}

#evet-update button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---- Assinatura do tutor (F-10) ----
   A área tem tamanho fixo porque o traço é gravado em unidades do viewBox e capturado em pixels do elemento:
   os dois sistemas precisam coincidir, ou a assinatura sai deformada no PDF. Numa tela estreita o contêiner
   rola — encolher a área mudaria a escala do que foi assinado. */
.evet-assinatura {
    overflow-x: auto;
}

.evet-assinatura-tela {
    display: block;
    width: 400px;
    height: 120px;
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-control);
    background: var(--evet-superficie);
    touch-action: none;   /* o dedo assina; a página não rola junto */
    cursor: crosshair;
}

.evet-assinatura-tela:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: 2px;
}

/* ============================================================================
   Anexos do prontuário e lightbox (SPEC §3.3 F-05, manual §10).
   A grade mostra miniaturas; o lightbox abre sobre ardósia a 90%, com zoom e
   pan feitos em Blazor puro. Anexo removido da ficha continua visível, apagado
   — ele faz parte da história, e some da rotina sem sumir do registro.
   ========================================================================= */

.evet-anexo-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
    gap: 16px;
}

.evet-anexo {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "capa capa" "dados menu";
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--evet-nevoa-200, #DDE5E5);
    border-radius: 12px;
    background: var(--evet-superficie);
}

.evet-anexo-capa {
    grid-area: capa;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: var(--evet-superficie-2);
    cursor: pointer;
}

.evet-anexo-capa:focus-visible {
    outline: 2px solid var(--evet-verde-agua-500);
    outline-offset: 2px;
}

.evet-anexo-capa img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* O selo da modalidade (DX, US, CT) fica sobre a miniatura: é o que o radiologista procura primeiro. */
.evet-anexo-selo {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(64, 73, 90, .78);
    color: var(--evet-branco);
    font-size: .68rem;
    letter-spacing: .04em;
}

.evet-anexo-dados { grid-area: dados; min-width: 0; }
.evet-anexo :is(.mud-menu) { grid-area: menu; align-self: start; }

.evet-anexo-cancelado { opacity: .55; }
.evet-anexo-cancelado .evet-anexo-dados .mud-typography-subtitle2 { text-decoration: line-through; }

/* --------------------------------------------------------------- lightbox */

.evet-lightbox .mud-dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: rgba(64, 73, 90, .9);
}

.evet-lightbox-palco {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.evet-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    transform-origin: center;
    user-select: none;
    -webkit-user-drag: none;
}

.evet-lightbox-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--evet-branco);
    text-align: center;
    padding: 24px;
}

.evet-lightbox-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px;
    background: var(--evet-superficie);
}

.evet-lightbox-legenda { min-width: 0; }
.evet-lightbox-zoom { min-width: 48px; text-align: center; }

.evet-lightbox-janelas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-right: 8px;
}

/* ------------------------------------------------------------ transcrição */

/* O rascunho da máquina fica visivelmente destacado do prontuário: é o que impede confundir os dois. */
.evet-transcricao {
    border: 1px solid var(--evet-nevoa-200, #DDE5E5);
    border-left: 4px solid var(--evet-lavanda-300, #B9AEE0);
    border-radius: 12px;
    background: var(--evet-superficie-2);
}

@media (max-width: 600px) {
    .evet-anexo-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .evet-lightbox-janelas { width: 100%; margin-right: 0; }
}

/* ============================================================================
   Medição sobre imagem de exame (SPEC §3.3 F-15).
   A marca gravada sai em verde-água; a que ainda está sendo feita, em âmbar — a
   cor de "ainda não está pronto". O traço não escala com o zoom, senão sumiria
   numa imagem grande, e o texto leva contorno porque cai tanto sobre osso
   branco quanto sobre campo preto.
   ========================================================================= */

.evet-lightbox-quadro {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center;
}

.evet-lightbox-quadro .evet-lightbox-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.evet-lightbox-marcas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Só recebe clique quando há ferramenta escolhida: fora disso o arraste move a imagem. */
.evet-lightbox-marcas.evet-medindo {
    pointer-events: auto;
    cursor: crosshair;
}

.evet-marca line,
.evet-marca polygon {
    fill: none;
    stroke-width: 2;
}

.evet-marca circle { stroke-width: 2; }

.evet-marca-gravada line,
.evet-marca-gravada polygon,
.evet-marca-gravada circle {
    stroke: var(--evet-verde-agua-500);
    fill: none;
}

.evet-marca-gravada circle { fill: var(--evet-verde-agua-500); }
.evet-marca-gravada .evet-marca-texto { fill: var(--evet-verde-agua-500); }

.evet-marca-previa line,
.evet-marca-previa polygon,
.evet-marca-previa circle {
    stroke: #D9932B;
}

.evet-marca-previa circle { fill: #D9932B; }
.evet-marca-previa .evet-marca-texto { fill: #D9932B; }

.evet-marca-texto {
    paint-order: stroke;
    stroke: rgba(0, 0, 0, .65);
    stroke-width: 3;
    font-weight: 600;
}

.evet-lightbox-ressalva { margin: 8px 16px 0; }

.evet-lightbox-medindo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--evet-superficie-2);
    border-top: 1px solid var(--evet-nevoa-200, #DDE5E5);
}

.evet-lightbox-rotulo { max-width: 240px; }

.evet-lightbox-ferramentas { margin-right: 8px; }

.evet-lightbox-medicoes {
    max-height: 160px;
    overflow-y: auto;
    padding: 8px 16px;
    background: var(--evet-superficie);
    border-top: 1px solid var(--evet-nevoa-200, #DDE5E5);
}

.evet-medicao {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.evet-medicao > :first-child { min-width: 140px; }
.evet-medicao-cancelada { opacity: .55; }
.evet-medicao-cancelada .mud-typography-body2 { text-decoration: line-through; }

@media (max-width: 600px) {
    .evet-lightbox-ferramentas { width: 100%; margin-right: 0; }
    .evet-lightbox-rotulo { max-width: 100%; }
}

/* Telefone em três campos (Marcelo, 16/09/2026): país, código de área e número. As larguras são fixas nos
   dois primeiros porque o conteúdo deles é fixo — bandeira mais código, e até cinco dígitos —, e o número
   fica com o que sobra. Abaixo de 480 px a linha quebra: três caixas numa tela de celular viram três tiras
   ilegíveis. */
.evet-telefone {
    display: grid;
    grid-template-columns: 116px 104px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

@media (max-width: 479px) {
    .evet-telefone {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .evet-telefone > .evet-telefone-numero {
        grid-column: 1 / -1;
    }
}

/* O indicador de dinheiro é mais estreito que um contador de dois dígitos: "R$ 12.480,00" não cabe no mesmo
   tamanho de "12". Reduzir aqui evita a quebra de linha no cartão sem mexer nos outros indicadores. */
.evet-kpi-dinheiro {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

/* ---- Tendência dos sinais vitais do internado (F-23) ----
   Um gráfico por sinal, cada um com a sua escala. O manual §12 proíbe eixo duplo, e sinais vitais são o caso
   clássico em que ele tentaria: temperatura entre 37 e 40, batimento entre 60 e 180. Sem grade e sem faixa de
   referência — o que é normal depende de espécie, porte e quadro, e o VetOrbit não dá essa referência. */
.evet-tendencias {
    display: grid;
    gap: 4px;
}

.evet-tendencia {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(90px, 2fr) minmax(70px, auto);
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border-radius: 10px;
}

.evet-tendencia:nth-child(odd) {
    background: var(--evet-superficie-2);
}

.evet-tendencia-rotulo {
    display: flex;
    flex-direction: column;
    font-size: .8125rem;
    color: var(--evet-texto);
}

.evet-tendencia-faixa {
    font-size: .75rem;
    color: var(--evet-texto-2);
}

/* A linha estica na largura da coluna; a altura fica fixa para as linhas ficarem comparáveis entre si. */
.evet-tendencia-linha {
    width: 100%;
    height: 28px;
    display: block;
}

.evet-tendencia-linha polyline {
    fill: none;
    stroke: var(--evet-verde-agua-500);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;

    /* preserveAspectRatio="none" estica o traço junto com a caixa; isto o mantém com espessura constante. */
    vector-effect: non-scaling-stroke;
}

.evet-tendencia-ultimo {
    font-family: "Quicksand", "Inter", sans-serif;
    font-weight: 700;
    text-align: right;
    color: var(--evet-texto);
}

.evet-tendencia-ultimo span {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: .75rem;
    color: var(--evet-texto-2);
    margin-left: 2px;
}

@media (max-width: 599px) {
    .evet-tendencia {
        grid-template-columns: 1fr auto;
        grid-template-areas: "rotulo ultimo" "linha linha";
    }

    .evet-tendencia-rotulo { grid-area: rotulo; }
    .evet-tendencia-ultimo { grid-area: ultimo; }
    .evet-tendencia-linha { grid-area: linha; }
}

/* ---- Vitrine pública da loja (F-25) ----
   A única tela do produto que abre sem conta. Ela usa a casca pública do MainLayout, então o que fica aqui é
   só o que é dela: o cabeçalho da loja e o cartão do produto, que precisa ter a mesma altura dos vizinhos
   pela mesma razão dos indicadores do painel — o olho compara preço entre cartões lado a lado. */
.evet-vitrine-topo {
    border-bottom: 1px solid var(--evet-borda);
    padding-bottom: 16px;
}

.evet-vitrine-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.evet-vitrine-card .mud-card-content {
    flex: 1 1 auto;
}

/* ---- Relatórios (F-27) ----
   O gráfico é CSS pela mesma razão da grade da agenda: o que o manual §12 pede é deliberadamente pobre —
   uma série, sem 3D, sem sombra, sem eixo duplo —, e uma biblioteca de gráficos traria principalmente o
   que a identidade proíbe. A barra sai em verde-água 500, que é a cor de componente SEM texto. */
.evet-sugestoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.evet-grafico {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 200px;
    padding: 8px 0 0;
    margin-bottom: 24px;   /* o espaço em que os rótulos do eixo caem */
    border-bottom: 1px solid var(--evet-nevoa-200);
}

.evet-grafico-coluna {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.evet-grafico-barra {
    width: 100%;
    max-width: 48px;
    background: var(--evet-verde-agua-500);
    border-radius: 2px 2px 0 0;
    min-height: 0;
}

/* O rótulo fica ABAIXO da linha do eixo, e some quando a coluna fica estreita demais para ele: um eixo com
   rótulos sobrepostos não é eixo nenhum — a tabela logo abaixo continua dizendo cada valor. */
.evet-grafico-rotulo {
    position: absolute;
    top: 100%;
    padding-top: 4px;
    font-size: .7rem;
    line-height: 1;
    color: var(--evet-texto-2);
    white-space: nowrap;
}

/* Muitos passos — "diariamente nos últimos 6 meses" são 180 colunas — e os rótulos se sobrepõem até virarem
   uma mancha. A tabela logo abaixo continua dizendo cada valor, então o eixo cala em vez de mentir. */
.evet-grafico-denso .evet-grafico-rotulo {
    display: none;
}

@media (max-width: 960px) {
    .evet-grafico-rotulo {
        display: none;
    }
}

/* ---- Landing: a seção de perguntas (F-27) ----
   A demonstração usa o mesmo verde-água 500 das barras do produto, porque ela é o produto — um print
   estilizado prometeria uma tela que não existe. Barras horizontais aqui, e não verticais como no
   relatório: o rótulo é nome de produto, e nome de produto não cabe embaixo de uma barra estreita. */
.evet-band-destaque {
    background: linear-gradient(180deg, var(--evet-superficie-2) 0%, var(--evet-tint-primaria) 100%);
}

.evet-demo {
    background: var(--evet-superficie);
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-card-radius, 12px);
    box-shadow: 0 2px 8px rgba(51, 60, 78, .10);
    overflow: hidden;
}

.evet-demo-pergunta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--evet-borda);
    background: var(--evet-superficie-2);
    font-style: italic;
    color: var(--evet-texto);
}

.evet-demo-resposta {
    padding: 16px;
}

.evet-demo-rotulo {
    display: block;
    font-size: .8rem;
    color: var(--evet-texto-2);
    margin-bottom: 12px;
}

.evet-demo-linha {
    display: grid;
    grid-template-columns: 1fr 55% auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: .85rem;
}

.evet-demo-nome {
    color: var(--evet-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evet-demo-barra {
    height: 14px;
    border-radius: 2px;
    background: var(--evet-verde-agua-500);
}

.evet-demo-valor {
    font-weight: 700;
    color: var(--evet-texto);
    min-width: 34px;
    text-align: right;
}

.evet-demo-rodape {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--evet-borda);
    font-size: .8rem;
    color: var(--evet-texto-2);
}

/* As perguntas de exemplo. São texto, e não botão: na landing ninguém está logado para clicá-las. */
.evet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.evet-chip-pergunta {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--evet-tint-primaria);
    color: var(--evet-verde-agua-800);
    font-size: .82rem;
}

/* ── Aviso de conexão (26/09/2026) ────────────────────────────────────────────
   A faixa que diz a verdade sobre a conversa com o servidor. Ela ocupa lugar no fluxo em vez de flutuar:
   uma tarja sobreposta esconderia o topo da tela justamente quando a pessoa está tentando entender o que
   houve. Some sozinha, e é a única coisa que aparece no lugar da barra amarela do Blazor. */
.evet-conexao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.evet-conexao-espera {
    background: var(--evet-superficie-2);
    color: var(--evet-texto);
}

.evet-conexao-caiu {
    background: var(--evet-coral-50);
    color: var(--evet-erro-texto);
}

/* ── Primeiros passos (26/09/2026) ────────────────────────────────────────────
   O cartão da clínica que ainda está se instalando. Fundo em tint para se distinguir dos indicadores do dia
   sem competir com eles: ele é a coisa mais importante da tela hoje e deixa de existir amanhã. */
.evet-primeiros-passos {
    background: var(--evet-superficie-2);
    border: 1px solid var(--evet-borda);
    border-radius: 12px;
}

.evet-passo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--evet-borda);
}

.evet-passo:first-of-type { border-top: 0; }

/* Feito não se apaga da lista — some o "por quê" e o botão, e fica a marca. A lista inteira é o que diz à
   clínica quanto falta, e tirar o que foi feito faria o progresso parecer não andar. */
.evet-passo-feito { opacity: .65; }

/* ── Sinais da auditoria (27/09/2026) ─────────────────────────────────────────
   Âmbar, e não coral: coral é erro e bloqueio legal, e isto é uma pergunta. A clínica precisa olhar, não
   precisa se assustar — e o dia em que este painel virar vermelho é o dia em que param de abri-lo. */
.evet-sinais {
    background: var(--evet-superficie-2);
    border-left: 3px solid var(--evet-ambar-escuro);
    border-radius: 12px;
}

.evet-sinal {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--evet-borda);
}

.evet-sinal:first-of-type { border-top: 0; }

/* ---- Escolha do tema (/conta, 28/09/2026) --------------------------------------------
   Quatro cartões-botão. **A amostra é pintada pelo próprio tema que ela representa** (classe
   `.evet-como-*`), e não por hexes escritos aqui: uma amostra com valor próprio é uma amostra
   que um dia deixa de bater com o tema. */
.evet-temas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.evet-tema {
    display: grid;
    gap: 4px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    background: var(--evet-superficie);
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-card);
    color: var(--evet-texto);
    font: inherit;
}

.evet-tema:hover {
    border-color: var(--evet-primaria);
}

/* Escolhido: anel de 2 px na primária. Não caixa cheia — a caixa cheia é do item de menu e da aba,
   e aqui ela taparia justamente a amostra, que é o conteúdo do botão. */
.evet-tema-escolhido {
    border-color: var(--evet-primaria);
    box-shadow: inset 0 0 0 1px var(--evet-primaria);
}

.evet-tema-amostra {
    display: flex;
    height: 56px;
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--evet-borda);
    border-radius: var(--evet-radius-control);
    background: var(--evet-fundo);
}

.evet-tema-barra {
    width: 26%;
    background: var(--evet-superficie);
    border-right: 1px solid var(--evet-borda);
}

.evet-tema-papel {
    flex: 1;
    padding: 6px;
}

.evet-tema-faixa {
    display: block;
    height: 14px;
    border-radius: 4px;
    background: var(--evet-primaria);
}

.evet-tema-nome {
    font-weight: 600;
}

.evet-tema-descricao {
    font-size: 0.75rem;
    color: var(--evet-texto-2);
}

/* ---- A primária quando ela é TEXTO, e não preenchimento (28/09/2026) ------------------
   O MudBlazor usa um `Primary` só para as duas coisas: o fundo do botão cheio (que carrega texto
   branco) e a cor do botão de texto, do contorno e do link. Sobre papel branco um verde-água 700
   cumpre as duas — 4,8:1 com branco e 4,8:1 sobre branco. **Sobre papel escuro elas se separam**:
   o preenchimento precisa continuar escuro para manter o texto branco, e aí o mesmo tom dá 2,8:1
   como texto, que reprova AA.
   Por isso quem é texto usa `--evet-primaria-texto`, que nos temas claros **é o próprio
   verde-água 700** — ou seja, nada muda no padrão e no vivo. A alternativa seria clarear o
   `Primary` e pôr texto escuro dentro do botão cheio, que quebraria a regra da §3 ("tudo que
   carrega texto branco cumpre 4,5:1") em todo o resto do produto. */
.mud-button-root.mud-button-text-primary,
.mud-button-root.mud-button-outlined-primary,
.mud-icon-button.mud-primary-text,
.mud-link.mud-primary-text,
.mud-typography.mud-primary-text {
    color: var(--evet-primaria-texto);
}

.mud-button-root.mud-button-outlined-primary {
    border-color: var(--evet-primaria-texto);
}

/* O texto com tooltip na aba "Quem viu": o tracejado é o que diz que parar o mouse ali mostra algo.
   Sem ele o tooltip é um segredo — ninguém para o mouse sobre um texto que parece texto comum. */
.evet-acesso-detalhe {
    border-bottom: 1px dashed var(--evet-borda);
    cursor: help;
}

/* ---- O detalhe de uma passagem na aba "Quem viu" (29/09/2026) ------------------------
   Ele abre dentro da própria tabela, e por isso precisa se ler como "dentro": fundo de
   superfície 2 e uma barra na cor do módulo à esquerda, que é a mesma gramática do bloco
   da barra lateral. Sem elas, a linha aberta parece mais uma linha da tabela. */
.evet-sessao-detalhe {
    padding: 8px 16px;
    background: var(--evet-superficie-2);
    border-left: 3px solid var(--evet-mod, var(--evet-primaria));
}

.evet-sessao-evento {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.8125rem;
}

/* A hora em largura fixa e tabular: uma coluna de horas desalinhada obriga a ler cada uma. */
.evet-sessao-hora {
    flex: 0 0 64px;
    font-variant-numeric: tabular-nums;
    color: var(--evet-texto-2);
}

.evet-sessao-mudou {
    color: var(--evet-texto-2);
}

/* ───────────────────────────── fluxo de caixa projetado (/gestao/fluxo-de-caixa)
   ⚠️ DOIS PAINÉIS e não um gráfico com dois eixos: o saldo acumulado e o movimento do dia têm escalas
   diferentes, e sobrepô-los seria eixo duplo, que o EvetTheme.Charts proíbe. Eles dividem o eixo x, que é
   o que casa a leitura sem misturar as escalas.

   ⚠️ Nenhuma cor escrita à mão: tudo por token, senão a tela não acompanha os quatro temas. O verde-água
   500 e o coral são os de componente sem texto (manual §18) — aqui são área e barra, nunca texto sobre
   elas. */

.evet-fluxo-saldo {
    position: relative;
    display: flex;
    gap: 8px;
}

.evet-fluxo-svg {
    flex: 1 1 auto;
    height: 220px;
    width: 100%;
    overflow: visible;
}

/* A área sob a linha: só sugere volume, e por isso é lavada. */
.evet-fluxo-area {
    fill: var(--evet-verde-agua-500);
    fill-opacity: .14;
    stroke: none;
}

.evet-fluxo-linha {
    fill: none;
    stroke: var(--evet-verde-agua-700);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* A faixa abaixo do zero. Âmbar e não coral: ficar sem dinheiro no dia 28 é PRAZO, e coral está reservado
   a erro, ação destrutiva e bloqueio legal (manual §18). */
.evet-fluxo-vermelho {
    fill: var(--evet-ambar-escuro);
    fill-opacity: .10;
}

.evet-fluxo-zero {
    stroke: var(--evet-nevoa-200);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.evet-fluxo-eixo-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--evet-texto-2);
}

/* ── painel de baixo: o movimento, divergente a partir da linha central ── */
.evet-fluxo-movimento {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 72px;
}

.evet-fluxo-dia {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

.evet-fluxo-meia {
    display: flex;
    flex: 1 1 50%;
    min-height: 0;
}

.evet-fluxo-meia-cima {
    align-items: flex-end;
    border-bottom: 1px solid var(--evet-nevoa-200);
}

.evet-fluxo-meia-baixo {
    align-items: flex-start;
}

.evet-fluxo-barra {
    display: block;
    width: 100%;
    border-radius: 2px;
    min-height: 0;
}

.evet-fluxo-entra {
    background: var(--evet-verde-agua-500);
}

.evet-fluxo-sai {
    background: var(--evet-coral-400);
}

/* Texto: aqui vale a regra do texto, então são os tons que passam contraste — nunca o 500 nem o coral 400. */
.evet-fluxo-entra-texto {
    color: var(--evet-verde-agua-700);
}

.evet-fluxo-sai-texto,
.evet-fluxo-negativo {
    color: var(--evet-ambar-escuro);
}

.evet-fluxo-eixo-x {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--evet-texto-2);
}

.evet-fluxo-ressalva {
    display: block;
    color: var(--evet-texto-2);
}