/* ===========================================================================
   eVet — folha de estilo global. Fonte de verdade das cores/tipografia/forma:
   docs/eVet-manual-identidade-v1.3.pdf → Ui/EvetTheme.cs (tokens MudBlazor).
   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 {
    --evet-verde-agua-500: #5BC4B8;
    --evet-verde-agua-300: #7FD1C7;
    --evet-verde-agua-700: #2F7E75;
    --evet-verde-agua-800: #266B63;
    --evet-verde-agua-50: #EAF7F5;
    --evet-coral-400: #F49390;
    --evet-coral-600: #E5726E;
    --evet-ardosia-700: #40495A;
    --evet-ambar-300: #F6C77B;
    --evet-lavanda-300: #A99BE0;
    --evet-ceu-300: #8FC8EA;
    --evet-nevoa-50: #F7FAFA;
    --evet-nevoa-200: #DCE4E4;
    --evet-nevoa-500: #8A94A3;
    --evet-erro: #E5726E;
    --evet-shadow: 0 2px 8px rgba(64, 73, 90, 0.08);
    --evet-radius-control: 10px;
    --evet-radius-card: 12px;
    --evet-radius-modal: 16px;
    --evet-bottom-nav-height: 64px;
}

html, body {
    background: var(--evet-nevoa-50);
    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);
}

#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: #fff;
}

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

.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-ardosia-700);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

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

code {
    color: var(--evet-ardosia-700);
    background: var(--evet-nevoa-50);
    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;
}

.mud-tabs .mud-tab-slider {
    background: var(--evet-verde-agua-500);
}

/* ---- §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-verde-agua-50);
    color: var(--evet-ardosia-700);
    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-nevoa-50);
}

.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;
    }
}

.evet-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

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

/* ---- §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-ardosia-700);
}

.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: #fff;
    border: 1px solid var(--evet-nevoa-200);
    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);
}

.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text.mud-disabled {
    background: var(--evet-nevoa-50);
    color: var(--evet-nevoa-500);
}

.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-nevoa-500);
    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-nevoa-500);
}

/* ---- §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-verde-agua-50);
    color: var(--evet-verde-agua-700);
}

.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: #fff;
}

.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-verde-agua-50);
    color: var(--evet-verde-agua-700);
}

/* ---- Cartão de indicador do painel: o número é o conteúdo, o link é o número ---- */
.evet-kpi-card .mud-link .evet-kpi {
    color: var(--evet-ardosia-700);
}

.evet-kpi-card .mud-link:hover .evet-kpi {
    color: var(--evet-verde-agua-700);
}

/* ---- 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-ardosia-700);
}

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

/* ---- §8 Abas: sem caixa alta, indicador em verde-água 500 ---- */
.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    min-height: 44px;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--evet-ardosia-700);
}

/* ---- §5 App shell: busca global, sidebar mini, avatar, âncoras do site ---- */
.evet-global-search {
    width: 360px;
    margin-left: 24px;
}

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

.mud-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text {
    display: none;
}

.mud-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.mud-drawer.mud-drawer-mini.mud-drawer--closed .mud-nav-link-icon {
    margin: 0;
}

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

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

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

@media (max-width: 767.98px) {
    .mud-layout .evet-drawer,
    .evet-menu-toggle {
        display: none !important;
    }

    .mud-layout .mud-main-content {
        margin-left: 0 !important;
        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: #fff;
        border-top: 1px solid var(--evet-nevoa-200);
    }

    .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-ardosia-700);
        font: 600 0.6875rem/1.2 "Inter", "Segoe UI", sans-serif;
    }

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

    .evet-bottom-link.active {
        color: var(--evet-verde-agua-700);
    }

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

/* ---- 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-nevoa-200);
}

/* ---- §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: #3FA89C; --evet-mod-ink: #2D7970; --evet-mod-tint: #E8F5F3; }
.evet-mod-agenda { --evet-mod: #4A88B8; --evet-mod-ink: #3E729B; --evet-mod-tint: #E9F1F6; }
.evet-mod-prontuarios { --evet-mod: #7A6BC7; --evet-mod-ink: #6E60B3; --evet-mod-tint: #EFEDF8; }
.evet-mod-receitas { --evet-mod: #DE7B77; --evet-mod-ink: #A05956; --evet-mod-tint: #FBEFEF; }
.evet-mod-estoque { --evet-mod: #D89A3E; --evet-mod-ink: #8F6629; --evet-mod-tint: #FAF3E8; }
.evet-mod-livros { --evet-mod: #2F7E75; --evet-mod-ink: #2C766E; --evet-mod-tint: #E6F0EE; }
.evet-mod-financeiro { --evet-mod: #3E9A72; --evet-mod-ink: #307859; --evet-mod-tint: #E8F3EE; }
.evet-mod-ajustes { --evet-mod: #6B7585; --evet-mod-ink: #626C7A; --evet-mod-tint: #EDEEF0; }

/* Sidebar: ícone sempre na tinta do módulo; item ativo com tint e barra de 4 px */
.evet-drawer .mud-nav-link[class*="evet-mod-"] .mud-nav-link-icon {
    color: var(--evet-mod-ink);
}

.evet-drawer .mud-nav-link.active[class*="evet-mod-"] {
    background: var(--evet-mod-tint);
    color: var(--evet-mod-ink);
    box-shadow: inset 4px 0 0 0 var(--evet-mod);
}

.evet-drawer .mud-nav-link.active[class*="evet-mod-"] .mud-nav-link-icon {
    color: var(--evet-mod-ink);
}

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

/* Cabeçalho da página: barra de 4 px + título na tinta do módulo */
.evet-page[class*="evet-mod-"] .evet-page-header {
    border-left: 4px solid var(--evet-mod);
    padding-left: 16px;
}

.evet-page[class*="evet-mod-"] .evet-page-header h1 {
    color: var(--evet-mod-ink);
}

/* Abas ativas e estados vazios do módulo */
.evet-page[class*="evet-mod-"] .mud-tabs .mud-tab-slider {
    background: var(--evet-mod);
}

.evet-page[class*="evet-mod-"] .mud-tabs .mud-tab.mud-tab-active {
    color: var(--evet-mod-ink);
}

.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-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-ink);
}

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

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

/* ---- §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-ardosia-700);
    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: #fff;
    border: 2px solid var(--evet-verde-agua-500);
    color: var(--evet-verde-agua-700);
}

.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-nevoa-500);
    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-verde-agua-50);
    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-ardosia-700);
}

.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-nevoa-200);
    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-verde-agua-700);
    font-weight: 500;
    text-decoration: none;
}

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

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

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

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

.evet-pagination-summary {
    color: var(--evet-nevoa-500);
    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-coral-600);
}

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

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

.evet-dropzone:hover,
.mud-file-upload-dragarea:has(.evet-dropzone):hover .evet-dropzone {
    border-color: var(--evet-verde-agua-500);
    background: #D9F1ED;
}

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

.evet-dropzone-icon .mud-icon-root {
    color: var(--evet-verde-agua-700);
}

.evet-search-results {
    border: 1px solid var(--evet-nevoa-200);
    border-radius: var(--evet-radius-card);
    background: #fff;
    box-shadow: var(--evet-shadow);
    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-nevoa-500);
}

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

.evet-search-item.active {
    background: var(--evet-verde-agua-50);
}

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

/* ---- §16 Documentos e e-mail (mocks do guia) ---- */
.evet-doc-mock {
    border: 1px solid var(--evet-nevoa-200);
    border-radius: var(--evet-radius-card);
    background: #fff;
    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-nevoa-200);
}

.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-ardosia-700);
}

.evet-doc-number {
    font: 400 0.75rem/1.4 "Inter", "Segoe UI", sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: var(--evet-nevoa-500);
    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-verde-agua-50);
}

.evet-seal .mud-icon-root {
    color: #55B98A;
}

.evet-mail-mock {
    border: 1px solid var(--evet-nevoa-200);
    border-radius: var(--evet-radius-card);
    background: #fff;
    overflow: hidden;
}

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

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

/* ---- §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-nevoa-200);
    font: 600 0.75rem/1 "Inter", "Segoe UI", sans-serif;
}

.evet-pass {
    color: #55B98A;
    font-weight: 600;
}

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

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

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

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

.evet-drawer .mud-nav-link.active {
    background: var(--evet-verde-agua-50);
    color: var(--evet-verde-agua-700);
    font-weight: 600;
}

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

.evet-muted {
    color: var(--evet-nevoa-500);
}

/* ---- §1 Logotipo (Shared/Brand.razor): selo verde-água 300, "e" coral, "Vet" verde-água 700; letras com a altura do selo, gap de 35% ---- */
.evet-lockup {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--evet-s) * 0.35);
    line-height: 1;
    white-space: nowrap;
}

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

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

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

.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-verde-agua-700);
}

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

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

.evet-lockup-mono .evet-wordmark,
.evet-lockup-mono .evet-wordmark-e {
    color: var(--evet-verde-agua-700);
}

/* Sobre fundo escuro: selo branco com cruz ardósia, wordmark inteiro em branco */
.evet-lockup-ondark .evet-selo-bg {
    fill: #fff;
}

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

.evet-lockup-ondark .evet-wordmark,
.evet-lockup-ondark .evet-wordmark-e {
    color: #fff;
}

/* ---- Landing (F-00) ---- */
.evet-hero {
    background: linear-gradient(135deg, var(--evet-verde-agua-50) 0%, var(--evet-nevoa-50) 55%, #fff 100%);
    border-bottom: 1px solid var(--evet-nevoa-200);
}

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

.evet-hero-title .evet-accent {
    color: var(--evet-verde-agua-700);
}

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

/* 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-nevoa-200);
    border-radius: var(--evet-radius-card);
    height: 100%;
    box-shadow: var(--evet-shadow);
    transition: transform .15s ease;
}

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


.evet-band {
    background: #fff;
    border-top: 1px solid var(--evet-nevoa-200);
    border-bottom: 1px solid var(--evet-nevoa-200);
}

.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-verde-agua-50);
}

.evet-step-icon .mud-icon-root {
    color: var(--evet-verde-agua-700);
}

/* Faixa de chamada no fim da landing */
.evet-cta {
    background: var(--evet-verde-agua-50);
    border: 1px solid var(--evet-nevoa-200);
    border-radius: var(--evet-radius-card);
}

.evet-footer {
    background: #fff;
    border-top: 1px solid var(--evet-nevoa-200);
}

/* 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) ---- */
#evet-update {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 18px;
    background: var(--evet-ardosia-700);
    color: #fff;
    border-radius: var(--evet-radius-card);
    box-shadow: 0 8px 32px rgba(64, 73, 90, 0.24);
    font: 500 14px/1.2 "Inter", "Segoe UI", sans-serif;
}

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

#evet-update button {
    border: 0;
    border-radius: var(--evet-radius-control);
    padding: 8px 14px;
    background: var(--evet-verde-agua-700);
    color: #fff;
    font: 600 14px/1.2 "Inter", "Segoe UI", sans-serif;
    cursor: pointer;
}

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