/* Casca da aplicação. Sem dependência de JS: o layout é renderizado estaticamente quando o
   render mode é definido por página, então o comportamento responsivo é todo em CSS. */

/* Paleta oficial do Grupo Villela, amostrada dos PNGs da marca:
   ciano #18C1E8 (símbolo) e petróleo #05232B (palavra "Villela").

   O ciano não carrega texto branco — 2,1:1. Onde ele é fundo, o texto é petróleo (7,6:1),
   que é exatamente a relação usada no próprio logo. */
:root {
    --villela-ciano: #18c1e8;
    --villela-ciano-escuro: #0fa3c7;
    --villela-ciano-claro: #7fdcf2;
    --villela-primaria: #05232b;
    --villela-primaria-escura: #01161c;
    --villela-primaria-clara: #0b343d;
    --villela-fundo: #f2f6f8;
    --villela-borda: #dce4e8;
    --villela-texto: #05232b;
    --villela-texto-suave: #55686f;

    /* Recortes do aparelho (notch, indicador de home). Valem 0 no navegador comum e só
       ganham valor quando o app roda instalado, com viewport-fit=cover. */
    --area-segura-topo: env(safe-area-inset-top, 0px);
    --area-segura-base: env(safe-area-inset-bottom, 0px);
    --area-segura-esq: env(safe-area-inset-left, 0px);
    --area-segura-dir: env(safe-area-inset-right, 0px);

    /* Barra de abas do celular: 56px de alvo + o que o aparelho reservar embaixo. */
    --tabbar-altura: 56px;
    --tabbar-total: calc(var(--tabbar-altura) + var(--area-segura-base));
}

/* Ajustes de base para o toque. Sem text-size-adjust o iOS aumenta o corpo de texto sozinho
   ao girar o aparelho; sem tap-highlight cada toque pisca um retângulo cinza que denuncia
   que aquilo é uma página, não um app. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* Cromo do app não se seleciona: segurar o dedo numa aba ou num cabeçalho de coluna devia
   iniciar a rolagem, não a seleção de texto. O conteúdo do lead segue selecionável. */
.shell-bar,
.captura-bar,
.shell-nav,
.tabbar,
.kanban-cabecalho,
.kanban-seta {
    -webkit-user-select: none;
    user-select: none;
}

/* ---------- shell (telas interativas) ---------- */

/* Altura travada na viewport com a rolagem dentro de .shell-conteudo: a barra superior e a
   navegação ficam sempre visíveis, e o kanban consegue se ajustar à altura da tela em vez de
   esticar a página. */
.shell {
    height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--villela-fundo);
}

/* Navegadores que ainda medem 100dvh pela janela inteira empurrariam a barra de abas para
   baixo da barra de endereço; --altura-viewport vem do casca-app.js e cobre esse caso. */
@supports not (height: 100dvh) {
    .shell {
        height: var(--altura-viewport, 100vh);
    }
}

.shell-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    height: 64px;
    background: var(--villela-primaria);
    color: #fff;
}

/* Marca das barras: símbolo do Grupo Villela + nome do produto, separados por um filete.
   O símbolo é o mesmo em fundo claro e escuro — a águia é vazada dentro do quadrado ciano,
   então ele não precisa de variante invertida. */
.marca {
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    color: #fff;
}

/* Marca completa. A proporção é 2,45:1, então a altura precisa ser generosa o bastante para
   "Gestão Empresarial" não virar borrão — daí a barra ter 64px em vez de 56px. */
.marca-logo {
    height: 40px;
    width: auto;
    display: block;
}

.marca-produto {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding-left: .625rem;
    border-left: 1px solid rgba(255, 255, 255, .28);
    line-height: 1.1;
}

.shell-usuario {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

.shell-usuario-nome {
    opacity: .85;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-sair,
.captura-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    border-radius: 6px;
    padding: .25rem .75rem;
    font-size: .8125rem;
    cursor: pointer;
}

.shell-sair-icone {
    display: none;
    width: 20px;
    height: 20px;
}

.shell-sair:hover,
.captura-nav button:hover {
    background: rgba(255, 255, 255, .12);
}

.shell-nav {
    display: flex;
    gap: .25rem;
    padding: 0 .5rem;
    background: #fff;
    border-bottom: 1px solid var(--villela-borda);
    overflow-x: auto;
    scrollbar-width: thin;
}

.shell-nav-item {
    flex: 0 0 auto;
    padding: .75rem 1rem;
    color: var(--villela-texto-suave);
    text-decoration: none;
    font-size: .9375rem;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.shell-nav-item:hover {
    color: var(--villela-primaria);
    background: #f5f9fa;
}

.shell-nav-item.active {
    color: var(--villela-primaria);
    border-bottom-color: var(--villela-ciano);
    font-weight: 700;
}

.shell-nav-item--secundario {
    margin-left: auto;
}

.shell-conteudo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Contido, não travado: a rolagem não encadeia para a página, mas o puxar-para-recarregar
       continua existindo nas telas de captura, onde quem rola é o body. Instalado na tela
       inicial, sem barra de navegador, é o único gesto de recarregar que sobra. */
    overscroll-behavior: contain;
    padding: 1.25rem;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* O kanban é a exceção: ignora a largura máxima e a rolagem da página, ocupando a tela toda.
   O :has() evita ter que informar o layout de fora qual página está aberta — o que, com render
   mode por página, exigiria plumbing entre um layout estático e uma página interativa. */
.shell-conteudo:has(.pagina-kanban) {
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.pagina-kanban {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.pagina-kanban-cabecalho {
    flex: 0 0 auto;
    padding: 1rem 1.25rem .25rem;
}

/* ---------- captura (telas SSR estáticas do vendedor) ---------- */

.captura {
    min-height: 100vh;
    background: var(--villela-fundo);
}

.captura-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 64px;
    background: var(--villela-primaria);
    color: #fff;
}

.captura-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.captura-nav a {
    color: #fff;
    text-decoration: none;
    font-size: .875rem;
    opacity: .9;
}

.captura-nav form {
    margin: 0;
}

.captura-conteudo {
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
}

/* ---------- telas de conta (login, definir senha) ---------- */

.conta {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: linear-gradient(160deg, var(--villela-primaria) 0%, var(--villela-primaria-escura) 100%);
}

.conta-cartao {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}

.conta-marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
}

.conta-marca img {
    height: 40px;
    width: auto;
    display: block;
}

.conta-marca .marca-produto {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--villela-primaria);
    padding-left: .75rem;
    border-left: 1px solid var(--villela-borda);
    line-height: 1.1;
}

.conta-titulo {
    font-size: 1.4rem;
    margin: 0 0 .25rem;
}

.conta-subtitulo {
    color: var(--villela-texto-suave);
    font-size: .9375rem;
    margin: 0 0 1.5rem;
}

.conta-link {
    margin: 1rem 0 0;
    font-size: .875rem;
}

.conta-aviso {
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--villela-borda);
    font-size: .8125rem;
    color: var(--villela-texto-suave);
}

.conta-rodape {
    color: rgba(255, 255, 255, .7);
    font-size: .8125rem;
    margin-top: 1.5rem;
}

.campo {
    margin-bottom: 1rem;
}

.campo label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .3125rem;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid #c3ced4;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--villela-texto);
    background: #fff;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: 2px solid var(--villela-ciano);
    outline-offset: -1px;
    border-color: var(--villela-ciano);
}

.campo-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    margin-bottom: 1.25rem;
}

/* Ciano com texto petróleo — a mesma relação do logo, 7,6:1. Texto branco sobre o ciano
   ficaria em 2,1:1 e seria ilegível no celular sob luz do showroom. */
.botao-primario {
    width: 100%;
    padding: .8125rem 1rem;
    background: var(--villela-ciano);
    color: var(--villela-primaria);
    border: 0;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.botao-primario:hover {
    background: var(--villela-ciano-escuro);
}

.botao-primario:focus-visible {
    outline: 3px solid var(--villela-primaria);
    outline-offset: 2px;
}

.text-danger {
    color: #c0392b;
    font-size: .8125rem;
}

/* ---------- captura de lead ---------- */

.captura-titulo {
    font-size: 1.5rem;
    margin: 0 0 .25rem;
}

.captura-subtitulo {
    color: var(--villela-texto-suave);
    margin: 0 0 1.5rem;
    font-size: .9375rem;
}

.captura-secundario {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .9375rem;
}

.campo-duplo {
    display: flex;
    gap: .75rem;
}

.campo-duplo .campo {
    flex: 1;
}

/* Alvo grande de toque: o vendedor está de pé, no showroom, com pressa. */
.campo-consentimento {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem;
    background: #fff;
    border: 1px solid var(--villela-borda);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    cursor: pointer;
    line-height: 1.35;
}

.campo-consentimento input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.botao-grande {
    padding: 1rem;
    font-size: 1.0625rem;
}

.aviso {
    padding: .875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: .9375rem;
    line-height: 1.4;
    border: 1px solid;
}

.aviso--erro {
    background: #fceceb;
    border-color: #eeb8b3;
    color: #8c2016;
}

.aviso--sucesso {
    background: #e7f4ee;
    border-color: #a9d9c2;
    color: #14603c;
}

.aviso--atencao {
    background: #fdf2e6;
    border-color: #f0cfa6;
    color: #8a4e10;
}

.recentes {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--villela-borda);
}

.recentes-titulo {
    font-size: 1rem;
    margin: 0 0 .75rem;
    color: var(--villela-texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.recentes-lista {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.recentes-lista a {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem .875rem;
    background: #fff;
    border: 1px solid var(--villela-borda);
    border-radius: 8px;
    margin-bottom: .5rem;
    text-decoration: none;
    color: inherit;
}

.recentes-nome {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recentes-etapa {
    flex: 0 0 auto;
    color: #fff;
    font-size: .6875rem;
    padding: .1875rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.recentes-data {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--villela-texto-suave);
}

.recentes-todos,
.recentes-vazio {
    display: block;
    text-align: center;
    font-size: .9375rem;
    margin-top: 1.5rem;
}

/* ---------- blocos reutilizados nas telas ---------- */

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

.etapa-linha {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

.etapa-cor {
    flex: 0 0 auto;
    width: 6px;
    height: 34px;
    border-radius: 3px;
}

.etapa-cor--apagada {
    opacity: .35;
}

.etapa-info {
    flex: 1 1 auto;
    min-width: 0;
}

.etapa-nome {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.etapa-acoes {
    flex: 0 0 auto;
    display: flex;
    gap: .125rem;
}

.etapa-paleta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .375rem;
}

.etapa-paleta-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.etapa-paleta-item.selecionada {
    border-color: var(--villela-primaria);
    box-shadow: 0 0 0 2px #fff inset;
}

/* ---------- kanban ---------- */

/* Faixa do quadro: setas nas duas extremidades e a área rolável no meio. */
.kanban-tela {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: .25rem;
    padding: .75rem .5rem 1rem;
}

.kanban {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: .875rem;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 .25rem;
    /* Barra nativa escondida: quem rola são as setas (e o toque, no tablet). */
    scrollbar-width: none;
}

.kanban::-webkit-scrollbar {
    display: none;
}

/* Cada coluna rola por dentro, em vez de esticar a página inteira. */
.kanban-coluna {
    flex: 0 0 272px;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #e8eef1;
    border-radius: 10px;
    padding: 0 .625rem .625rem;
    scrollbar-width: thin;
}

/* Sem padding-top na coluna, top:0 gruda no alto da área rolável. */
.kanban-cabecalho {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 -.625rem .625rem;
    padding: .5rem .875rem .625rem;
    border-top: 3px solid;
    border-radius: 10px 10px 0 0;
    background: #dde6ea;
}

.kanban-seta {
    flex: 0 0 auto;
    align-self: center;
    width: 34px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--villela-primaria);
    background: #fff;
    border: 1px solid var(--villela-borda);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(5, 35, 43, .1);
}

.kanban-seta:hover:not(:disabled) {
    background: var(--villela-ciano);
    border-color: var(--villela-ciano);
}

.kanban-seta:disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}

/* Cabendo tudo na tela, as setas só roubariam largura das colunas. */
.kanban-tela--sem-setas .kanban-seta {
    display: none;
}

.kanban-cabecalho-nome {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--villela-primaria);
}

.kanban-cabecalho-total {
    font-size: .75rem;
    background: #fff;
    color: var(--villela-texto-suave);
    border-radius: 999px;
    padding: .0625rem .5rem;
    min-width: 22px;
    text-align: center;
}

.kanban-item {
    cursor: pointer;
}

.cartao {
    background: #fff;
    border: 1px solid var(--villela-borda);
    border-radius: 8px;
    padding: .625rem .75rem;
    margin-bottom: .5rem;
    box-shadow: 0 1px 2px rgba(5, 35, 43, .06);
}

.cartao:hover {
    border-color: var(--villela-ciano);
}

.cartao--novidade {
    border-left: 4px solid var(--villela-ciano);
}

.cartao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .375rem;
}

.cartao-nome {
    font-weight: 600;
    font-size: .9375rem;
    line-height: 1.25;
}

.cartao-linha {
    font-size: .8125rem;
    color: #3d5158;
    margin-top: .1875rem;
}

.cartao-linha--suave {
    color: var(--villela-texto-suave);
}

.cartao-origem {
    font-size: .75rem;
    color: var(--villela-texto-suave);
    margin-top: .375rem;
    padding-top: .375rem;
    border-top: 1px dashed var(--villela-borda);
}

.cartao-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
    font-size: .6875rem;
    color: #7d8f96;
}

.cartao-selo {
    font-size: .625rem;
    padding: .125rem .375rem;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cartao-selo--atencao {
    background: #fdf2e6;
    color: #8a4e10;
}

.cartao-selo--novidade {
    background: var(--villela-ciano);
    color: var(--villela-primaria);
    font-weight: 700;
}

/* ---------- detalhe do lead ---------- */

.detalhe-etapa {
    color: #fff;
    padding: .375rem .875rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Etapa atual + a ação que a troca, juntas: quem lê a coluna em que o lead está é quem quer
   movê-lo. */
.detalhe-etapa-bloco {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.detalhe-colunas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.detalhe-secao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.detalhe-lista {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: .5rem .875rem;
    margin: 0;
    font-size: .9375rem;
}

.detalhe-lista dt {
    color: var(--villela-texto-suave);
    font-size: .8125rem;
    overflow-wrap: break-word;
}

.detalhe-lista dd {
    margin: 0;
    overflow-wrap: break-word;
}

.linha-tempo {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.linha-tempo-item {
    border-left: 2px solid var(--villela-borda);
    padding: 0 0 1rem 1rem;
    position: relative;
}

.linha-tempo-item::before {
    content: "";
    position: absolute;
    left: -6px;
    top: .375rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--villela-ciano);
}

.linha-tempo-item--interno::before {
    background: #a8b8bf;
}

.linha-tempo-item--interno {
    background: #f7fafb;
}

.linha-tempo-cabecalho {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    color: var(--villela-texto-suave);
    flex-wrap: wrap;
}

.linha-tempo-cabecalho strong {
    color: var(--villela-texto);
}

.selo-interno {
    background: #e8eef1;
    border-radius: 4px;
    padding: .0625rem .375rem;
    font-size: .6875rem;
    text-transform: uppercase;
}

.linha-tempo-corpo {
    font-size: .9375rem;
    margin-top: .25rem;
}

.linha-tempo-comentario {
    margin: .375rem 0 0;
    padding: .625rem .75rem;
    background: #eef3f5;
    border-radius: 6px;
    white-space: pre-wrap;
}

.comentario-caixa {
    border-top: 1px solid var(--villela-borda);
    padding-top: 1rem;
}

.comentario-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}

@media (min-width: 900px) {
    .detalhe-colunas {
        grid-template-columns: 1.4fr 1fr;
    }
}

@media (min-width: 900px) {
    .shell-conteudo {
        padding: 1.5rem 2rem;
    }

    .captura-conteudo {
        padding: 2rem 1rem;
    }
}

/* ---------- coluna recolhida ---------- */

/* As etapas de perda abrem recolhidas: elas acumulam o volume morto do funil e, abertas,
   empurram para fora da tela justamente as colunas onde ainda há o que fazer. A coluna encolhe
   até a altura do cabeçalho, mas mantém a largura — assim o cabeçalho continua sendo a zona de
   soltura inteira, e arrastar um cartão para lá segue funcionando. */
.kanban-coluna--recolhida {
    align-self: flex-start;
    max-height: none;
    overflow: hidden;
    background: #eef2f4;
}

.kanban-coluna--recolhida .kanban-item,
.kanban-coluna--recolhida .mud-drop-item {
    display: none;
}

.kanban-coluna--recolhida .kanban-cabecalho {
    margin-bottom: 0;
}

.kanban-recolher {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    line-height: 1;
    color: var(--villela-texto-suave);
    background: transparent;
    border: 1px solid var(--villela-borda);
    border-radius: 4px;
    cursor: pointer;
}

.kanban-recolher:hover {
    background: #fff;
    color: var(--villela-primaria);
}

/* ---------- tag de seguimento ---------- */

/* Cores de estado, não da paleta de séries: são quatro estados de um mesmo campo, e reusar as
   cores do gráfico faria a tag parecer uma quinta série. */
.cartao-tag {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .0625rem .5rem;
    border-radius: 999px;
    border: 1px solid;
}

.cartao-tag--contatado {
    background: #e8f1f7;
    border-color: #b3cee2;
    color: #17567e;
}

.cartao-tag--agendado {
    background: #fdf2e6;
    border-color: #f0cfa6;
    color: #8a4e10;
}

.cartao-tag--finalizado {
    background: #e7f4ee;
    border-color: #a9d9c2;
    color: #14603c;
}

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

/* ---------- atribuição de lojas ---------- */

.lista-lojas {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--villela-borda);
    border-radius: 8px;
    padding: .25rem .5rem;
}

/* ---------- painel ---------- */

.painel-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.painel-data {
    max-width: 170px;
}

.painel-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .875rem;
    margin-top: 1rem;
}

.painel-cartao {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    background: #fff;
    border: 1px solid var(--villela-borda);
    border-radius: 10px;
    padding: .875rem 1rem;
}

/* O número que responde a pergunta da tela fica maior que os demais — os outros três só fazem
   sentido em relação a ele. */
.painel-cartao--destaque {
    border-color: var(--villela-primaria-clara);
}

.painel-cartao--destaque .painel-numero {
    font-size: 2.25rem;
}

.painel-cartao--compacto {
    padding: .625rem .75rem;
}

.painel-rotulo {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--villela-texto-suave);
}

.painel-numero {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--villela-texto);
}

.painel-nota {
    font-size: .8125rem;
    color: var(--villela-texto-suave);
}

/* A marca colorida ao lado do rótulo carrega a identidade da série; o texto fica na cor de
   texto, e não na cor da série. */
.painel-marca {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.painel-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    font-size: .8125rem;
    color: var(--villela-texto-suave);
}

.painel-legenda span {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.painel-detalhe {
    color: var(--villela-texto-suave);
    font-size: .8125rem;
}

.aviso--demo {
    background: #e9f7fb;
    border-color: #a9dcea;
    color: #0a4a5c;
    margin-top: 1.25rem;
}

/* ==========================================================================
   BARRA DE ABAS — a navegação do celular
   ==========================================================================

   No desktop a navegação é a faixa de abas do alto (.shell-nav) e esta barra fica escondida.
   No celular os papéis se invertem: a faixa some e entra uma barra fixa no rodapé, com ícone
   e rótulo, dentro do alcance do polegar. É o que separa "site aberto no celular" de app — e
   é o motivo de o vendedor não precisar mais subir a tela para trocar de seção.

   Tudo aqui é <a> e <details>: a barra é renderizada pelo layout, que é estático quando o
   render mode é definido por página. Nada de @onclick. */

.tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Amarrado à escala do MudBlazor, não a um número solto: a barra precisa ficar acima do
       conteúdo e abaixo de popover, diálogo e snackbar — senão o menu de um MudSelect abre
       atrás dela. A margem de 10 deixa espaço para o aviso de erro do Blazor. */
    z-index: calc(var(--mud-zindex-drawer, 1100) - 20);
    box-sizing: border-box;
    height: var(--tabbar-total);
    padding-bottom: var(--area-segura-base);
    padding-left: var(--area-segura-esq);
    padding-right: var(--area-segura-dir);
    background: #fff;
    border-top: 1px solid var(--villela-borda);
    box-shadow: 0 -2px 14px rgba(5, 35, 43, .07);
}

.tabbar-item {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    padding: .25rem .125rem;
    background: none;
    border: 0;
    color: var(--villela-texto-suave);
    text-decoration: none;
    font-size: .6875rem;
    line-height: 1.15;
    cursor: pointer;
}

/* A pílula do estado ativo é o fundo do próprio ícone — sem pseudo-elemento, que teria de
   disputar ordem de pintura com o rótulo. content-box para o padding somar à caixa de 24px
   em vez de comer o desenho. */
.tabbar-icone {
    box-sizing: content-box;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: .1875rem .875rem;
    border-radius: 999px;
    transition: background-color .16s ease, color .16s ease;
}

.tabbar-rotulo {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabbar-item.active {
    color: var(--villela-primaria);
    font-weight: 700;
}

/* Ciano a 24% sobre branco com o traço em petróleo: a mesma relação do logo, longe do ciano
   chapado com ícone branco, que reprovaria em contraste. */
.tabbar-item.active .tabbar-icone,
.tabbar-mais[open] > summary .tabbar-icone {
    background: rgba(24, 193, 232, .24);
    color: var(--villela-primaria);
}

.tabbar-item:active .tabbar-icone {
    background: rgba(5, 35, 43, .08);
}

/* ---------- folha "Cadastros" ---------- */

/* Sete telas de cadastro não cabem numa barra de quatro abas. O <details> é a única forma de
   abrir uma folha sem interatividade — e ele funciona igual na tela de captura, que é SSR
   estático de propósito. */
.tabbar-mais {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

/* display:block, não flex: Safari deixa de tratar o <summary> como gatilho do <details>
   quando ele vira contêiner flex. O arranjo em coluna fica no .tabbar-item de dentro. */
.tabbar-mais > summary {
    flex: 1 1 auto;
    display: block;
    list-style: none;
    cursor: pointer;
}

.tabbar-mais > summary > .tabbar-item {
    height: 100%;
}

.tabbar-mais > summary::-webkit-details-marker {
    display: none;
}

/* Escurece só o que está acima da barra: a barra de abas continua acesa, como em app nativo.
   Tocar aqui fecha a folha — quem trata é o casca-app.js. */
.tabbar-mais[open]::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: var(--tabbar-total);
    background: rgba(5, 35, 43, .45);
    animation: escurecer .18s ease both;
}

.tabbar-folha {
    position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: var(--tabbar-total);
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .5rem .75rem 1rem;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(5, 35, 43, .2);
    animation: folha-sobe .22s cubic-bezier(.2, .8, .2, 1) both;
}

.tabbar-folha-alca {
    display: block;
    width: 2.25rem;
    height: .25rem;
    margin: .25rem auto .75rem;
    border-radius: 999px;
    background: var(--villela-borda);
}

.tabbar-folha-titulo {
    margin: 0 .5rem .375rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--villela-texto-suave);
}

.tabbar-folha-item {
    display: block;
    padding: .875rem .75rem;
    border-radius: 10px;
    color: var(--villela-texto);
    text-decoration: none;
    font-size: 1rem;
}

.tabbar-folha-item.active {
    background: rgba(24, 193, 232, .16);
    font-weight: 700;
}

@keyframes folha-sobe {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes escurecer {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   CELULAR — a casca vira app
   ==========================================================================

   Corte em 768px: acima disso a faixa de abas do alto ainda cabe (tablet em retrato
   inclusive) e o desktop segue exatamente como estava. */

@media (max-width: 767.98px) {

    /* ---------- casca ---------- */

    .tabbar {
        display: flex;
    }

    .shell-nav {
        display: none;
    }

    /* padding-bottom na casca, não na área rolável: assim o kanban — que ocupa a altura toda
       e rola por dentro — também termina acima da barra, em vez de sumir atrás dela. */
    .shell {
        padding-bottom: var(--tabbar-total);
    }

    .captura {
        min-height: 100dvh;
        padding-bottom: var(--tabbar-total);
    }

    /* "Meus leads" virou aba; repetir o link na barra superior só roubaria espaço da marca. */
    .captura-nav a {
        display: none;
    }

    /* ---------- barra superior ---------- */

    /* Instalado na tela inicial, o app pinta atrás da barra de status: a altura cresce o
       tanto do recorte e o padding devolve o espaço ao conteúdo. */
    .shell-bar,
    .captura-bar {
        height: calc(56px + var(--area-segura-topo));
        padding-top: var(--area-segura-topo);
        padding-left: max(.875rem, var(--area-segura-esq));
        padding-right: max(.875rem, var(--area-segura-dir));
        gap: .5rem;
    }

    .marca-logo {
        height: 32px;
    }

    .marca-produto {
        font-size: 1rem;
        padding-left: .5rem;
    }

    /* Quem está logado, o app já sabe; numa barra de 360px o nome disputa com a marca. */
    .shell-usuario-nome,
    .shell-sair-texto {
        display: none;
    }

    .shell-sair-icone {
        display: block;
    }

    .shell-sair,
    .captura-nav button {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 10px;
    }

    /* ---------- conteúdo ---------- */

    .shell-conteudo {
        padding: 1rem .875rem 1.25rem;
    }

    .captura-conteudo {
        padding: 1rem .875rem 1.5rem;
    }

    /* A ação da tela ("Indicar cliente", "Nova loja") vira faixa cheia embaixo do título, em
       vez de um botão espremido no canto que quebra a linha do cabeçalho. */
    .pagina-cabecalho {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .pagina-cabecalho > .mud-button-root {
        width: 100%;
    }

    .pagina-cabecalho > .detalhe-etapa,
    .pagina-cabecalho > .detalhe-etapa-bloco {
        align-self: flex-start;
    }

    /* ---------- kanban ---------- */

    /* Uma coluna por tela, com a próxima aparecendo na borda: o polegar arrasta e o
       scroll-snap para exatamente na coluna seguinte. As setas são gesto de mouse — no toque
       elas só roubariam 68px de largura das colunas. */
    .kanban-tela {
        gap: 0;
        padding: .5rem 0 0;
    }

    .kanban-seta {
        display: none;
    }

    .kanban {
        gap: .625rem;
        padding: 0 .875rem .5rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: .875rem;
    }

    .kanban-coluna {
        flex: 0 0 88%;
        scroll-snap-align: start;
    }

    .pagina-kanban-cabecalho {
        padding: .75rem .875rem .25rem;
    }

    .cartao {
        padding: .75rem .875rem;
        margin-bottom: .625rem;
    }

    .cartao-nome {
        font-size: 1rem;
    }

    /* ---------- detalhe do lead ---------- */

    .detalhe-lista {
        grid-template-columns: minmax(76px, 34%) 1fr;
        column-gap: .75rem;
        row-gap: .5rem;
    }

    .detalhe-secao {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Enviar comentário e "visível para o vendedor" empilham: lado a lado, o botão fica com
       menos de 40% da largura e o rótulo do switch quebra em três linhas. */
    .comentario-acoes {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    .comentario-acoes > .mud-button-root {
        width: 100%;
    }

    .seguimento-tags > .mud-button-root {
        flex: 1 1 auto;
    }

    /* ---------- painel ---------- */

    /* Quatro faixas de tempo em grade fixa: viram um seletor segmentado de largura cheia, em
       vez de quatro botões que quebram em duas linhas irregulares. */
    .painel-filtros {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .375rem;
    }

    .painel-filtros > .mud-button-root {
        width: 100%;
        min-width: 0;
        padding-inline: .25rem;
    }

    .painel-data {
        grid-column: span 2;
        max-width: none;
    }

    .painel-cartoes {
        grid-template-columns: repeat(2, 1fr);
        gap: .625rem;
    }

    /* O número que responde à pergunta da tela continua sozinho na linha. */
    .painel-cartao--destaque {
        grid-column: 1 / -1;
    }

    .painel-numero {
        font-size: 1.5rem;
    }

    .painel-cartao--destaque .painel-numero {
        font-size: 2rem;
    }

    .painel-grafico {
        height: 220px !important;
    }

    .painel-legenda {
        gap: .625rem;
        font-size: .75rem;
    }

    /* ---------- formulários ---------- */

    /* 16px é o piso: abaixo disso o iOS dá zoom ao focar o campo e o vendedor perde o
       enquadramento da tela no meio do cadastro. */
    .campo input,
    .campo select,
    .campo textarea {
        font-size: 16px;
        padding: .8125rem .875rem;
        border-radius: 10px;
    }

    .campo-duplo {
        gap: .625rem;
    }

    .botao-primario {
        padding: .9375rem 1rem;
        border-radius: 10px;
    }

    .recentes-lista a {
        padding: .875rem;
    }

    /* Mesma razão do .campo: campo denso do MudBlazor cai abaixo de 16px e dispara o zoom. */
    .mud-input-root,
    .mud-input-slot {
        font-size: 1rem;
    }

    /* ---------- etapas ---------- */

    /* As quatro ações não cabem na mesma linha do nome em 360px; descem para a linha de
       baixo em vez de espremer o nome da etapa até o reticências. */
    .etapa-linha {
        flex-wrap: wrap;
    }

    .etapa-acoes {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .lista-lojas {
        max-height: 40dvh;
    }

    /* ---------- diálogos viram folhas de fundo ---------- */

    /* Diálogo centralizado com margem nas bordas é linguagem de desktop. Subindo do rodapé,
       com alça e ações grudadas embaixo, é o que o polegar espera no celular. */
    .mud-dialog-container {
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .mud-dialog {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        max-height: 92dvh;
        padding-bottom: var(--area-segura-base);
        border-radius: 18px 18px 0 0 !important;
        animation: folha-sobe .24s cubic-bezier(.2, .8, .2, 1) both !important;
    }

    .mud-dialog::before {
        content: "";
        flex: 0 0 auto;
        width: 2.25rem;
        height: .25rem;
        margin: .5rem auto .25rem;
        border-radius: 999px;
        background: var(--villela-borda);
    }

    .mud-dialog-content {
        padding-inline: 1.125rem;
    }

    .mud-dialog-actions {
        position: sticky;
        bottom: 0;
        gap: .625rem;
        padding: .625rem .875rem;
        background: var(--mud-palette-surface);
        border-top: 1px solid var(--villela-borda);
    }

    .mud-dialog-actions > .mud-button-root {
        flex: 1 1 0;
    }

    /* ---------- tabelas em modo cartão ---------- */

    /* O MudTable já empilha as células abaixo do breakpoint; o que falta é a linha parecer um
       cartão, e não um bloco colado no seguinte. */
    .mud-sm-table .mud-table-row,
    .mud-xs-table .mud-table-row {
        border-bottom: 8px solid var(--villela-fundo);
    }

    .mud-sm-table .mud-table-cell:before,
    .mud-xs-table .mud-table-cell:before {
        color: var(--villela-texto-suave);
        font-weight: 600;
        font-size: .8125rem;
    }

    /* ---------- avisos ---------- */

    /* Acima da barra de abas, senão o aviso de "lead movido" nasce debaixo dela. */
    .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-right,
    .mud-snackbar-location-bottom-center,
    .mud-snackbar-location-bottom-start,
    .mud-snackbar-location-bottom-end {
        left: .75rem !important;
        right: .75rem !important;
        bottom: calc(var(--tabbar-total) + .75rem) !important;
        transform: none !important;
    }

    .mud-snackbar {
        max-width: 100%;
    }

    /* ---------- área de conta do Identity ---------- */

    /* Sete itens empilhados empurrariam o formulário para baixo da dobra. Em faixa rolável, o
       conteúdo começa na primeira tela. */
    .conta-gerenciar .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: .375rem;
        margin-bottom: 1rem;
        padding-bottom: .375rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .conta-gerenciar .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .conta-gerenciar .nav-pills .nav-link {
        white-space: nowrap;
    }

    .conta-gerenciar h1 {
        font-size: 1.5rem;
    }

    .conta-gerenciar h2 {
        font-size: 1.125rem;
    }

    /* ---------- telas de conta ---------- */

    /* 100vh no celular conta a barra do navegador como se não existisse e estoura a tela;
       100dvh mede o que sobra de verdade. */
    .conta {
        min-height: 100dvh;
        padding-top: calc(1.5rem + var(--area-segura-topo));
        padding-bottom: calc(1.5rem + var(--area-segura-base));
        padding-left: max(1rem, var(--area-segura-esq));
        padding-right: max(1rem, var(--area-segura-dir));
    }

    .conta-cartao {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
    }
}

/* Celular deitado: a barra de abas comeria um quinto de uma tela de 400px de altura. */
@media (max-width: 991.98px) and (max-height: 480px) and (orientation: landscape) {
    :root {
        --tabbar-altura: 44px;
    }

    .tabbar-rotulo {
        display: none;
    }

    .tabbar-icone {
        padding: .125rem .875rem;
    }
}

/* ==========================================================================
   ALVOS DE TOQUE
   ==========================================================================

   Vale por tipo de ponteiro, não por largura: um tablet largo continua sendo dedo. Notebook
   com tela sensível ao toque reporta ponteiro fino — o mouse é o ponteiro primário — e fica
   com os alvos compactos do desktop. */

@media (pointer: coarse) {
    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .kanban-recolher {
        width: 34px;
        height: 34px;
        font-size: 1.125rem;
    }

    .etapa-paleta {
        gap: .625rem;
    }

    .etapa-paleta-item {
        width: 40px;
        height: 40px;
    }

    .campo-consentimento input[type="checkbox"] {
        width: 26px;
        height: 26px;
    }

    .recentes-todos,
    .captura-secundario a,
    .conta-link a {
        display: inline-block;
        padding: .5rem 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tabbar-folha,
    .tabbar-mais[open]::before,
    .mud-dialog {
        animation: none !important;
    }

    .tabbar-icone {
        transition: none;
    }
}

/* ==========================================================================
   KANBAN NO CELULAR — navegar e mover sem arrastar
   ==========================================================================

   O MudDropContainer é HTML5 Drag and Drop por baixo: API de mouse, que não dispara em toque.
   Arrastar cartão no celular nunca funcionou, e o `touch-action: none` que o MudBlazor põe em
   cada cartão ainda matava a rolagem do quadro — como o cartão preenche a coluna, quase todo
   deslize começava em cima de um e não ia a lugar nenhum.

   No lugar do gesto entram dois caminhos explícitos: a faixa de etapas leva à coluna, e o
   botão no rodapé do cartão abre a troca de etapa. Nenhum dos dois depende de arraste. */

.kanban-quadro {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* No desktop a faixa não aparece: lá o quadro inteiro cabe na tela e as setas dão conta. */
.kanban-etapas {
    display: none;
}

.cartao-mover {
    display: none;
}

@media (max-width: 767.98px) {

    /* O cartão volta a deixar o dedo passar. Sem isto o quadro fica preso: o toque começa no
       cartão, o cartão diz `touch-action: none`, e o deslize morre ali. */
    .kanban .mud-drop-item[draggable="true"] {
        touch-action: pan-x pan-y;
        cursor: pointer;
    }

    /* ---------- faixa de etapas ---------- */

    /* Um chip por etapa, com a cor da coluna e a contagem. Ela resolve o que o quadro no
       celular não tem: a visão do funil inteiro, já que só uma coluna cabe por vez. E dá o
       salto direto para a última etapa sem seis deslizes no meio. */
    .kanban-etapas {
        display: flex;
        flex: 0 0 auto;
        gap: .375rem;
        padding: .5rem .875rem .25rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .kanban-etapas::-webkit-scrollbar {
        display: none;
    }

    .kanban-etapa-chip {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: .375rem;
        min-height: 34px;
        padding: .25rem .625rem;
        background: #fff;
        border: 1px solid var(--villela-borda);
        border-radius: 999px;
        color: var(--villela-texto-suave);
        font-size: .8125rem;
        font-family: inherit;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
    }

    /* Petróleo com filete grosso, não fundo ciano: o chip ativo precisa se separar dos outros
       sem competir com a cor da própria etapa, que é o que o pontinho carrega. */
    .kanban-etapa-chip[aria-current="true"] {
        border-color: var(--villela-primaria);
        box-shadow: inset 0 0 0 1px var(--villela-primaria);
        color: var(--villela-primaria);
        font-weight: 700;
    }

    .kanban-etapa-cor {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

    .kanban-etapa-total {
        flex: 0 0 auto;
        min-width: 18px;
        padding: .0625rem .25rem;
        background: #eef3f5;
        border-radius: 999px;
        font-size: .6875rem;
        text-align: center;
    }

    .kanban-etapa-chip[aria-current="true"] .kanban-etapa-total {
        background: var(--villela-ciano);
        color: var(--villela-primaria);
    }

    /* ---------- botão de mover no cartão ---------- */

    /* No rodapé do cartão, alinhado à direita: fica longe do nome — que é onde o dedo toca
       para abrir o lead — e a 32px de alvo, dentro do que a mão acerta sem mirar. */
    .cartao-mover {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 32px;
        height: 32px;
        margin-top: -.25rem;
        margin-bottom: -.25rem;
        padding: 0;
        background: #f2f6f8;
        border: 1px solid var(--villela-borda);
        border-radius: 8px;
        color: var(--villela-primaria);
        cursor: pointer;
    }

    .cartao-mover svg {
        width: 18px;
        height: 18px;
    }

    .cartao-mover:active {
        background: var(--villela-ciano);
        border-color: var(--villela-ciano);
    }

    /* O selo de novidade deixa de empurrar o botão para fora do canto. */
    .cartao-rodape .cartao-selo--novidade {
        margin-left: auto;
    }

    .cartao-rodape .cartao-selo--novidade + .cartao-mover {
        margin-left: .375rem;
    }

    /* A faixa já resolve a navegação; a coluna pode ocupar mais tela. */
    .kanban-coluna {
        flex-basis: 92%;
    }
}