/* ==========================================================================
   BinaIA — sistema visual do portal
   --------------------------------------------------------------------------
   Herda os TOKENS DE MARCA de docs/design.md (verde, creme, Inter, pílula,
   sem sombra) mas NAO a escala tipografica: display de 80px e "deixe o creme
   aparecer generosamente" sao decisoes de landing page. Num painel com tabelas
   densas, elas custariam legibilidade e densidade de informacao.

   O que veio do design.md:
     - paleta integral, incluindo o creme como canvas
     - Inter, pesos 400 e 700
     - raio de pilula em botoes, 16px em cartoes
     - profundidade por contraste de superficie, sem box-shadow
     - verde apenas para acao primaria, azul apenas para link em texto

   O que foi adaptado:
     - escala de 13 a 24px em vez de 16 a 80px
     - claro e escuro (14/09/2026): mesmos papeis, outros valores; sem escolha,
       segue o sistema. A escolha e a mesma do site (tema.js, chave nexa-tema).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
  /* Marca */
  --marca-500: #25d366;   /* acao primaria. Nunca decorativo. */
  --marca-600: #1fb857;
  --marca-100: #d9fdd3;   /* verde de balao do WhatsApp */
  --marca-50:  #eefaef;
  /* Texto sobre o verde. NAO muda com o tema: o verde e o mesmo nos dois, e so
     tinta escura da contraste sobre ele (8,80:1). */
  --sobre-marca: #111b21;
  /* #0366cc e nao #0373e9: o anterior dava 4,19:1 sobre o creme, abaixo do
     piso. Sobre branco passaria, mas o canvas do produto e creme. 5,14:1. */
  --azul-link: #0366cc;   /* link em texto corrido, nunca fundo */

  --tinta:       #1c1e21;
  --tinta-forte: #111b21;
  --tinta-media: #5e5e5e;
  /* Retonado de #8b8b8b para #6b6b6b em 04/09/2026.
     O anterior dava 3,15:1 sobre o creme e 3,41:1 sobre o branco, e este e o
     nivel usado em texto de 10 a 12px -- o tamanho em que o contraste importa
     mais, nao menos. #6b6b6b da 4,92:1 e 5,33:1.
     Retonar o TOKEN em vez de trocar as 22 regras preserva a escada de tinta:
     forte 16,1 / normal 15,4 / media 5,99 / fraca 4,92. Trocar por
     --tinta-media teria consertado o contraste colapsando dois niveis num so.
     Os usos nao-texto (fatia neutra, pontos) sobem junto, de 3,15 para 4,92. */
  --tinta-fraca: #6b6b6b;

  --fundo:      #fcf5eb;  /* creme: o canvas recua */
  --superficie: #ffffff;  /* branco: flutua sobre o creme */
  --borda:      #f0f4f9;
  --borda-forte:#e2e6ec;

  --ok:      #147a45;
  --ok-bg:   #d9fdd3;
  --aviso:   #8a5a00;
  --aviso-bg:#fdf1dc;
  --erro:    #b3261e;
  --erro-bg: #fbe6e4;

  /* Quarta cor da escala de sentimento. As outras tres reusam --ok,
     --tinta-fraca e --erro; esta era o unico hex cru da folha, e quem lia nao
     tinha como saber se era deliberado.
     DEFEITO CONHECIDO, tokenizado como esta de proposito: da 2,08:1 sobre o
     creme, abaixo do piso de 3:1 para grafico -- e e a fatia que o PRODUCT.md
     chama de mais importante. Corrigir exige rever a escala INTEIRA: as quatro
     hoje se separam quase so por matiz (positivo x neutro = 1,01 de razao
     entre si), entao quem nao distingue cor ve uma faixa unica. Isso e decisao
     de desenho, e nao de extracao. */
  --misto:   #e0a132;

  --r-sm: 8px;
  --r:    16px;
  --r-lg: 16px;
  --r-pilula: 50px;

  /* Sem sombra por decisao do sistema: profundidade vem do contraste entre
     o creme e o branco. Mantidas as variaveis em none para nao ter que
     cacar cada uso. */
  --sombra-1: none;
  --sombra-2: none;

  --lateral: 250px;
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Tema escuro: pela preferencia do sistema quando a pessoa nao escolheu, e pelo
   data-tema quando escolheu -- nos dois sentidos. O canvas (--fundo) e o mais
   fundo e a superficie sobe um degrau: a profundidade continua vindo de
   contraste, sem sombra. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca-100: #103a2c;
    --marca-50:  #10261f;
    --azul-link: #53bdeb;
    --tinta:       #d1d7db;
    --tinta-forte: #e9edef;
    --tinta-media: #aebac1;
    --tinta-fraca: #8f9ca5;
    --fundo:      #0b141a;
    --superficie: #111b21;
    --borda:      #1f2c33;
    --borda-forte:#2f3d45;
    --ok:      #5fd39a;
    --ok-bg:   #103529;
    --aviso:   #f0b35a;
    --aviso-bg:#3a2a0c;
    --erro:    #ff8a80;
    --erro-bg: #3b1714;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --marca-100: #103a2c;
  --marca-50:  #10261f;
  --azul-link: #53bdeb;
  --tinta:       #d1d7db;
  --tinta-forte: #e9edef;
  --tinta-media: #aebac1;
  --tinta-fraca: #8f9ca5;
  --fundo:      #0b141a;
  --superficie: #111b21;
  --borda:      #1f2c33;
  --borda-forte:#2f3d45;
  --ok:      #5fd39a;
  --ok-bg:   #103529;
  --aviso:   #f0b35a;
  --aviso-bg:#3a2a0c;
  --erro:    #ff8a80;
  --erro-bg: #3b1714;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

a { color: var(--azul-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .85em;
  background: var(--fundo);
  padding: .1em .4em;
  border-radius: var(--r-sm);
  color: var(--tinta-media);
}

/* ---------- Marca ---------- */

.marca-nexa { display: inline-flex; align-items: center; gap: .55rem; color: var(--tinta-forte); }
.marca-nexa svg { flex: none; }
.marca-nexa .nome {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.035em;
  color: var(--tinta);
}
/* Em fonte sem serifa o I maiusculo e o l minusculo sao o mesmo traco:
   "BinaIA" em peso unico se le "BinalA". O IA mais leve separa as palavras. */
.marca-nexa .ia { font-weight: 500; margin-left: .06em; }

/* ---------- Entrada ---------- */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }

.cartao-entrada {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: 2.75rem 2.5rem;
  width: 100%;
  max-width: 24rem;
  text-align: center;
}
.cartao-entrada .marca-nexa { justify-content: center; margin-bottom: .85rem; }
.cartao-entrada .marca-nexa .nome { font-size: 1.75rem; }
.cartao-entrada .subtitulo {
  color: var(--tinta-media); margin: 0 0 2rem; font-size: .92rem;
}

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

.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }

.lateral {
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  padding: 1.5rem 1rem 1.25rem;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.lateral > .marca-nexa { padding: 0 .55rem; margin-bottom: 1.75rem; }

.grupo-menu {
  font-size: .68rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-fraca);
  padding: 0 .65rem; margin: 1.35rem 0 .45rem;
}
.menu { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.menu li { margin-bottom: 1px; }
.menu a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem; border-radius: var(--r-sm);
  color: var(--tinta-media); font-size: .89rem; font-weight: 500;
  transition: background .12s, color .12s;
}
.menu a:hover { background: var(--fundo); color: var(--tinta); text-decoration: none; }
.menu a.ativo { background: var(--marca-100); color: var(--tinta-forte); font-weight: 600; }
.menu a svg { flex: none; opacity: .8; }

/* Modulo nao contratado fica visivel e inerte. Mostrar o que existe e melhor
   argumento comercial do que esconder. */
.menu a.bloqueado { opacity: .4; cursor: not-allowed; }
.menu a.bloqueado:hover { background: none; color: var(--tinta-media); }
.menu a.bloqueado .cadeado { margin-left: auto; font-size: .68rem; }

/* Tema claro | escuro: dois botoes, e nao um interruptor -- um botao que so diz
   o CONTRARIO do tema atual confunde estado com acao. aria-pressed marca o que vale. */
.tema { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--borda-forte); border-radius: var(--r-pilula); }
.tema button {
  display: inline-grid; place-items: center; width: 34px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-pilula); background: transparent; color: var(--tinta-fraca); cursor: pointer;
}
.tema button:hover { color: var(--tinta-forte); }
.tema button[aria-pressed="true"] { background: var(--borda-forte); color: var(--tinta-forte); }
.tema svg { width: 15px; height: 15px; }
.lateral .tema { align-self: flex-start; margin: .2rem .55rem .6rem; }
.cartao-entrada .tema { margin-top: 1.2rem; }

.rodape-lateral {
  border-top: 1px solid var(--borda); padding-top: .9rem; margin-top: .5rem;
  display: flex; align-items: center; gap: .6rem;
}
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--marca-100); color: var(--tinta-forte);
  display: grid; place-items: center; font-weight: 600; font-size: .82rem;
}
.rodape-lateral .quem { min-width: 0; flex: 1; }
.rodape-lateral .quem b { display: block; font-size: .82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rodape-lateral .quem span { display: block; font-size: .74rem; color: var(--tinta-fraca);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icone-btn {
  background: none; border: none; cursor: pointer; color: var(--tinta-fraca);
  padding: .35rem; border-radius: var(--r-sm); display: grid; place-items: center;
}
.icone-btn:hover { background: var(--fundo); color: var(--tinta); }

.conteudo { padding: 2.25rem 2.5rem 4rem; max-width: 82rem; }

.cabecalho { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.cabecalho .texto { flex: 1; min-width: 0; }
h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.025em; margin: 0 0 .2rem; }
.legenda { color: var(--tinta-media); margin: 0; font-size: .9rem; }
h2 { font-size: 1rem; font-weight: 620; margin: 2.25rem 0 .85rem; letter-spacing: -.01em; }

/* ---------- Cartoes de numero ---------- */

.cartoes { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); padding: 1.15rem 1.25rem; box-shadow: var(--sombra-1);
}
.cartao .rotulo {
  font-size: .74rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.cartao .numero {
  font-size: 1.85rem; font-weight: 650; letter-spacing: -.03em;
  margin-top: .3rem; font-variant-numeric: tabular-nums;
}
.cartao .nota { font-size: .78rem; color: var(--tinta-fraca); margin-top: .1rem; }
.cartao.atalho { display: block; text-decoration: none; color: var(--tinta-forte);
  transition: border-color .12s, transform .12s; }
.cartao.atalho:hover { border-color: var(--marca-500); transform: translateY(-1px);
  text-decoration: none; }
.cartao.atalho .rotulo { display: flex; align-items: center; gap: .5rem;
  text-transform: none; font-size: .92rem; letter-spacing: 0; color: inherit; }
/* O icone herda a cor do rotulo, e nao o verde.
   Verde a 1,98:1 sobre o branco do cartao era decorativo -- e o proprio
   sistema diz "verde apenas para acao primaria, nunca decorativo". O rotulo
   ao lado ja carrega o significado; o icone e reforco, e reforco ilegivel nao
   reforca nada. O verde continua neste cartao onde ele significa acao: a
   borda que acende no hover. */
.cartao.atalho svg { color: inherit; }

/* ---------- Painel e tabela ---------- */

.painel {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); box-shadow: var(--sombra-1); overflow: hidden;
}
.painel-topo {
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: .75rem;
}
.painel-topo h3 { margin: 0; font-size: .92rem; font-weight: 620; flex: 1; }
/* Corpo de painel que nao e tabela. Mesmo recuo horizontal do .painel-topo,
   para o conteudo alinhar com o titulo em vez de encostar na borda. */
.painel-corpo { padding: 1.15rem; }
.painel-corpo > .caixa:last-child { margin-bottom: 0; }
.rolagem { overflow-x: auto; }

/* Nota no rodape de um painel que NAO tem padding proprio.
   `.painel` so tem borda e cantos: quem espaca sao `.painel-topo` e as celulas
   da tabela, cada um com 1.15rem. Um <p> solto ali encostava na borda esquerda
   e na de baixo. Repetir o mesmo 1.15rem faz a nota nascer alinhada com a
   primeira coluna, em vez de flutuar fora do ritmo. */
/* Linha que continua a origem da linha de cima: sem borda, para as duas
   lerem como um bloco so. A pessoa aparece uma vez e os modelos dela ficam
   embaixo -- que e o que permite ver, de relance, quem usa dois modelos. */
/* Linha de total. Borda em cima e fundo do canvas para ela se separar das
   linhas somadas -- sem isso o total vira mais uma linha e ninguem o le como
   total. */
tfoot td {
  border-top: 2px solid var(--borda-forte);
  background: var(--fundo);
}

tbody tr.mesma-origem td { border-top: none; padding-top: .2rem; }
tbody tr.mesma-origem + tr:not(.mesma-origem) td { padding-top: .85rem; }

.nota-painel {
  color: var(--tinta-media);
  font-size: .9rem;
  margin: 0;
  padding: .85rem 1.15rem 1rem;
  border-top: 1px solid var(--borda);
}

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .72rem 1.15rem; white-space: nowrap; }
thead th {
  background: var(--fundo); border-bottom: 1px solid var(--borda);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em;
  /* Sobre o creme, --tinta-fraca dava 3,15:1 quando era #8b8b8b. Cabecalho de
     coluna diz o que cada celula significa; ilegivel, a tabela inteira vira
     numero solto. */
  text-transform: uppercase; color: var(--tinta-media);
}
tbody td { border-bottom: 1px solid var(--borda); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clicavel { cursor: pointer; transition: background .1s; }
tbody tr.clicavel:hover { background: var(--fundo); }

/* Lista de conversas: nome em cima, numero embaixo.
   Antes a tela mostrava um OU outro -- nome quando havia perfil, numero quando
   nao -- e duas linhas do mesmo contato pareciam contatos diferentes. */
.sob-nome {
  display: inline-block;
  margin-top: .15rem;
  font-size: .78rem;
  color: var(--tinta-media);   /* 6,48:1 no branco, 5,99:1 no creme */
  background: none;
  padding: 0;
}

/* Marcador de nao lida, como no aplicativo: bolinha antes da previa.
   A cor NAO e --marca-500: aquele verde da 1,98:1 sobre o branco e o marcador
   simplesmente sumiria. --ok da 5,39:1 e 4,97:1, acima dos 3:1 que componente
   grafico exige. */
.ponto-nao-lida {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: middle;
  flex: none;
}

/* A bolinha sozinha carregaria a informacao so na cor. O peso do texto repete
   o mesmo sinal por outro canal, para quem nao distingue a bolinha. */
tbody tr.nao-lida td { font-weight: 600; }
tbody tr.nao-lida .sob-nome { font-weight: 400; }
td.livre { white-space: normal; max-width: 22rem; color: var(--tinta-media); }
td.num { font-variant-numeric: tabular-nums; }

/* ---------- Etiquetas ---------- */

.etiqueta {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .73rem; font-weight: 600;
  background: var(--fundo); color: var(--tinta-media);
  border: 1px solid var(--borda);
}
.etiqueta.ok    { background: var(--ok-bg);    color: var(--ok);    border-color: transparent; }
.etiqueta.aviso { background: var(--aviso-bg); color: var(--aviso); border-color: transparent; }
.etiqueta.erro  { background: var(--erro-bg);  color: var(--erro);  border-color: transparent; }
.etiqueta.marca { background: var(--marca-100); color: var(--ok); border-color: transparent; }
.ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Botoes e formulario ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.5rem; border-radius: var(--r-pilula); border: 1px solid transparent;
  /* Texto ESCURO sobre o verde, e nao branco.
     Branco sobre #25d366 da 1,98:1 -- o controle mais usado do produto
     reprovando o piso de 4,5:1 por mais que o dobro. --tinta-forte da 8,80:1
     sobre o mesmo verde, e 6,70:1 sobre o --marca-600 do hover.
     O verde nao muda: ele e compromisso de marca desde 04/09. */
  background: var(--marca-500); color: var(--sobre-marca);
  font-family: var(--fonte); font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: background .12s, opacity .12s;
}
.btn:hover { background: var(--marca-600); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.largo { width: 100%; }
.btn.discreto { background: transparent; color: var(--tinta); border-color: var(--tinta); font-weight: 400; }
.btn.discreto:hover { background: var(--tinta); color: var(--superficie); }

label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--tinta-media); }
.campo { margin-bottom: 1.15rem; }
.dica { font-size: .78rem; color: var(--tinta-fraca); margin-top: .3rem; }
/* Quem mandou a mensagem, no rodape do balao de saida. Discreto de proposito:
   e informacao de auditoria, nao conteudo -- quem le a conversa esta lendo o
   que foi dito, e so procura o autor quando alguma coisa nao bate. */
.autor-msg {
  display: inline-block; margin-right: .45rem;
  color: var(--tinta-fraca); font-size: .72rem; white-space: nowrap;
}

/* Faixa de "esta conversa espera uma pessoa", acima do historico. Tom de aviso
   e nao de erro: ninguem errou, ha trabalho a fazer. */
.faixa-atendimento {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: .8rem 1.15rem; margin-bottom: 1rem;
  border: 1px solid var(--aviso); border-left-width: 3px;
  border-radius: var(--r);
  background: var(--aviso-bg);
}
.faixa-atendimento .legenda { margin-top: .2rem; }

/* ---------- Abas ---------- */
/* A aba selecionada e marcada por PESO e por uma barra sob o texto, e nao so
   por cor: quem nao distingue as duas cores precisa continuar sabendo em que
   lista esta olhando. */
.abas {
  display: flex; gap: .3rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);
  margin-bottom: -1px;
}
.aba {
  appearance: none; background: none; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent;
  padding: .6rem .9rem; margin-bottom: -1px;
  font-family: var(--fonte); font-size: .85rem; font-weight: 500;
  color: var(--tinta-media);
}
.aba:hover { color: var(--tinta); }
.aba[aria-selected="true"] {
  color: var(--tinta); font-weight: 700;
  border-bottom-color: var(--marca);
}
/* A contagem e o que faz a aba valer a pena: ela diz se ha trabalho esperando
   sem exigir o clique. */
.aba-conta {
  display: inline-block; min-width: 1.35rem; padding: 0 .35rem;
  margin-left: .3rem; border-radius: var(--r-pilula);
  background: var(--borda); color: var(--tinta-media);
  font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.aba[aria-selected="true"] .aba-conta {
  background: var(--marca-100); color: var(--tinta);
}
/* O painel recebe foco pelo tabindex, entao precisa de anel visivel -- sem
   isso quem navega por teclado chega na lista sem saber que chegou. */
.abas + .painel { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Titulo de um grupo de opcoes dentro de um painel que ja tem h3. Mesmo peso
   do <label>, porque e o que ele e: o rotulo do conjunto de radios. */
.rotulo-grupo {
  font-size: .82rem; font-weight: 600; color: var(--tinta-media);
  margin: 0 0 .5rem;
}

input[type=text], input[type=tel], input[type=email], input[type=number], input[type=search],
input[type=datetime-local], input[type=time], input[type=file], select {
  width: 100%; padding: .6rem 1rem;
  border: 1px solid var(--borda-forte); border-radius: var(--r-pilula);
  background: var(--superficie); color: var(--tinta);
  font-family: var(--fonte); font-size: .88rem;
}
textarea {
  width: 100%; padding: .7rem .9rem;
  border: 1px solid var(--borda-forte); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--tinta);
  font-family: var(--fonte); font-size: .88rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--tinta-forte); outline-offset: 1px;
  border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-50);
}
/* Botao e link tambem: sem isto, navegar por teclado pela paginacao e pelos
   filtros nao mostra onde voce esta. */
.btn:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--tinta-forte); outline-offset: 2px;
}

/* Salto para o conteudo.
   Fora da tela ate receber foco -- e nao `display: none`, que o tiraria da
   ordem de tabulacao e o tornaria inalcancavel justamente por quem precisa
   dele. `main` recebe foco pelo tabindex="-1"; o anel do foco-visivel acima
   nao o alcanca, entao ele nao pisca ao chegar. */
.pular {
  position: absolute; left: .75rem; top: -3rem; z-index: 10;
  background: var(--superficie); color: var(--tinta-forte);
  border: 1px solid var(--tinta-forte); border-radius: var(--r-sm);
  padding: .5rem 1rem; font-size: .88rem; font-weight: 600;
  text-decoration: none;
}
.pular:focus { top: .75rem; }
.conteudo:focus { outline: none; }

/* Modulo travado continua FOCAVEL de proposito: o produto o mostra como sinal
   comercial ("nao contratou" e diferente de "nao existe"), e escondê-lo do
   teclado esconderia exatamente essa informacao de quem navega por teclado.
   `cursor: not-allowed` ja esta declarado acima; o `aria-disabled` no HTML diz
   o mesmo a quem nao ve o cursor. */
textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }

.linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.radio-cartoes { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.radio-cartao {
  border: 1px solid var(--borda-forte); border-radius: var(--r);
  padding: .8rem .95rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.radio-cartao:hover { border-color: var(--marca-500); }
.radio-cartao input { margin-right: .45rem; accent-color: var(--marca-500); }
.radio-cartao.escolhido { border-color: var(--marca-500); background: var(--marca-50); }
.radio-cartao b { font-size: .87rem; }
.radio-cartao span { display: block; font-size: .77rem; color: var(--tinta-fraca); margin-top: .15rem; }

/* ---------- Caixas de aviso ---------- */

.caixa {
  border-radius: var(--r); padding: .9rem 1.1rem; margin-bottom: 1.5rem;
  font-size: .87rem; display: flex; gap: .7rem; align-items: flex-start;
}
.caixa.info  { background: var(--marca-100); color: var(--tinta-forte); }
.caixa.aviso { background: var(--aviso-bg);  color: var(--aviso); }
.caixa.erro  { background: var(--erro-bg);   color: var(--erro); }
.caixa.ok    { background: var(--ok-bg);     color: var(--ok); }
.caixa svg { flex: none; margin-top: .1rem; }

/* ---------- Vazio e carregando ---------- */

.vazio { padding: 3.5rem 1.5rem; text-align: center; }
.vazio .icone { color: var(--tinta-fraca); opacity: .5; margin-bottom: .75rem; }
.vazio h4 { margin: 0 0 .3rem; font-size: .95rem; font-weight: 600; }
.vazio p { margin: 0; color: var(--tinta-fraca); font-size: .85rem; }

/* Esqueleto em vez de "Carregando...": a tela nao pula quando o dado chega. */
.esqueleto {
  background: linear-gradient(90deg, var(--borda) 25%, var(--fundo) 50%, var(--borda) 75%);
  background-size: 200% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: var(--r-sm); height: .85rem;
}
@keyframes brilho { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.esqueleto.alto { height: 2.6rem; }
.esqueleto-linhas { padding: 1.15rem; display: grid; gap: .8rem; }

/* Movimento reduzido: menos deslocamento, e NAO menos resposta.
   ---------------------------------------------------------------------------
   O bloco anterior era `* { transition: none !important }`. Ele matava QUATRO
   transicoes que so mudam cor -- o hover do menu, o do botao, o do cartao de
   radio e o da linha clicavel de tabela -- para parar UM deslocamento de 1px
   no cartao de atalho.
   Quem pede movimento reduzido pede que a tela pare de deslizar, nao que ela
   pare de responder. Sem a transicao de cor, o clique deixa de ter
   confirmacao visual -- e essa e a pessoa que mais precisa dela.
   Sai daqui o que MOVE ou nunca para. Fica o que confirma. */
@media (prefers-reduced-motion: reduce) {
  /* Loop infinito. Nao confirma acao nenhuma: so ocupa a tela enquanto o dado
     nao chega. Sem a animacao o gradiente pararia a meio caminho, entao ele
     tambem vira uma faixa chapada -- placeholder continua legivel como
     placeholder. */
  .esqueleto { animation: none; background: var(--borda); }

  /* O unico deslocamento espacial do portal. A borda que acende no hover ja
     diz que o cartao respondeu; o 1px para cima e enfeite. */
  .cartao.atalho:hover { transform: none; }
}

/* ---------- Conversa ---------- */

/* A conversa ocupa a altura que sobra, em vez de uma fracao fixa da viewport.
   O encadeamento de flex vai de .tela-conversa ate .conversa, e cada elo
   precisa de min-height:0 -- sem isso o item flex se recusa a encolher abaixo
   do conteudo e a barra de rolagem nunca aparece no lugar certo. */
.tela-conversa {
  display: flex; flex-direction: column;
  /* 2.25rem de padding no topo e 4rem embaixo, definidos em .conteudo */
  height: calc(100vh - 6.25rem);
  min-height: 26rem;
}
.tela-conversa > .painel {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.conversa { display: grid; gap: .6rem; padding: 1.4rem; background: var(--fundo);
  overflow-y: auto; align-content: start; }
.tela-conversa .conversa { flex: 1; min-height: 0; }

/* Barra de resposta: separada do historico por uma borda, nao por sombra,
   coerente com o resto do sistema. */
.responder { display: flex; gap: .6rem; padding: .9rem 1.4rem;
  border-top: 1px solid var(--borda-forte); background: var(--superficie); }
.responder input[type=text] { flex: 1; }
.responder button { flex: none; }
.responder.bloqueada { align-items: flex-start; gap: .55rem;
  color: var(--tinta-media); font-size: .82rem; line-height: 1.45; }
.responder.bloqueada svg { flex: none; margin-top: .1rem; }
.balao { max-width: 65%; padding: .6rem .85rem; border-radius: var(--r); font-size: .875rem; box-shadow: var(--sombra-1); }
.balao.entrada-msg { background: var(--superficie); justify-self: start; border-bottom-left-radius: 2px; }
.balao.saida-msg   { background: var(--marca-100); justify-self: end; border-bottom-right-radius: 2px; }
/* Marcador de variavel na previa do template. O amarelo padrao do navegador
   nao existe na paleta; usa o verde de balao, que ja significa "conteudo". */
mark { background: var(--marca-100); color: var(--tinta-forte);
  padding: 0 .2rem; border-radius: 3px; font-weight: 600; }

.balao.falha { background: var(--erro-bg); color: var(--erro); }

/* ---------- Aprovacoes ---------- */
.solicitacao { padding: 1rem 0; border-bottom: 1px solid var(--borda); }
.solicitacao:last-child { border-bottom: none; padding-bottom: 0; }
.solicitacao:first-child { padding-top: 0; }
.solicitacao .cabeca { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem; }
.solicitacao .motivo { margin: .6rem 0 0; font-size: .86rem; color: var(--tinta-media);
  background: var(--fundo); padding: .6rem .8rem; border-radius: var(--r-sm); }
.solicitacao .acoes { display: flex; gap: .6rem; margin-top: .9rem; }
.pessoa { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.contador-menu { font-size: .72rem; color: var(--aviso); padding: 0 .55rem .4rem 2.4rem; }
h2 { font-size: 1rem; font-weight: 650; margin: 0 0 .7rem; }

/* ---------- Anexos ---------- */
.anexo { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.anexo .legenda { font-size: .72rem; }
.anexo .visor { flex-basis: 100%; }
.anexo > img, .anexo .visor img, .anexo .visor video {
  max-width: 100%; max-height: 320px; border-radius: var(--r-sm); display: block;
  cursor: zoom-in; background: var(--borda);
}
.anexo > audio { width: 100%; min-width: 220px; }
.anexo .visor audio { width: 100%; margin-top: .3rem; }
.anexo.recusado { color: var(--aviso); font-size: .78rem; align-items: flex-start; }
.anexo.recusado svg { flex: none; }
.btn.pequeno { padding: .28rem .85rem; font-size: .76rem; }
.transcricao { margin-top: .5rem; padding: .5rem .7rem; font-size: .8rem;
  background: var(--fundo); border-radius: var(--r-sm); line-height: 1.45; }
.transcricao b { display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-fraca); margin-bottom: .15rem; }
.transcricao.falhou { color: var(--tinta-media); font-style: italic; }
/* Provisorio que demorou demais: recuado, para nao competir com o que ja
   temos confirmado, mas ainda legivel. */
.balao.incerta { opacity: .72; }
.balao.falha em { font-style: normal; font-weight: 600; }
.balao .meta { font-size: .71rem; color: var(--tinta-fraca); margin-top: .35rem; display: flex; gap: .4rem; align-items: center; }

/* ---------- Responsivo ---------- */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--borda); }
  .menu { display: flex; flex-wrap: wrap; gap: .3rem; }
  .grupo-menu { display: none; }
  .conteudo { padding: 1.35rem 1.1rem 3rem; }
  /* No celular a lateral vira uma faixa no topo e deixa de ser fixa, entao
     100vh passaria do fim da pagina. Volta a altura natural. */
  .tela-conversa { height: auto; min-height: 0; }
  .tela-conversa .conversa { max-height: 62vh; }
  .balao { max-width: 85%; }
}

/* --------------------------------------------------------------------------
   Pesquisa
   -------------------------------------------------------------------------- */

.paginacao { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .8rem 1.15rem; border-top: 1px solid var(--borda);
  flex-wrap: wrap; }
.paginacao .botoes { display: flex; align-items: center; gap: .6rem; }
.paginacao .legenda { font-variant-numeric: tabular-nums; }

.estimativa { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--tinta-media); padding: .55rem .8rem;
  background: var(--fundo); border-radius: var(--r); }
.estimativa .sep { color: var(--tinta-fraca); }
.estimativa .alerta { color: var(--aviso); font-weight: 600; }

.filtros-pesquisa { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.filtros-pesquisa select,
.filtros-pesquisa input[type="date"] {
  padding: .35rem .6rem; font-size: .82rem; border-radius: .5rem;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--tinta);
  width: auto; margin: 0;
}
.filtros-pesquisa label {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--tinta-media); margin: 0;
}

.cartao.destaque { border-color: var(--marca-500); }
.cartao.alerta .numero { color: var(--erro); }

/* Barra em CSS puro: uma biblioteca de grafico para desenhar retangulo
   proporcional seria mais peso de download do que o painel inteiro. */
/* Divisor entre o que se LE e o que se INVESTIGA.
   Acima dele: placar, ressalva, funil, sentimento -- respondem "como foi".
   Abaixo: falhas, distribuicoes, tabela, analise -- respondem "por que".
   Sem ele, sete paineis identicos nao diziam por onde comecar. */
.secao-detalhe {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-fraca);
  margin: 2.2rem 0 .9rem; padding-top: 1.1rem;
  border-top: 1px solid var(--borda-forte);
}

/* Placar da pesquisa -- os dois numeros que saem desta tela */
/* Duas colunas: os numeros ocupam so o que precisam, e o grafico fica com
   TODO o resto.
   Antes eram colunas iguais de 11rem por auto-fit, com o grafico numa linha
   propria embaixo. Num painel largo davam quatro colunas, os dois numeros
   ocupavam duas e as outras duas ficavam em branco -- uma faixa morta no meio
   da tela. O grafico e a unica coisa aqui que sabe usar largura, entao e ele
   que recebe a sobra. */
.placar {
  display: grid; gap: 1.4rem 2.4rem; align-items: start;
  padding: 1.3rem 1.15rem;
  grid-template-columns: auto 1fr;
}
.placar-numeros { display: flex; gap: 2.4rem; flex-wrap: wrap; align-items: flex-end; }
/* Sem serie (recorte de uma semana so) o grafico nao existe, e reservar uma
   coluna para ele recriaria a mesma faixa vazia, so que menor. */
.placar-numeros:only-child { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .placar { grid-template-columns: 1fr; }
}
.placar-bloco .rotulo {
  font-size: .78rem; color: var(--tinta-media); text-transform: uppercase;
  letter-spacing: .04em;
}
.placar-bloco .valor {
  font-size: 2.6rem; font-weight: 700; line-height: 1.05; color: var(--tinta-forte);
  font-variant-numeric: tabular-nums; margin-top: .15rem;
}
.placar-bloco .valor span {
  font-size: 1.1rem; font-weight: 400; color: var(--tinta-fraca);
}
.placar-bloco.destaque .valor { color: var(--ok); }
.placar-bloco .nota { font-size: .8rem; color: var(--tinta-media); margin-top: .3rem; }

/* Ocupa a segunda coluna inteira. O que nao pode voltar a acontecer e o
   grafico dividir o painel em partes iguais com os numeros: "24/08 a 30/08"
   nao cabe num terco de painel, e cinco semanas espremidas ali nao sao um
   grafico. Por isso `auto 1fr` e nao colunas iguais. */
.placar-serie { min-width: 0; }
.placar-serie .rotulo {
  font-size: .78rem; color: var(--tinta-media); margin-bottom: .4rem;
}
.serie { display: flex; align-items: stretch; gap: .45rem; height: 6.4rem; }
/* O valor tem linha propria, e a barra cresce dentro do que sobra. Sem isso
   uma barra de 100% empurraria o numero para fora do grafico -- justamente na
   semana mais alta, que e a que alguem quer ler. */
.serie-col { flex: 1; display: flex; flex-direction: column; min-width: 3.2rem; }
.serie-valor {
  font-size: .78rem; font-weight: 700; color: var(--tinta-forte);
  text-align: center; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.serie-trilho {
  flex: 1; display: flex; align-items: flex-end;
  border-bottom: 1px solid var(--borda-forte);
}
.serie-barra {
  width: 100%; background: var(--marca-500); border-radius: .25rem .25rem 0 0;
}
/* Semana incompleta: listrada, e nao apenas mais clara. Clara demais leria
   como "pior", e o valor nao e pior -- e provisorio. A listra nao se parece
   com nenhum outro estado da tela. */
.serie-barra.parcial {
  background: repeating-linear-gradient(45deg,
    var(--marca-500) 0 5px, var(--marca-100) 5px 10px);
}
.serie-valor.parcial { color: var(--tinta-media); }
.serie-n .parcial {
  color: var(--aviso); background: var(--aviso-bg);
  border-radius: var(--r-sm); padding: 0 .28rem; white-space: nowrap;
}
/* --tinta-fraca dava 3,41:1 sobre branco quando era #8b8b8b -- abaixo do piso
   para texto pequeno. E este e o rotulo que diz de QUAL semana e a barra: o
   texto mais importante do grafico era o menos legivel dele. */
.serie-pe {
  font-size: .68rem; color: var(--tinta-media); text-align: center;
  margin-top: .25rem; line-height: 1.25;
}
/* A contagem de respostas qualifica a media logo acima ("5,0" de UMA resposta
   nao vale o que parece). Se ela e a ressalva, precisa ser legivel. */
.serie-n {
  font-size: .66rem; color: var(--tinta-media); text-align: center;
  white-space: nowrap;
}

/* Sentimento: barra empilhada, porque as partes somam um todo */
.sent-barra {
  display: flex; height: 1.6rem; border-radius: .4rem; overflow: hidden;
  background: var(--fundo); margin-bottom: .7rem;
}
.sent-fatia { min-width: 3px; }
.sent-fatia.positivo { background: var(--ok); }
.sent-fatia.neutro   { background: var(--tinta-fraca); }
.sent-fatia.misto    { background: var(--misto); }
.sent-fatia.negativo { background: var(--erro); }

.sent-chips { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .9rem; }
.sent-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--tinta-media);
}
.sent-chip i { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.sent-chip i.positivo { background: var(--ok); }
.sent-chip i.neutro   { background: var(--tinta-fraca); }
.sent-chip i.misto    { background: var(--misto); }
.sent-chip i.negativo { background: var(--erro); }
.sent-chip strong { color: var(--tinta-forte); font-variant-numeric: tabular-nums; }
.sent-chip span { color: var(--tinta-fraca); }

/* Funil: um denominador so, escrito, e a perda de cada degrau com nome */
.funil-etapa {
  display: grid; align-items: center; gap: .6rem; padding: .3rem 0;
  grid-template-columns: 7.5rem 1fr 5rem 11rem;
}
.funil-rotulo { font-size: .86rem; color: var(--tinta-forte); }
.funil-trilho { background: var(--fundo); border-radius: .4rem; height: 1.1rem; overflow: hidden; }
.funil-cheia { background: var(--marca-500); height: 100%; border-radius: .4rem; min-width: 2px; }
.funil-num {
  font-size: .95rem; font-weight: 620; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--tinta-forte);
}
.funil-num span { font-size: .78rem; font-weight: 400; color: var(--tinta-fraca); margin-left: .35rem; }
.funil-perda { font-size: .78rem; color: var(--erro); }

@media (max-width: 700px) {
  .funil-etapa { grid-template-columns: 6rem 1fr 4rem; }
  .funil-perda { grid-column: 2 / -1; }
}

/* Valor de variavel numa celula. `td` e nowrap por padrao no portal, e um
   endereco normalizado em sete linhas viraria uma linha unica gigantesca --
   desfazendo exatamente o que a IA organizou. */
.valor-var {
  white-space: pre-wrap; max-width: 22rem; max-height: 7rem; overflow: auto;
  font-size: .84rem; line-height: 1.45;
}

.barras { display: grid; gap: .45rem; }
/* `9rem` fixo estourava quando o rotulo era maior: "5 - Muito satisfeito"
   vazava para fora do painel pela esquerda e o comeco do texto sumia. Com
   minmax(0, 9rem) a coluna encolhe, e o ellipsis do rotulo passa a funcionar
   de verdade em vez de so estar declarado. */
.barra { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 4.5rem;
         gap: .7rem; align-items: center; }
.barra-rotulo {
  font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-trilho { background: var(--fundo); border-radius: .4rem; height: .85rem; overflow: hidden; }
.barra-cheia { background: var(--marca-500); height: 100%; border-radius: .4rem; min-width: 2px; }
.barra-num { font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }
.barra-num span { color: var(--tinta-fraca); margin-left: .35rem; }


.analise-resposta {
  margin-top: .9rem; padding: .9rem 1rem; border-radius: .6rem;
  background: var(--fundo); font-size: .9rem; line-height: 1.55;
}

/* Duas acoes por linha na tabela de templates. Sem o flex elas quebram para
   linhas separadas e a coluna estica a tabela inteira. */
td.acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Botao de perguntar com o seletor de modelo ao lado */
.linha-pergunta { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.escolha-modelo {
  display: flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .8rem; color: var(--tinta-media);
}
.escolha-modelo select {
  width: auto; margin: 0; padding: .3rem .5rem; font-size: .8rem;
  border-radius: .5rem; border: 1px solid var(--borda-forte);
}

/* Motivo da recusa da Meta, embaixo da etiqueta de status. Cor de alerta e
   nao de erro: o template nao quebrou, ele precisa de conserto. */
.motivo-recusa { color: var(--aviso); max-width: 22rem; line-height: 1.35;
  margin-top: .25rem; }

/* ===========================================================================
   Alvos de toque
   ---------------------------------------------------------------------------
   `pointer: coarse` e nao largura de viewport, de proposito. Largura nao diz
   como a pessoa aponta: um notebook com tela sensivel em 1440px continua
   precisando de alvo grande, e uma janela estreita no desktop com mouse nao
   precisa. Medir a largura acertaria os dois casos pelo motivo errado.
   Isso tambem protege a DENSIDADE, que e valor declarado deste painel: no
   desktop com mouse nada muda, e a tabela continua cabendo na tela.
   Medido antes (altura aproximada, base 14px):
     .btn 34px · .menu a 31px · .icone-btn 29px · td 39px
     .btn.pequeno 23px  <- abaixo do minimo de 24px da WCAG 2.2 AA
   =========================================================================== */
@media (pointer: coarse) {
  /* 44px e a recomendacao de conforto; a WCAG 2.2 AA exige 24. Ficamos nos 44
     porque o portal e operado em pe, no galpao, com uma mao. */
  .btn, .btn.pequeno { min-height: 44px; }
  .menu a { min-height: 44px; }
  .radio-cartao { min-height: 44px; }
  .icone-btn { min-width: 44px; min-height: 44px; }

  /* Linha de tabela e alvo: `tbody tr.clicavel` abre a conversa. min-height nao
     vale em celula, entao o tamanho vem do padding. */
  tbody tr.clicavel td { padding-top: 1rem; padding-bottom: 1rem; }

  /* 16px NAO e escolha estetica: abaixo disso o Safari do iOS da zoom ao focar
     o campo, empurrando o layout inteiro. Acontecia em todo filtro de data
     desta tela, que estava em 11,5px. */
  input, select, textarea,
  .filtros-pesquisa select, .filtros-pesquisa input[type="date"] {
    min-height: 44px; font-size: 16px;
  }

  /* Alvo grande encostado em alvo grande volta a errar o toque. */
  .filtros-pesquisa { gap: .75rem; }
  .paginacao .botoes { gap: .85rem; }
}

/* ---------- Bots ---------- */

/* Um arquivo da base: a marcacao e a descricao na mesma linha, porque sao uma
   decisao so -- marcar sem descrever deixa o classificador sem indice. */
.linha-arquivo {
  display: grid;
  /* Terceira coluna para o botao de ler. `auto` e nao largura fixa: o rotulo
     alterna entre "ver" e "fechar", e uma largura fixa cortaria o segundo. */
  grid-template-columns: minmax(11rem, 16rem) 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--borda);
}
.linha-arquivo:last-of-type { border-bottom: none; }
.linha-arquivo .escolha { margin: 0; }
.arq-descricao { width: 100%; }
.arq-ler { padding: .35rem .9rem; font-size: .78rem; }

/* O conteudo do arquivo, aberto embaixo da linha. Fundo creme para separar do
   painel branco sem precisar de borda em volta. */
.conteudo-arquivo {
  background: var(--fundo); border-radius: var(--r-sm);
  padding: .8rem 1rem; margin: 0 0 .6rem;
}
.cabecalho-arquivo { margin-bottom: .5rem; }
/* Texto CRU, com a quebra de linha preservada: e exatamente isto que vai para
   o modelo. Renderizar o markdown mostraria algo diferente do que o bot le,
   que e justamente o que se veio conferir aqui.

   `pre-wrap` e nao `pre`: linha longa de markdown nao deve empurrar o painel
   inteiro para o lado. O teto de altura mantem a lista navegavel -- sem ele,
   um arquivo de 200 KB enterraria os outros quatro. */
.texto-arquivo {
  margin: 0; max-height: 22rem; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .78rem; line-height: 1.55; color: var(--tinta-media);
}

/* Uma sugestao do assistente. A borda esquerda colorida carrega a severidade,
   e o texto repete o sinal -- cor sozinha nao informa quem nao a distingue. */
.conselho {
  border-left: 3px solid var(--borda-forte);
  padding: .1rem 0 .1rem .85rem;
  margin-bottom: 1.1rem;
}
.conselho.alta  { border-left-color: var(--erro); }
.conselho.media { border-left-color: var(--aviso); }
.conselho.baixa { border-left-color: var(--ok); }
.conselho strong { display: block; margin-bottom: .15rem; }
.conselho .legenda { margin: 0 0 .5rem; }

/* O texto proposto, antes de a pessoa decidir se aplica. Recuado e em fundo
   diferente para nao ser confundido com algo que ja esta valendo. */
.sugestao {
  background: var(--fundo);
  border-radius: var(--r);
  padding: .5rem .7rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  overflow-x: auto;
}
.sugestao code { background: none; padding: 0; white-space: pre-wrap; }

@media (max-width: 40rem) {
  /* Numa coluna: em tela estreita, dois campos lado a lado deixam os dois
     pequenos demais para escrever uma descricao util. */
  .linha-arquivo { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---------- Agenda ---------- */
/* Linha de cadastro rapido: nome, agenda, usuario e o botao. Em telas
   estreitas ela empilha, porque tres campos lado a lado em 400px viram tres
   campos ilegiveis. */
.linha-prof, .linha-servico {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.linha-prof input, .linha-prof select { flex: 1 1 12rem; width: auto; }
.linha-servico input { flex: 1 1 8rem; width: auto; }
.linha-servico input:first-child { flex: 2 1 14rem; }

/* O e-mail da conta de servico com o botao de copiar ao lado. Ele e longo e
   ninguem digita a mao sem errar -- copiar precisa estar junto do texto. */
.linha-copiar {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin: .5rem 0;
}
.linha-copiar code { word-break: break-all; }

/* Profissional desativado continua na lista, porque responde pelo historico.
   Esmaecido para nao competir com quem esta atendendo hoje. */
tr.inativa { opacity: .55; }

/* Resposta do teste de agenda, embaixo do botao. Estreita de proposito: a
   mensagem de erro do Google e longa e nao pode esticar a coluna. */
.ag-saida:not(:empty) { margin-top: .5rem; max-width: 26rem; }
.ag-saida .caixa { font-size: .78rem; padding: .5rem .7rem; }

/* ---------- Editor de expediente ---------- */
/* Uma linha por dia da semana. Colunas fixas para os horarios alinharem
   verticalmente entre os dias -- desalinhados, comparar sabado com terca vira
   trabalho de leitura. */
.edicao-prof { padding: .3rem 0 .2rem; }
.linha-dia {
  display: grid;
  grid-template-columns: 6.5rem auto auto;
  gap: .7rem; align-items: center;
  padding: .3rem 0;
}
.linha-dia .escolha { margin: 0; }
.de-ate { display: inline-flex; align-items: center; gap: .4rem; }
.de-ate input[type=time] { width: auto; padding: .35rem .6rem; }
.de-ate .ate { color: var(--tinta-fraca); font-size: .78rem; }
/* A pausa recua: ela e opcional, e competir de igual para igual com o
   expediente faria parecer obrigatoria. */
.linha-dia .pausa { opacity: .75; }
.linha-dia .pausa .legenda { margin-right: .1rem; }

/* Dia desmarcado: os horarios continuam visiveis mas apagados. Escondidos,
   remarcar o dia pareceria perder o que estava preenchido. */
.linha-dia:has(.dia-ativo:not(:checked)) .de-ate { opacity: .4; }

.linha-edicao > td { background: var(--fundo); }

/* Bloqueio: profissional, periodo e motivo numa linha que empilha no
   telefone. As datas ficam juntas num grupo so, porque "de" separado de "ate"
   por uma quebra de linha le como dois campos sem relacao. */
.linha-bloqueio {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
}
.linha-bloqueio select { flex: 1 1 10rem; width: auto; }
.linha-bloqueio .bl-motivo { flex: 2 1 12rem; width: auto; }
.linha-bloqueio .de-ate { flex-wrap: wrap; }
.de-ate input[type=date] { width: auto; padding: .35rem .6rem; }
.lista-conflitos { margin: .5rem 0 .8rem; padding-left: 1.1rem; }
.lista-conflitos li { margin: .15rem 0; }

/* ---------- Conectar WhatsApp ---------- */
/* As etapas da conexao em lista numerada: quando algo para no meio, a pessoa
   ve ONDE parou, e o suporte entende pelo print. */
.caminhos-conexao { margin: .6rem 0 .9rem; padding-left: 1.1rem; }
.caminhos-conexao li { margin: .35rem 0; }
.etapas-conexao { margin: 0; padding-left: 1.3rem; }
.etapas-conexao li { margin: .35rem 0; }
.etapas-conexao li > span:first-child { margin-right: .5rem; }
.etapas-conexao .etapa-pendente,
.etapas-conexao .etapa-pulada { color: var(--tinta-fraca); }
.campo-pin { display: block; margin-top: .9rem; font-size: .85rem; }
.campo-pin input { display: block; width: 8rem; margin-top: .3rem;
  letter-spacing: .25em; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  /* Empilha: tres grupos de horario lado a lado nao cabem em telefone, e o
     que sobra e um campo de 30px que ninguem acerta. */
  .linha-dia { grid-template-columns: 1fr; gap: .35rem; }
  .linha-dia .pausa { padding-left: 1.6rem; }
}

/* Localizacao recebida, dentro do balao. Link e nao mapa embutido: mapa
   embutido exige chave de API do Google e cobra por carregamento -- um balao
   de conversa que custa dinheiro a cada rolagem e uma armadilha de fatura. */
.balao-local {
  margin-top: .4rem; padding: .5rem .7rem;
  background: var(--fundo); border-radius: var(--r-sm);
  font-size: .82rem;
}
.balao-local code { font-size: .72rem; margin-left: .4rem; }

/* Plataforma: fatura aberta dentro da tabela de cobranca. Duas colunas no
   largo (fatura e custo lado a lado, que e a comparacao que interessa), uma no
   estreito. */
.duas-colunas { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
.duas-colunas table { background: var(--superficie); }
tr.linha-total td { border-top: 2px solid var(--borda-forte); }
.campo-tabela { flex: 1 1 16rem; font-weight: 600; }
.campo-tabela input { margin-top: .35rem; }
#tp-planos input { margin: 0; min-width: 6rem; }
#tp-planos input[readonly] { background: var(--fundo); color: var(--tinta-media); }
.troca-plano { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .8rem; }
.troca-plano select { flex: 1 1 18rem; width: auto; }
.troca-plano .tp-troca-saida { flex-basis: 100%; }
.historico-planos { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.historico-planos li { margin-bottom: .25rem; }
.tabela-faixas td { vertical-align: middle; }
.tabela-faixas .fx-intervalo { white-space: nowrap; }
.tabela-faixas .fx-de { display: inline-block; min-width: 7.5rem; color: var(--tinta-media); }
.tabela-faixas input { display: inline-block; width: 9rem; margin: 0; }
.tabela-faixas td.num input { width: 7rem; }
.simulador { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem;
  padding: .8rem 1rem; background: var(--fundo); border-radius: var(--r); font-size: .88rem; }
.simulador input { width: 8rem; margin: 0; }
.simulador select { width: auto; margin: 0; }
#sim-saida { flex-basis: 100%; }
.plano-editor { border: 1px solid var(--borda-forte); border-radius: var(--r); margin-bottom: .7rem;
  background: var(--superficie); }
.plano-editor > summary { cursor: pointer; padding: .85rem 1.1rem; display: flex; flex-wrap: wrap; gap: .35rem .8rem;
  align-items: baseline; }
.plano-editor[open] > summary { border-bottom: 1px solid var(--borda); }
.plano-corpo { padding: 1rem 1.1rem 1.1rem; }
.grade-plano { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.grade-plano label { margin: 0; }
.grade-plano input { margin-top: .3rem; }
.grade-plano input[readonly] { background: var(--fundo); color: var(--tinta-media); }
.gerador { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: .88rem; }
.gerador input { width: 6rem; margin: 0; }
.linha-passagem { display: grid; gap: .5rem; grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 3fr) auto;
  align-items: center; margin-bottom: .6rem; }
.linha-passagem input, .linha-passagem select { margin: 0; }
@media (max-width: 760px) { .linha-passagem { grid-template-columns: 1fr; } }
.arquivos-de-outros { margin-top: .9rem; border-top: 1px solid var(--borda); padding-top: .6rem; }
.arquivos-de-outros > summary { cursor: pointer; font-weight: 600; font-size: .88rem; padding: .3rem 0; }
.arquivos-de-outros[open] > summary { margin-bottom: .4rem; }

/* Foto do perfil do numero, em Administracao > WhatsApp. Redonda como o
   WhatsApp mostra, para a pessoa ver o recorte antes de trocar. */
.foto-perfil { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.foto-perfil-atual { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--borda);
  display: grid; place-items: center; text-align: center; font-size: .8rem; }
.foto-perfil-atual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .foto-perfil { grid-template-columns: 1fr; } }

/* Modelos de IA autorizados, em Usuarios e acessos. */
.modelos-autorizados { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.modelo-autorizado { display: flex; gap: .55rem; align-items: flex-start; }
.modelo-autorizado .legenda { display: block; }
.radio-cartao .nota-ia { display: block; margin-top: .3rem; font-style: normal; }

/* Fatura da conta. */
tr.selecionada td { background: var(--borda); }
.cartao-fatura { margin-bottom: 1.5rem; display: block; max-width: 28rem; }

/* ---------- Assistente de configuracao ---------- */
/* Fora da casca: fixo no canto, por cima de qualquer tela. */
.assistente-abrir {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--tinta-forte); color: var(--superficie); border: 0; border-radius: var(--r-pilula);
  padding: .7rem 1.1rem; font: inherit; font-weight: 700; cursor: pointer;
}
.assistente-abrir:hover { filter: brightness(1.15); }
.assistente-painel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(30rem, 100vw); display: flex; flex-direction: column;
  background: var(--superficie); border-left: 1px solid var(--borda-forte);
}
.assistente-topo {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.1rem; border-bottom: 1px solid var(--borda);
}
.assistente-topo .legenda { display: block; margin-top: .15rem; }
.assistente-topo .icone-btn { font-size: 1.4rem; line-height: 1; }
.assistente-mensagens { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: grid; gap: .8rem; align-content: start; }
.assistente-msg { border-radius: var(--r-sm); padding: .65rem .8rem; line-height: 1.45; }
.assistente-msg.pessoa { background: var(--ok-bg); justify-self: end; max-width: 85%; white-space: pre-wrap; }
.assistente-msg.assistente { background: var(--fundo); }
.assistente-msg.erro { background: var(--erro-bg); color: var(--erro); }
.assistente-pensando { color: var(--tinta-media); font-style: italic; margin: 0; }
.assistente-acao {
  margin-top: .6rem; padding: .65rem .75rem; background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--r-sm); display: grid; gap: .25rem;
}
.assistente-acao .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-media); }
.assistente-acao.aplicada { border-color: var(--ok); }
.assistente-acao pre { max-height: 14rem; overflow: auto; white-space: pre-wrap; font-size: .78rem; margin: .3rem 0 0; }
.assistente-acao-rodape { display: flex; gap: .5rem; align-items: center; margin-top: .2rem; }
.assistente-problema { color: var(--erro); font-size: .85rem; }
.assistente-aplicar-todas { margin-top: .7rem; }
.assistente-form { display: grid; gap: .5rem; padding: .9rem 1.1rem; border-top: 1px solid var(--borda); }
.assistente-form textarea { resize: vertical; margin: 0; }
@media (max-width: 560px) { .assistente-abrir span { display: none; } }