h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

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

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

/* ---------------------------------------------------------------------------
   Sala de Vendas — Web (Etapa 1: login + papéis). Estilo mínimo, propositalmente
   simples nesta etapa — a UI de verdade das telas (atendimentos/ficha/brinde/
   relatórios/configurações) espelha o desktop nas próximas etapas.
   --------------------------------------------------------------------------- */
:root {
    --sv-bg: #f5f6f8;
    --sv-card-bg: #ffffff;
    --sv-borda: #dfe3e8;
    --sv-texto: #1f2733;
    --sv-texto-suave: #5b6472;
    --sv-primaria: #1f6feb;
    --sv-primaria-hover: #1a5fc9;
    --sv-primaria-tint: #eef4ff;
    --sv-erro: #b3261e;
    --sv-erro-bg: #fbeaea;
    --sv-sucesso: #1e7d34;
    /* Antes só existiam como fallback (var(--x, valor)) em alguns pontos — agora definidos aqui,
       um único valor pra todo o app. */
    --sv-fundo-suave: #f3f4f6;
    --sv-fundo-destaque: #eaf2ff;

    /* Escala de espaçamento (4/8/12/16/24) — introduzida pra parar o espalhamento de valores
       "quase iguais" (10/14/9/11px etc.) achado na auditoria. Aplicada nas regras tocadas por essa
       mudança; o resto do arquivo continua com os valores antigos até ser revisado. */
    --sv-space-1: 4px;
    --sv-space-2: 8px;
    --sv-space-3: 12px;
    --sv-space-4: 16px;
    --sv-space-5: 24px;

    /* Escala de tipografia — mesmo espírito: só usada nas regras tocadas aqui. */
    --sv-text-xs: 12px;
    --sv-text-sm: 13px;
    --sv-text-base: 14px;
    --sv-text-lg: 16px;
    --sv-weight-regular: 400;
    --sv-weight-semibold: 600;
    --sv-weight-bold: 700;
}

body {
    margin: 0;
    background: var(--sv-bg);
    color: var(--sv-texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Login */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 18px rgba(20, 30, 50, 0.06);
}

.login-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

.login-subtitulo {
    margin: 0 0 20px;
    color: var(--sv-texto-suave);
    font-size: 14px;
}

.login-erro {
    background: var(--sv-erro-bg);
    color: var(--sv-erro);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 16px;
}

.login-campo {
    display: block;
    margin-bottom: 16px;
}

.login-campo span {
    display: block;
    font-size: 13px;
    color: var(--sv-texto-suave);
    margin-bottom: 6px;
}

.login-campo input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    font-size: 15px;
}

.login-campo input:focus {
    outline: none;
    border-color: var(--sv-primaria);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}

.login-botao {
    width: 100%;
    padding: 11px;
    background: var(--sv-primaria);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.login-botao:hover {
    background: var(--sv-primaria-hover);
}

/* Shell autenticado */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 56px;
    background: var(--sv-card-bg);
    border-bottom: 1px solid var(--sv-borda);
}

.app-nav-titulo {
    font-weight: 700;
    font-size: 16px;
}

.app-nav-links {
    display: flex;
    gap: 16px;
    flex: 1;
}

.app-nav-links a {
    color: var(--sv-texto-suave);
    text-decoration: none;
    font-size: 14px;
    padding: 6px 0;
}

.app-nav-links a.active {
    color: var(--sv-primaria);
    font-weight: 600;
    border-bottom: 2px solid var(--sv-primaria);
}

.app-nav-usuario {
    font-size: 14px;
    color: var(--sv-texto-suave);
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-nav-badge {
    background: var(--sv-primaria-tint);
    color: var(--sv-primaria);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}

.app-nav-sair {
    background: none;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--sv-texto);
}

.app-nav-sair:hover {
    border-color: var(--sv-primaria);
    color: var(--sv-primaria);
}

.app-conteudo {
    flex: 1;
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Etapa 2 — Atendimentos (fila) + Ficha
   --------------------------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.page-header h1 {
    margin: 0;
    font-size: 22px;
}

.page-subtitulo {
    color: var(--sv-texto-suave);
    font-size: 13px;
}

.btn-outline, .btn-primario, .btn-primario-mini, .btn-icone, .btn-link {
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    font-size: 13px;
    /* Alinha texto + <Icon> (SVG) na mesma linha, sem o desalinhamento de baseline que emoji dava
       antes — todo botão com ícone agora fica reto por padrão, sem precisar de CSS por botão. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Icon.razor — herda a cor do texto ao redor (stroke="currentColor" no SVG); shrink:0 pra não
   espremer num flex apertado. */
.sv-icon {
    display: inline-block;
    flex-shrink: 0;
}

/* Ícone + texto fora de um botão (spans de status, avisos, badges) — mesmo alinhamento que os
   botões já ganham da regra base .btn-*, só que pra elementos que não são button. */
.icon-texto {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* BuscaSelect.razor — dropdown pesquisável (catálogos grandes: profissão, função, usuário,
   empreendimento/produto/cota, tipo conta a receber, ponto de captação). O botão-gatilho usa o
   mesmíssimo visual do <select> nativo restilizado, pra não parecer um componente diferente. */
.busca-select {
    position: relative;
    width: 100%;
}

.busca-select-controle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    background: var(--sv-card-bg);
    color: var(--sv-texto);
    font-size: var(--sv-text-base);
    font-weight: var(--sv-weight-regular);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}

.busca-select-controle:hover:not(:disabled) {
    border-color: var(--sv-primaria);
    color: var(--sv-texto);
}

.busca-select-valor {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.busca-select-fundo {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.busca-select-painel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 30, 50, 0.12);
    padding: var(--sv-space-2);
}

.busca-select-busca {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--sv-borda);
    border-radius: 6px;
    font-size: var(--sv-text-sm);
    font-family: inherit;
    margin-bottom: var(--sv-space-2);
}

.busca-select-busca:focus-visible {
    outline: none;
    border-color: var(--sv-primaria);
}

.busca-select-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}

.busca-select-lista li {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: var(--sv-text-base);
    cursor: pointer;
}

.busca-select-lista li:hover, .busca-select-lista li.realce {
    background: var(--sv-fundo-suave);
}

.busca-select-lista li.selecionado {
    background: var(--sv-primaria-tint);
    color: var(--sv-primaria);
    font-weight: var(--sv-weight-semibold);
}

.busca-select-vazio {
    color: var(--sv-texto-suave);
    cursor: default;
}
.busca-select-vazio:hover {
    background: none;
}

/* Anel de foco visível (teclado) — nenhum botão tinha antes. */
.btn-outline:focus-visible, .btn-primario:focus-visible, .btn-primario-mini:focus-visible,
.btn-icone:focus-visible, .btn-link:focus-visible {
    outline: 2px solid var(--sv-primaria);
    outline-offset: 2px;
}

.btn-outline {
    background: none;
    border: 1px solid var(--sv-borda);
    padding: 8px 14px;
    color: var(--sv-texto);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--sv-primaria);
    color: var(--sv-primaria);
}

.btn-outline.btn-perigo:hover:not(:disabled) {
    border-color: var(--sv-erro);
    color: var(--sv-erro);
}

.btn-link.btn-perigo {
    color: var(--sv-erro);
}

.btn-primario, .btn-primario-mini {
    background: var(--sv-primaria);
    color: #fff;
    border: none;
    padding: 9px 18px;
    font-weight: 600;
}

.btn-primario-mini {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-primario:hover:not(:disabled), .btn-primario-mini:hover:not(:disabled) {
    background: var(--sv-primaria-hover);
}

/* Especificidade igual à regra de hover genérica acima (0,3,0) — sem isso, .btn-primario:hover
   ganhava de .btn-primario.btn-perigo e o botão de perigo ficava AZUL ao passar o mouse. */
.btn-primario.btn-perigo {
    background: var(--sv-erro);
}

.btn-primario.btn-perigo:hover:not(:disabled) {
    background: #952019;
}

.btn-outline:disabled, .btn-primario:disabled, .btn-primario-mini:disabled, .btn-icone:disabled, .btn-link:disabled {
    opacity: .4;
    cursor: default;
    text-decoration: none;
}

/* Números clicáveis da tabela de avaliação da sala (Relatórios → drill-down) */
.relatorio-num {
    font-size: inherit;
    font-weight: 600;
}

.btn-icone {
    background: none;
    border: 1px solid var(--sv-borda);
    width: 30px;
    height: 30px;
    justify-content: center;
}

.btn-icone:hover:not(:disabled) {
    border-color: var(--sv-primaria);
    color: var(--sv-primaria);
}

.btn-link {
    background: none;
    border: none;
    color: var(--sv-primaria);
    text-decoration: underline;
    padding: 0;
    font-size: 13px;
}

.metricas-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.metrica-tile {
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 90px;
}

/* Tópico clicável (19/10): o cursor e o foco visível dizem que dá para clicar, e o .ativo diz
   ONDE você está — sem ele, a fila curta por filtro é indistinguível de fila vazia, que é o que
   levou o usuário a desfazer a versão de 12/09 desta mudança. */
.metrica-tile-link {
    cursor: pointer;
    user-select: none;
}

.metrica-tile-link:hover {
    border-color: var(--cor-primaria, #2b6cb0);
}

.metrica-tile-link:focus-visible {
    outline: 2px solid var(--cor-primaria, #2b6cb0);
    outline-offset: 2px;
}

.metrica-tile-ativo {
    border-color: var(--cor-primaria, #2b6cb0);
    border-width: 2px;
    font-weight: 600;
}

.metrica-tile span {
    display: block;
    font-size: 20px;
    font-weight: 700;
}

.metrica-tile small {
    color: var(--sv-texto-suave);
    font-size: 12px;
}

.filtro-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.filtro-bar input {
    padding: 8px 10px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}

.filtro-bar input[type="search"] {
    flex: 1;
    min-width: 180px;
}

.atendimentos-shell {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.atendimentos-lista {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.lista-vazia {
    color: var(--sv-texto-suave);
    padding: 24px 0;
}

/* 🔴 20/10 — GRADE de três colunas, a pedido do usuário:
       [id] [Nome]                 [Data]
       [  ] [Nome2]                [Tags]
       [  ] [FR]                 [Botões]

   Era `display:flex` com tudo em sequência, e em tela estreita o flex-wrap jogava os selos para
   cima do nome. A grade resolve pela ESTRUTURA: cada bloco na sua célula, e nenhum tem como
   invadir o outro — não depende de largura mínima nem de tamanho de fonte, que é o que faz um
   conserto por CSS voltar na primeira tela diferente. */
.atendimento-row {
    display: grid;

    /* 🔴 As TRÊS faixas, e cada número aqui existe por um motivo:

         auto            o chip do FR, do tamanho dele.
         minmax(8rem,1fr) os nomes. O PISO de 8rem é o que impede a coluna de ser esmagada até
                         zero por um selo comprido — era o que acontecia com minmax(0,1fr).
         minmax(0,20rem) a lateral, com TETO. Era `auto`, que CRESCE com o conteúdo: com 10 vendas
                         ("VENDA #1, #2, …"), a faixa inchava, a do meio encolhia, e o nome
                         desaparecia atrás do selo. Com teto, o excedente QUEBRA (flex-wrap em
                         .atendimento-tags) e a linha fica mais ALTA — que é o comportamento pedido:
                         "aumentaria o height da div total, justamente para não acabar por invadir
                         local algum".

       Conta de borda, para o teto não criar transbordo: no limite do @media (721px) temos
       chip (~52px) + 8rem (128px) + 20rem (320px) + gaps ≈ 525px. Abaixo de 720px a grade vira
       uma coluna só, então as três nunca disputam a mesma linha estreita. */
    grid-template-columns: auto minmax(8rem, 1fr) minmax(0, 20rem);
    align-items: start;
    column-gap: 12px;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
}

.atendimento-row:hover {
    border-color: var(--sv-primaria);
    box-shadow: 0 0 0 2px rgba(31, 111, 235, .12);
}

.btn-ver-ficha, .btn-no-show {
    flex-shrink: 0;
    white-space: nowrap;
}

/* O chip atravessa os três andares (align-self:center o deixa no meio da altura da linha), como o
   [id] do esboço do usuário e como o chip do desktop. */
.atendimento-fr {
    font-size: 12px;
    color: var(--sv-texto-suave);
    background: var(--sv-bg);
    border-radius: 6px;
    padding: 3px 8px;
    align-self: center;
    white-space: nowrap;
}

.atendimento-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* O nome fica em DUAS linhas quando há dois cessionários (os nomes vêm separados do Shared). Cada
   um com ellipsis próprio: nome comprido corta no fim da célula dele, e não empurra a coluna da
   direita. */
.atendimento-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atendimento-nome2 {
    font-weight: 600;
    color: var(--sv-texto-suave);
}

/* A coluna 3: data, tags e botões, um andar cada, alinhados à direita. */
.atendimento-lateral {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.atendimento-tags,
.atendimento-acoes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;            /* vários selos quebram em mais linhas, e a linha cresce em altura */
    justify-content: flex-end;
}

/* 🔴 O selo da venda é o único que pode ficar LONGO: ele lista todas as vendas da Central, e 10
   vendas são um texto de ~100 caracteres em UMA pílula (não dez pílulas — o texto é um só, montado
   em BadgeAtendimentoFila.TextoVendas).

   O `.badge` global é `white-space: nowrap`, o que torna essa pílula indivisível: ela estouraria a
   coluna mesmo com o teto acima. Aqui ela pode quebrar — nas vírgulas, que é onde o texto tem
   espaço — e a pílula vira uma caixa de duas ou três linhas. Feia com 10 vendas, e correta: nada
   invade nada, e 10 vendas no mesmo atendimento é caso de reenvio, não o dia a dia.

   `overflow-wrap: anywhere` é o último recurso, para um id absurdamente longo sem espaço onde
   quebrar — sem ele, uma palavra maior que a coluna transborda em silêncio.

   Os outros selos continuam `nowrap`: "EM ANDAMENTO" partido em duas linhas seria pior que a
   pílula um pouco mais larga. */
.atendimento-tags .badge-venda {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
}

.atendimento-info small {
    color: var(--sv-texto-suave);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atendimento-data {
    font-size: 12px;
    color: var(--sv-texto-suave);
    white-space: nowrap;
}

.badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.badge-venda { background: #eaf7ee; color: var(--sv-sucesso); border: 1px solid #b8e0c4; }
.badge-nao-compra { background: #fff2e5; color: #b35c00; border: 1px solid #f0c9a0; }
.badge-andamento { background: #e2ecff; color: #1a56c9; border: 1px solid #a9c3f5; }
.badge-descartado { background: #fbeaea; color: var(--sv-erro); border: 1px solid #f0b9b5; }
.badge-no-tour { background: #fff6e5; color: #a15c00; border: 1px solid #f0dba0; }
.badge-no-show { background: #eceef3; color: #495464; border: 1px solid #c7ccd6; }

/* As três FASES do atendimento (21/10) — Aguardando → Em atendimento → Concluído.

   🔴 CLASSES PRÓPRIAS, e não `badge-andamento` reaproveitada: aquela é de BRINDE ("herdado") em
   AprovacaoBrindes, Ficha, VendaDetalhe e VendaDireta. Reaproveitar amarraria a cor da fase à do
   brinde, e o próximo ajuste numa mexeria na outra sem ninguém notar.

   A paleta é de propósito DIFERENTE da dos selos de status, que são pastéis: os dois selos aparecem
   LADO A LADO na mesma linha (fase + desfecho, FASE-Q1), então precisam ser distinguíveis de
   relance. "Em atendimento" é o único sólido — é o atendimento que está acontecendo agora, o que o
   coordenador procura na tela; os outros dois são neutros porque são estado de espera e de arquivo.
   O sólido vermelho continua reservado ao bloqueio comercial (.badge-desqualificado). */
.badge-fase-aguardando { background: #eef1f6; color: #44506b; border: 1px solid #c9d2e3; }
.badge-fase-atendimento { background: #1a56c9; color: #fff; border: 1px solid #1a56c9; }
.badge-fase-concluido { background: #eef3ef; color: #41664f; border: 1px solid #c7d8cd; }
/* Desqualificação comercial do totem — sólido (não o tom pastel dos outros badges) pra se
   destacar como bloqueio de negócio, não só um status operacional. */
.badge-desqualificado { background: var(--sv-erro); color: #fff; border: 1px solid var(--sv-erro); cursor: help; }

.atendimentos-painel {
    width: 260px;
    flex-shrink: 0;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    padding: 14px;
}

.atendimentos-painel h2 {
    font-size: 14px;
    margin: 0 0 10px;
}

.painel-card {
    border-bottom: 1px solid var(--sv-borda);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.painel-card:last-child { border-bottom: none; }

.painel-card small { color: var(--sv-texto-suave); font-size: 12px; }
.painel-responsavel { font-style: italic; }

.painel-acoes {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.paginacao-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--sv-borda);
}

.paginacao-spacer { flex: 1; }

.mensagem-erro {
    white-space: pre-line;
    color: var(--sv-erro);
    font-size: 13px;
}

/* Ficha */
.ficha-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.ficha-header h1 { margin: 0; font-size: 20px; }

/* Aviso de desqualificação comercial do totem — banner de destaque no topo da ficha, antes de
   qualquer ação operacional (pedido explícito: situação comercial primeiro). */
.aviso-desqualificado {
    background: var(--sv-erro-bg);
    border: 1px solid var(--sv-erro);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--sv-erro);
}

.aviso-desqualificado strong { display: block; font-size: 14px; }
.aviso-desqualificado p { margin: 4px 0 0; font-size: 13px; }

/* Mesmo padrão do aviso de desqualificação acima, versão positiva — atendimento já vendido na
   Central (persistente, sobrevive a F5, ao contrário da mensagem via querystring). */
.aviso-vendido {
    background: #eaf7ee;
    border: 1px solid #b8e0c4;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--sv-sucesso);
}

.aviso-vendido strong { display: block; font-size: 14px; }
.aviso-vendido p { margin: 4px 0 0; font-size: 13px; }

/* Mesmo aviso, versão compacta — usado dentro do card "Quem vai atender" (atribuição de liner),
   pra gerente ver o aviso no momento de atribuir, sem duplicar o banner inteiro. */
.aviso-desqualificado-inline {
    color: var(--sv-erro);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px;
}

/* Aviso NÃO-eliminatório da qualificação do totem (ex.: idade qualificada só por 1 dos 2
   cessionários) — cor âmbar, não vermelha (var(--sv-erro) já é usada pra desqualificação,
   que É eliminatória; misturar as duas cores confundiria os dois níveis de gravidade).
   Especificidade ".totem-info .totem-aviso-qualificacao label" de propósito: precisa bater a
   regra genérica ".totem-info label" (mesma especificidade, mas declarada depois no arquivo —
   ver linha ~718), senão a cor âmbar nunca aparece. */
.totem-aviso-qualificacao {
    color: #a15c00;
}
.totem-info .totem-aviso-qualificacao label {
    color: #a15c00;
}

.ficha-card {
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 14px;
}

.ficha-card h2 {
    /* Vira flex pra qualquer botão de ação que apareça dentro do título (ex.: "Inverter"/"Excluir"
       em VendaDireta.razor, "Adicionar" em DocumentosLista.razor) alinhar certo, à direita, na
       mesma linha — antes caía no fluxo de texto normal (baseline), daí o efeito "torto". Onde o
       h2 só tem texto (a maioria das telas), um único filho num flex space-between não muda nada
       visualmente. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sv-space-3);
    flex-wrap: wrap;
    font-size: var(--sv-text-lg);
    font-weight: var(--sv-weight-bold);
    margin: 0 0 var(--sv-space-3);
    /* Antes --sv-texto-suave (cinza) — mais fraco que o próprio valor do campo (14px escuro) logo
       abaixo. Título de card precisa pesar mais que o conteúdo, não menos. */
    color: var(--sv-texto);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ficha-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}

.ficha-grid span { display: flex; flex-direction: column; font-size: 14px; }
.ficha-grid label { font-size: 12px; color: var(--sv-texto-suave); margin-bottom: 2px; }

.responsavel-atual {
    display: inline-block;
    background: var(--sv-primaria-tint);
    color: var(--sv-primaria);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    margin-bottom: 10px;
}

.responsavel-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.responsavel-picker-label {
    font-size: 13px;
    font-weight: 600;
    min-width: 48px;
}

/* Base única pra TODO <select> nativo do app — antes cada contêiner (.field-shell,
   .responsavel-picker, .filtro-bar, .relatorio-filtros) tinha seu próprio padding/tamanho, e o
   seletor de tipo de documento (DocumentosLista, dentro de .config-upload-linha) não entrava em
   nenhuma regra — ficava com a aparência crua do navegador. Os contêineres abaixo só ajustam o que
   é mesmo específico deles (ex.: min-width). */
select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 32px 9px 11px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    font-size: var(--sv-text-base);
    font-family: inherit;
    color: var(--sv-texto);
    background-color: var(--sv-card-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color .15s ease;
}

select:focus-visible {
    outline: none;
    border-color: var(--sv-primaria);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15);
}

select:disabled {
    cursor: default;
    background-color: var(--sv-fundo-suave);
    color: var(--sv-texto-suave);
}

.responsavel-picker select, .responsavel-picker .busca-select {
    width: auto;
    min-width: 180px;
}

.field-shell { display: block; margin: 12px 0; }
.field-shell span { display: block; font-size: 13px; color: var(--sv-texto-suave); margin-bottom: 4px; }
.field-shell input, .field-shell textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--sv-borda); border-radius: 8px; font-size: 14px; font-family: inherit; }
.field-shell input:disabled, .field-shell select:disabled { background: var(--sv-fundo-suave); color: var(--sv-texto-suave); }

.ficha-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
}

.modal-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal-card {
    background: var(--sv-card-bg);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

.modal-card h2 { margin-top: 0; font-size: 16px; }

.motivo-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.modal-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

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

/* Modal do No Tour (atendimento direto) — NT.14 (2026-10-19). A pesquisa de satisfação completa
   são oito perguntas mais a equipe: num .modal-card comum (sem altura máxima e sem rolagem
   própria) o rodapé com o botão "Finalizar No Tour" sairia da viewport, e a página de trás não
   rola enquanto o scrim está aberto. Mesmo desenho do .cota-modal: card com altura máxima, corpo
   que rola, rodapé fixo. */
.pesquisa-modal {
    max-width: 560px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.pesquisa-corpo {
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 8px;
}

/* Modal de edição de cadastro (SPEC-editar-cadastro-ficha.md §3.7). Mesmo desenho do
   .pesquisa-modal, e pelo mesmo motivo: são até 19 campos (2 clientes + endereço) — num
   .modal-card comum (sem altura máxima e sem rolagem própria) o rodapé com Salvar/Cancelar sai
   da viewport e a página de trás não rola com o scrim aberto. Mais largo que o padrão (640px)
   para a grade de 2 colunas do formulário respirar. */
.cadastro-modal {
    max-width: 640px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.cadastro-corpo {
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 8px;
}

.cadastro-corpo h3 {
    margin: 14px 0 4px;
    font-size: 14px;
    border-top: 1px solid var(--sv-borda);
    padding-top: 10px;
}

.cadastro-corpo h3:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.pesquisa-bloco {
    border-top: 1px solid var(--sv-borda);
    padding-top: 10px;
    margin-top: 10px;
}

.pesquisa-bloco h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.pesquisa-escolhido {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--sv-texto-suave);
}

.pesquisa-bloco textarea {
    min-height: 54px;
    resize: vertical;
}

.catalogo-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.catalogo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: var(--sv-bg);
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.catalogo-item:hover:not(:disabled) {
    border-color: var(--sv-primaria);
}

.catalogo-item:disabled {
    opacity: .5;
    cursor: default;
}

.catalogo-item small {
    color: var(--sv-texto-suave);
    font-size: 12px;
}

.catalogo-item small.estoque-vazio {
    color: var(--sv-erro);
}

.mensagem-sucesso {
    color: var(--sv-sucesso);
    font-size: 13px;
}

.totem-resumo {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 12px;
}

.totem-score {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    flex-shrink: 0;
    border: 3px solid;
    position: relative;
}

.totem-score small {
    display: none;
}

.score-aprovado { border-color: var(--sv-sucesso); color: var(--sv-sucesso); }
.score-reprovado { border-color: var(--sv-erro); color: var(--sv-erro); }

.totem-info p { margin: 4px 0; font-size: 13px; }
.totem-info label { color: var(--sv-texto-suave); margin-right: 6px; }

.pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.pill-verde { background: #eaf7ee; color: var(--sv-sucesso); }
.pill-vermelho { background: #fbeaea; color: var(--sv-erro); }

.totem-respostas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.totem-resposta-card {
    background: var(--sv-bg);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
}

.totem-resposta-card label { display: block; color: var(--sv-texto-suave); font-size: 11px; margin-bottom: 2px; }

/* Relatórios (Etapa 5) */
.relatorio-filtros {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.relatorio-filtros select {
    width: auto;
    min-width: 220px;
}

/* Padronização da linha de filtros: botões com a MESMA altura dos campos (Função/De/Até seguem a
   receita padding 9px + fonte 14px + borda 1px ≈ 40px; os botões tinham 8px/13px ≈ 31px) e sem a
   margem vertical do .field-shell, que quebrava o alinhamento pela base do flex. */
.relatorio-filtros .field-shell { margin: 0; }
.relatorio-filtros .field-shell input,
.relatorio-filtros select,
.relatorio-filtros .busca-select-controle { height: 40px; }
.relatorio-filtros .relatorio-periodo-botoes button,
.relatorio-filtros .relatorio-periodo-botoes a {
    box-sizing: border-box;
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
}

/* Filtros da aprovação de brindes (W20 BR.13) — mesmo arranjo de .relatorio-filtros: os cinco
   campos em linha, quebrando quando não cabem, alinhados pela base para o botão "Limpar filtros"
   ficar na mesma linha dos campos. */
.filtros-brindes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 12px;
}

.filtros-brindes .field-shell {
    min-width: 150px;
}

.relatorio-periodo-botoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Stat tiles do Dashboard Esolution — cards de número grande (padrão novo da tela de relatórios). */
.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.dash-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    background: var(--sv-primaria-tint);
    /* âncora do popover de regra do indicador (botão "i") */
    position: relative;
}

/* Botão "i" com a regra do indicador — abre por clique (popover abaixo). */
.dash-tile-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--sv-texto-suave);
    border-radius: 50%;
    background: none;
    color: var(--sv-texto-suave);
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
    cursor: pointer;
    vertical-align: text-bottom;
    text-transform: none;
}

.dash-tile-info:hover,
.dash-tile-info:focus-visible {
    border-color: var(--sv-primaria);
    color: var(--sv-primaria);
    outline: none;
}

/* Botão "i" do glossário do relatório ativo (barra de voltar) — mesmo desenho do .dash-tile-info,
   um pouco maior por ser alvo isolado, não colado num rótulo. */
.relatorio-voltar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.relatorio-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--sv-texto-suave);
    border-radius: 50%;
    background: none;
    color: var(--sv-texto-suave);
    font-size: 13px;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    cursor: pointer;
}

.relatorio-info-btn:hover,
.relatorio-info-btn:focus-visible {
    border-color: var(--sv-primaria);
    color: var(--sv-primaria);
    outline: none;
}

/* Lista Indicador → Regra do modal de glossário. */
.regras-lista {
    margin: 12px 0 0;
    max-height: 420px;
    overflow-y: auto;
}

.regras-lista dt {
    font-weight: 600;
    margin-top: 12px;
}

.regras-lista dt:first-child {
    margin-top: 0;
}

.regras-lista dd {
    margin: 2px 0 0;
    color: var(--sv-texto-suave);
    font-size: 13px;
    line-height: 1.45;
}

/* Mesmo regime do BuscaSelect: fundo transparente fecha ao clicar fora. */
.dash-tile-popover-fundo {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.dash-tile-popover {
    position: absolute;
    top: 42px;
    left: 12px;
    right: 12px;
    z-index: 1050;
    padding: 10px 12px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    background: var(--sv-card-bg);
    color: var(--sv-texto);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
}

.dash-tile-rotulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--sv-texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dash-tile-valor {
    font-size: 28px;
    font-weight: 700;
    color: var(--sv-texto);
    line-height: 1.15;
}

.dash-tile-obs {
    font-size: 12px;
    color: var(--sv-texto-suave);
}

/* ELO ainda não mapeado — tile em tom neutro/pendente pra não parecer zero real. */
.dash-tile-pendente {
    background: var(--sv-fundo-suave);
}

.dash-tile-pendente .dash-tile-valor {
    color: var(--sv-texto-suave);
    font-size: 22px;
}

.tabela-scroll {
    overflow-x: auto;
}

.relatorio-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.relatorio-tabela th {
    text-align: left;
    padding: 8px 10px;
    background: var(--sv-bg);
    color: var(--sv-texto-suave);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.relatorio-tabela td {
    padding: 8px 10px;
    border-top: 1px solid var(--sv-borda);
    white-space: nowrap;
}

.relatorio-totais {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    background: var(--sv-bg);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 14px;
}

.totais-venda { color: var(--sv-sucesso); font-weight: 600; }
.totais-nao-compra { color: #b35c00; }
.totais-no-tour { color: #a15c00; }
.totais-descartado { color: var(--sv-erro); }
.totais-conversao { color: var(--sv-primaria); font-weight: 600; }

.relatorio-total-emitido {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px;
}

/* Configurações (Etapa 6) */
.config-novo-item {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.config-novo-item input {
    flex: 1;
    padding: 9px 11px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    font-size: 14px;
}

.config-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-item, .config-empreendimento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--sv-bg);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
}

.config-empreendimento {
    flex-wrap: wrap;
}

.config-empreendimento input {
    flex: 1;
    min-width: 140px;
    padding: 7px 10px;
    border: 1px solid var(--sv-borda);
    border-radius: 6px;
}

.config-item-inativo {
    opacity: .55;
}

.config-item-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.config-novo-empreendimento {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 16px;
}

.config-novo-empreendimento input {
    padding: 9px 11px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    font-size: 14px;
}

.config-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sv-texto-suave);
    margin-bottom: 12px;
    cursor: pointer;
}

/* Apresentações (decks/slides/vídeos) — Etapa 6 */
.config-apresentacoes-painel {
    margin-top: 10px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    width: 100%;
}

.config-deck {
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.config-deck-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--sv-bg);
}

.config-deck-corpo {
    padding: 14px;
    border-top: 1px solid var(--sv-borda);
}

.config-slides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.config-slide-card {
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    overflow: hidden;
    background: var(--sv-bg);
    font-size: 12px;
}

.config-slide-card img, .config-slide-card video {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
    background: #000;
}

.config-slide-card-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    gap: 4px;
}

.config-slide-card-rodape span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-slide-card-rodape button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
}

.config-upload-linha {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}

/* DocumentosLista.razor — esconde o <InputFile> nativo (feio, "Escolher arquivo / Nenhum arquivo
   escolhido") e usa o <label> que o envolve como botão clicável no lugar dele. */
.doc-upload-label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.doc-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

@media (max-width: 720px) {
    .atendimentos-shell { flex-direction: column; }
    .atendimentos-painel { width: 100%; }
    .ficha-grid, .totem-respostas { grid-template-columns: 1fr; }

    /* Linha da fila vira 2 linhas em telas estreitas: nome em cima, FR/badge/data/botão
       embaixo — em vez de espremer tudo numa linha só (que é o que quebrava antes). */
    /* Tela estreita: a grade vira uma coluna só, na ordem nome → chip → lateral. O `order` existia
       aqui desde o layout flex e continua valendo — o que mudou é que agora ele reordena CÉLULAS,
       não itens de um flex que pode quebrar no meio. */
    .atendimento-row { grid-template-columns: minmax(0, 1fr); }
    .atendimento-info { order: -1; }
    .atendimento-fr { justify-self: start; align-self: start; }
    .atendimento-lateral { align-items: flex-start; }
    .atendimento-tags, .atendimento-acoes { justify-content: flex-start; }
    .btn-ver-ficha span, .btn-no-show span { display: none; }
}

/* Impressão seletiva da FICHA (botão "Imprimir ficha", ver window.printOnly em
   wwwroot/js/print.js) — .ficha-print fica SEMPRE renderizada no DOM (dados já carregados, sem
   depender de um re-render do Blazor), fora do fluxo normal (display:none fora de @media print).
   Vira visível na impressão pelo atributo body[data-print-only="ficha"], setado por printOnly() no
   mesmo clique que chama window.print() — sem isso, escolher a seção certa exigiria esperar um
   StateHasChanged do Blazor Server chegar ao cliente antes de imprimir, e um print disparado cedo
   demais mostraria a seção errada. O VOUCHER do brinde não usa isto: é HTML montado no Shared e
   impresso em iframe isolado (VBC, ver printVoucherBrinde em print.js). */
.ficha-print { display: none; }

@media print {
    /* 12,7 mm nos QUATRO lados, o MESMO número do desktop (FichaImpressaoLayout.MargemMm no
       Shared, em centésimos de polegada do lado do System.Drawing). O guarda G2 dos testes
       compara este número com a constante: mudar um sem o outro fica vermelho, e é pra isso que
       ele existe.

       Eram 9 mm aqui e 25,4 mm lá (ninguém escolheu o 25,4: era o default do PrintDocument), e
       por isso não dava pra pôr as duas folhas do mesmo atendimento lado a lado e comparar. Os
       25,4 mm unificados duraram um dia: com a ficha em UMA página (§16) o recurso escasso passou
       a ser a fonte, e a medição mostrou que gastar 25,4 mm de margem custava 1,3pt de fonte.
       Margem não lê nada; fonte é o que a recepção reclamou de não conseguir ler.

       O @page vale para a ficha. O voucher do brinde imprime em iframe próprio (VBC). */
    @page { size: A4; margin: 12.7mm; }

    /* Esconder o app vale SÓ no modo de impressão seletiva. Sem o atributo (Ctrl+P direto), a
       página imprime como está na tela — antes havia aqui uma regra INCONDICIONAL que escondia
       todo descendente do body por visibilidade, e por isso qualquer Ctrl+P, em qualquer tela da
       web, saía em branco.

       NÃO reescreva este comentário com a sintaxe literal daquela regra: o guarda G1 da §8.2 da
       SPEC-ficha-impressa-paridade é um grep neste arquivo, e a string literal aqui dentro o faz
       falhar sem que exista defeito nenhum. */
    body[data-print-only] .app-nav,
    body[data-print-only] #blazor-error-ui,
    body[data-print-only] #components-reconnect-modal { display: none; }

    /* A causa das páginas em branco (3 páginas, 2 vazias): esconder por visibilidade NÃO tira a
       caixa do fluxo — o conteúdo da Ficha continuava gerando 2 páginas de altura depois da
       ficha, que está fora do fluxo (position:absolute). Aqui somem do fluxo os IRMÃOS da seção
       imprimível. Dá pra usar display:none justamente porque o seletor é de IRMÃO, não de
       ancestral: era isso, e não o display, que impedia antes (o seletor universal antigo
       alcançava também os ancestrais da própria .ficha-print). O voucher saiu desta regra com a
       entrega VBC (passou a imprimir em iframe), restando só a da ficha. */
    body[data-print-only="ficha"]   .app-conteudo > *:not(.ficha-print)   { display: none; }

    body[data-print-only] .app-shell    { min-height: 0; }
    body[data-print-only] .app-conteudo { padding: 0; margin: 0; max-width: none; }

    /* No fluxo normal (position:static): a margem passa a vir do @page e não de um top/left
       absoluto, que é o que permite o documento paginar em vez de sobrepor a folha 1. */
    body[data-print-only="ficha"] .ficha-print {
        display: block;
        position: static;
        width: 100%;
        padding: 0;
        color: #000;
        background: #fff;
        font-size: 10.5px;
        line-height: 1.15;
    }

    /* UMA PÁGINA SÓ — pedido do usuário em 2026-10-14, "inclusive no desktop", isto é, nos dois
       (SPEC §16). Isto REVERTE o que estava escrito aqui: a invariante de 1 página tinha sido
       retirada no W8-b e reduzir fonte era proibido. O usuário foi informado de que a fonte havia
       sido aumentada ~15% em 2026-09-12 por reclamação da recepção, de que isto reverte aquilo e
       vai além, e decidiu seguir. Risco aceito e registrado.

       O corte de fonte é o ÚLTIMO recurso, não o primeiro: antes dele vêm os sete levers de
       layout da §16.5, todos aplicados aqui embaixo (cabeçalho de seção mais apertado, família
       numa seção só, quiz em 2 colunas, padding de célula 1px, consentimento compacto, margem de
       12,7 mm). No desktop os levers sozinhos pararam em 1,27 página, e lá a fonte tem
       AUTO-AJUSTE: cada ficha é medida e cai só o quanto precisa (0,76 no caso típico, 8,0pt).

       Aqui não há como medir — CSS não mede. Os 11px viraram 10,5px porque é o equivalente
       APROXIMADO do que o desktop mediu: 10,5pt × 0,76 = 8,0pt = 10,67px. A web parte de uma base
       menor que a do desktop (11px contra 14px) e por isso precisa de muito menos corte. O número
       final é o que o teste manual M17 disser, com a folha na mão — este é o ponto de partida
       medido pelo lado que dá para medir, não um palpite.

       As três invariantes continuam valendo e NÃO são negociáveis por tamanho de fonte:
         I1 nenhuma página em branco;
         I2 nenhum bloco partido ao meio (campo, linha de tabela, faixa de QRs, consentimento);
         I3 o bloco de consentimento sai inteiro e na última página.
       Ver docs/SPEC-ficha-impressa-paridade.md §16 (a §7.2.3 está revogada). */

    /* I2, lado da web: um <h2> nunca é a última coisa de uma página (equivale à regra 4 do
       FichaImpressaoPaginador no desktop — cabeçalho de seção sozinho no pé da folha). */
    .ficha-print h2 { break-after: avoid; }

    /* 15px = 11,25pt, exatamente o tamanho do título do desktop depois do lever L5. */
    .ficha-print h1 { font-size: 15px; margin: 0 0 2px; }

    /* Lever L1, o maior dos sete (−40,6 mm no desktop): a folga vertical TOTAL do cabeçalho de
       seção é FichaImpressaoLayout.FolgaCabecalhoSecaoPx = 6px, e aqui ela é a soma
       4 + 1 (margin) + 1 (padding-bottom). O desktop gastava 22 unidades de 1/100 pol no mesmo
       lugar — 43,7% de uma folha A4 em títulos de seção. A web já era a parcimoniosa; mudou só o
       bastante para os dois darem o mesmo número. */
    .ficha-print h2 { font-size: 12px; margin: 4px 0 1px; border-bottom: 1px solid #000; padding-bottom: 1px; }
    .ficha-print .print-meta { font-size: 10px; color: #333; margin: 0 0 4px; }
    .ficha-print .print-texto { margin: 0 0 2px; }
    .ficha-print .print-rodape { font-size: 8.5px; color: #555; margin-top: 4px; }

    .print-tabela {
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #000;
        font-size: 10.5px;
        break-inside: avoid;
        margin-bottom: 2px;
    }

    /* Tabela que PODE crescer além de uma página (respostas do quiz: até 12 linhas; filhos e
       acompanhantes: N linhas). Com o `break-inside: avoid` das tabelas curtas, o navegador ou
       abriria um vão enorme antes dela ou ignoraria a regra; com `auto` + linha indivisível a
       tabela quebra ENTRE linhas, nunca dentro de uma (I2). */
    .print-tabela-longa { break-inside: auto; }
    .print-tabela-longa tr { break-inside: avoid; }


    /* Lever L4: o padding vertical caiu de 2px para 1px. Parece nada e valeu 15,4 mm no desktop —
       a ficha empilha ~40 células e cada uma cobra o padding duas vezes. O número é
       FichaImpressaoLayout.PaddingCelulaVerticalPx, e o guarda G5 confere que este arquivo e o
       Shared continuam dizendo a mesma coisa. */
    .print-tabela th, .print-tabela td {
        text-align: left;
        padding: 1px 5px;
        border: 1px solid #000;
        vertical-align: top;
    }

    .print-tabela th {
        font-weight: 600;
        color: #000;
        background: #f0f0f0;
        white-space: nowrap;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Equipe (Captador/Consultor/Fechador/PEP): 4 colunas iguais, linha de dados alta pra
       escrita manual. Os 11 mm são o mesmo número do TabelaEquipe da ficha do desktop — se
       mudar aqui, mude lá. Os 11 mm NÃO entraram nos levers da §16.5 de propósito: é onde a
       recepção escreve à mão, e espaço de escrita não é espaço desperdiçado. */
    .print-equipe { table-layout: fixed; }
    .print-equipe th { text-align: center; }
    .print-equipe td { height: 11mm; vertical-align: middle; }

    /* Lista dos brindes na ficha (BQ, SPEC-brinde-ficha-nome-quantidade): NOME + QUANTIDADE em
       texto, não mais o QR — o QR saiu da ficha e ficou só no voucher do brinde (VBC). Lista
       simples e compacta; `break-inside: avoid` no item cumpre a invariante I2 (nenhum item
       partido ao meio) e a lista inteira pode quebrar entre itens. */
    .print-brindes-lista { list-style: disc; margin: 0 0 3px; padding-left: 14px; }
    .print-brindes-lista li { font-size: 8px; line-height: 1.3; break-inside: avoid; }

    /* Bloco de consentimento (LGPD/divulgação) + assinatura — sai fixo no rodapé da ficha
       impressa, texto pequeno igual ao resto pra não estourar a página.

       Lever L6: as folgas foram apertadas (−12,2 mm no desktop, onde o bloco inteiro media
       54,7 mm, 22% da folha). O CONTEÚDO não encolhe: o texto é jurídico e vem palavra por
       palavra de FichaConsentimento, no Shared. O que encolhe é o ar entre os parágrafos. */
    /* As quatro folgas deste bloco (topo, entre parágrafos, antes da assinatura e antes do
       rodapé) têm dono em FichaImpressaoLayout.Consentimento*Px, no Shared. Os números abaixo
       são os de lá: 5 / 2 / 10 / 4 px. Mudar um sem mudar o token faz o papel do desktop
       divergir deste em silêncio — foi o que aconteceu quando elas foram apertadas. */
    .print-consentimento {
        margin-top: 5px;
        break-inside: avoid;
    }

    .print-consentimento p { margin: 0 0 2px; }
    .print-consentimento .print-ciente { margin-top: 2px; font-style: italic; }

    .print-assinatura {
        margin: 10px 0 0 auto;
        width: 220px;
        text-align: center;
        border-top: 1px solid #000;
        padding-top: 2px;
    }

    /* O voucher do brinde saiu daqui com a entrega VBC (SPEC-voucher-brinde-central): agora é o
       HTML do template da Central, montado no Shared (VoucherBrindeHtml) e impresso num iframe
       isolado (printVoucherBrinde em print.js), não mais uma seção .voucher-print nesta página. */
}

/* Venda Direta — página inteira (espelha EditarVendaView do app desktop: cards em sequência,
   condições de pagamento editáveis). Ver Components/Pages/VendaDireta.razor. */
.venda-secoes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 960px;
}

/* .ficha-card tem margin-bottom própria (pra quando usado solto, ex.: Ficha.razor). Aqui os cards
   são filhos de um flex com gap — a margin somava com o gap e quase dobrava o espaço entre eles
   só nesta tela (~30px em vez de 16px). */
.venda-secoes > .ficha-card {
    margin-bottom: 0;
}

.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #90a4ae;
}
.status-pill.status-dentro { background: #2e8b57; }
.status-pill.status-fora { background: #c0392b; }
.status-pill.status-beneficial { background: #d98a1f; }

.condicao-card {
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--sv-card-bg);
}

.condicao-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* h2 aqui fica lado a lado com um badge/botão (a linha vira o "espaço embaixo do título" — não a
   margem do h2, que herdaria de .ficha-card h2 e sobraria só de um lado). Substitui os
   style="margin:0" inline que existiam pra isso em VendaDireta.razor. */
.condicao-cabecalho h2 {
    margin: 0;
}

.condicao-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.condicao-grid .field-shell { margin: 0; }

.condicao-diferenca {
    font-size: 12px;
    margin: 4px 0 0;
}

.field-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--sv-texto-suave);
}

/* Seleção múltipla de cotas dentro de um card de produto tipo "C" — chips das cotas confirmadas
   + picker em lista com checkbox (ver VendaDireta.razor, docs/SPEC-vendas-multiplas-cotas.md). */
.cota-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.cota-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--sv-fundo-destaque);
    color: var(--sv-texto);
    border: 1px solid var(--sv-borda);
}

.cota-chip-remover {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--sv-texto-suave);
}

.cota-chip-remover:hover {
    color: var(--sv-erro);
}

/* Modal "Selecionar Cotas" — réplica do UnidadePickerModal.jsx (WhatsappMP). Mais largo que o
   .modal-card-larga padrão (480px) porque precisa caber a grade de cartões em 2-3 colunas. */
.cota-modal {
    max-width: 760px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.cota-modal-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cota-modal-titulo-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cota-modal-titulo-grupo h2 {
    margin: 0;
}

.cota-modal-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.cota-modal-status-connected { background: #eaf7ee; color: var(--sv-sucesso); }
.cota-modal-status-error { background: var(--sv-erro-bg); color: var(--sv-erro); }
.cota-modal-status-connecting { background: #fff8e6; color: #a16d00; }

.cota-modal-status-pulso {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f0b429;
    animation: cota-pulso 1.2s ease-in-out infinite;
}

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

.cota-modal-sync {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--sv-texto-suave);
}

.cota-modal-busca-linha {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--sv-borda);
    margin-bottom: 12px;
}

.cota-modal-busca {
    flex: 1;
    min-width: 160px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    color: var(--sv-texto-suave);
}

.cota-modal-busca input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--sv-texto);
}

.cota-modal-legenda {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--sv-texto-suave);
    flex-shrink: 0;
}

.cota-legenda-bola {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cota-legenda-disponivel { background: var(--sv-sucesso); }
.cota-legenda-selecionada { background: var(--sv-primaria); }
.cota-legenda-reservada { background: var(--sv-erro); }

.cota-modal-corpo {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
}

.cota-modal-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 560px) {
    .cota-modal-grade { grid-template-columns: repeat(3, 1fr); }
}

.cota-card {
    position: relative;
    text-align: left;
    border: 2px solid var(--sv-borda);
    border-radius: 10px;
    padding: 10px;
    background: var(--sv-card-bg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.cota-card:hover:not(:disabled) {
    border-color: var(--sv-primaria);
}

.cota-card-selecionada {
    border-color: var(--sv-primaria);
    background: var(--sv-primaria-tint);
}

.cota-card-selecionada:hover:not(:disabled) {
    background: var(--sv-primaria-tint);
}

.cota-card-bloqueada {
    opacity: .6;
    cursor: not-allowed;
    background: var(--sv-fundo-suave);
}

.cota-card-carregando {
    opacity: .6;
    cursor: default;
}

.cota-card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

.cota-card-badge-selecionada { color: var(--sv-primaria); }
.cota-card-badge-bloqueada { color: var(--sv-erro); }

.cota-card-numero {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--sv-texto);
    margin: 0;
    padding-right: 18px;
}

.cota-card-detalhe {
    font-size: 12px;
    color: var(--sv-texto-suave);
    margin: 2px 0 0;
}

/* Tipo Semana (corrida/fracionada) — TipologiaECabeceis.TipoSemana, mesma info que a
   NovaVenda.razor da Central já mostra no seletor dela (achado em 2026-09-29). */
.cota-card-semana {
    font-size: 11px;
    font-weight: 600;
    color: var(--sv-primaria);
    margin: 2px 0 0;
}

.cota-card-dica {
    font-size: 12px;
    font-weight: 600;
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.cota-card-dica-selecionada { color: var(--sv-primaria); }
.cota-card-dica-bloqueada { color: var(--sv-erro); }

/* Calendário de uso da cota (CAL.15 da docs/SPEC-calendario-da-cota.md).

   O bloco existe porque o cartão de seleção e a seta de datas têm de ser IRMÃOS: <button> dentro
   de <button> é HTML inválido, e o cartão reserva a cota de verdade ao ser clicado — se o clique
   da seta vazasse para ele, abrir o calendário reservaria a cota de quem só queria ver datas. O
   bloco passa a ser o item da grade, então o cartão precisa ocupar a largura inteira dele (antes
   o próprio .cota-card era o item e herdava a largura da coluna). */
.cota-card-bloco {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cota-card-bloco > .cota-card {
    width: 100%;
    box-sizing: border-box;
}

.cota-card-datas {
    margin-top: 4px;
    align-self: stretch;
    padding: 4px 8px;
    border: 1px solid var(--sv-borda);
    border-radius: 8px;
    background: var(--sv-card-bg);
    color: var(--sv-primaria);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.cota-card-datas:hover {
    border-color: var(--sv-primaria);
}

.cota-periodos {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cota-periodos-aviso {
    margin: 0;
    font-size: 11px;
    color: var(--sv-texto-suave);
}

.cota-periodo {
    background: var(--sv-fundo-suave);
    border-radius: 6px;
    padding: 4px 6px;
}

.cota-periodo-titulo {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--sv-texto);
}

.cota-periodo-resumo {
    margin: 0;
    font-size: 11px;
    color: var(--sv-texto-suave);
}

/* O seletor de ano fica no cabeçalho do modal (um para a tela inteira), encostado à direita,
   antes do botão de fechar. */
.cota-modal-ano {
    margin: 0 0 0 auto;
    min-width: 120px;
}

.cota-modal-ano span {
    margin-bottom: 2px;
}

.cota-modal-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--sv-borda);
    margin-top: 12px;
}

.cota-modal-contagem {
    font-size: 12px;
    color: var(--sv-texto-suave);
}

.subcondicoes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--sv-borda);
}

.subcondicoes-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.subcondicao-linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 6px;
}

.resumo-pagamento-box {
    background: var(--sv-fundo-destaque, #eaf2ff);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.6;
}

.equipe-membro {
    display: grid;
    grid-template-columns: auto 1fr 1.4fr auto;
    gap: 12px;
    /* Função/Usuário (rótulo + dropdown) ocupam a altura toda da linha — o dropdown deles sempre
       fica encostado na base da célula, com ou sem align-items (não tem espaço sobrando pra
       alinhar). Número e Remover são os únicos com espaço sobrando pra "flutuar"; "end" encosta
       os dois na base também, alinhando com a base do próprio dropdown. "center" (tentativa
       anterior) deixava os dois flutuando no meio do espaço — dropdown na base, botão mais acima:
       a "escada" reportada. */
    align-items: end;
    border: 1px solid var(--sv-borda);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.equipe-membro .field-shell { margin: 0; }

.equipe-membro-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sv-primaria);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

@media (max-width: 700px) {
    .equipe-membro { grid-template-columns: 1fr; }
}
/* Envio da venda (VendaDireta): overlay com spinner + banner de resultado */
.enviando-card { text-align: center; max-width: 420px; }
.enviando-card .spinner {
    width: 44px; height: 44px; margin: 0 auto 12px;
    border: 4px solid var(--sv-borda); border-top-color: var(--sv-sucesso); border-radius: 50%;
    animation: sv-giro .8s linear infinite;
}
@keyframes sv-giro { to { transform: rotate(360deg); } }
.resultado-envio { padding: 14px 16px; border-radius: 10px; margin: 16px 0; white-space: pre-line; }
.resultado-envio strong { display: block; font-size: 16px; margin-bottom: 4px; }
.resultado-envio p { margin: 4px 0 0; font-size: 14px; }
.resultado-sucesso { background: #e8f6ec; border: 1px solid var(--sv-sucesso); color: #14532d; }
.resultado-erro { background: #fdecec; border: 1px solid #c62828; color: #7f1d1d; }
.resultado-dica { font-size: 13px; opacity: .85; }