/* =========================================================================
   VASIS — linguagem visual do Admin (tema escuro)

   Entra DEPOIS do app.css e do bootstrap, e é quem manda: as telas novas
   usam só as classes daqui. Tudo parte dos tokens abaixo — trocar a paleta
   é mexer em um bloco, não caçar cor espalhada por arquivo.
   ========================================================================= */

:root {
    /* Superfícies, da mais funda para a mais alta */
    --fundo: #0b1016;
    --superficie: #111823;
    --superficie-alta: #16202d;
    --superficie-hover: #1b2635;

    --borda: #272c3a;
    --borda-forte: #343b4d;

    /* Texto */
    --texto: #e6e8ee;
    --texto-suave: #9aa2b6;
    --texto-fraco: #6b7488;

    /* Acento e estados */
    /* Âmbar: titula as seções e marca o campo em foco. */
    --accent: #e89a3c;
    --accent-forte: #d3862a;
    --accent-suave: rgba(232, 154, 60, .14);

    --sucesso: #35c78a;
    --sucesso-suave: rgba(53, 199, 138, .14);
    --perigo: #f2555a;
    --perigo-suave: rgba(242, 85, 90, .12);
    --alerta: #f0a92c;

    --raio: 10px;
    --raio-pequeno: 7px;
    --sombra: 0 8px 28px rgba(0, 0, 0, .45);

    /* Áreas de toque.
       ---------------------------------------------------------------------
       Dois valores, e a diferença entre eles é o dedo. Com ponteiro, 38px já
       é confortável — é a altura dos campos, e alinha controle com campo na
       mesma linha. Em toque, a referência da Apple é 44px, e ela existe
       porque o dedo cobre o alvo enquanto mira.

       Estes tokens são o contrato: controle clicável novo parte de --toque e
       sobe para --toque-amplo abaixo do breakpoint de formulário. Números
       soltos como "min-height: 38px" espalhados por componente foi como
       chegamos a botões de 21px e 31px convivendo com campos de 38px. */
    --toque: 38px;
    --toque-amplo: 44px;
}

body {
    background-color: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
}

/* -------------------------------------------------------------------------
   Cabeçalho de página e barra de ferramentas
   ------------------------------------------------------------------------- */

.pagina {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.75rem 0 3rem;
}

.pagina-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.pagina-topo h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.pagina-topo .descricao {
    margin: .3rem 0 0;
    color: var(--texto-suave);
    font-size: .875rem;
}

/* -------------------------------------------------------------------------
   Cartão e seções
   ------------------------------------------------------------------------- */

.cartao {
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-top: 1.5rem;
    padding: 1.5rem;
}

.cartao + .cartao { margin-top: 1.25rem; }

/* Título de seção: caixa alta, pequeno, com a barra de acento à esquerda.
   É o que separa DADOS DA EMPRESA de ENDEREÇO sem precisar de moldura. */
.secao-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--accent);
}

.secao-titulo::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background-color: var(--accent);
}

.secao-titulo .contador {
    margin-left: auto;
    color: var(--texto-suave);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* -------------------------------------------------------------------------
   Campos
   ------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

.campo > label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--texto-suave);
    letter-spacing: .01em;
}

.campo .obrigatorio { color: var(--accent); margin-left: .15rem; }

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: .55rem .7rem;
    background-color: var(--superficie-alta);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    color: var(--texto);
    font-size: .875rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.campo input::placeholder { color: var(--texto-fraco); }

.campo input:hover:not(:disabled),
.campo select:hover:not(:disabled) { border-color: #414a60; }

/* Foco visível de verdade: anel de acento, não só a borda azul do navegador. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-suave);
    background-color: var(--superficie-hover);
}

.campo input:disabled,
.campo select:disabled {
    background-color: #12151d;
    color: var(--texto-fraco);
    cursor: not-allowed;
}

/* Estado de erro vindo da validação do Blazor. */
.campo input.invalid,
.campo select.invalid { border-color: var(--perigo); }

.campo .ajuda { margin: 0; font-size: .74rem; color: var(--texto-fraco); }

.campo .validation-message,
.validation-message { color: var(--perigo); font-size: .74rem; }

/* -------------------------------------------------------------------------
   Caixas de escolha (módulos, permissões, filiais, perfis)
   -------------------------------------------------------------------------
   DEFINIÇÃO ÚNICA. Havia duas, ambas fora de @media: esta, com tokens, e uma
   segunda mais abaixo, com cores literais — que vencia pela cascata e deixava
   este bloco inteiro sem efeito. Consolidadas aqui, com os tokens desta e o
   min-height daquela, que é o que dá área de toque no celular.
   ------------------------------------------------------------------------- */

.escolhas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.escolha {
    display: flex;
    align-items: center;
    text-align: center;
    gap: .55rem;
    min-height: 38px;
    padding: .45rem .75rem;
    background-color: var(--superficie-alta);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.escolha:hover { border-color: var(--borda-forte); background-color: var(--superficie-hover); }

.escolha:has(input:checked) {
    border-color: var(--accent);
    background-color: var(--accent-suave);
}

.escolha:has(input:disabled) { opacity: .72; cursor: not-allowed; }

.escolha input { width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }

.escolha label {
    margin: 0;
    color: var(--texto);
    font-size: .82rem;
    font-weight: 500;
    cursor: inherit;
}

.escolha input:disabled + label { color: var(--texto-fraco); cursor: default; }

/* Interruptor para alternar entre dois modos */
.interruptor {
    display: inline-flex;
    padding: 3px;
    background-color: var(--superficie-alta);
    border: 1px solid var(--borda);
    border-radius: 999px;
}

.interruptor button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Altura mínima em vez de só padding: era o achado da Etapa 01 — três
       botões de 31px lado a lado, abaixo de qualquer alvo de toque. O alvo é
       o BOTÃO, não a cápsula que o envolve, então é ele que recebe a medida. */
    min-height: var(--toque);
    padding: .38rem 1rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--texto-suave);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.interruptor button.ativo { background-color: var(--accent); color: #fff; }

.interruptor button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.grid {
    display: flex;
    gap: 1rem;
}

/* -------------------------------------------------------------------------
   Botões
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.btn-primario { background-color: var(--accent); color: #fff; }
.btn-primario:hover:not(:disabled) { background-color: var(--accent-forte); }

/* O "+" da ação de adicionar.
   ---------------------------------------------------------------------------
   Era o caractere "+" escrito no texto do botão, e o sinal saía do tamanho da
   fonte do rótulo (.85rem) — pequeno demais para o papel que faz, que é dizer
   à distância o que aquele botão é.

   Desenho em máscara, como os ícones do menu: assim o traço assume
   currentColor e acompanha o botão em qualquer variante, em vez de precisar de
   uma cor própria. `aria-hidden` no span — o rótulo já diz "Adicionar", e um
   leitor de tela anunciando "mais Adicionar" só atrapalharia. */
.icone-mais {
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.75a.9.9 0 0 1 .9.9v3.45h3.45a.9.9 0 0 1 0 1.8H8.9v3.45a.9.9 0 0 1-1.8 0V8.9H3.65a.9.9 0 0 1 0-1.8H7.1V3.65a.9.9 0 0 1 .9-.9Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.75a.9.9 0 0 1 .9.9v3.45h3.45a.9.9 0 0 1 0 1.8H8.9v3.45a.9.9 0 0 1-1.8 0V8.9H3.65a.9.9 0 0 1 0-1.8H7.1V3.65a.9.9 0 0 1 .9-.9Z'/%3E%3C/svg%3E");
}

.btn-neutro {
    background-color: transparent;
    border-color: var(--borda-forte);
    color: var(--texto-suave);
}

.btn-neutro:hover:not(:disabled) { background-color: var(--superficie-hover); color: var(--texto); }

.btn:disabled { opacity: .55; cursor: default; }

.btn-texto {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    /* A classe nasceu para <button>, que não sublinha. Desde que ela passou a
       servir também aos links de ação da linha, precisa dizer isto: sem a
       regra, o <a> traz o sublinhado padrão do navegador e fica permanentemente
       marcado, enquanto o <button> ao lado só sublinha no hover. */
    text-decoration: none;
}

.btn-texto:hover { text-decoration: underline; }
.btn-texto.perigo { color: var(--perigo); }
.btn-texto:disabled { color: var(--texto-fraco); cursor: default; text-decoration: none; }

/* Foco visível: é a ação de linha das seis listagens, e quem chega por Tab
   precisa ver onde está. O offset negativo mantém o anel dentro da célula,
   sem empurrar o layout da linha. */
.btn-texto:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.acoes-rodape {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--borda);
}

/* -------------------------------------------------------------------------
   Filtros e tabela
   ------------------------------------------------------------------------- */

.filtros {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.busca { position: relative; flex: 1 1 260px; max-width: 380px; }

/* O × nativo do type=search sai: só o Chrome o desenha, não aceita estilo e
   não dá alvo de toque. O nosso vem logo abaixo. */
.busca-campo::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.busca-limpar {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toque);
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.busca-limpar:hover { color: var(--texto); }

.busca-limpar:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--raio-pequeno);
}

/* Espaço para o × não cobrir o texto digitado. Precisa da classe no próprio
   input: `.busca input` perde em especificidade para a regra que estiliza os
   campos de busca, e o padding não chegava a valer. */
.busca input.busca-campo { padding-right: var(--toque); }

/* -------------------------------------------------------------------------
   Filtros da listagem
   -------------------------------------------------------------------------
   Busca e filtros na MESMA linha, nas três telas que os têm.

   Houve aqui um painel recolhível com <details> nativo, para poupar altura no
   celular. Foi removido: um <details> FECHADO tem o conteúdo escondido pelo
   navegador, e como no desktop o <summary> era ocultado, os filtros sumiam da
   tela inteiros — sem resumo para abrir e sem painel visível. Abrir por
   largura exigiria mexer no atributo `open`, que é HTML, não CSS.

   Empresas e Tenants nunca recolheram e ficaram boas; Pessoas passou a seguir
   as duas. Um padrão só, e o que se paga é altura no celular — onde os dois
   interruptores de Pessoas empilham, como já empilhavam os das outras.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .filtros {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }

    /* flex-basis precisa voltar a auto: em coluna, o eixo principal é o
       vertical, e o `flex: 1 1 260px` do desktop viraria 260px de ALTURA para
       o campo de busca. Foi assim que os filtros passaram de 210px para 314px
       na primeira tentativa desta etapa — a correção piorando o que vinha
       corrigir. */
    .busca {
        flex: 0 0 auto;
        max-width: none;
    }

    /* Os chips ocupam a largura e dividem o espaço igualmente: com o dedo,
       três alvos de tamanhos diferentes obrigam a mirar. */
    .filtros .interruptor { display: flex; }

    .filtros .interruptor button { flex: 1 1 0; }
}

/* O empilhamento de `.filtro-grupo` no celular NÃO mora aqui — mora logo
   abaixo da definição base, mais adiante neste arquivo. Media query não
   acrescenta especificidade: escrito neste ponto, ele era vencido pela regra
   base que vem depois, e do override sobrava só o `flex-direction`. O rótulo e
   os chips herdavam o `align-items: center` do desktop e ficavam centrados no
   meio da tela, cada cápsula do tamanho do próprio texto. */

.busca input {
    width: 100%;
    padding: .55rem .7rem .55rem 2.1rem;
    background-color: var(--superficie-alta);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    color: var(--texto);
    font-size: .875rem;
}

.busca input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-suave);
}

/* A lupa centra na faixa do CAMPO, não na do container.
   ---------------------------------------------------------------------------
   `.busca` envolve o input e o texto de ajuda abaixo dele, então `top: 50%`
   media a soma dos dois e empurrava o ícone para fora do campo — visível
   quando os filtros passaram a empilhar no celular e a ajuda ganhou duas
   linhas. Ancorar no topo e centrar dentro da altura do próprio input mantém a
   lupa no lugar, tenha a ajuda o tamanho que tiver. */
.busca::before {
    content: "⌕";
    position: absolute;
    left: .75rem;
    top: 0;
    display: flex;
    align-items: center;
    height: 2.5rem;
    color: var(--texto-fraco);
    font-size: 1.05rem;
}

.tabela-quadro {
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}

/* Wrapper ÚNICO de rolagem da tabela — absorveu o .tabela-container, que
   fazia exatamente isto com outro nome. É ele que impede a página de rolar
   de lado quando a tabela não cabe. */
.tabela-rolagem { width: 100%; overflow-x: auto; }

table.dados {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

table.dados th {
    padding: .7rem 1rem;
    background-color: var(--superficie-alta);
    border-bottom: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

table.dados td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados tbody tr:hover { background-color: var(--superficie-hover); }

table.dados .numerico { text-align: right; font-variant-numeric: tabular-nums; }
table.dados .mono { font-variant-numeric: tabular-nums; color: var(--texto-suave); }

.principal { font-weight: 600; }
.secundario { display: block; margin-top: .15rem; font-size: .78rem; color: var(--texto-suave); }

/* Ações da linha: discretas até o ponteiro chegar perto.
   ---------------------------------------------------------------------------
   O esmaecimento vale SÓ onde existe ponteiro. Sem a consulta de mídia, num
   aparelho de toque — onde :hover nunca acontece — as ações da linha ficavam
   permanentemente a 55% de opacidade, sem nenhuma forma de revelá-las. A
   informação some do celular e não volta.

   Escondido atrás de hover não é discreto, é indisponível: quem opera no
   celular precisa ver o que pode fazer. */
td.acoes { text-align: right; white-space: nowrap; }
td.acoes > * + * { margin-left: 1rem; }

@media (hover: hover) {
    table.dados tbody tr td.acoes { opacity: .55; transition: opacity .15s ease; }
    table.dados tbody tr:hover td.acoes,
    table.dados tbody tr:focus-within td.acoes { opacity: 1; }
}

/* -------------------------------------------------------------------------
   Selos
   ------------------------------------------------------------------------- */

.selo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .16rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.selo::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
}

.selo-ativo { background-color: var(--sucesso-suave); color: var(--sucesso); }
.selo-inativo { background-color: rgba(155, 163, 182, .12); color: var(--texto-suave); }
.selo-neutro { background-color: var(--accent-suave); color: var(--accent); }
.selo-neutro::before { display: none; }

.selos { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Miniatura de imagem dentro de uma tabela de dados.
   `object-fit: cover` porque foto de produto vem em proporções variadas, e
   `contain` deixaria tarjas de fundo de tamanhos diferentes em cada linha —
   a galeria pareceria desalinhada sem nada estar errado. */
.miniatura {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--borda);
    background-color: var(--superficie-alta);
    display: block;
}

/* -------------------------------------------------------------------------
   Mensagens e vazios
   ------------------------------------------------------------------------- */

.aviso-erro {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    background-color: var(--perigo-suave);
    border: 1px solid rgba(242, 85, 90, .35);
    border-radius: var(--raio-pequeno);
    color: #ffb4b6;
    font-size: .85rem;
}

.aviso-erro p { margin: 0; font-weight: 600; }
.aviso-erro ul { margin: 0; padding-left: 1.1rem; font-weight: 400; }

/* Irmã do .aviso-erro, com os tokens de sucesso que já existiam. */
.aviso-sucesso {
    margin-bottom: 1.25rem;
    padding: .85rem 1rem;
    background-color: var(--sucesso-suave);
    border: 1px solid rgba(53, 199, 138, .35);
    border-radius: var(--raio-pequeno);
    color: var(--sucesso);
    font-size: .85rem;
    font-weight: 600;
}

.vazio-quadro { padding: 3rem 1rem; text-align: center; color: var(--texto-suave); }
.vazio-quadro p { margin: 0 0 1rem; }
.carregando { padding: 2.5rem 1rem; text-align: center; color: var(--texto-suave); }


/* =========================================================================
   FORMULÁRIOS
   ========================================================================= */

.form-linha {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

    .form-linha + .form-linha {
        margin-top: 1rem;
    }

    .form-linha .campo {
        min-width: 0;
        flex: 1 1 0;
    }

        .form-linha .campo input,
        .form-linha .campo select,
        .form-linha .campo textarea {
            width: 100%;
            box-sizing: border-box;
        }

/* -------------------------------------------------------------------------
   Identificação
   ------------------------------------------------------------------------- */

.campo-razao {
    flex: 3 1 0 !important;
}

.campo-fantasia {
    flex: 1.7 1 0 !important;
}

.campo-cnpj {
    flex: 1.5 1 0 !important;
}

.campo-ie {
    flex: 1.5 1 0 !important;
}

.campo-tenant {
    flex: 3.5 1 0 !important;
}

/* -------------------------------------------------------------------------
   Filial
   ------------------------------------------------------------------------- */

.campo-codigo {
    flex: 1 1 0 !important;
    max-width: 180px;
}

.campo-nome-filial {
    flex: 4 1 0 !important;
}

/* -------------------------------------------------------------------------
   Endereço
   ------------------------------------------------------------------------- */

.campo-logradouro {
    flex: 5 1 0 !important;
}

.campo-numero {
    flex: 1 1 0 !important;
    max-width: 150px;
}

.campo-cep {
    flex: 1.5 1 0 !important;
    max-width: 190px;
}

.campo-complemento {
    flex: 2 1 0 !important;
}

.campo-bairro {
    flex: 2 1 0 !important;
}

.campo-municipio {
    flex: 2 1 0 !important;
}

.campo-uf {
    flex: 0 0 80px !important;
}

/* -------------------------------------------------------------------------
   Responsividade
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .form-linha {
        flex-wrap: wrap;
    }

        .form-linha .campo {
            flex: 1 1 calc(50% - .5rem) !important;
            max-width: none;
        }

    .campo-uf {
        flex: 0 0 calc(50% - .5rem) !important;
    }
}

@media (max-width: 600px) {
    .form-linha {
        flex-direction: column;
        gap: .85rem;
    }

        .form-linha .campo,
        .campo-uf {
            width: 100%;
            max-width: none !important;
            flex: 1 1 auto !important;
        }
}

/* =========================================================
   FORMULÁRIOS — PADRÃO VASIS
   ========================================================= */

.linha-formulario {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 0;
}

    .campo-formulario.flex-1 {
        flex: 1 1 0;
    }

    .campo-formulario.flex-2 {
        flex: 2 1 0;
    }

    .campo-formulario.flex-3 {
        flex: 3 1 0;
    }

    .campo-formulario.flex-4 {
        flex: 4 1 0;
    }

    .campo-formulario.flex-6 {
        flex: 6 1 0;
    }

    .campo-formulario.flex-8 {
        flex: 8 1 0;
    }

    .campo-formulario label {
        display: block;
        margin-bottom: .4rem;
        color: var(--texto-suave);
        font-size: .78rem;
        font-weight: 500;
    }

    /* SELECT e TEXTAREA entram junto com o input. Estavam de fora, e o
       resultado era um <select> com o visual nativo do navegador — branco, 21px
       de altura — ao lado de inputs escuros de 38px, na mesma linha. */
    .campo-formulario input,
    .campo-formulario select,
    .campo-formulario textarea,
    .campo-formulario .form-control {
        width: 100%;
        min-width: 0;
        height: 38px;
        padding: .5rem .7rem;
        box-sizing: border-box;
        color: var(--texto);
        background-color: var(--superficie-alta);
        border: 1px solid var(--borda-forte);
        border-radius: var(--raio-pequeno);
        font-size: .85rem;
        font-family: inherit;
        outline: none;
        transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    }

        /* A seta do select vem do navegador e não acompanha o tema escuro;
           desenhada aqui, com espaço à direita para ela não cobrir o texto. */
        .campo-formulario select {
            appearance: none;
            padding-right: 2rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239aa2b6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right .7rem center;
            cursor: pointer;
        }

        .campo-formulario textarea {
            height: auto;
            min-height: 76px;
            padding-top: .55rem;
            resize: vertical;
        }

        .campo-formulario input::placeholder,
        .campo-formulario textarea::placeholder,
        .campo-formulario .form-control::placeholder {
            color: var(--texto-fraco);
            opacity: 1;
        }

        .campo-formulario input:hover:not(:disabled),
        .campo-formulario select:hover:not(:disabled) {
            border-color: var(--borda-forte);
        }

        .campo-formulario input:focus,
        .campo-formulario select:focus,
        .campo-formulario textarea:focus,
        .campo-formulario .form-control:focus {
            border-color: var(--accent);
            background-color: var(--superficie-hover);
            box-shadow: 0 0 0 3px var(--accent-suave);
        }

        .campo-formulario input:disabled,
        .campo-formulario select:disabled,
        .campo-formulario .form-control:disabled {
            opacity: .65;
            cursor: not-allowed;
            background-color: #111a27;
            color: var(--texto-fraco);
        }

        /* Campo reprovado pela validação do Blazor. */
        .campo-formulario input.invalid,
        .campo-formulario select.invalid,
        .campo-formulario .form-control.invalid {
            border-color: var(--perigo);
        }

    .campo-formulario .ajuda {
        margin: .35rem 0 0;
        color: var(--texto-suave);
        font-size: .7rem;
        line-height: 1.4;
    }

    .campo-formulario .validation-message {
        margin-top: .3rem;
        color: var(--perigo);
        font-size: .72rem;
        /* Mensagem longa quebra dentro do campo em vez de alargar a linha —
           é o que evita o layout "pular" quando a validação aparece. */
        overflow-wrap: anywhere;
    }

/* Texto de apoio SOLTO, fora de um campo: a explicação no rodapé de um cartão.
   Só existia aninhado em .campo/.campo-formulario, então o mesmo <p class="ajuda">
   aparecia menor dentro de um campo e do tamanho do corpo fora dele. */
.ajuda {
    margin: .35rem 0 0;
    color: var(--texto-suave);
    font-size: .74rem;
    line-height: 1.5;
}

/* Obrigatório */
.obrigatorio {
    color: var(--accent);
}

/* =========================================================
   LINHAS DOS FORMULÁRIOS
   ========================================================= */

.cartao .linha-formulario + .linha-formulario {
    margin-top: 1rem;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 700px) {
    .linha-formulario {
        flex-direction: column;
        gap: .85rem;
    }

    .campo-formulario.flex-1,
    .campo-formulario.flex-2,
    .campo-formulario.flex-3,
    .campo-formulario.flex-4,
    .campo-formulario.flex-6,
    .campo-formulario.flex-8 {
        flex: 1 1 auto;
        width: 100%;
    }

    /* 16px exatos, e não .85rem, por uma razão só: abaixo disso o Safari do
       iPhone dá zoom sozinho ao focar o campo, e a tela fica torta até quem
       está digitando sair do campo e afastar com os dedos. A altura sobe junto
       para o texto não ficar apertado. */
    .campo-formulario input:not([type="checkbox"]):not([type="radio"]),
    .campo-formulario select,
    .campo-formulario textarea,
    .campo-formulario .form-control {
        height: 42px;
        font-size: 16px;
    }

    .campo-formulario textarea {
        height: auto;
    }
}

/* =========================================================
   MÓDULOS
   =========================================================
   As caixas de escolha vivem numa definição única, lá em cima
   (seção "Caixas de escolha"). Aqui ficou só o que é do módulo.
   ========================================================= */

.modulo-obrigatorio {
    margin-left: .35rem;
    color: var(--accent);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
}

.modulo-ajuda {
    margin-top: .85rem;
}

/* =========================================================
   GRUPOS DE ESCOLHAS (permissões por recurso, filiais por empresa)
   ---------------------------------------------------------
   Dezenas de caixas soltas são ilegíveis; agrupadas pelo assunto,
   viram varredura rápida. O subtítulo é o nome do grupo.
   ========================================================= */

.grupo-permissoes + .grupo-permissoes {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid #22304a;
}

.grupo-titulo {
    margin: 0 0 .6rem;
    color: #8fa0b8;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* O código é o contrato estável; a descrição é o que se lê. Os dois
   juntos evitam a dúvida de qual permissão a caixa marca. */
.codigo-permissao {
    display: block;
    margin-top: .1rem;
    color: #7f8da1;
    font-family: var(--fonte-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: .68rem;
    font-weight: 400;
}

/* =========================================================
   LISTA DE FILIAIS
   ========================================================= */

/* `.lista-cabecalho` foi removida: Filiais era a última tela a usá-la, e ela
   saiu junto com a migração para o padrão das outras cinco. O que ela
   mostrava — a contagem — vive agora em `.filtros-contagem`, ao lado dos
   filtros, sem faixa própria empurrando a tabela para baixo. */

.codigo-filial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: .25rem .5rem;
    color: var(--accent);
    background: #1b2534;
    border: 1px solid #334157;
    border-radius: .3rem;
    font-family: Consolas, monospace;
    font-size: .75rem;
    font-weight: 600;
}

.uf-tabela {
    color: #718096;
}

.modulos-tabela {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.badge-modulo {
    display: inline-flex;
    align-items: center;
    padding: .2rem .45rem;
    color: #aebbd0;
    background: #172131;
    border: 1px solid #2b3a50;
    border-radius: .25rem;
    font-size: .68rem;
}

.acoes-tabela {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    white-space: nowrap;
}

/* .acao-editar SAIU na Etapa 04.
   ---------------------------------------------------------------------------
   Era uma versão incompleta de .btn-texto: mesma cor de acento, mas sem
   tamanho declarado, sem variante de perigo e sem estado desabilitado. As seis
   listagens agora usam .btn-texto para toda ação de linha — link ou botão —,
   com .perigo no que desativa. Uma família só.

   A área de toque vem logo abaixo, e vale para as seis de uma vez: era o
   achado registrado na Etapa 01 (21px de altura, abaixo de qualquer alvo). */
.acoes-tabela .btn-texto,
td.acoes .btn-texto {
    display: inline-flex;
    align-items: center;
    min-height: var(--toque);
}

@media (max-width: 767.98px) {
    /* No cartão, o dedo é quem aponta. */
    .acoes-tabela .btn-texto,
    td.acoes .btn-texto {
        min-height: var(--toque-amplo);
    }
}

/* Linha desativada: presente, mas recuada. Vale para a família inteira —
   antes existia só para a .tabela do template, então uma empresa inativa e
   uma pessoa inativa apareciam diferentes uma da outra. */
table.dados tr.inativa {
    opacity: .65;
}

/* =========================================================
   MOBILE — LISTA
   ========================================================= */

@media (max-width: 700px) {

    /* A tabela sangra até a borda do cartão, ganhando os .5rem de padding de
       cada lado — num celular, é meia coluna de texto a mais. */
    .tabela-rolagem {
        margin-left: -.5rem;
        margin-right: -.5rem;
        width: calc(100% + 1rem);
    }

    /* O min-width: 720px que vivia aqui SAIU na Etapa 04.
       ---------------------------------------------------------------------
       Ele era o que obrigava a rolagem lateral: 720px de tabela em 343px de
       tela, com metade das colunas fora do alcance. Não faz mais falta porque
       a tabela deixa de ser tabela neste tamanho — vira a lista de cartões
       logo abaixo, onde cada linha ocupa a largura toda. */
}

/* =========================================================================
   LISTAGEM EM CARTÕES — abaixo de 768px
   -------------------------------------------------------------------------
   A mesma tabela, lida de outro jeito. Nada de segunda marcação: os elementos
   de `table` passam a `display: block`, cada `<tr>` vira um cartão e cada
   `<td>` uma linha de dado com o seu rótulo à esquerda.

   O rótulo sai de `data-rotulo`, que as telas escrevem em cada célula. Sem o
   cabeçalho da tabela, "ATIVA" sozinho num cartão não diz de que coluna veio
   — e uma lista de valores sem nome é pior do que a rolagem lateral que isto
   substitui.

   Por que 768 e não os 1024 do menu: são perguntas diferentes. O menu vira
   gaveta quando a barra fixa custa caro demais em largura; a tabela vira
   cartão quando as colunas não cabem lado a lado. Um tablet de 768px em
   paisagem ainda lê bem uma tabela — o celular, não.
   ========================================================================= */

@media (max-width: 767.98px) {

    .tabela-rolagem {
        /* Não há mais o que rolar de lado. */
        overflow-x: visible;
    }

    table.dados,
    table.dados tbody,
    table.dados tr,
    table.dados td {
        display: block;
        width: auto;
    }

    /* O cabeçalho some do olho, mas continua no documento: é ele que dá à
       tabela o significado que o leitor de tela anuncia. display: none o
       apagaria dos dois. */
    table.dados thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    table.dados tr {
        padding: .9rem 1rem;
        border: 1px solid var(--borda);
        border-radius: var(--raio-pequeno);
        background-color: var(--superficie-alta);
    }

    table.dados tr + tr { margin-top: .6rem; }

    /* O hover de linha não faz sentido em cartão tocável. */
    table.dados tbody tr:hover { background-color: var(--superficie-alta); }

    table.dados td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .3rem 0;
        border-bottom: 0;
        text-align: left;
    }

    /* O rótulo da coluna, à esquerda de cada valor. */
    table.dados td[data-rotulo]::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        color: var(--texto-suave);
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    /* O título do cartão é a primeira célula — que quase sempre é o nome da
       coisa. Quando não é, a tela aponta outra com .titulo: em Filiais a
       primeira coluna é o código, e "001" como título de cartão não diz a
       ninguém de que filial se trata. */
    table.dados tr:not(:has(td.titulo)) > td:first-child,
    table.dados td.titulo {
        display: block;
        padding: 0 0 .5rem;
        font-size: .95rem;
    }

    table.dados tr:not(:has(td.titulo)) > td:first-child::before,
    table.dados td.titulo::before { content: none; }

    /* As ações vão para o rodapé do cartão, alinhadas à esquerda e com
       espaço entre si — no toque não há hover que as revele, e elas precisam
       ser tão alcançáveis quanto o resto. */
    table.dados td.acoes {
        justify-content: flex-start;
        gap: 1.25rem;
        margin-top: .5rem;
        padding-top: .6rem;
        border-top: 1px solid var(--borda);
        text-align: left;
    }

    table.dados td.acoes::before { content: none; }
    table.dados td.acoes > * + * { margin-left: 0; }
}
/* Faixa de impersonação: precisa ser impossível de não ver — o admin está
   mexendo em dado que não é dele. */
.faixa-impersonacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .55rem 1rem;
    background-color: var(--accent-suave);
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
}

.faixa-impersonacao .btn-texto { color: var(--accent); text-decoration: underline; }

/* =========================================================
   ABAS — formulário de pessoa (WEB-005)
   ---------------------------------------------------------
   O cadastro de pessoa tem quatro assuntos que não cabem numa
   página só. As abas mantêm cada um inteiro na tela, em vez de
   um formulário longo em que tudo fica pela metade.
   ========================================================= */

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: 1.5rem;
    border-bottom: 1px solid var(--borda);
}

.aba {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    margin-bottom: -1px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--texto-suave);
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.aba:hover { color: var(--texto); }

.aba.ativa {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Quantos itens ativos a aba guarda — evita abrir uma aba só para
   descobrir que está vazia. */
.aba-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 .3rem;
    background-color: var(--superficie-alta);
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
}

.aba.ativa .aba-contador {
    background-color: var(--accent-suave);
    border-color: var(--accent);
}

/* =========================================================
   LISTA DE ITENS — endereços e contatos
   ---------------------------------------------------------
   Não é tabela: cada item tem um corpo de tamanho variável (o
   endereço ocupa duas linhas) e ações próprias. Tabela obrigaria
   a espremer tudo em colunas iguais.
   ========================================================= */

.lista-itens {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem .9rem;
    background-color: var(--superficie-alta);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
}

.item.inativo { opacity: .6; }

.item-corpo { flex: 1 1 260px; min-width: 0; }

.item-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}

.item-acoes {
    display: flex;
    align-items: center;
    gap: .75rem;
    white-space: nowrap;
}

/* O principal (endereço) e o preferido (contato) precisam saltar:
   é a informação que se procura ao bater o olho na lista. */
.selo-principal {
    display: inline-flex;
    align-items: center;
    padding: .15rem .45rem;
    color: var(--accent);
    background-color: var(--accent-suave);
    border: 1px solid var(--accent);
    border-radius: .25rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* =========================================================
   FILTROS E PAGINAÇÃO — lista de pessoas
   ========================================================= */

/* Rótulo AO LADO do interruptor, não acima.
   ---------------------------------------------------------------------------
   Empresas e Tenants têm um filtro só e dispensam rótulo — o interruptor fica
   direto na linha da busca. Pessoas tem dois, e sem rótulo "Todos" e "Todas"
   lado a lado não se distinguem.

   Empilhar o rótulo acima resolveria a ambiguidade e criaria outra diferença:
   a linha de Pessoas ficava 20px mais alta que a das outras duas. Ao lado, as
   três telas medem o mesmo — 46px — e o rótulo continua dizendo o que é. */
.filtro-grupo {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.filtro-rotulo {
    color: var(--texto-suave);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Cápsula mais enxuta DENTRO da linha de filtros — 38px no lugar de 46px.
   ---------------------------------------------------------------------------
   O que se ganha com os 8px não é espaço em branco: é a contagem de registros
   cabendo na mesma linha, à direita, em vez de virar mais uma faixa acima da
   tabela. Foi por virar faixa que a `.lista-cabecalho` saiu das listagens.

   Só dentro de `.filtros`: o interruptor também serve a formulários, onde a
   escolha é o assunto da linha e merece o alvo maior. E os 44px do toque
   continuam, na regra de celular mais abaixo — quem apontar com o dedo não
   perde área. */
.filtros .interruptor { padding: 2px; }

.filtros .interruptor button {
    min-height: 32px;
    padding: .3rem .85rem;
    font-size: .78rem;
}

/* A contagem, no fim da linha. Fica ao lado dos filtros de propósito: é deles
   que ela depende — o número muda quando o recorte muda, e ler as duas coisas
   juntas é o que evita concluir que o cadastro encolheu. */
.filtros-contagem {
    margin-left: auto;
    color: var(--texto-suave);
    font-size: .8rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {

    /* Rótulo acima dos chips e tudo ocupando a largura. `align-items` precisa
       ser dito: sem ele vale o `center` da regra base, que centra o rótulo no
       meio da tela e encolhe a cápsula até o tamanho do texto. */
    .filtro-grupo {
        flex-direction: column;
        align-items: stretch;
        gap: .35rem;
    }

    /* No toque o alvo volta a ser o cheio. */
    .filtros .interruptor button {
        min-height: var(--toque-amplo);
        padding: .3rem .5rem;
    }

    /* Sem margem automática: em coluna ela empurraria a contagem para o fim do
       bloco inteiro, longe do que ela conta. */
    .filtros-contagem { margin-left: 0; }
}

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borda);
}

.paginacao-posicao {
    color: var(--texto-suave);
    font-size: .8rem;
    text-align: center;
}

/* No celular, "Anterior" e "Próxima" ganham a largura que sobra e a posição
   fica entre os dois. Sem isto, os três itens dividem 343px com gap de 1rem e
   os botões encolhem justamente onde o dedo precisa deles maiores. */
@media (max-width: 767.98px) {
    .paginacao {
        gap: .6rem;
    }

    .paginacao .btn {
        flex: 1 1 0;
        min-height: var(--toque-amplo);
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .paginacao-posicao {
        flex: 0 1 auto;
        white-space: nowrap;
    }

    /* No toque, o alvo cresce junto com o resto. */
    .interruptor button {
        min-height: var(--toque-amplo);
    }
}

/* =========================================================
   AÇÕES EM LINHA (btn-link) — tema escuro
   ---------------------------------------------------------
   Vinha do app.css do template, azul #0071c1 e 21px de altura:
   destoava do tema e ficava abaixo da área de toque no celular.
   Aqui recebe a cor do produto e altura de alvo tocável.
   ========================================================= */

.btn-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: .82rem;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s ease;
}

.btn-link:hover:not(:disabled) { color: var(--accent-forte); text-decoration: underline; }
.btn-link:disabled { color: var(--texto-fraco); cursor: default; text-decoration: none; }

/* Ação que remove/desativa: some no meio das outras se tiver a mesma cor.
   Não é vermelho gritante — é desativação, não exclusão. */
.btn-link.perigo { color: var(--texto-suave); }
.btn-link.perigo:hover:not(:disabled) { color: var(--perigo); }

/* =========================================================
   CONTATOS AGRUPADOS POR NATUREZA
   ---------------------------------------------------------
   O preferido é POR TIPO, e a tela precisa mostrar isso: telefones
   e e-mails em blocos separados, cada tipo com o seu preferido.
   Uma lista única faria parecer que há vários "principais" em
   conflito.
   ========================================================= */

.grupo-natureza + .grupo-natureza {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--borda);
}

.natureza-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
    color: var(--texto-suave);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.natureza-titulo .contagem {
    margin-left: auto;
    color: var(--texto-suave);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* Subgrupo de um TIPO dentro da natureza (Celular, Comercial…) */
.grupo-tipo + .grupo-tipo { margin-top: .9rem; }

.tipo-titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .45rem;
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 600;
}

.tipo-icone {
    display: inline-flex;
    width: 1.1rem;
    justify-content: center;
    opacity: .8;
}

/* O valor do contato: fonte tabular para telefones alinharem entre si. */
.contato-valor {
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* =========================================================
   CONSULTA DE CEP — estados
   ---------------------------------------------------------
   Consultando, encontrado e falha aparecem NO CAMPO, discretos.
   Nada de modal: é uma conveniência, e interromper o cadastro
   para avisar que ela não funcionou seria pior que a falha.
   ========================================================= */

.estado-consulta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 0;
    font-size: .72rem;
    line-height: 1.4;
}

.estado-consulta.buscando { color: var(--texto-suave); }
.estado-consulta.ok { color: var(--sucesso); }
.estado-consulta.aviso { color: var(--alerta); }

/* Girador do "consultando", pequeno o bastante para não chamar atenção. */
.girador {
    width: 11px;
    height: 11px;
    border: 2px solid var(--borda-forte);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: girar .6s linear infinite;
    flex: none;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* Quem prefere menos movimento não vê o giro — só o estado parado. */
@media (prefers-reduced-motion: reduce) {
    .girador { animation: none; }
}

/* =========================================================================
   RECEBIDAS DO app.css
   -------------------------------------------------------------------------
   Classes que ainda tinham consumidor real quando o app.css foi podado à
   infraestrutura do Blazor. Vieram para cá porque descrevem o produto, e
   agora usam tokens em vez das cores literais do template.
   ========================================================================= */

/* Volta para a listagem de origem, no rodapé de uma tela filha. */
.voltar { margin-top: 2rem; }

/* =========================================================================
   NAVEGAÇÃO — o que precisa ser global
   -------------------------------------------------------------------------
   A gaveta inteira é estilizada no MainLayout.razor.css. Só esta regra mora
   aqui, e por um motivo técnico: o CSS isolado carimba o escopo do componente
   em todo seletor, e `html:has(...)` viraria `html:has(...)[b-xxxxx]` — o
   <html> não tem atributo de escopo, e a regra nunca casaria.

   O que ela faz: trava a rolagem do fundo enquanto a gaveta está aberta. Sem
   isso, arrastar o dedo sobre a gaveta rola a página atrás dela, e ao fechar a
   pessoa está num ponto da lista que não escolheu.
   ========================================================================= */

html:has(.sidebar.aberta) {
    overflow: hidden;
}

/* =========================================================================
   TELEFONE COM AÇÃO DE WHATSAPP
   -------------------------------------------------------------------------
   A ação é discreta com ponteiro e SEMPRE VISÍVEL no toque. Escondê-la atrás
   de :hover num aparelho sem ponteiro é escondê-la para sempre — foi o mesmo
   raciocínio que tirou o esmaecimento das ações da linha na Etapa 01.
   ========================================================================= */

.contato-numero { 
    font-variant-numeric: tabular-nums; 
    white-space: nowrap;
    padding-bottom: 3px
}

.sem-contato { color: var(--texto-fraco); }

/* O número É o link, com o ícone à frente. Em repouso não tem moldura nem
   fundo: a coluna fica limpa, e o ícone verde já diz que ali se conversa. O
   destaque só chega com o ponteiro — ou com o foco, para quem usa teclado. */
.contato-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    /* Sem min-height aqui: com ponteiro, o realce deve abraçar o texto, não a
       altura de um botão. O --toque de 38px deixava uma faixa verde bem mais
       alta que o número, parecendo um bloco em vez de um destaque.

       O alvo grande continua existindo onde ele importa — no toque, logo
       abaixo, onde não há hover e o dedo precisa de área. */
    margin-left: -.35rem;
    padding: .15rem .35rem;
    border-radius: var(--raio-pequeno);
    color: var(--texto);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.contato-whatsapp:hover,
.contato-whatsapp:focus-visible {
    background-color: var(--sucesso-suave);
    text-decoration: none;
}

.contato-whatsapp:focus-visible {
    outline: 2px solid var(--sucesso);
    outline-offset: 1px;
}

.icone-whatsapp {
    width: 15px;
    height: 15px;
    color: var(--sucesso);
    fill: currentColor;
    flex: 0 0 auto;
}

/* Sem ponteiro não existe hover, e um alvo do tamanho do texto é pequeno para
   o dedo: no toque o link cresce e ganha o fundo de uma vez. */
@media (hover: none) {
    .contato-whatsapp {
        min-height: var(--toque-amplo);
        background-color: var(--sucesso-suave);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contato-whatsapp { transition: none; }
}

/* =========================================================================
   INÍCIO — números e atalhos
   -------------------------------------------------------------------------
   Cartões que são LINKS, não caixas informativas: quem olha "184 pessoas"
   quase sempre quer ir para lá, e um cartão que só informa obriga a procurar
   o menu depois.
   ========================================================================= */

.painel-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .9rem;
    margin-top: 1.5rem;
}

.numero-cartao {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.15rem 1.25rem;
    background-color: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.numero-cartao:hover {
    border-color: var(--borda-forte);
    background-color: var(--superficie-alta);
}

.numero-cartao:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.numero-rotulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.numero-valor {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    /* Dígitos de mesma largura: sem isto, os números dançam de posição entre
       um carregamento e outro. */
    font-variant-numeric: tabular-nums;
}

.numero-carregando { color: var(--texto-fraco); }

.numero-detalhe { font-size: .78rem; color: var(--texto-suave); }

.acoes-rapidas { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 767.98px) {
    /* Dois por linha no celular: um por linha empurraria as ações rápidas
       para fora da primeira dobra. */
    .painel-numeros { grid-template-columns: repeat(2, 1fr); gap: .6rem; }

    .numero-cartao { padding: .9rem; }
    .numero-valor { font-size: 1.5rem; }

    /* Os atalhos ocupam a largura e viram alvos de toque cheios. */
    .acoes-rapidas .btn { flex: 1 1 100%; min-height: var(--toque-amplo); }
}