/* Reizo — Design System (web)
   Marca: conceito Ponto Zero (logotipo em templates/_marca.html).
   Paleta: Tinta #0B1020, Petróleo #0E6B73, Grafite #5B6475, Papel #F4F5F7.
   A tela real usa os tokens redefinidos em visual-novo.css.

   Regra zero: nenhum hex fora deste bloco de tokens. Componente novo
   consome token; se não existe token para o que você quer, o problema é a
   intenção, não a paleta. */

:root {
    /* Elevação — mais "em cima" = mais claro. É isso, e não sombra, que dá
       profundidade. Preto absoluto foi testado e descartado. */
    --fundo: #0A0C0D;
    --sup-1: #111315;
    --sup-2: #181B1E;
    --sup-3: #212529;

    --borda: #333A40;
    --borda-2: #1A1E21;

    --texto: #EDF1F3;
    --texto-2: #96A1A8;
    --texto-3: #838E95;

    /* Identidade: o petróleo é a única cor de ação, de ativo e de positivo.
       No fundo escuro ele entra no tom claro (#3FB3B8), para ter contraste. */
    --marca: #3FB3B8;
    --marca-h: #2E9BA0;
    --marca-bg: #0E2A2D;

    --aviso: #FBBF24;
    --erro: #F87171;
    --erro-forte: #DC2626;
    --info: #60A5FA;
    --roxo: #A78BFA;

    --aviso-bg: #2A1F05;
    --erro-bg: #2A0F0F;
    --info-bg: #0C1B2E;

    --sobre-marca: #0A0C0D;
    --sobre-acao: #FFFFFF;
    --foco: #3FB3B8;

    --whatsapp: #25D366;
    --whatsapp-h: #1DA851;

    --esp-xs: 8px;
    --esp-sm: 12px;
    --esp-md: 16px;
    --esp-lg: 24px;
    --esp-xl: 32px;
    --esp-xxl: 48px;

    --raio-sm: 6px;
    --raio-md: 8px;

    --fonte: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-titulo: var(--fonte);
    --fonte-mono: Consolas, "Cascadia Mono", monospace;

    /* ---- Apelidos herdados ----
       As 24 telas já escritas consomem estes nomes em `style=` inline. Em vez
       de reescrever todas, eles passam a apontar para os tokens acima: a
       migração para o dark vale para o sistema inteiro de uma vez, e uma tela
       tocada no futuro pode passar a usar o nome novo sem quebrar as outras. */
    --cor-fundo: var(--fundo);
    --cor-painel: var(--sup-1);
    --cor-borda: var(--borda);
    --cor-texto: var(--texto);
    --cor-texto-fraco: var(--texto-2);
    --cor-texto-suave: var(--texto-3);
    --cor-primaria: var(--marca);
    --cor-primaria-escura: var(--marca-h);
    --cor-primaria-fundo: var(--marca-bg);
    --cor-perigo: var(--erro);
    --cor-perigo-fundo: var(--erro-bg);
    --cor-sucesso: var(--marca);
    --cor-prioridade: var(--erro);
    --raio: var(--raio-md);
    --raio-pequeno: var(--raio-sm);
    --sombra: none;
}

:root[data-tema="claro"] {
    --fundo: #F4F7F6; --sup-1: #FFFFFF; --sup-2: #EDF3F1; --sup-3: #E1EAE7;
    --borda: #B8C7C2; --borda-2: #D8E2DF;
    --texto: #17211E; --texto-2: #42534E; --texto-3: #566762;
    --marca: #0E6B73; --marca-h: #0A5559; --marca-bg: #DDF0F1;
    --aviso: #8A5700; --erro: #B42318; --erro-forte: #991B1B; --info: #175CD3; --roxo: #6938A8;
    --aviso-bg: #FFF3D6; --erro-bg: #FDE7E4; --info-bg: #E6F0FF;
    --sobre-marca: #FFFFFF; --sobre-acao: #FFFFFF; --foco: #0E6B73;
    --whatsapp: #128C4A; --whatsapp-h: #0D713C;
    --sombra: 0 12px 28px rgba(23, 33, 30, 0.10);
}

:root.tema-em-transicao *, :root.tema-em-transicao *::before, :root.tema-em-transicao *::after {
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
    :root.tema-em-transicao *, :root.tema-em-transicao *::before, :root.tema-em-transicao *::after { transition: none !important; }
}

* { box-sizing: border-box; }
.menu-mobile { display: none; }
/* No celular a lateral some; a marca continua no topo da página. */
.marca-mobile { display: none; }
.menu-scrim { display: none; }

.ir-conteudo {
    position: fixed;
    top: var(--esp-xs);
    left: var(--esp-xs);
    z-index: 100;
    transform: translateY(-160%);
    padding: var(--esp-xs) var(--esp-md);
    border-radius: var(--raio-sm);
    background: var(--marca);
    color: var(--sobre-marca);
    font-weight: 600;
    text-decoration: none;
}
.ir-conteudo:focus { transform: none; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 14px;
    line-height: 1.55;
    background: var(--fundo);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--marca-bg); color: var(--texto); }

/* Anel de foco: não é opcional em nenhum sistema da Reizo. Sem ele o
   usuário não sabe onde está digitando. */
:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

/* ---------- Estrutura ---------- */

.aplicacao {
    display: grid;
    grid-template-columns: 216px 1fr;
    min-height: 100vh;
}

.lateral {
    background: var(--sup-1);
    border-right: 1px solid var(--borda-2);
    display: flex;
    flex-direction: column;
    padding: var(--esp-lg) 0 var(--esp-md);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.lateral .marca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--esp-md) var(--esp-lg);
    color: var(--texto);
    font-size: 19px;
}
/* Logotipo Reizo: REIZ na fonte de título + o anel no lugar do O, na altura
   das maiúsculas (0,72em cobre a altura de versal da Urbanist). */
.logotipo {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    letter-spacing: .05em;
    line-height: 1;
    white-space: nowrap;
}
.logotipo svg { width: .72em; height: .72em; vertical-align: -.01em; margin-left: .02em; }
.logotipo .ponto, .simbolo-reizo .ponto { fill: var(--acento, var(--marca)); }
.lateral .marca .logotipo { font-size: 26px; }
.lateral .marca .simbolo-reizo { display: none; width: 30px; height: 30px; }

.tema-controle { display: grid; gap: 5px; color: var(--texto-3); font-size: 11px; }
.tema-controle select { min-width: 0; width: 100%; height: 34px; padding: 0 28px 0 9px; font-size: 12px; }
.doc-topo { display: flex; align-items: start; justify-content: space-between; gap: var(--esp-md); }
.doc-topo .tema-controle { width: 130px; }

.lateral nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--esp-xs); }

/* Cabecalho de grupo da navegacao.
   Nao e enfeite: e o que permite achar "Importar base" sem ler os vinte e
   seis destinos. Fica discreto de proposito — quem procura um item le os
   titulos; quem ja sabe onde clicar nao deve ser atrapalhado por eles.
   O primeiro nao leva margem superior: colado no topo, sobraria um buraco
   entre a marca e o primeiro grupo. */
.grupo-nav {
    display: block;
    margin: var(--esp-md) 0 4px;
    padding: 0 var(--esp-sm);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.grupo-nav:first-child { margin-top: 0; }

.lateral nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 var(--esp-xs);
    border-radius: var(--raio-sm);
    color: var(--texto-2);
    text-decoration: none;
    font-size: 13px;
}
.lateral nav a svg { flex: none; opacity: 0.85; }
.lateral nav a:hover { background: var(--sup-2); color: var(--texto); }

/* Item ativo: teal, e só ele. Marca de página atual é exceção por
   definição — nunca mais de um por vez. */
.lateral nav a.ativo {
    background: var(--marca-bg);
    color: var(--marca);
    font-weight: 600;
}
.lateral nav a.ativo svg { opacity: 1; }

/* Submenu da seção aberta. O fio vertical na esquerda faz o trabalho que o
   recuo sozinho não faz: liga visualmente os filhos ao pai, em vez de
   parecerem itens de primeiro nível mal alinhados. */
.subnav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 var(--esp-xs) 19px;
    padding-left: var(--esp-sm);
    border-left: 1px solid var(--borda-2);
}
.subnav a { height: 28px; font-size: 12px; color: var(--texto-3); }
.subnav a:hover { color: var(--texto); background: var(--sup-2); }
/* O filho ativo é marcado só pelo texto: a seção já está pintada acima, e
   dois blocos teal empilhados fariam a lateral competir com o conteúdo. */
.subnav a.ativo { background: none; color: var(--marca); font-weight: 600; }

.lateral .rodape {
    margin-top: auto;
    padding: var(--esp-md) var(--esp-md) 0;
    border-top: 1px solid var(--borda-2);
    display: flex;
    flex-direction: column;
    gap: var(--esp-xs);
}
.lateral .rodape .nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.lateral .rodape .papel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
.lateral .rodape form { margin: 0; }

/* A largura útil segue o monitor, com teto. 1180px sobrava quase 500px de
   preto num monitor comum de 1920 — espaço que a tabela de contatos usaria
   para não truncar nome e telefone.

   O teto existe porque largura infinita não é ganho: passando disso, a linha
   da tabela fica tão esparsa que o olho perde a associação entre a primeira
   e a última coluna. Quem limita TEXTO é `.limite-leitura` e as regras de
   medida abaixo — largura de leitura e largura de dado são coisas diferentes,
   e tratá-las com o mesmo número foi o erro original. */
main { padding: var(--esp-xl); max-width: 1560px; }

h2 { font-size: 14px; font-weight: 600; color: var(--texto); }
.cabecalho-pagina { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--esp-lg); margin-bottom:var(--esp-xl); }
.cabecalho-pagina h1 { margin:0; font-size:24px; letter-spacing:-.02em; }
.sobretitulo { margin:0 0 5px; color:var(--marca); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.subtitulo { max-width:680px; margin:7px 0 0; color:var(--texto-2); line-height:1.55; }
.grade-modulos, .grade-atalhos { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:var(--esp-md); }
.grade-modulos { margin-bottom:var(--esp-lg); }
.cartao-modulo { padding:var(--esp-lg); }
.cartao-modulo-cabecalho { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--esp-md); }
.cartao-modulo h2 { margin:0 0 6px; font-size:16px; }
.cartao-modulo p, .atalho-admin div { margin:0; color:var(--texto-2); line-height:1.5; }
.form-modulo { display:flex; align-items:center; justify-content:space-between; gap:var(--esp-md); margin-top:var(--esp-lg); }
.rotulo-checkbox { display:flex; align-items:center; gap:8px; margin:0; font-size:12px; letter-spacing:0; text-transform:none; }
.atalho-admin { padding:var(--esp-md); text-decoration:none; color:var(--texto); min-height:108px; display:flex; flex-direction:column; justify-content:space-between; }
.atalho-admin:hover { border-color:var(--marca); }
.numero-atalho { font-size:22px; font-weight:600; color:var(--texto) !important; }
.numero-atalho span { font-size:12px; font-weight:400; color:var(--texto-2); }

.erro-operacional { max-width:620px; margin:12vh auto 0; padding:var(--esp-xl); background:var(--sup-1); border:1px solid var(--borda); border-radius:var(--raio-md); }
.erro-operacional h1 { margin:0 0 var(--esp-sm); font-size:24px; }
.erro-mensagem { margin:0; color:var(--erro); font-size:16px; line-height:1.5; }
.erro-orientacao { margin:var(--esp-md) 0 0; color:var(--texto-2); line-height:1.6; }
.erro-acoes { display:flex; flex-wrap:wrap; gap:var(--esp-xs); margin-top:var(--esp-lg); }

@media (max-width:640px) { .cabecalho-pagina { flex-direction:column; }   .form-modulo { align-items:flex-start; flex-direction:column; } }

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

button, .botao {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-radius: var(--raio-md);
    height: 32px;
    padding: 0 var(--esp-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--marca);
    color: var(--sobre-marca);
    transition: background 0.12s ease;
    text-decoration: none;
}
button:hover, .botao:hover { background: var(--marca-h); }

/* O inativo precisa de superfície e borda: "transparent" sem borda faz a
   opção não escolhida sumir no fundo e parecer texto, não botão. */
button.secundario, .botao.secundario {
    background: var(--sup-2);
    color: var(--texto-2);
    border: 1px solid var(--borda);
}
button.secundario:hover, .botao.secundario:hover { background: var(--sup-3); color: var(--texto); }

button.perigo { background: var(--erro-forte); color: var(--sobre-acao); }
button.perigo:hover { background: var(--erro); color: var(--sobre-marca); }

button.whatsapp { background: var(--whatsapp); color: var(--sobre-marca); }
button.whatsapp:hover { background: var(--whatsapp-h); color: var(--sobre-acao); }

button:disabled, .botao:disabled {
    background: var(--sup-2);
    color: var(--texto-3);
    cursor: not-allowed;
}

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

input, select, textarea {
    font: inherit;
    font-size: 13px;
    color: var(--texto);
    background: var(--sup-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 0 var(--esp-sm);
    height: 32px;
}
textarea { padding: var(--esp-xs) var(--esp-sm); height: auto; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 1px var(--marca);
}

input[type="checkbox"], input[type="radio"] {
    height: 16px;
    width: 16px;
    padding: 0;
    accent-color: var(--marca);
}

label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--texto-2);
    margin-bottom: 6px;
}

/* ---------- Painel / card ---------- */

.painel {
    padding: var(--esp-lg);
    background: var(--sup-1);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    box-shadow: none;
}
/* Painel que só embrulha uma tabela não leva padding: a tabela tem o dela,
   e o dobro cria uma moldura larga em volta de nada. */
.painel > .tabela-responsiva:only-child { margin: calc(var(--esp-lg) * -1); }

.cartao-numero .numero { font-size: 24px; font-weight: 600; color: var(--texto); }
.cartao-numero .numero.positivo { color: var(--marca); }
.cartao-numero .rotulo {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-2);
}

/* ---------- Tabela ----------
   Cabeçalho no fundo da página, dados na superfície: o cabeçalho recua e os
   dados avançam. */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sup-1);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
    overflow: hidden;
    box-shadow: none;
    font-size: 13px;
}
th, td { padding: var(--esp-xs) var(--esp-sm); text-align: left; border-bottom: 1px solid var(--borda-2); }
th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-2);
    background: var(--fundo);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--sup-2); }
tbody tr:hover { background: var(--sup-3); }

/* Linha prioritária marcada por fio na borda, não por fundo colorido: se
   mais de ~20% das linhas recebem o destaque, o destaque perde o sentido. */
tr.prioridade td:first-child {
    border-left: 3px solid var(--erro);
    padding-left: calc(var(--esp-sm) - 3px);
}

td a { color: var(--marca); text-decoration: none; font-weight: 600; }
td a:hover { text-decoration: underline; }

.mono, code { font-family: var(--fonte-mono); font-size: 11px; }

/* ---------- Chip / badge ---------- */

.tag, .status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px var(--esp-xs);
    border-radius: var(--raio-sm);
    background: var(--marca-bg);
    color: var(--marca);
    margin-right: 4px;
    white-space: nowrap;
}
.status-badge.encerrado { background: var(--sup-2); color: var(--texto-2); }
.tag.azul, .status-badge.atendimento { background: var(--info-bg); color: var(--info); }
.tag.verde { background: var(--marca-bg); color: var(--marca); }
.tag.amarelo, .status-badge.aguardando { background: var(--aviso-bg); color: var(--aviso); }
.tag.vermelho, .tag.urgente { background: var(--erro-bg); color: var(--erro); }
.tag.vermelho { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Avisos ---------- */

.aviso {
    background: var(--erro-bg);
    color: var(--erro);
    border: 1px solid var(--borda-2);
    padding: var(--esp-xs) var(--esp-sm);
    border-radius: var(--raio-sm);
    margin-bottom: var(--esp-lg);
    font-size: 13px;
}
.aviso.sucesso { background: var(--marca-bg); color: var(--marca); }
.aviso.atencao { background: var(--aviso-bg); color: var(--aviso); }
.aviso.info { background: var(--info-bg); color: var(--info); }

.vazio {
    text-align: center;
    padding: var(--esp-xxl) var(--esp-lg);
    color: var(--texto-3);
    font-size: 13px;
}

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--texto-2);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: var(--esp-md);
}
.voltar:hover { color: var(--texto); }

/* ---------- Caixa de entrada do atendimento ---------- */

.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--esp-xs);
    margin-bottom: var(--esp-lg);
}
.metricas .painel { padding: var(--esp-sm) var(--esp-md); }
/* Os números só ganham cor quando são diferentes de zero — "0 prioritários"
   em vermelho ensina o olho a ignorar o vermelho. */
.metricas .numero.erro { color: var(--erro); }
.metricas .numero.aviso { color: var(--aviso); }
.metricas .numero.pequeno { font-size: 15px; padding-top: 7px; }

.barra-filtros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-md);
    margin-bottom: var(--esp-sm);
    flex-wrap: wrap;
}
.segmentos { display: flex; gap: 2px; }
/* O segmento não escolhido precisa de superfície e borda: sem elas some no
   fundo e deixa de parecer um botão. */
.segmento {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--esp-sm);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--sup-2);
    color: var(--texto-2);
    font-size: 13px;
    text-decoration: none;
}
.segmento:hover { background: var(--sup-3); color: var(--texto); }
.segmento.ativo {
    background: var(--marca-bg);
    border-color: var(--marca-bg);
    color: var(--marca);
    font-weight: 600;
}
.busca input { width: 280px; max-width: 100%; }

.contato { display: flex; align-items: center; gap: var(--esp-xs); }
.contato .inicial {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sup-3);
    color: var(--texto-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Dinheiro alinhado à direita e com dígito de largura fixa: é a coluna que
   se lê em diagonal para escolher por quem começar, e dígito proporcional
   desalinha as casas. */

.previa {
    margin-top: 2px;
    font-size: 11px;
    color: var(--texto-2);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.espera { font-size: 11px; color: var(--texto-2); white-space: nowrap; }
.espera.atrasada { color: var(--aviso); font-weight: 600; }
.espera.critica { color: var(--erro); font-weight: 600; }

/* ---------- Scrollbar ---------- */

* { scrollbar-width: thin; scrollbar-color: var(--sup-3) var(--sup-1); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sup-1); }
::-webkit-scrollbar-thumb { background: var(--sup-3); border-radius: var(--raio-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--borda); }
::-webkit-scrollbar-thumb:active { background: var(--marca); }

/* ---------- Login ----------
   Duas colunas: painel de marca à esquerda, formulário à direita. É o único
   lugar onde a escala de altura aumenta (campo 44 / botão 46), porque a tela
   é focal e tem três elementos. */

body.login { display: grid; grid-template-columns: 380px 1fr; min-height: 100vh; }

.login-painel {
    position: relative;
    overflow: hidden;
    background: var(--tinta, var(--fundo));
    color: var(--papel, var(--texto));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-md);
    /* O bloco da marca não é centralizado: fica acima do meio, como manda o
       padrão (símbolo em `altura/2 − 168`). Centralizado ele briga com o
       título do formulário, que está bem mais alto na coluna ao lado. */
    padding-bottom: 140px;
}

.login-painel .logotipo { font-size: 52px; }
.login-painel .logotipo .ponto { fill: var(--acento-claro, var(--marca)); }
.login-painel .fio { width: 52px; height: 2px; background: var(--acento-claro, var(--marca)); }
.login-painel .sistema { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--nevoa, var(--texto-2)); }

.login-forma { display: flex; align-items: center; justify-content: center; padding: var(--esp-xl); }
.login-forma form { width: 320px; }
/* O título é a única marcação de cor da tela: com três elementos e nenhum
   card, é ele que diz onde a página começa. */
.login-forma h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--marca); }
.login-forma .subtitulo { font-size: 12px; color: var(--texto-2); margin: 4px 0 var(--esp-xl); }
.login-forma label { margin-top: var(--esp-md); }
.login-forma input[type="email"],
.login-forma input[type="password"] {
    width: 100%;
    height: 44px;
    border-radius: var(--raio-md);
    margin-bottom: 0;
}
.login-forma button[type="submit"] {
    width: 100%;
    height: 46px;
    margin-top: var(--esp-lg);
    border-radius: var(--raio-md);
    font-size: 13px;
}
.login-forma .lembrar {
    display: flex;
    align-items: center;
    gap: var(--esp-xs);
    margin-top: var(--esp-xl);
    font-size: 11px;
    color: var(--texto-2);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    cursor: pointer;
}
/* Caixa desenhada à mão porque o `accent-color` nativo pinta o marcado com o
   teal e deixa o desmarcado sem superfície — a opção não escolhida some no
   fundo e deixa de parecer um controle. */
.login-forma .lembrar input {
    appearance: none;
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    border: 1px solid var(--borda);
    border-radius: 4px;
    background: var(--sup-3);
}
.login-forma .lembrar input:checked {
    background: var(--marca) no-repeat center/10px 10px;
    border-color: var(--marca);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0C0D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
}
.login-forma .erro {
    font-size: 10px;
    color: var(--erro);
    margin: var(--esp-sm) 0 0;
}
.login-forma .esqueci {
    display: block;
    margin-top: var(--esp-md);
    font-size: 11px;
    color: var(--marca);
    text-decoration: none;
    text-align: center;
}
.login-forma .esqueci:hover { text-decoration: underline; }

@media (max-width: 720px) {
    body.login { grid-template-columns: 1fr; }
    .login-painel { display: none; }
    .aplicacao { grid-template-columns: 1fr; }
    .marca-mobile { display: block; position: absolute; top: 20px; right: 16px; z-index: 5; font-size: 20px; color: var(--tinta, var(--texto)); text-decoration: none; }
    .menu-mobile { display: inline-flex; align-items: center; gap: 8px; position: fixed; top: 10px; left: 10px; z-index: 30; min-height: 44px; background: var(--sup-1); color: var(--texto); border: 1px solid var(--borda); box-shadow: var(--sombra); }
    .menu-scrim { position: fixed; inset: 0; z-index: 24; width: 100%; height: 100%; padding: 0; border-radius: 0; background: rgba(0, 0, 0, .58); }
    .menu-scrim:hover { background: rgba(0, 0, 0, .58); }
    body.menu-aberto { overflow: hidden; }
    body.menu-aberto .menu-scrim { display: block; }
    .lateral { position: fixed; inset: 0 auto 0 0; z-index: 25; width: min(88vw, 320px); height: 100vh; padding-top: 68px; transform: translateX(-105%); transition: transform 180ms ease; box-shadow: var(--sombra); }
    body.menu-aberto .lateral { transform: translateX(0); }
    .lateral nav { flex-direction: column; flex-wrap: nowrap; }
    .lateral nav a { min-height: 44px; height: auto; }
    .subnav a { min-height: 44px; }
    main { padding: 70px var(--esp-md) var(--esp-md); min-width: 0; }
    main.tela-cheia { padding-top: 58px; height: 100vh; }
    main.tela-cheia .chat-wpp { height: calc(100vh - 58px); height: calc(100dvh - 58px); }
    .painel { min-width: 0; }
    .doc-topo { align-items: center; }
}

.coluna-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--esp-xs);
    margin-bottom: var(--esp-sm);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--borda);
}
.coluna-titulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.coluna-contagem {
    background: var(--sup-3);
    color: var(--texto-2);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
}
.coluna-vazia { font-size: 11px; color: var(--texto-3); margin: 0; line-height: 1.5; }
/* A borda esquerda é o único sinal de cor do card: quem contesta ou diz que
   já pagou carrega o maior risco jurídico se ficar esperando. */

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

.dialogo {
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--sup-1);
    color: var(--texto);
    padding: var(--esp-md);
    min-width: 280px;
}
.dialogo::backdrop { background: rgba(0, 0, 0, 0.55); }
.dialogo h2 { margin: 0 0 var(--esp-sm); font-size: 14px; }

/* ── Falar com um número ─────────────────────────────────────────────── */

/* A ação cara mora numa caixa própria, com o custo escrito ao lado do botão.
   Enviar não pode ser o que acontece quando se aperta Enter distraído. */

/* ── Etiquetas no card ───────────────────────────────────────────────────
   Ficam no rodapé do card, abaixo de tudo: a marca é contexto sobre a
   família, não o motivo de o card estar na fila. Disputar o topo com nome e
   valor tiraria a leitura do que decide a ordem de atendimento. */

/* O × só aparece no card sob o cursor: uma fileira de xis em todos os cards
   transforma informação em barulho, e convida ao clique errado. */

.tag-tirar {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    cursor: pointer;
}
.tag-tirar:focus-visible { opacity: 0.7; }
.tag-tirar:hover { opacity: 1; background: none; }

/* Contagem dentro do próprio botão de situação. */
.segmento .contagem {
    margin-left: 6px;
    font-size: 11px;
    color: var(--texto-3);
    font-variant-numeric: tabular-nums;
}
.segmento.ativo .contagem { color: var(--marca); }

/* ---------- Conversas: três painéis, formato de mensageiro ----------
   A altura é fixada na janela e o que rola é cada painel, não a página.
   Página que rola inteira faria o redator sumir da tela toda vez que a
   transcrição crescesse. */

/* A conversa aberta é a única marcada — o realce diz "você está aqui", e
   dois "aqui" ao mesmo tempo não existem. */

.anexo-enviado { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--marca); }

/* O anexo que a PESSOA mandou, dentro da bolha da conversa.
   Aparece no tamanho que cabe na bolha, e nao no tamanho que a camera do
   celular gerou: comprovante fotografado chega com 3000px de largura e, sem
   teto, empurrava a transcricao inteira para fora da tela.
   `display:block` porque a bolha tem `white-space:pre-wrap` — em linha, a
   midia herdava o alinhamento de texto e sobrava um filete embaixo. */
.anexo-recebido { display: block; max-width: 100%; margin-bottom: 6px; border-radius: 6px; }
.anexo-recebido img { display: block; max-width: 100%; max-height: 320px; border-radius: 6px; object-fit: contain; }
.anexo-recebido audio, .anexo-recebido video { display: block; max-width: 100%; }
.anexo-recebido video { max-height: 320px; border-radius: 6px; }
a.anexo-recebido:focus-visible, a.anexo-enviado:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* A ficha só ocupa coluna quando tem o que dizer. Sem isto, uma conversa não
   identificada reserva 280px para um rótulo e um botão. */

/* ---------- Tela cheia (conversas) ----------
   Sem recheio e sem largura máxima: numa janela de 1860px, os 1180px do
   `main` deixavam 600px de faixa vazia à direita — espaço que num mensageiro
   é transcrição. */

main.tela-cheia { padding: 0; max-width: none; }

/* A ficha também cresce um pouco quando há espaço — 280px fixos ficavam
   apertados para a preferência de negociação com a frase original. */

/* Balão: teto em ch, não em %. Em porcentagem, uma janela larga produz linha
   de 120 caracteres, que o olho perde ao voltar para a esquerda. */

/* ---------- Redator ----------
   Uma barra só: ícones, campo e enviar na mesma linha e na mesma altura.
   Antes eram três blocos empilhados de alturas diferentes — o resultado
   parecia montado aos pedaços, que foi exatamente a reclamação. */

/* O anel de foco vai para a barra inteira: no campo sem borda ele apareceria
   solto no meio, sem contorno para acompanhar. */

/* Um só tamanho para todo botão de ícone da barra. Tamanhos diferentes é o
   que faz uma linha de controles parecer torta. */

.anexo input[type="file"] { display: none; }

.emojis { position: relative; display: flex; }
.grade-emojis {
    position: absolute;
    bottom: 42px;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(6, 32px);
    gap: 2px;
    padding: var(--esp-xs);
    background: var(--sup-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-md);
}
.grade-emojis button {
    background: none;
    border: none;
    height: 32px;
    padding: 0;
    font-size: 18px;
    border-radius: var(--raio-sm);
}
.grade-emojis button:hover { background: var(--sup-3); }

/* Abre acima da barra, empurrando a transcrição: crescendo para baixo, o
   painel passaria da janela e o campo de data ficaria fora da tela. */

.anexo-escolhido {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--esp-xs);
    padding: 4px var(--esp-xs);
    width: fit-content;
    max-width: 100%;
    background: var(--marca-bg);
    color: var(--marca);
    border-radius: var(--raio-sm);
    font-size: 11px;
}
.anexo-escolhido[hidden] { display: none; }
.anexo-escolhido .nome-anexo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cancelar fica junto da hora marcada, discreto: é ação de exceção sobre uma
   mensagem que ainda nem existe para a família. */
.cancelar-agendada { display: inline; margin: 0; }
.cancelar-agendada button {
    background: none;
    border: none;
    color: var(--texto-3);
    height: auto;
    padding: 0 0 0 4px;
    font-size: 11px;
    font-weight: 400;
    text-decoration: underline;
}
.cancelar-agendada button:hover { background: none; color: var(--erro); }

/* ---------- Conversas: experiência de mensageiro ---------- */
.chat-wpp { display:grid; grid-template-columns:390px minmax(0,1fr); height:100vh; height:100dvh; min-height:0; overflow:hidden; background:var(--fundo); }
.chat-lista { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--sup-1); border-right:1px solid var(--borda-2); }
.chat-lista-cabecalho { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--esp-lg); border-bottom:1px solid var(--borda-2); }
.chat-lista-cabecalho h1 { margin:0; font-size:20px; font-weight:600; }
.chat-busca { display:flex; align-items:center; gap:10px; margin:var(--esp-md) var(--esp-md) var(--esp-xs); padding:0 var(--esp-sm); height:38px; background:var(--sup-3); border:1px solid var(--borda); border-radius:999px; color:var(--texto-3); }
.chat-busca > svg { flex: none; }
.chat-busca input { width:100%; height:34px; padding:0; background:transparent; border:0; box-shadow:none; }
.chat-busca input:focus { outline:0; box-shadow:none; }
.chat-filtros { display:flex; flex-wrap:wrap; gap:8px; padding:0 var(--esp-md) var(--esp-md); border-bottom:1px solid var(--borda-2); }
.chat-chip { min-height:30px; display:inline-flex; align-items:center; gap:5px; padding:0 12px; border:1px solid var(--borda); border-radius:999px; color:var(--texto-2); font-size:12px; text-decoration:none; }
.chat-chip:hover { background:var(--sup-2); color:var(--texto); }
.chat-chip.ativo { border-color:var(--marca-bg); background:var(--marca-bg); color:var(--marca); }
.chat-chip span { font-variant-numeric:tabular-nums; }
.chat-itens { overflow-y:auto; min-height:0; }
.chat-item { display:flex; gap:12px; padding:12px var(--esp-md); color:inherit; text-decoration:none; border-bottom:1px solid var(--borda-2); }
.chat-item:hover { background:var(--sup-2); }
.chat-item.aberta { background:color-mix(in srgb, var(--marca-bg) 80%, var(--sup-1)); }
.chat-avatar { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--sup-3); color:var(--marca); font-weight:700; font-size:15px; }
.chat-avatar.grande { width:40px; height:40px; font-size:14px; }
.chat-item-corpo { flex:1; min-width:0; }
.chat-item-linha { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
.chat-item-linha strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.chat-item time { flex:none; color:var(--texto-3); font-size:11px; }
.chat-previa { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texto-2); font-size:12px; margin-top:4px; }
.chat-status { flex:none; color:var(--marca); font-size:11px; white-space:nowrap; }
.chat-conversa { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background-color:var(--fundo); background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--borda) 40%, transparent) 1px, transparent 0); background-size:24px 24px; }
.chat-cabecalho { height:64px; flex:none; display:flex; align-items:center; gap:12px; padding:0 var(--esp-lg); background:var(--sup-1); border-bottom:1px solid var(--borda-2); }
.chat-voltar { display:none; width:40px; height:40px; flex:none; place-items:center; border-radius:50%; color:var(--texto-2); }
.chat-voltar:hover { background:var(--sup-3); color:var(--texto); }
.chat-contato { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.chat-contato strong { font-size:14px; }
.chat-contato span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texto-3); font-size:11px; }
.chat-acoes { display:flex; align-items:center; gap:8px; }
.chat-acoes details { position:relative; }
.chat-acoes summary { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--texto-2); cursor:pointer; list-style:none; font-size:16px; }
.chat-acoes summary::-webkit-details-marker { display:none; }
.chat-acoes summary:hover { background:var(--sup-3); color:var(--texto); }
.chat-acoes details form { position:absolute; z-index:5; right:0; top:40px; width:190px; display:flex; flex-direction:column; gap:8px; padding:12px; background:var(--sup-2); border:1px solid var(--borda); border-radius:var(--raio-md); }
.chat-acoes details label { color:var(--texto-2); font-size:12px; }
.chat-tags { flex:none; display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px var(--esp-lg); background:var(--sup-1); border-bottom:1px solid var(--borda-2); }
.chat-tags form { display:flex; gap:5px; }
.chat-tags input { width:130px; height:28px; font-size:12px; }
.chat-tags button { padding:4px 8px; font-size:11px; }
.notas-internas { position:relative; margin-left:auto; }
.notas-internas > summary { cursor:pointer; color:var(--texto-2); font-size:12px; }
.notas-internas[open] { position:absolute; z-index:9; right:var(--esp-lg); top:112px; width:min(390px,calc(100vw - 32px)); max-height:55vh; overflow:auto; padding:12px; border:1px solid var(--borda); border-radius:var(--raio-md); background:var(--sup-2); box-shadow:var(--sombra); }
.notas-internas form { display:flex; margin:10px 0; }
.notas-internas form input { flex:1; min-width:0; }
.notas-internas article { padding:9px 0; border-top:1px solid var(--borda-2); }
.notas-internas article time { float:right; color:var(--texto-3); font-size:10px; }
.notas-internas article p { margin:5px 0 0; color:var(--texto-2); font-size:12px; white-space:pre-wrap; }
.tag-conversa { display:flex; align-items:center; gap:3px; padding:4px 7px; border-radius:999px; background:color-mix(in srgb, var(--marca) 18%, var(--sup-2)); color:var(--texto-2); font-size:11px; }
.tag-conversa form { display:inline; }
.tag-conversa button { width:15px; height:15px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.chat-historico { flex:1; min-height:0; overflow-y:auto; padding:var(--esp-lg) clamp(var(--esp-md), 5vw, 84px); }
.chat-mensagem { display:flex; margin:0 0 8px; }
.chat-mensagem.recebida { justify-content:flex-start; }
.chat-mensagem.enviada { justify-content:flex-end; }
.chat-bolha { max-width:min(75%, 560px); padding:8px 10px 6px; border-radius:9px; border-top-left-radius:2px; background:var(--sup-2); color:var(--texto); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-mensagem.enviada .chat-bolha { border-top-left-radius:9px; border-top-right-radius:2px; background:var(--marca-bg); }
.chat-bolha time { display:block; margin-top:3px; text-align:right; color:var(--texto-3); font-size:10px; }
.feedback-resposta { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:6px; border-top:1px solid color-mix(in srgb, var(--texto) 12%, transparent); padding-top:5px; }
.feedback-resposta form { margin:0; }
.feedback-resposta button, .feedback-resposta summary { padding:2px 5px; border:0; background:transparent; color:var(--texto-3); cursor:pointer; font-size:10px; list-style:none; }
.feedback-resposta summary::-webkit-details-marker { display:none; }
.feedback-resposta details { position:relative; }
.feedback-resposta details form { position:absolute; right:0; bottom:22px; z-index:4; display:flex; gap:5px; padding:8px; width:230px; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--sup-2); }
.feedback-resposta details input { min-width:0; width:100%; height:28px; font-size:11px; }
.chat-redator { position:relative; flex:none; display:flex; align-items:center; gap:8px; padding:10px clamp(var(--esp-md), 3vw, 32px); background:var(--sup-1); border-top:1px solid var(--borda-2); }
.chat-redator input[type=text] { flex:1; min-width:0; height:42px; border:0; border-radius:999px; padding:0 16px; background:var(--sup-3); }
.chat-redator input[type=text]:focus { box-shadow:0 0 0 2px var(--marca); }
.chat-icone, .chat-enviar { width:40px; height:40px; flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--texto-2); cursor:pointer; }
.chat-icone { list-style:none; }
.chat-icone::-webkit-details-marker { display:none; }
.chat-icone:hover { background:var(--sup-3); color:var(--texto); }
.chat-enviar { background:var(--marca); color:var(--sobre-marca); }
.chat-enviar:hover { background:var(--marca-h); }
.chat-redator .anexo-escolhido { position:absolute; left:62px; bottom:58px; }
.agendar-mensagem { position:relative; flex:none; }
.agendar-mensagem > div { position:absolute; right:0; bottom:48px; z-index:8; width:250px; padding:12px; border:1px solid var(--borda); border-radius:var(--raio-md); background:var(--sup-2); box-shadow:var(--sombra); }
.agendar-mensagem label { display:block; margin-bottom:6px; font-size:12px; color:var(--texto-2); }
.agendar-mensagem input { width:100%; }
.agendar-mensagem p { margin:8px 0 0; color:var(--texto-3); font-size:11px; line-height:1.4; }
.grade-duas-colunas { display:grid; grid-template-columns:minmax(0, .9fr) minmax(320px, 1.1fr); gap:var(--esp-lg); align-items:start; }
.formulario { display:flex; flex-direction:column; gap:var(--esp-md); }
.formulario label { display:flex; flex-direction:column; gap:6px; color:var(--texto-2); font-size:12px; }
.formulario label.rotulo-checkbox { align-self:flex-start; flex-direction:row; align-items:center; }
.formulario textarea { min-height:88px; resize:vertical; }
.lista-registros { display:flex; flex-direction:column; gap:8px; }
.lista-registros article { display:flex; align-items:center; justify-content:space-between; gap:var(--esp-md); padding:var(--esp-md); border:1px solid var(--borda-2); border-radius:var(--raio-sm); }
.lista-registros p { margin:4px 0 0; color:var(--texto-3); font-size:12px; }
.acoes-linha { display:flex; gap:8px; align-items:center; flex:none; }
.acoes-linha form { margin:0; }

.limite-leitura { max-width:760px; }
.passos-onboarding { display:flex; flex-direction:column; gap:12px; padding:0; margin:0 0 var(--esp-lg); list-style:none; counter-reset:passos; }
.passos-onboarding li { display:grid; grid-template-columns:28px 1fr; column-gap:10px; padding:10px; border:1px solid var(--borda-2); border-radius:var(--raio-sm); }
.passos-onboarding li::before { content:counter(passos); counter-increment:passos; grid-row:span 2; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--sup-3); color:var(--texto-2); font-size:12px; }
.passos-onboarding li.ativo::before, .passos-onboarding li.feito::before { background:var(--marca); color:var(--sobre-marca); }
.passos-onboarding span { grid-column:2; margin-top:3px; color:var(--texto-2); font-size:13px; }
.aviso-sucesso { padding:var(--esp-md); border-radius:var(--raio-sm); background:color-mix(in srgb, var(--marca) 14%, var(--sup-1)); }
.aviso-sucesso p { margin:5px 0 0; color:var(--texto-2); }
@media (max-width:760px) { .grade-duas-colunas { grid-template-columns:1fr; } .lista-registros article { align-items:flex-start; flex-direction:column; } }
.chat-bloqueado { flex:none; padding:14px var(--esp-lg); text-align:center; background:var(--sup-1); color:var(--texto-3); border-top:1px solid var(--borda-2); }
.chat-janela-fechada p { margin:0 0 6px; } .chat-janela-fechada form { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:8px; }
.chat-vazio { display:grid; place-content:center; justify-items:center; gap:8px; background:var(--fundo); color:var(--texto-3); text-align:center; padding:var(--esp-xl); }
.chat-vazio h2 { margin:0; color:var(--texto-2); }
.chat-vazio p { max-width:340px; margin:0; line-height:1.6; }
.chat-vazio-icone { display:grid; place-items:center; width:70px; height:70px; border-radius:50%; background:var(--sup-2); color:var(--marca); }
.chat-vazio-icone svg { width:34px; height:34px; }
@media (max-width:1000px) { .chat-wpp { grid-template-columns:320px minmax(0,1fr); } .chat-wpp.com-conversa { grid-template-columns:minmax(0,1fr); } .chat-wpp.com-conversa .chat-lista { display:none; } .chat-historico { padding:var(--esp-md); } }
@media (max-width:640px) { .chat-wpp { grid-template-columns:minmax(0,1fr); } .chat-wpp:not(.com-conversa) .chat-vazio { display:none; } .chat-lista-cabecalho h1 { padding-left:104px; } .chat-cabecalho { padding:0 var(--esp-sm); } .chat-voltar { display:grid; } .chat-acoes button { padding:0 var(--esp-sm); } .chat-bolha { max-width:88%; } .chat-redator { padding:8px; } .chat-redator .anexo-escolhido { left:52px; } body:has(main.tela-cheia) .alternar-tema, body:has(.chat-voltar) .menu-mobile, body:has(.chat-voltar) .marca-mobile { display:none; } }

/* O alerta jurídico não é nota de rodapé: é a informação que muda a decisão
   de anexar ou não o extrato. */

.anteriores { display: flex; flex-direction: column; gap: 2px; }
.anteriores a {
    display: flex;
    flex-direction: column;
    padding: 6px var(--esp-xs);
    border-radius: var(--raio-sm);
    color: var(--texto-2);
    text-decoration: none;
    font-size: 12px;
}
.anteriores a:hover { background: var(--sup-2); color: var(--texto); }
.anteriores .secundario { font-size: 10px; color: var(--texto-3); }

/* ---------- Operacao de cobrancas ---------- */

.grade-formularios { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--esp-lg); margin-top:var(--esp-lg); }
.grade-formularios form { min-width:0; }
.formulario-linha { display:flex; align-items:end; flex-wrap:wrap; gap:var(--esp-md); margin-bottom:var(--esp-lg); }
.formulario-linha label { display:flex; flex:1 1 180px; flex-direction:column; gap:6px; color:var(--texto-2); font-size:12px; }
.formulario-linha button { flex:none; }

.tabela-responsiva { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
.tabela-responsiva table { min-width:720px; }
.tabela-responsiva td { vertical-align:top; }
.form-popover { display:flex; flex-direction:column; gap:8px; width:min(280px,calc(100vw - 48px)); margin-top:8px; padding:12px; border:1px solid var(--borda); border-radius:var(--raio-md); background:var(--sup-2); box-shadow:var(--sombra); }
.form-popover label { display:flex; flex-direction:column; gap:4px; color:var(--texto-2); font-size:12px; }

@media (max-width:720px) {
    .grade-formularios { grid-template-columns:1fr; }
    .formulario-linha { align-items:stretch; flex-direction:column; }
    .formulario-linha label, .formulario-linha button { width:100%; flex-basis:auto; }
    .acoes-linha { align-items:flex-start; flex-wrap:wrap; }
}

/* ═══ CRM ══════════════════════════════════════════════════════════════
   Contatos, ficha e fila. Só tokens: nenhum hex mora aqui. */

.rotulo-oculto {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ── Lista de contatos ── */
.tabela-crm td { padding: var(--esp-sm); vertical-align: middle; }
.tabela-crm .secundario { display: block; font-size: 11px; color: var(--texto-3); margin-top: 2px; }
.tabela-crm .num { text-align: right; font-variant-numeric: tabular-nums; }
.contato-link { display: inline-block; text-decoration: none; color: inherit; }
.contato-link:hover strong { color: var(--marca); }
.contato { display: flex; align-items: center; gap: var(--esp-xs); }
.inicial {
    flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 50%; background: var(--sup-3); color: var(--texto-2);
    font-size: 12px; font-weight: 700;
}
.inicial.grande { width: 46px; height: 46px; font-size: 18px; }

.paginacao {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-md); flex-wrap: wrap;
    margin-top: var(--esp-md); color: var(--texto-2); font-size: 12px;
}
.paginacao-acoes { display: flex; gap: var(--esp-xs); }

/* ── Ficha do contato ── */
.ficha-identidade { display: flex; align-items: center; gap: var(--esp-md); }
.ficha-identidade h1 { margin: 0; }
.ficha-identidade .subtitulo { margin-top: 2px; }
.coluna-lateral { display: grid; gap: var(--esp-md); align-content: start; }
.lista-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--esp-sm); }
.lista-etiquetas .tag { display: inline-flex; align-items: center; gap: 4px; }
.lista-etiquetas form { display: inline; margin: 0; }
.tag-tirar {
    background: none; border: none; padding: 0 2px; color: inherit;
    font-size: 14px; line-height: 1; cursor: pointer; height: auto;
}
.tag-tirar:hover { background: none; color: var(--erro); }
.forma-etiqueta { display: flex; gap: var(--esp-xs); margin: 0; }
.forma-etiqueta input { flex: 1; min-width: 0; }

.linha-do-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-sm); }
.linha-do-tempo li {
    padding: var(--esp-sm) var(--esp-md);
    border-left: 2px solid var(--borda);
    background: var(--sup-2);
    border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.linha-do-tempo-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-sm); }
.linha-do-tempo p { margin: 4px 0 0; font-size: 12px; }
.linha-do-tempo .previa { color: var(--texto-2); font-style: italic; }

/* ── Fila ── */
.empresa-menu { margin: 0 16px 12px; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.selecao-dias { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 12px; }
.selecao-dias legend { padding: 0 4px; }
.selecao-dias .linha-check { min-height: 44px; }
.lateral-recolhida .empresa-menu { display: none; }
.dica-fila {
    margin: 0 0 var(--esp-md); padding: var(--esp-sm) var(--esp-md);
    background: var(--sup-2); border-radius: var(--raio-sm);
    color: var(--texto-2); font-size: 12px; line-height: 1.5;
}
.dica-fila strong { color: var(--texto); }

.fila-crm {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: var(--esp-sm);
    align-items: start;
    overflow-x: auto;
    padding-bottom: var(--esp-sm);
}
.fila-ocupada { pointer-events: none; opacity: 0.7; }

.coluna-fila {
    background: var(--sup-1);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: var(--esp-sm);
    min-height: 140px;
}
.coluna-fila.solta-aqui { border-color: var(--marca); background: var(--marca-bg); }
.coluna-fila.solta-nao { opacity: 0.45; }

.card-fila {
    background: var(--sup-2);
    border: 1px solid var(--borda);
    border-left: 3px solid transparent;
    border-radius: var(--raio-sm);
    padding: 10px;
    margin-bottom: 8px;
    cursor: grab;
}
.card-fila:hover { background: var(--sup-3); }
.card-fila.arrastando { opacity: 0.5; cursor: grabbing; }
/* A borda é reforço, nunca o único sinal: o tempo de espera vai escrito no
   rodapé do card, e é ele que um daltônico lê. */
.card-fila.atrasado { border-left-color: var(--aviso); }
.card-fila.critico { border-left-color: var(--erro); }

.card-topo { display: flex; align-items: start; justify-content: space-between; gap: 6px; }
.card-nome { font-size: 13px; font-weight: 600; color: var(--texto); text-decoration: none; }
.card-nome:hover { color: var(--marca); text-decoration: underline; }
.card-mensagem {
    margin: 6px 0 0; font-size: 12px; line-height: 1.45;
    color: var(--texto-2); font-style: italic;
}
.card-rodape {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--esp-xs); margin-top: var(--esp-xs); flex-wrap: wrap;
    font-size: 11px; color: var(--texto-2);
}
.card-rodape .card-ficha { color: var(--marca); text-decoration: none; font-weight: 600; }
.card-rodape .card-ficha:hover { text-decoration: underline; }

.aviso-fila {
    position: fixed; right: var(--esp-lg); bottom: var(--esp-lg); z-index: 20;
    max-width: 340px; margin: 0; padding: var(--esp-sm) var(--esp-md);
    background: var(--sup-3); border: 1px solid var(--borda);
    border-left: 3px solid var(--aviso); border-radius: var(--raio-sm);
    color: var(--texto); font-size: 12px; line-height: 1.5; box-shadow: var(--sombra);
}
.aviso-fila[hidden] { display: none; }

@media (max-width: 760px) {
    /* No celular as ações do cartão substituem o arrasto. */
    .fila-crm { grid-auto-flow: row; grid-auto-columns: auto; }
    .card-fila { cursor: default; }
    .barra-filtros { flex-direction: column; align-items: stretch; }
    .barra-filtros .busca input, .barra-filtros select { width: 100%; }
    /* Alvo de toque mínimo recomendado. */
    .barra-filtros button, .barra-filtros .botao, .tag-tirar { min-height: 44px; }
    .paginacao { flex-direction: column; align-items: flex-start; }
}

/* Cabeçalho de seção com estado à direita — usado na tela de comportamento
   do agente, onde cada módulo mostra a versão publicada ao lado do título. */
.cabecalho-secao {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--esp-md); flex-wrap: wrap; margin-bottom: var(--esp-md);
}
.cabecalho-secao h2 { margin: 0; }
.cabecalho-secao .subtitulo { margin-top: 4px; }
.painel h3 {
    margin: var(--esp-lg) 0 var(--esp-xs); padding-top: var(--esp-md);
    border-top: 1px solid var(--borda-2);
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--marca);
}
.painel h3:first-of-type { border-top: none; padding-top: 0; margin-top: var(--esp-md); }

/* ── Aviso ao operador ────────────────────────────────────────────────
   Canto inferior direito: o operador esta olhando a fila ou a conversa,
   nao o topo da pagina. Empilha, porque duas pre-propostas podem chegar
   quase juntas. */
.avisos-operador {
    position: fixed; right: var(--esp-lg); bottom: var(--esp-lg); z-index: 40;
    display: grid; gap: var(--esp-xs); max-width: 360px;
}
.aviso-operador {
    padding: var(--esp-md);
    background: var(--sup-1);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--marca);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra);
    animation: aviso-entra 180ms ease-out;
}
@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .aviso-operador { animation: none; }
}
.aviso-operador strong { display: block; color: var(--texto); font-size: 13px; }
.aviso-operador p { margin: 5px 0 0; color: var(--texto-2); font-size: 12px; line-height: 1.5; }
.aviso-acoes { display: flex; gap: var(--esp-xs); margin-top: var(--esp-sm); }
.aviso-acoes .botao, .aviso-acoes button { height: 32px; padding: 0 var(--esp-sm); font-size: 12px; }

/* O card da fila inteiro e clicavel: precisa parecer clicavel e ter foco
   visivel para quem navega por teclado. */
.card-fila { cursor: pointer; }
.card-fila:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

@media (max-width: 760px) {
    .avisos-operador { left: var(--esp-sm); right: var(--esp-sm); max-width: none; }
    .aviso-acoes .botao, .aviso-acoes button { min-height: 44px; }
}

/* A dica da fila passou a ter um botao ao lado do texto. */
.dica-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-md); flex-wrap: wrap; }
.dica-fila details { flex: 1 1 320px; }
.dica-fila summary { cursor: pointer; color: var(--texto); font-size: 14px; padding: 8px 0; }
.dica-fila p { margin: 8px 0; max-width: 78ch; }
.card-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.card-acoes button { min-height: 44px; height: auto; white-space: normal; padding: 8px 10px; font-size: 13px; }
.card-nome, .card-ficha { display: inline-flex; align-items: center; min-height: 24px; overflow-wrap: anywhere; }
.card-acoes button:focus-visible, .card-nome:focus-visible, .card-ficha:focus-visible,
.dica-fila summary:focus-visible, #fila-crm:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.dica-fila button { flex: none; height: 32px; padding: 0 var(--esp-sm); font-size: 12px; }
@media (max-width: 760px) { .dica-fila button { width: 100%; min-height: 44px; } }

/* Cartão do canal de WhatsApp (/plataforma/whatsapp).
   Duas colunas: de um lado QUAL número, do outro EM QUE situação. A pessoa
   que abre esta tela está quase sempre respondendo a uma de duas perguntas
   — "ligou o número certo?" e "está no ar?" — e cada coluna responde uma. */
.cartao-canal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--esp-lg);
    align-items: start;
    margin: var(--esp-md) 0;
    padding: var(--esp-md);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--borda);
    border-radius: var(--raio-md);
    background: var(--sup-2);
}
/* A cor da borda esquerda é o estado lido de relance, antes de qualquer
   texto — a mesma leitura que o operador faz passando os olhos. */
.cartao-canal.canal-ok { border-left-color: var(--marca); }
.cartao-canal.canal-alerta { border-left-color: var(--aviso); }
.cartao-canal.canal-erro { border-left-color: var(--erro); }

.canal-rotulo { margin: 0; color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
/* Tabular para os dígitos alinharem: número de telefone é feito para ser
   conferido caractere a caractere, não lido como palavra. */
.canal-numero { margin: 4px 0 0; font-size: 20px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.canal-nome { margin: 4px 0 0; color: var(--texto-2); font-size: 13px; }
.canal-situacao .nota { margin: var(--esp-xs) 0 0; }

.selo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.selo-ok { color: var(--marca); background: color-mix(in srgb, var(--marca) 16%, transparent); }
.selo-alerta { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 16%, transparent); }
.selo-erro { color: var(--erro); background: color-mix(in srgb, var(--erro) 16%, transparent); }

@media (max-width: 640px) {
    .cartao-canal { grid-template-columns: minmax(0, 1fr); gap: var(--esp-md); }
}

/* Destrutivo secundário: contorno e texto vermelhos, sem preenchimento.
   `button.perigo` sozinho é vermelho sólido e foi feito para ser a ação
   principal de uma tela de exclusão. Ao lado do botão de conectar ele
   competiria pelo olhar — e a ação aqui é a exceção, não o caminho. */
button.secundario.perigo {
    background: transparent;
    color: var(--erro);
    border-color: color-mix(in srgb, var(--erro) 40%, transparent);
}
button.secundario.perigo:hover {
    background: color-mix(in srgb, var(--erro) 12%, transparent);
    color: var(--erro);
    border-color: var(--erro);
}

/* Confirmação de ação destrutiva (ver /plataforma/whatsapp).
   Estende o `.dialogo` base: aquele foi dimensionado para uma escolha rápida
   de uma linha, e uma confirmação que precisa ser LIDA pede outro tamanho —
   quem lê aqui está prestes a deixar a escola sem WhatsApp. */
.dialogo {
    width: min(460px, calc(100vw - 32px));
    padding: var(--esp-lg);
    border-radius: var(--raio-md);
    box-shadow: var(--sombra);
}
.dialogo h2 { margin: 0; font-size: 17px; }

/* O número em destaque: a pergunta real não é "desconectar?", é "desconectar
   ESTE número?". Com duas escolas na mesma tela do operador, é o que impede
   o desligamento da errada. */
.dialogo-alvo {
    margin: var(--esp-xs) 0 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--texto);
    font-variant-numeric: tabular-nums;
}

.dialogo-consequencias {
    margin: var(--esp-md) 0;
    padding-left: 18px;
    color: var(--texto-2);
    font-size: 13px;
    line-height: 1.6;
}
.dialogo-consequencias li { margin-bottom: 4px; }
.dialogo-consequencias strong { color: var(--texto); }

.dialogo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: var(--esp-xs);
    margin-top: var(--esp-lg);
}
/* Em tela estreita os botões empilham, e o destrutivo vai por último: o
   polegar descansa perto do fim da tela, e não é lá que ele deve cair. */
@media (max-width: 420px) {
    .dialogo-acoes { flex-direction: column-reverse; }
    .dialogo-acoes button { width: 100%; }
}

/* Diálogo de cadastro (ver /crm): seis campos não cabem numa tela de notebook
   com o teclado aberto. Sem o teto e a rolagem, o formulário estoura para fora
   do diálogo e o botão de gravar fica onde o mouse não alcança. */
.dialogo-cartao { max-height: min(78vh, 640px); overflow-y: auto; }
.dialogo-cartao label {
    display: block;
    margin: var(--esp-sm) 0 4px;
    font-size: 12px;
    color: var(--texto-2);
}
.dialogo-cartao input, .dialogo-cartao select { width: 100%; }
/* O texto explicativo do topo pertence ao título, não ao primeiro campo. */
.dialogo-cartao > .nota:first-of-type { margin: var(--esp-xs) 0 var(--esp-md); }

/* ── Casca: navegação em blocos e alternador de tema ─────────────────── */

/* Rótulo de grupo na lateral. Doze itens numa coluna não têm hierarquia —
   o olho percorre a lista inteira toda vez. Três blocos dão pontos de
   parada, e o rótulo diz por que aqueles itens estão juntos. */
.grupo-nav {
    margin: var(--esp-md) 0 4px;
    padding: 0 10px;
    color: var(--texto-3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.grupo-nav:first-child { margin-top: 0; }

/* A marca virou link e não pode parecer um item de menu. */
a.marca { text-decoration: none; color: inherit; border-radius: var(--raio-sm); }
a.marca:hover { opacity: .85; }

/* Alternador de tema: canto superior direito, fora do fluxo do conteúdo.
   Fixo, e não dentro do cabeçalho de cada página, porque cada tela desenha o
   seu — repetir o botão em dez templates é dez lugares para esquecer um. */
.alternar-tema {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--borda);
    border-radius: 50%;
    background: var(--sup-1);
    color: var(--texto-2);
}
.alternar-tema:hover { color: var(--texto); border-color: var(--texto-3); background: var(--sup-2); }
.alternar-tema span { display: none; line-height: 0; }
/* Mostra o ícone do que vai ACONTECER, não do estado atual: no escuro
   aparece o sol (clique para clarear). É a convenção que as pessoas já
   conhecem de outros produtos. */
:root[data-tema="escuro"] .alternar-tema .so-escuro { display: inline-flex; }
:root[data-tema="claro"] .alternar-tema .so-claro { display: inline-flex; }

@media (max-width: 900px) {
    /* Abaixo do botão de menu, para não cobrir um ao outro. */
    .alternar-tema { top: auto; bottom: 16px; right: 16px; }
    /* O alternador flutua no canto inferior; sem esta folga ele cobre o
       ultimo campo da tela -- na busca de cobrancas ele ficava exatamente
       em cima do input. Reservar o espaco e mais barato que reposicionar
       o botao em cada tela. */
    main { padding-bottom: 76px; }
}

/* ── Lateral recolhível ──────────────────────────────────────────────── */

.topo-lateral {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-xs);
    padding-right: 10px;
}
.recolher-lateral {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    background: none;
    color: var(--texto-3);
}
.recolher-lateral:hover { color: var(--texto); background: var(--sup-2); border-color: var(--borda); }

/* Recolhida: 216px viram 60px. Some o texto, fica o ícone — e o submenu
   inteiro, porque um submenu sem rótulo é uma coluna de traços sem sentido.
   A seção continua marcada pelo teal, então não se perde onde se está. */
body.lateral-recolhida .aplicacao { grid-template-columns: 60px 1fr; }
body.lateral-recolhida .rotulo-nav,
body.lateral-recolhida .grupo-nav,
body.lateral-recolhida .subnav,
body.lateral-recolhida .marca .logotipo,
body.lateral-recolhida .rodape .nome,
body.lateral-recolhida .rodape .papel,
body.lateral-recolhida .rodape button span:not([aria-hidden]) { display: none; }

body.lateral-recolhida .topo-lateral { flex-direction: column; gap: 10px; padding: 0; }
body.lateral-recolhida .marca { justify-content: center; padding: 0; }
body.lateral-recolhida .marca .simbolo-reizo { display: block; }
body.lateral-recolhida nav > a { justify-content: center; padding-left: 0; padding-right: 0; }
/* O ícone gira: mesmo botão, e a seta aponta para onde a lateral vai. */
body.lateral-recolhida .recolher-lateral svg { transform: rotate(180deg); }
body.lateral-recolhida .rodape { align-items: center; }
body.lateral-recolhida .rodape form,
body.lateral-recolhida .rodape button { width: auto; }

/* Recolher é para ganhar espaço em tela larga. No celular a lateral já é uma
   gaveta que cobre a tela inteira — recolher ali não significa nada. */
@media (max-width: 900px) {
    body.lateral-recolhida .aplicacao { grid-template-columns: 1fr; }
    body.lateral-recolhida .rotulo-nav,
    body.lateral-recolhida .grupo-nav,
    body.lateral-recolhida .subnav,
    body.lateral-recolhida .marca .logotipo { display: revert; }
    body.lateral-recolhida .marca .simbolo-reizo { display: none; }
    body.lateral-recolhida nav > a { justify-content: flex-start; }
    .recolher-lateral { display: none; }
}

/* ── Plataforma: ativação e módulos ──────────────────────────────────── */

/* Título que separa blocos dentro de uma página. Sem ele, painéis diferentes
   viram uma pilha só e o olho não sabe onde um assunto acaba. */
.titulo-secao {
    margin: var(--esp-xl) 0 var(--esp-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
    letter-spacing: .02em;
}

/* Diz, ao lado do título, que a tabela abaixo é um pedaço e não o todo. Fica
   mais leve que o título de propósito: é ressalva, não manchete — mas precisa
   estar visível, porque lista cortada em silêncio esconde trabalho. */
.titulo-secao .recorte {
    margin-left: var(--esp-xs);
    font-weight: 400;
    color: var(--texto-3);
    letter-spacing: 0;
}

/* A mensagem exata que a familia vai ler, antes de sair. Desenhada como
   citacao e nao como campo de formulario: o operador precisa LER isto, e
   texto dentro de caixa de input o olho trata como configuracao e pula. */
.previa-mensagem {
    margin: var(--esp-sm) 0 var(--esp-md);
    padding: var(--esp-md);
    border-left: 3px solid var(--marca);
    border-radius: 0 var(--raio-md) var(--raio-md) 0;
    background: var(--sup-2);
    color: var(--texto);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.previa-fila { margin: var(--esp-xs) 0 var(--esp-md); padding-left: 18px; color: var(--texto-2); font-size: 13px; }
.previa-fila li { margin: 3px 0; }

/* O resumo do que o sistema ja sabe, no topo da conversa. Encostado no
   cabecalho e nao no meio das mensagens: e a primeira coisa que quem assume
   precisa ler, e a ultima que precisa relembrar depois. */
.chat-contexto {
    margin: 0; padding: var(--esp-sm) var(--esp-md);
    border-bottom: 1px solid var(--borda-2);
    background: var(--sup-2); color: var(--texto-2); font-size: 12px;
}
.chat-contexto p { margin: 3px 0; }
.chat-contexto strong { color: var(--texto); }
.chat-contexto .contexto-alerta { color: var(--aviso); }
.chat-contexto .contexto-alerta strong { color: var(--aviso); }

.bloco-ativacao { padding: var(--esp-lg); }
.ativacao-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-md); }
.ativacao-cabecalho h2 { margin: 0; font-size: 16px; }
.ativacao-cabecalho .subtitulo { margin: 4px 0 0; }
.progresso-ativacao {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sup-3);
    color: var(--texto-2);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lista-ativacao { list-style: none; margin: var(--esp-md) 0 0; padding: 0; }
.lista-ativacao li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: var(--esp-md);
    align-items: center;
    padding: var(--esp-sm) 0;
    border-top: 1px solid var(--borda-2);
}
.lista-ativacao li:first-child { border-top: 0; }
.lista-ativacao strong { display: block; font-size: 13px; }
.lista-ativacao p { margin: 2px 0 0; color: var(--texto-2); font-size: 12px; }
.marcador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--borda);
    border-radius: 50%;
    color: var(--texto-3);
    font-size: 11px;
    font-weight: 600;
}
/* Feito fica apagado de propósito: a lista existe para mostrar o que FALTA,
   e destacar o concluído rouba o olho do que ainda precisa de ação. */
.lista-ativacao li.feito strong,
.lista-ativacao li.feito p { color: var(--texto-3); }
.lista-ativacao li.feito .marcador { color: var(--marca); border-color: color-mix(in srgb, var(--marca) 45%, transparent); }

/* Módulo inativo não pode parecer quebrado — só desligado. */
.cartao-modulo.modulo-inativo { opacity: .72; }
.cartao-modulo.modulo-ativo { border-left: 3px solid var(--marca); }

.bloco-plataforma { margin-top: var(--esp-xl); padding: var(--esp-lg); border-style: dashed; }
.bloco-plataforma h2 { margin: 4px 0 0; font-size: 15px; }
.bloco-plataforma form { margin-top: var(--esp-md); }

@media (max-width: 640px) {
    .lista-ativacao li { grid-template-columns: 26px minmax(0, 1fr); }
    .lista-ativacao li .botao { grid-column: 2; justify-self: start; }
    .ativacao-cabecalho { flex-direction: column; }
}

/* ── Cartões de estado (Agente, Cobranças) ───────────────────────────── */

.grade-estado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--esp-sm);
}
.cartao-estado {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--esp-md);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--borda);
    border-radius: var(--raio-md);
    background: var(--sup-1);
    color: inherit;
    text-decoration: none;
}
a.cartao-estado:hover { border-color: var(--texto-3); background: var(--sup-2); }
.cartao-estado.ok { border-left-color: var(--marca); }
.cartao-estado.pendente { border-left-color: var(--aviso); }
.cartao-estado.destaque { border-left-color: var(--marca); }
.estado-rotulo { color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.estado-valor { font-size: 22px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.estado-detalhe { color: var(--texto-2); font-size: 12px; }

/* ── Qualidade do agente ─────────────────────────────────────────────── */

/* Uma barra em vez de três contagens: a proporção é a leitura que importa,
   e ela se vê antes de ler qualquer número. */
.barra-qualidade { display: flex; height: 8px; margin: var(--esp-md) 0 var(--esp-xs); border-radius: 999px; overflow: hidden; background: var(--sup-3); }
.parte-boa { background: var(--marca); }
.parte-corrigir { background: var(--aviso); }
.legenda-qualidade { display: flex; gap: var(--esp-md); margin: 0 0 var(--esp-md); color: var(--texto-2); font-size: 12px; }
.legenda-qualidade span { display: inline-flex; align-items: center; gap: 6px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ponto-boa { background: var(--marca); }
.ponto-corrigir { background: var(--aviso); }

.avaliacao { display: flex; justify-content: space-between; gap: var(--esp-md); }
.avaliacao .trecho { margin: 2px 0 0; color: var(--texto-2); font-size: 12px; }
.avaliacao .comentario { margin: 4px 0 0; color: var(--texto); font-size: 12px; font-style: italic; }
.avaliacao time { flex: none; color: var(--texto-3); font-size: 11px; }
/* Só o que precisa de ação recebe marca. Destacar as boas também tiraria o
   olho justamente do que se veio procurar. */
.avaliacao.corrigir { border-left: 2px solid var(--aviso); padding-left: 10px; margin-left: -12px; }

/* ── Fluxo do agente ─────────────────────────────────────────────────── */

.fluxo-agente { list-style: none; counter-reset: passo; margin: var(--esp-md) 0 0; padding: 0; }
.fluxo-agente li { counter-increment: passo; position: relative; padding: 0 0 var(--esp-md) 28px; }
.fluxo-agente li::before {
    content: counter(passo);
    position: absolute; left: 0; top: 0;
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border: 1px solid var(--borda); border-radius: 50%;
    color: var(--texto-3); font-size: 10px; font-weight: 600;
}
/* A linha que liga os passos: sem ela são quatro frases empilhadas, e a
   sequência — que é a informação — se perde. */
.fluxo-agente li:not(:last-child)::after {
    content: ""; position: absolute; left: 10px; top: 22px; bottom: 6px;
    width: 1px; background: var(--borda-2);
}
.fluxo-agente strong { display: block; font-size: 13px; }
.fluxo-agente span { color: var(--texto-2); font-size: 12px; }
.fluxo-agente li.destaque::before { color: var(--marca); border-color: color-mix(in srgb, var(--marca) 45%, transparent); }

/* ── Modelos de mensagem ─────────────────────────────────────────────── */

.ajuda-variaveis { padding: var(--esp-sm); border: 1px dashed var(--borda); border-radius: var(--raio-sm); background: var(--sup-2); }
.ajuda-variaveis strong { font-size: 12px; }
.ajuda-variaveis p { margin: 6px 0 0; color: var(--texto-2); font-size: 12px; line-height: 1.5; }
.ajuda-variaveis code { padding: 1px 5px; border-radius: 4px; background: var(--sup-3); color: var(--marca); font-size: 12px; }

.modelo { display: flex; justify-content: space-between; gap: var(--esp-md); align-items: flex-start; }
.modelo-topo { display: flex; align-items: center; gap: var(--esp-xs); }
.modelo .trecho { margin: 4px 0 0; color: var(--texto-2); font-size: 12px; }
.modelo-meta { margin: 4px 0 0; color: var(--texto-3); font-size: 11px; }
.selo-neutro { color: var(--texto-3); background: var(--sup-3); }

/* ── Cobranças ───────────────────────────────────────────────────────── */

/* O bloco que trava a operação enquanto ninguém decide. Fica no topo e é o
   único com a cor de atenção — se tudo grita, nada grita. */
.bloco-decisao { padding: var(--esp-lg); border-left: 3px solid var(--aviso); margin-bottom: var(--esp-lg); }
.lista-decisoes { margin-top: var(--esp-md); }
.lista-decisoes article {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    gap: var(--esp-md);
    align-items: center;
    padding: var(--esp-sm) 0;
    border-top: 1px solid var(--borda-2);
}
.lista-decisoes article:first-child { border-top: 0; }
.decisao-quem strong { display: block; font-size: 13px; }
.decisao-quem span { color: var(--texto-2); font-size: 12px; }
.decisao-condicao strong { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.decisao-condicao span { color: var(--texto-2); font-size: 12px; font-variant-numeric: tabular-nums; }

.tabela-titulos td.numerico, th.numerico { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.acoes, td.acoes { width: 1%; white-space: nowrap; }
.vencido { color: var(--erro); font-weight: 600; }
.texto-erro { color: var(--erro); }

/* Ação em menu: a linha da tabela mostra o rótulo do que faz, e o formulário
   só aparece quando escolhido. Antes, campos soltos dentro da célula faziam
   a tabela parecer um formulário gigante. */
.acao-menu { position: relative; }
.acao-menu > summary { list-style: none; cursor: pointer; }
.acao-menu > summary::-webkit-details-marker { display: none; }
.acao-menu[open] > .form-popover {
    position: absolute; right: 0; z-index: 15;
    width: 260px; margin-top: 6px; padding: var(--esp-md);
    border: 1px solid var(--borda); border-radius: var(--raio-md);
    background: var(--sup-2); box-shadow: var(--sombra);
    white-space: normal;
}
.form-popover .nota { margin: 0 0 var(--esp-xs); }
.form-popover label { display: block; margin-bottom: var(--esp-xs); }
.form-popover input { width: 100%; }

.bloco-cadastros { margin-top: var(--esp-xl); padding: var(--esp-md) var(--esp-lg); }
.bloco-cadastros > summary { cursor: pointer; color: var(--texto-2); font-size: 13px; }
.bloco-cadastros[open] > summary { margin-bottom: var(--esp-md); }
.bloco-cadastros h3 { margin: 0 0 var(--esp-xs); font-size: 13px; }
.grade-formularios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-lg); }

.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-sm); }

@media (max-width: 720px) {
    .lista-decisoes article { grid-template-columns: minmax(0, 1fr); }
    .acao-menu[open] > .form-popover { position: static; width: auto; }
}

/* Barra de orçamento: mostra "quanto do mês já foi" antes de qualquer número
   ser lido. Vermelho só quando estourou — amarelo a partir de 80%, que é
   quando ainda dá tempo de fazer alguma coisa. */
.barra-orcamento { height: 8px; margin: var(--esp-md) 0 var(--esp-xs); border-radius: 999px; background: var(--sup-3); overflow: hidden; }
.barra-orcamento span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.barra-orcamento span.atencao { background: var(--aviso); }
.barra-orcamento span.estourado { background: var(--erro); }

/* ── Agenda em calendário ────────────────────────────────────────────── */

.calendario-painel { padding: var(--esp-lg); }
.calendario-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-md); flex-wrap: wrap; margin-bottom: var(--esp-md); }
.calendario-navegacao { display: flex; align-items: center; gap: var(--esp-xs); }
.calendario-navegacao h2 { margin: 0; min-width: 190px; text-align: center; font-size: 16px; }
.calendario-navegacao .botao { min-width: 34px; text-align: center; }
.calendario-info { display: flex; align-items: center; gap: var(--esp-sm); }

.calendario-cabecalho, .calendario-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendario-cabecalho span {
    padding: 6px 8px;
    color: var(--texto-3);
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.calendario-grade { border: 1px solid var(--borda-2); border-radius: var(--raio-md); overflow: hidden; }
.dia {
    min-height: 96px;
    padding: 6px;
    border-right: 1px solid var(--borda-2);
    border-bottom: 1px solid var(--borda-2);
    background: var(--sup-1);
}
.dia:nth-child(7n) { border-right: 0; }
.calendario-grade > .dia:nth-last-child(-n+7) { border-bottom: 0; }
/* Dias do mês vizinho ficam apagados em vez de sumirem: a semana precisa
   fechar, mas eles não podem competir com o mês que se está olhando. */
.dia.fora-do-mes { background: var(--sup-2); }
.dia.fora-do-mes .dia-numero { color: var(--texto-3); opacity: .6; }
.dia-numero { display: inline-block; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.dia.hoje { box-shadow: inset 0 0 0 2px var(--marca); }
.dia.hoje .dia-numero {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; border-radius: 50%;
    background: var(--marca); color: var(--sobre-marca, #06281f); font-weight: 700;
}

.dia-eventos { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.evento {
    display: block;
    padding: 2px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--marca) 16%, transparent);
    color: var(--texto);
    font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evento b { font-variant-numeric: tabular-nums; margin-right: 3px; }
.evento.cancelado { background: var(--sup-3); color: var(--texto-3); text-decoration: line-through; }

/* No celular a grade de sete colunas fica ilegível: cada dia vira uma faixa
   de 40px. Reduzir a altura e esconder o texto do evento mantém a leitura
   "que dias têm compromisso", que é a pergunta possível nesse tamanho. */
@media (max-width: 760px) {
    .dia { min-height: 62px; padding: 4px; }
    .evento { font-size: 0; padding: 3px; }
    .evento b { font-size: 10px; margin: 0; }
    .calendario-navegacao h2 { min-width: 0; font-size: 14px; }
}

/* ── Governança: um formulário longo que precisa ser lido ────────────── */

/* Dez campos empilhados sem respiro viram uma parede de caixas cinzas. O
   que separa é o agrupamento: cada bloco é uma ideia, com título e uma
   linha acima dele. */
/* Cada grupo vira um CARTÃO, não uma faixa separada por linha.

   Com separadores de largura total, os campos viravam listras coladas e o
   olho não achava onde uma ideia terminava. Cartão com fundo próprio dá
   limite visível, e o espaço entre cartões passa a ser respiro de verdade —
   não sobra de margem. */
.formulario-governanca { display: flex; flex-direction: column; gap: var(--esp-lg); }
.formulario-governanca .grupo-campos {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--texto-3);
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* O título do grupo e os campos dele formam uma unidade. */
.formulario-governanca .grupo-campos + label,
.formulario-governanca .grupo-campos ~ label { margin-top: var(--esp-sm); }
.formulario-governanca label {
    display: block;
    margin-top: var(--esp-md);
    font-size: 12px;
    font-weight: 500;
    color: var(--texto-2);
    letter-spacing: .01em;
}
.formulario-governanca input,
.formulario-governanca textarea,
.formulario-governanca select { width: 100%; margin-top: 6px; }
/* Regra e instrução são frases: entrelinha de leitura, não de formulário. */
.formulario-governanca textarea { min-height: 92px; line-height: 1.7; padding: 10px 12px; resize: vertical; }
.formulario-governanca button[type="submit"] { align-self: flex-start; margin-top: var(--esp-xs); }
.formulario-governanca .nota { margin: 6px 0 0; }

/* ── Páginas administrativas padronizadas ───────────────────────────── */

.formulario-pesquisa {
    display: flex;
    gap: var(--esp-xs);
    margin-bottom: var(--esp-xl);
    padding: var(--esp-md);
}
.formulario-pesquisa input { flex: 1; min-width: 0; }

.estado-vazio {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--esp-xs);
    min-height: 260px;
    max-width: 720px;
    margin: var(--esp-xl) auto;
    padding: var(--esp-xxl) var(--esp-lg);
    border: 1px dashed var(--borda);
    border-radius: var(--raio-md);
    background: var(--sup-1);
    text-align: center;
}
.estado-vazio-icone {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: var(--esp-xs);
    border-radius: 50%;
    background: var(--marca-bg);
    color: var(--marca);
}
.estado-vazio-icone svg { width: 24px; height: 24px; }
.estado-vazio h2 { margin: 0; font-size: 16px; }
.estado-vazio p { max-width: 52ch; margin: 0; color: var(--texto-2); }

.painel-formulario { margin-bottom: var(--esp-xl); }

.limite-formulario { max-width: 620px; }
.formulario-compacto { max-width: 420px; }
.aviso-segredo { margin-bottom: var(--esp-xl); border-left: 3px solid var(--aviso); }
.segredo-integracao { margin: var(--esp-sm) 0; padding: var(--esp-sm); border-radius: var(--raio-sm); background: var(--sup-2); color: var(--texto); overflow-wrap: anywhere; }
.painel-tabela { padding: 0; overflow: hidden; }
.painel-tabela > .tabela-responsiva:only-child { margin: 0; }
.painel-tabela table { border: 0; border-radius: 0; }
.grade-saude { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nota-final { margin-top: var(--esp-lg); }

/* ── Passada de responsivo nas telas novas ───────────────────────────── */

/* Tablet em pé: duas colunas ainda cabem, mas as tabelas de cobrança e a
   grade de estado ficam apertadas. */
@media (max-width: 1024px) {
    .grade-estado { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .estado-valor { font-size: 19px; }
    .calendario-navegacao h2 { min-width: 150px; }
}

@media (max-width: 760px) {
    /* No celular, controles precisam ser confortáveis para toque e campos
       usam 16px para não disparar zoom automático no Safari do iPhone. */
    button,
    .botao,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select { min-height: 44px; }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea { font-size: 16px; }
    .alternar-tema { width: 44px; height: 44px; }
    .rotulo-checkbox,
    .login-forma .lembrar { min-height: 44px; }
    .chat-chip,
    .chat-icone,
    .chat-enviar,
    .chat-acoes summary { min-width: 44px; min-height: 44px; }
    .chat-busca { min-height: 48px; height: auto; }
    .chat-voltar,
.tag-tirar,
.tag-conversa button { min-width: 44px; min-height: 44px; }

    /* O cabeçalho de página tem título e ação lado a lado; no celular a ação
       vai para baixo, largura cheia, no alcance do polegar. */
    .cabecalho-pagina { flex-direction: column; align-items: stretch; gap: var(--esp-sm); }
    .cabecalho-pagina .botao, .cabecalho-pagina button { width: 100%; min-height: 44px; }
    .cabecalho-secao { flex-direction: column; align-items: flex-start; gap: var(--esp-xs); }

    .grade-estado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartao-estado { padding: var(--esp-sm); }

    /* Formulário em linha vira empilhado: campos de 90px lado a lado não se
       preenchem no celular. */
    .formulario-linha { grid-template-columns: minmax(0, 1fr); }
    .linha-campos { grid-template-columns: minmax(0, 1fr); }
    .grade-formularios { grid-template-columns: minmax(0, 1fr); gap: var(--esp-md); }
    .formulario-pesquisa { flex-direction: column; }
    
    .estado-vazio { min-height: 220px; margin: var(--esp-lg) 0; padding: var(--esp-xl) var(--esp-md); }

    /* Alvos de toque: 44px é o mínimo confortável. */
    .acoes-linha button, .acoes-linha .botao { min-height: 40px; }

    .titulo-secao { margin-top: var(--esp-lg); }
    .bloco-ativacao, .bloco-decisao, .calendario-painel { padding: var(--esp-md); }
}

@media (max-width: 420px) {
    /* Dois cartões por linha viram um: 160px de largura não comporta um valor
       em reais com o rótulo. */
    .grade-estado { grid-template-columns: minmax(0, 1fr); }
}

/* ── Medida de leitura ───────────────────────────────────────────────── */

/* Texto corrido tem largura ótima entre 60 e 80 caracteres. Numa tela larga,
   sem isto, o subtítulo da página atravessaria 1500px e o olho perderia a
   linha na volta. Capar só o TEXTO deixa tabelas e grades usarem tudo. */
.cabecalho-pagina .subtitulo,
.painel > .subtitulo,
.titulo-secao + .painel > .subtitulo { max-width: 78ch; }
.nota, .vazio { max-width: 90ch; }

/* Com mais espaço, a grade ganha COLUNAS em vez de esticar cartão. Um cartão
   de 400px com um número de dois dígitos é espaço desperdiçado do mesmo
   jeito que a faixa preta era. */
@media (min-width: 1400px) {
    .grade-estado { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    
    .grade-atalhos { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* Formulário de coluna única não deve esticar até a borda: campo de texto com
   1200px de largura convida a digitar uma linha que ninguém relê. */
.formulario > label input:not([type="checkbox"]),
.formulario > label select { max-width: 640px; }
.formulario > label textarea { max-width: 820px; }

/* ── Tema claro: separar superfícies ─────────────────────────────────── */

/* No claro a lateral era branca (#FFF) sobre um fundo quase branco (#F4F7F6):
   1,5% de diferença. O olho não vê onde a navegação termina e o conteúdo
   começa, e a tela inteira parece uma folha lavada.

   No escuro a hierarquia vem da LUZ (cada camada mais clara que a de baixo).
   No claro ela precisa vir da SOMBRA e da borda — inverter o mesmo truque
   não funciona, porque não existe "mais branco que branco". */
:root[data-tema="claro"] .lateral {
    background: #FFFFFF;
    border-right: 1px solid var(--borda);
}
:root[data-tema="claro"] .painel,
:root[data-tema="claro"] .cartao,
:root[data-tema="claro"] .cartao-estado {
    box-shadow: 0 1px 2px rgba(23, 33, 30, 0.06);
}
/* Campo de formulário no claro precisa parecer afundado, não flutuando: sem
   isso a caixa de texto some dentro do cartão branco. */
:root[data-tema="claro"] input,
:root[data-tema="claro"] select,
:root[data-tema="claro"] textarea {
    background: #F7FAF9;
    border-color: #C3D1CC;
}
:root[data-tema="claro"] input:focus,
:root[data-tema="claro"] select:focus,
:root[data-tema="claro"] textarea:focus { background: #FFFFFF; }