/* Elementos de marca, ajustes de paleta e tipografia. Carregado depois de portal.css. */
/* =====================================================================
   Elementos da marca M&O
   ===================================================================== */
.lateral { background: linear-gradient(180deg, var(--noite) 0%, var(--noite-2) 100%); border-right: 1px solid var(--lateral-linha); }
.marca-logo { display: block; margin: 0 auto var(--e5); text-align: center; }
.marca-logo img { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 0 18px rgba(0, 144, 240, .25)); }
.nav a[aria-current="page"] { background: var(--lateral-real); border-left-color: var(--ciano); }
.nav a:hover { background: var(--lateral-real); }
.nav .contagem { background: var(--ciano); color: var(--lateral); font-weight: 700; }
.nav-grupo .rotulo { color: var(--ciano); }
.busca-lateral input { background: var(--lateral-real); border-color: var(--lateral-linha); }
.lateral .empresa-ativa { border-color: var(--lateral-linha); background: rgba(0, 144, 240, .08); }
.lateral .empresa-ativa small { color: var(--ciano); }

h1, h2 { font-family: var(--titulo); font-weight: 600; letter-spacing: 0; }
h1 { font-weight: 700; }
.sobretitulo { color: var(--acento); letter-spacing: .18em; }
.card-valor, .destaque, .contador-nome, .agenda .dia strong, .resumo-nota .total { font-family: var(--titulo); }
.card-valor { font-weight: 700; }

.botao.primario { background: linear-gradient(135deg, #004c9c 0%, #005fc2 100%); border-color: transparent; box-shadow: var(--brilho); }
.botao.primario:hover { filter: brightness(1.08); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-tema="claro"])) .botao.primario { background: linear-gradient(135deg, var(--eletrico) 0%, var(--ciano) 100%); color: var(--noite); }
}
/* mesma coisa quando a pessoa escolhe a tela escura no botao do topo */
  :where(:root[data-tema="escuro"]) .botao.primario { background: linear-gradient(135deg, var(--eletrico) 0%, var(--ciano) 100%); color: var(--noite); }
.selo, .semaforo { border-radius: 999px; padding: 2px var(--e3); }
.painel-destaque { border-top: 0; position: relative; overflow: hidden; }
.painel-destaque::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); }
.cabecalho-pagina { border-bottom: 1px solid var(--regua); position: relative; }
.cabecalho-pagina::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 3px; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); border-radius: 999px; }
.tabela th { border-bottom: 2px solid var(--regua-forte); }
.tabela tfoot td { border-top: 2px solid var(--regua-forte); }
.grafico .barra-a { fill: url(#grad-marca); }
.legenda .la { background: linear-gradient(180deg, var(--ciano), var(--eletrico)); }
.medidor span { background: linear-gradient(90deg, var(--eletrico), var(--ciano)); }
.calendario .tem { background: var(--acento-suave); border-color: var(--eletrico); }
.calendario .tem b { color: var(--texto); }
.agenda .dia { border-color: var(--regua-forte); }

/* faixa de boas-vindas (cartaz da marca) */
.faixa-marca {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: end;
  background: radial-gradient(120% 140% at 85% 0%, #003a7a 0%, var(--noite-2) 45%, var(--noite) 100%);
  color: var(--lateral-texto); border-radius: var(--raio); padding: var(--e6) var(--e6) 0; margin-bottom: var(--e5); box-shadow: var(--sombra-2);
  min-height: 220px;
}
.faixa-marca::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url("/static/marca/barras.svg") right 18% bottom / 520px auto no-repeat;
}
.faixa-marca > * { position: relative; }
.faixa-marca .texto-marca { padding-bottom: var(--e6); }
.faixa-marca h1 { color: #cfe0f0; font-size: var(--t-gg); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; max-width: 26ch; }
.faixa-marca h1 em { font-style: normal; color: var(--ciano); text-shadow: 0 0 22px rgba(0, 200, 240, .55); }
.faixa-marca .sub { color: var(--lateral-2); margin-top: var(--e3); }
.faixa-marca .sobretitulo { color: var(--ciano); }
.faixa-marca .acoes { margin-top: var(--e5); }
.faixa-marca .botao:not(.primario) { background: rgba(228, 244, 255, .08); color: var(--lateral-texto); border-color: rgba(228, 244, 255, .3); }
.faixa-marca .botao:not(.primario):hover { background: rgba(228, 244, 255, .16); }
.faixa-marca .botao.primario { background: linear-gradient(135deg, var(--eletrico), var(--ciano)); color: var(--noite); }
.faixa-marca .regua-ciano { width: 72px; height: 3px; background: var(--ciano); border-radius: 999px; margin: var(--e3) 0; }
.personagem { align-self: end; max-height: 260px; width: auto; display: block; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
@media (max-width: 860px) { .faixa-marca { grid-template-columns: 1fr; padding: var(--e5) var(--e5) 0; } .personagem { max-height: 200px; justify-self: end; } .faixa-marca h1 { font-size: var(--t-gg); } }

/* tela de acesso com a marca */
.acesso-capa { background: radial-gradient(120% 120% at 80% 10%, #003a7a 0%, var(--noite-2) 45%, var(--noite) 100%); position: relative; overflow: hidden; }
.acesso-capa::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: url("/static/marca/barras.svg") right -40px bottom / 560px auto no-repeat; opacity: .35; pointer-events: none; }
.acesso-capa > * { position: relative; z-index: 1; }
.acesso-capa h1 { color: var(--lateral-texto); text-transform: uppercase; max-width: 16ch; }
.acesso-capa h1 em { font-style: normal; color: var(--ciano); text-shadow: 0 0 22px rgba(0, 200, 240, .55); }
.acesso-capa .logo-capa { width: min(300px, 70%); height: auto; filter: drop-shadow(0 0 24px rgba(0, 144, 240, .35)); }
.acesso-capa li svg { color: var(--ciano); }
.acesso-capa .personagem { position: absolute; right: 0; bottom: 0; max-height: 62%; z-index: 0; opacity: .95; }

.medidor-svg { width: 120px; height: 8px; display: block; }
.medidor-svg .trilho { fill: var(--fundo-2); }
.medidor-svg .nivel { fill: var(--eletrico); }
.medidor-svg.medio .nivel { fill: var(--atencao); }
.medidor-svg.baixo .nivel { fill: var(--erro); }

/* o fundo azul-noite da imagem da logo some sobre fundo escuro: so o brilho fica */
.marca-logo img, .acesso-capa .logo-capa { mix-blend-mode: screen; }

/* um peso forte so (600) e micro-rotulos sempre em 700: menos combinacoes de fonte */
strong, b, th { font-weight: 600; }
.selo, .semaforo, .card-rotulo, .rotulo, .sobretitulo, .tabela th, .contador, .nav .contagem { font-weight: 700; }

.filtro label.check { display: flex; flex-direction: row; align-items: center; gap: var(--e2); text-transform: none; letter-spacing: 0; font-size: var(--t-p); min-height: 40px; }
.zona-envio input[type="file"] { max-width: 420px; margin: var(--e2) auto 0; background: var(--fundo-1); }

details.painel > summary h2 { display: inline-flex; gap: var(--e2); align-items: center; margin: 0; color: var(--acento); }
details.painel[open] > summary { margin-bottom: var(--e4); }
.formulario.campos-3 > button, .formulario.campos-3 > p { grid-column: 1 / -1; justify-self: start; }

.atalhos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }

/* =====================================================================
   Paleta enxuta de texto: tinta, tinta-2 e acento (e o gelo/ciano da marca
   sobre o escuro). Estado NAO muda a cor do texto: o significado vem do fundo,
   da borda e do icone colorido + a palavra. Isso tambem ajuda o daltonico.
   ===================================================================== */
.selo, .semaforo, .flash, .card-alerta .card-valor, .card-alerta .card-rotulo,
.observacao, .agenda .atrasado .dia, .agenda .atrasado .dia small,
.calendario .vencido b, .barra-lote, .faixa-homologacao, .botao.perigo { color: var(--texto); }
.selo-ok, .semaforo-verde { border-color: var(--ok); }
.selo-aviso, .semaforo-amarelo { border-color: var(--atencao); }
.selo-erro, .semaforo-vermelho { border-color: var(--erro); }
.selo-ok svg, .flash-ok svg { color: var(--ok); }
.selo-aviso svg, .faixa-homologacao svg { color: var(--atencao); }
.selo-erro svg, .flash-erro svg, .card-alerta svg, .observacao svg, .agenda .atrasado svg { color: var(--erro); }
.semaforo-verde::before { background: var(--ok); }
.semaforo-amarelo::before { background: var(--atencao); }
.semaforo-vermelho::before { background: var(--erro); }
.flash-ok { border-color: var(--ok); }
.flash-erro { border-color: var(--erro); }
.flash-aviso { border-color: var(--atencao); }
.botao.perigo { border-color: var(--erro); border-left-width: 4px; }
.agenda .atrasado .dia { border-width: 2px; }

/* superficie escura: gelo para tudo, ciano para o destaque */
.lateral, .lateral a, .lateral-pe .usuario, .lateral .empresa-ativa, .busca-lateral input,
.faixa-marca .sub, .acesso-capa p, .marca-nome small { color: var(--lateral-texto); }
.busca-lateral input::placeholder { color: var(--lateral-texto); opacity: .7; }

/* oito combinacoes de fonte, no maximo */
.formulario label, .filtro label { font-weight: 400; }
.aviso-item small, .calendario .cab, .agenda .dia small { font-size: var(--t-micro); font-weight: 600; }
.rodape, .botao.pequeno, .legenda, .mensagem time { font-size: var(--t-p); font-weight: 600; }
.tabela.compacta td { font-size: var(--t-p); font-weight: 400; }
.botao { font-size: var(--t-base); font-weight: 600; }
.botao.pequeno { font-size: var(--t-p); min-height: 32px; }
.sub, .ajuda, .card-nota, .aviso-item span, .dados dt, .migalha, .previa { font-size: var(--t-p); font-weight: 400; }

/* fundo claro: o azul da marca fica no sublinhado, nas barras e nos botoes;
   o texto e sempre tinta (dois tons). No escuro, o ciano faz o destaque. */
@media (prefers-color-scheme: light) {
  :where(:root:not([data-tema="escuro"])) a { color: var(--texto); text-decoration-color: var(--acento); text-decoration-thickness: 2px; }
  :where(:root:not([data-tema="escuro"])) .sobretitulo, :where(:root:not([data-tema="escuro"])) .detalhe summary, :where(:root:not([data-tema="escuro"])) details.painel > summary h2, :where(:root:not([data-tema="escuro"])) .link { color: var(--texto); }
  :where(:root:not([data-tema="escuro"])) .sobretitulo { border-left: 3px solid var(--acento); padding-left: var(--e2); }
}
/* mesma coisa quando a pessoa escolhe a tela clara no botao do topo */
  :where(:root[data-tema="claro"]) a { color: var(--texto); text-decoration-color: var(--acento); text-decoration-thickness: 2px; }
  :where(:root[data-tema="claro"]) .sobretitulo, :where(:root[data-tema="claro"]) .detalhe summary, :where(:root[data-tema="claro"]) details.painel > summary h2, :where(:root[data-tema="claro"]) .link { color: var(--texto); }
  :where(:root[data-tema="claro"]) .sobretitulo { border-left: 3px solid var(--acento); padding-left: var(--e2); }
.faixa-marca .sobretitulo { border-left: 0; padding-left: 0; color: var(--ciano); }
.grafico text { font: 400 13px var(--sans); }
.calendario .d b, .calendario .tem b, .calendario .vencido b { font-size: var(--t-micro); font-weight: 700; }
.lateral-pe .usuario, .marca-nome small, .lateral .empresa-ativa small { font-weight: 700; font-size: var(--t-micro); }
/* espacamento so na escala: sem margem automatica, sem 2px */
.nav a > span:not(.contagem) { flex: 1; white-space: nowrap; }
.nav .contagem { margin-left: 0; }
.selo, .semaforo { padding: var(--e1) var(--e3); }
.mensagem time { margin-left: 0; }
.mensagem header { justify-content: space-between; }

/* ultimas fusoes de tipografia: um peso por tamanho de titulo, h3 no corpo */
.destaque, .contador-nome, .resumo-nota .total { font-weight: 700; }
h3 { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; }
code { font-family: var(--sans); letter-spacing: .02em; }
.sub strong, .ajuda strong, .migalha a, .resumo-nota .linha strong { font-weight: 400; }
.tabela tfoot td { font-weight: 600; }
.filtro label { font-weight: 700; }
.filtro label.check { font-weight: 400; font-size: var(--t-p); }

.vazio-ilustrado { display: flex; gap: var(--e5); align-items: center; }
.vazio-ilustrado img { max-height: 160px; width: auto; }

/* personagem da campanha M&O, recortado com fundo transparente.
   O braco direito sai da arte original: essa borda some em degrade. */
.faixa-marca { grid-template-columns: minmax(0, 1fr) 280px; }
.faixa-marca .personagem {
  width: 280px; height: auto; max-height: none; align-self: end; margin-top: calc(var(--e6) * -1);
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  filter: drop-shadow(0 0 24px rgba(0, 200, 240, .35));
}
.acesso-capa .personagem {
  width: min(340px, 46%); max-height: 78%; height: auto; right: 0; bottom: 0; opacity: 1; object-fit: contain; object-position: bottom right;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  filter: drop-shadow(0 0 28px rgba(0, 200, 240, .4));
}
@media (max-width: 860px) { .faixa-marca { grid-template-columns: 1fr; } .faixa-marca .personagem { display: none; } }
.vazio-ilustrado img { width: 120px; height: 120px; max-height: none; border-radius: 50%; filter: drop-shadow(0 0 16px rgba(0, 200, 240, .35)); }

/* Loja: vitrine em cartoes de mesma altura (subgrid alinha titulo, itens, preco e botao
   por linha); o formulario do pedido so abre no clique, dentro do proprio cartao. */
.vitrine-secao { margin: var(--e6) 0 var(--e5); }
.vitrine-cabeca { margin-bottom: var(--e4); }
.vitrine-cabeca h2 { margin-bottom: var(--e1); }
.vitrine-cabeca .sub { margin: 0; }
.aviso-cert { display: flex; gap: var(--e2); align-items: flex-start; margin: var(--e3) 0 0; padding: var(--e2) var(--e3); border-radius: var(--raio-p); background: var(--fundo-2); color: var(--texto-2); font-size: var(--t-p); }
.aviso-cert .ic { flex: none; margin-top: 2px; }
.aviso-cert-alerta { background: var(--atencao-f); color: var(--texto); }
.aviso-cert-alerta .ic { color: var(--atencao); }
.revisao-balancete { margin: var(--e3) 0; padding: var(--e3); border-radius: var(--raio-p); border: 1px solid var(--atencao); background: var(--atencao-f); color: var(--texto); }
.revisao-balancete form { display: inline-block; margin: var(--e2) var(--e2) 0 0; }
.vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--e4); align-items: start; }
.produto { display: flex; flex-direction: column; gap: var(--e3); height: 100%; background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); padding: var(--e4); box-shadow: var(--sombra-1); font-size: var(--t-p); min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .vitrine { align-items: stretch; }
  .produto { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--e3); height: auto; }
}
.produto-destaque { border-color: var(--eletrico); }
.produto-marca { display: block; margin-bottom: var(--e1); font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.produto h3 { margin: 0 0 var(--e1); font-size: var(--t-base); line-height: 1.3; overflow-wrap: anywhere; }
.produto-topo .sub { margin: 0; }
.produto-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); align-content: start; }
.produto-itens li { display: flex; gap: var(--e2); align-items: flex-start; color: var(--texto); }
.produto-itens .ic { flex: none; margin-top: 2px; color: var(--acento); }
.saiba-mais > summary { display: inline-flex; min-height: 24px; align-items: center; color: var(--acento); font-size: var(--t-p); }
.saiba-mais > summary::after { content: "+"; margin-left: var(--e1); }
.saiba-mais[open] > summary::after { content: "\2212"; }
.saiba-mais p { margin: var(--e2) 0 0; color: var(--texto-2); white-space: pre-line; }
.produto-valor { align-self: end; padding-top: var(--e3); border-top: 1px solid var(--regua); }
.produto-valor .ajuda { margin: var(--e1) 0 0; display: flex; gap: var(--e1); align-items: center; min-height: 1.4em; }
.produto-preco { margin: 0; font: 600 var(--t-g)/1.2 var(--titulo); color: var(--texto); }
.produto-preco small { font: 400 var(--t-p) var(--sans); color: var(--texto-2); }
.pedir { align-self: start; }
.pedir > summary.botao { display: flex; width: 100%; margin: 0; }
.pedir[open] > summary.botao { background: var(--fundo-1); border-color: var(--regua-forte); color: var(--texto); }
.produto-form { display: grid; gap: var(--e2); margin-top: var(--e3); }
.produto-form textarea { min-height: 0; }
/* Assinatura mensal (ex.: Modulo Financeiro): cartao largo antes de tudo */
.assinatura-destaque { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e5); margin: var(--e5) 0; padding: var(--e5); background: var(--fundo-1); border: 1px solid var(--eletrico); border-radius: var(--raio); box-shadow: var(--brilho); font-size: var(--t-p); }
.assinatura-destaque .selo { margin-bottom: var(--e3); }
.assinatura-destaque h2 { margin: 0 0 var(--e2); }
.assinatura-texto .sub { margin: 0 0 var(--e4); }
.assinatura-acoes { margin-top: var(--e4); }
.assinatura-inclui { padding-left: var(--e5); border-left: 1px solid var(--regua); }
.assinatura-inclui h3 { margin: 0 0 var(--e3); font-size: var(--t-p); color: var(--texto-2); }
.assinatura-inclui .saiba-mais { margin-top: var(--e4); }
@media (max-width: 720px) {
  .assinatura-destaque { grid-template-columns: 1fr; padding: var(--e4); }
  .assinatura-inclui { padding: var(--e4) 0 0; border-left: 0; border-top: 1px solid var(--regua); }
  .assinatura-acoes .botao { width: 100%; }
}
@media (max-width: 600px) { .vitrine { grid-template-columns: minmax(0, 1fr); } }
.lista-linhas li.bloco { display: block; }
.lista-linhas li.bloco form { margin-top: var(--e3); }

/* Tela de entrada: capa em duas colunas (texto | personagem em pe) e o
   formulario num cartao. Na tela larga a capa ocupa mais que a metade. */
.tela-acesso { grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr); }
.acesso-capa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  column-gap: var(--e5); padding: var(--e7) 0 0 var(--e7);
}
.acesso-capa .logo-capa { grid-column: 1; grid-row: 1; width: min(220px, 60%); }
.acesso-capa > div { grid-column: 1; grid-row: 2; align-self: center; padding-right: var(--e4); }
.acesso-capa h1 { font-size: clamp(var(--t-gg), 3.2vw, 48px); line-height: 1.05; max-width: 13ch; margin: 0 0 var(--e5); }
.acesso-capa p { max-width: 38ch; }
.acesso-capa ul { grid-column: 1; grid-row: 3; padding-bottom: var(--e7); }
.acesso-capa .personagem {
  grid-column: 2; grid-row: 1 / 4; align-self: end; justify-self: end;
  position: relative; width: auto; height: clamp(420px, 86vh, 820px); max-height: none;
}
.acesso-capa::after { height: 70%; background-size: 720px auto; opacity: .28; }
.acesso-folha { background: radial-gradient(90% 70% at 50% 0%, var(--acento-tinta) 0%, var(--fundo-0) 70%); }
.cartao-acesso {
  width: min(440px, 100%); background: var(--fundo-1); border: 1px solid var(--regua);
  border-top: 3px solid var(--ciano); border-radius: var(--raio); box-shadow: var(--sombra-1);
  padding: var(--e7) var(--e6);
}
@media (max-width: 1100px) {
  .acesso-capa { grid-template-columns: minmax(0, 1fr); padding: var(--e6); }
  .acesso-capa .personagem { display: none; }
}
@media (max-width: 860px) {
  .tela-acesso { grid-template-columns: 1fr; }
  .acesso-capa { grid-template-rows: auto auto; row-gap: var(--e4); }
  .acesso-capa h1 { font-size: var(--t-gg); }
  .cartao-acesso { padding: var(--e6) var(--e4); }
}
/* ajuste fino da capa: coluna de texto com largura garantida e a foto do
   personagem com as bordas de cima e da esquerda esmaecidas (sem retangulo) */
@media (min-width: 1101px) { .acesso-capa { grid-template-columns: minmax(440px, 1fr) auto; } }
@media (max-width: 1100px) { .acesso-capa .logo-capa { width: min(160px, 45%); } }
.acesso-capa h1 { font-size: clamp(var(--t-gg), 2.6vw, 44px); max-width: 15ch; }
.acesso-capa .personagem {
  height: clamp(420px, 80vh, 760px); margin-left: calc(-1 * var(--e7));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 14%);
  mask-composite: intersect;
  filter: none;
}

/* Tela de entrada com a arte da campanha (capa-entrada.webp): a imagem ja traz
   logo, titulo e vantagens; o formulario segue o mesmo desenho. */
.acesso-arte { display: block; padding: 0; background: var(--noite); }
.acesso-arte::after { display: none; }
.acesso-arte .capa-arte { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Coluna da arte no tamanho exato da imagem (984x941) na altura da tela: nada cortado. */
.tela-acesso { grid-template-columns: minmax(0, calc(100vh * 1.046)) minmax(440px, 1fr); }
.cartao-acesso { border-top-width: 1px; border-top-color: var(--regua); padding: var(--e7) var(--e6); box-shadow: var(--sombra-1); }
.entrada { position: relative; }
.entrada h1 { font-size: var(--t-gg); margin: 0 0 var(--e2); }
.entrada .sub { max-width: 34ch; }
.selo-seguro { position: absolute; top: 0; right: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-tinta); color: var(--acento); }
.selo-seguro svg { width: 22px; height: 22px; }
.campo-icone { position: relative; display: block; }
.campo-icone > svg { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-2); pointer-events: none; }
.campo-icone input { padding-left: var(--e7); }
.campo-icone input[type="password"], .campo-icone input.mostrando { padding-right: var(--e7); }
.ver-senha { position: absolute; right: var(--e2); top: 50%; transform: translateY(-50%); background: none; border: 0; padding: var(--e1); color: var(--texto-2); cursor: pointer; min-height: 32px; }
.ver-senha svg { width: 20px; height: 20px; }
.linha-entrada { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.linha-entrada a { color: var(--acento); font-weight: 600; }
.entrada .botao.largo { display: flex; justify-content: center; align-items: center; gap: var(--e2); min-height: 48px; font-size: var(--t-base); }
.entrada .envio-codigo { margin-top: var(--e4); gap: var(--e3); }
.entrada .envio-codigo .botao svg { width: 18px; height: 18px; }
.entrada-ajuda { border-top: 1px solid var(--regua); margin-top: var(--e5); padding-top: var(--e5); text-align: center; color: var(--texto); display: flex; justify-content: center; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.entrada-ajuda a { color: var(--acento); font-weight: 600; }
.entrada-selo { border-top: 1px solid var(--regua); margin-top: var(--e4); padding-top: var(--e4); text-align: center; color: var(--texto-2); font-size: var(--t-p); display: flex; justify-content: center; align-items: center; gap: var(--e2); }
.entrada-ajuda svg, .entrada-selo svg { width: 18px; height: 18px; }
.passos-ajuda { display: grid; gap: var(--e3); padding-left: var(--e5); margin: var(--e4) 0 var(--e5); }
@media (max-width: 1100px) {
  .tela-acesso { grid-template-columns: 1fr; }
  .acesso-arte { max-height: 340px; overflow: hidden; }
  .acesso-arte .capa-arte { object-position: left top; }
}
@media (max-width: 860px) { .acesso-arte { max-height: 260px; } }

/* Campo de arquivo: o botao nativo cinza vira um botao da marca. */
input[type="file"] { color: var(--texto-2); font-size: var(--t-p); cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: var(--e3); padding: var(--e2) var(--e4); border: 1px solid var(--acento); border-radius: 999px;
  background: var(--acento-tinta); color: var(--acento); font: inherit; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
input[type="file"]:hover::file-selector-button { background: var(--acento); color: #fff; }
input[type="file"]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Varios botoes no cabecalho da pagina (Impostos: agenda + CSV). */
.acoes-cabecalho { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; }

/* Prazo de resposta do chamado (1 dia util). */
.prazo-ok, .prazo-vencido { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.prazo-ok { color: var(--acento); }
.prazo-vencido { color: var(--erro); }
.prazo-ok svg, .prazo-vencido svg { width: 14px; height: 14px; }

/* Andamento dos documentos do mes (largura por classe: a CSP proibe style inline). */
.progresso-mes { display: grid; gap: var(--e2); margin: 0 0 var(--e5); padding: var(--e4) var(--e5); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio-2, 14px); box-shadow: var(--sombra-1); }
.progresso-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2); }
.progresso-trilho { height: 10px; border-radius: 999px; background: var(--acento-tinta); overflow: hidden; }
.progresso-trilho span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--eletrico), var(--ciano)); }
.progresso-pct-0 { width: 0%; }
.progresso-pct-10 { width: 10%; }
.progresso-pct-20 { width: 20%; }
.progresso-pct-30 { width: 30%; }
.progresso-pct-40 { width: 40%; }
.progresso-pct-50 { width: 50%; }
.progresso-pct-60 { width: 60%; }
.progresso-pct-70 { width: 70%; }
.progresso-pct-80 { width: 80%; }
.progresso-pct-90 { width: 90%; }
.progresso-pct-100 { width: 100%; }

/* Guia: pagar sem baixar o PDF (PIX e linha digitavel). */
.pagar-rapido { margin-top: var(--e5); padding: var(--e4); border-radius: 14px; background: var(--acento-tinta); border: 1px solid var(--acento-suave); }
.pagar-rapido h2 { margin-top: 0; }
.copiar-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.copiar-linha code { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; padding: var(--e2) var(--e3); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: 10px; font-size: var(--t-p); }

/* Meus numeros: limite do regime e certidoes. */
.limite-regime { display: grid; gap: var(--e3); }
.limite-regime h2 { margin: 0; }
.limite-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e4); }
.limite-numeros > div { display: grid; gap: 2px; }
.limite-alerta { border-color: var(--erro); box-shadow: 0 0 0 1px var(--erro), var(--sombra-1); }
.limite-alerta .progresso-trilho span { background: linear-gradient(90deg, #f2a33a, var(--erro)); }
.aviso-limite { display: flex; gap: var(--e2); align-items: flex-start; margin: 0; padding: var(--e3); border-radius: 10px; background: var(--erro-f); color: var(--texto); }
.aviso-limite svg { width: 18px; height: 18px; color: var(--erro); flex: none; margin-top: 2px; }
.grade-certidoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e4); }
.certidao { display: grid; gap: var(--e2); padding: var(--e4); border-radius: 14px; border: 1px solid var(--regua); border-left-width: 4px; background: var(--fundo-1); }
.certidao header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); }
.certidao p { margin: 0; }
.certidao-valida { border-left-color: var(--ok, #1f8a4c); }
.certidao-vencendo { border-left-color: #c98a12; }
.certidao-vencida { border-left-color: var(--erro); }
.certidao-sem-data { border-left-color: var(--regua); }

/* Botao de camera: o input de arquivo fica escondido dentro do rotulo. */
.botao-camera { position: relative; overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); }
.botao-camera svg { width: 18px; height: 18px; flex: none; }
.botao-camera input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.botao-camera:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Indicacao da Cora na barra lateral. */
.cora-lateral { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0; padding: var(--e3) var(--e4); border-radius: 14px; text-decoration: none; color: var(--gelo); background: linear-gradient(135deg, rgba(254, 60, 87, .22), rgba(0, 144, 240, .14)); border: 1px solid rgba(254, 60, 87, .55); transition: border-color .15s, transform .15s; }
.cora-lateral:hover, .cora-lateral:focus-visible { border-color: #fe3c57; transform: translateY(-1px); }
.cora-lateral span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cora-lateral strong { font-size: var(--t-p); line-height: 1.25; }
.cora-lateral small { font-size: var(--t-micro); color: rgba(228, 255, 255, .78); }
.cora-lateral svg { width: 20px; height: 20px; flex: none; color: #ff8597; }

/* ---------------------------------------------------------------------------
 * Tour guiado (estilo jogo): holofote + caixa de dialogo com o personagem.
 * ------------------------------------------------------------------------- */
.tour-camada { position: fixed; inset: 0; z-index: 900; background: transparent; cursor: pointer; }
.tour-holofote { position: fixed; z-index: 901; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 9, 29, .74), 0 0 0 3px var(--ciano), 0 0 26px 6px rgba(0, 200, 240, .55);
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease; }
.tour-holofote[hidden] { display: block; top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(0, 9, 29, .74); }
.tour-caixa { position: fixed; z-index: 902; width: min(440px, calc(100vw - 32px)); display: grid; grid-template-columns: 96px 1fr; gap: var(--e4); align-items: start;
  padding: var(--e5); border-radius: 20px; color: var(--gelo);
  background: radial-gradient(120% 140% at 0% 0%, #0a3a74 0%, var(--noite-2) 46%, var(--noite) 100%);
  border: 2px solid var(--ciano); box-shadow: 0 0 0 4px rgba(0, 200, 240, .18), 0 24px 60px rgba(0, 0, 0, .55); }
.tour-caixa::after { content: ""; position: absolute; inset: 6px; border-radius: 15px; border: 1px dashed rgba(0, 200, 240, .28); pointer-events: none; }
.tour-centro { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-retrato { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--ciano); box-shadow: 0 0 18px rgba(0, 200, 240, .65); background: var(--noite-2); animation: tour-respira 2.6s ease-in-out infinite; }
.tour-fala { display: grid; gap: var(--e2); min-width: 0; }
.tour-contador { margin: 0; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); font-weight: 700; }
.tour-titulo { margin: 0; font-size: var(--t-g); color: #fff; letter-spacing: .01em; }
.tour-texto { margin: 0; min-height: 4.6em; line-height: 1.5; color: rgba(228, 255, 255, .92); }
.tour-texto::after { content: "▌"; margin-left: 2px; color: var(--ciano); animation: tour-cursor 1s steps(1) infinite; }
.tour-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.tour-espaco { flex: 1; }
.tour-caixa .botao { border-color: rgba(0, 200, 240, .45); color: var(--gelo); background: rgba(255, 255, 255, .06); }
.tour-caixa .botao.primario { background: linear-gradient(135deg, var(--eletrico), var(--ciano)); color: var(--noite); border-color: transparent; font-weight: 800; }
.tour-caixa .tour-pular { background: transparent; border-color: transparent; color: rgba(228, 255, 255, .7); text-decoration: underline; padding-inline: 0; }
.tour-caixa [hidden] { display: none; }
.tour-entrar { animation: tour-entrar .32s cubic-bezier(.2, 1.4, .4, 1); }
.tour-centro.tour-entrar { animation: tour-entrar-centro .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tour-entrar { from { opacity: 0; transform: scale(.86) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tour-entrar-centro { from { opacity: 0; transform: translate(-50%, -46%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes tour-respira { 50% { box-shadow: 0 0 28px rgba(0, 200, 240, .9); } }
@keyframes tour-cursor { 50% { opacity: 0; } }
@media (max-width: 859px) {
  .tour-caixa:not(.tour-centro) { left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; }
  .tour-caixa { grid-template-columns: 64px 1fr; padding: var(--e4); }
  .tour-retrato { width: 64px; height: 64px; }
  .tour-caixa.tour-topo { top: 16px !important; bottom: auto; }
  .tour-botoes .botao { padding-inline: var(--e3); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-holofote { transition: none; }
  .tour-retrato, .tour-entrar, .tour-centro.tour-entrar, .tour-texto::after { animation: none; }
}

/* Cartao do contador: CRC e botao de WhatsApp. */
.contador-crc { margin: 2px 0 var(--e3); font-size: var(--t-p); font-weight: 600; letter-spacing: .04em; color: var(--texto-2); }
.botao-whatsapp { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; background: #0b7a3e; border-color: #0b7a3e; color: #fff; font-weight: 700; }
.botao-whatsapp:hover, .botao-whatsapp:focus-visible { background: #08662f; border-color: #08662f; color: #fff; }
.botao-whatsapp svg { width: 20px; height: 20px; }
.botao-whatsapp { margin-bottom: var(--e4); }
.botao-whatsapp .sub { color: #fff; font-weight: 500; }

/* Mensalidade (honorarios) */
.lista-cobrancas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.cobranca { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(110px, auto) auto minmax(0, 2fr); align-items: center; gap: var(--e4); padding: var(--e4); border: 1px solid var(--regua); border-left-width: 4px; border-radius: 14px; background: var(--fundo-1); }
.cobranca-mes { display: grid; gap: 2px; }
.cobranca-valor { font-family: var(--titulo); font-size: var(--t-g); font-weight: 700; }
.cobranca-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; align-items: center; }
.cobranca-atrasada { border-left-color: var(--erro); }
.cobranca-aberta { border-left-color: #c98a12; }
.cobranca-paga { border-left-color: var(--ok); }
@media (max-width: 700px) { .cobranca { grid-template-columns: 1fr auto; } .cobranca-acoes { grid-column: 1 / -1; justify-content: flex-start; } }

/* Indique e ganhe */
.indique-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--e5); margin-bottom: var(--e5); padding: var(--e6); border-radius: 20px; color: var(--gelo);
  background: radial-gradient(120% 140% at 0% 0%, #0a3a74 0%, var(--noite-2) 50%, var(--noite) 100%); box-shadow: var(--sombra-2); }
.indique-hero h1 { color: #fff; margin: var(--e2) 0; font-size: var(--t-titulo); text-transform: uppercase; }
.indique-hero h1 em { font-style: normal; color: var(--ciano); }
.indique-hero p { max-width: 60ch; color: rgba(228, 255, 255, .9); margin: 0; }
.indique-hero .sobretitulo { color: var(--ciano); }
.indique-faixa { display: flex; align-items: center; gap: var(--e4); margin: 0 0 var(--e5); padding: var(--e4) var(--e5);
  border: 2px solid var(--ciano); border-radius: 16px; text-decoration: none; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #0a3a74 0%, var(--noite-2) 60%, var(--noite) 100%); box-shadow: 0 0 24px rgba(0, 229, 255, .25); }
.indique-faixa span:not(.botao) { flex: 1; color: rgba(228, 255, 255, .92); }
.indique-faixa b { color: #fff; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 700px) { .indique-faixa { flex-wrap: wrap; } .indique-faixa .botao { width: 100%; text-align: center; } }
.indique-destaque { display: inline-flex; align-items: center; gap: var(--e3); margin: var(--e4) 0 var(--e2); padding: var(--e3) var(--e5);
  border: 2px solid var(--ciano); border-radius: 16px; background: rgba(0, 229, 255, .08); box-shadow: 0 0 24px rgba(0, 229, 255, .25); }
.indique-pct { font-size: 3rem; line-height: 1; color: var(--ciano); font-weight: 800; text-shadow: 0 0 18px rgba(0, 229, 255, .6); }
.indique-destaque span { color: #fff; font-weight: 700; font-size: 1.15rem; }
.indique-destaque small { font-weight: 400; color: rgba(228, 255, 255, .85); font-size: .85rem; }
.indique-chamada { font-size: 1.1rem; font-weight: 700; color: #fff !important; margin: var(--e2) 0 !important; }
.indique-hero .acoes-linha { display: flex; flex-wrap: wrap; gap: var(--e2); }
.indique-hero img { width: 140px; height: 140px; border-radius: 50%; flex: none; }
@media (max-width: 700px) { .indique-hero { flex-direction: column-reverse; align-items: flex-start; } .indique-hero img { width: 96px; height: 96px; } }
.isca { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Imposto de Renda */
.checklist-irpf { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e2); }
.checklist-irpf li { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e2) var(--e3); border-radius: 10px; background: var(--fundo-0); color: var(--texto-2); font-size: var(--t-p); }
.checklist-irpf li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.checklist-irpf li.feito { background: var(--ok-f); color: var(--texto); }
.checklist-irpf li.feito svg { color: var(--ok); }
.envio-irpf { margin: var(--e3) 0; }

.sem-quebra { white-space: nowrap; }
.grade-conferencia .campo-largo { grid-column: 1 / -1; }

/* Area interna ocupa a largura toda da tela (antes travava em 1240px e sobrava
 * uma faixa vazia a direita em monitores grandes). O respiro cresce com a tela. */
.conteudo { max-width: none; padding: clamp(16px, 2.2vw, 44px); }

/* ---------------------------------------------------------------------------
 * Painel do escritorio reorganizado: faixa baixa (rosto sempre inteiro),
 * 6 indicadores numa linha e duas colunas fixas (trabalho | acompanhamento).
 * ------------------------------------------------------------------------- */
.faixa-compacta { display: block; height: auto; min-height: 210px; padding: var(--e5) var(--e6); }
.faixa-compacta .texto-marca { padding: 0; max-width: min(62%, 780px); min-height: 160px; display: flex; flex-direction: column; justify-content: center; }
.faixa-compacta h1 { font-size: clamp(var(--t-gg), 2.1vw, var(--t-titulo)); margin: var(--e2) 0 0; }
.faixa-compacta .acoes { margin-top: var(--e4); display: flex; flex-wrap: wrap; gap: var(--e2); }
.faixa-compacta .acoes form { margin: 0; }
.faixa-compacta .personagem { position: absolute; right: clamp(16px, 4vw, 72px); top: 14px; height: 400px; width: auto; max-height: none; margin: 0; align-self: auto; }
.faixa-compacta::before { background-position: right 22% bottom; background-size: 440px auto; }
@media (max-width: 860px) {
  .faixa-compacta { height: auto; padding: var(--e5); }
  .faixa-compacta .texto-marca { max-width: none; }
  .faixa-compacta .personagem { display: none; }
}

.indicadores-painel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.indicadores-painel .card { min-width: 0; }
.indicadores-painel .card-valor { font-size: clamp(var(--t-g), 1.6vw, var(--t-gg)); white-space: nowrap; }
.card-destaque { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra-1); }
@media (max-width: 1600px) { .indicadores-painel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .indicadores-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.painel-grade { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr); gap: var(--e5); align-items: start; }
.painel-coluna { display: grid; gap: var(--e5); min-width: 0; }
.painel-coluna > .painel { margin: 0; }
.painel-coluna > * { min-width: 0; }
@media (max-width: 1100px) { .painel-grade { grid-template-columns: 1fr; } }
.vazio-linha { display: flex; align-items: center; gap: var(--e2); margin: 0; color: var(--texto-2); font-style: italic; }
.vazio-linha svg { width: 18px; height: 18px; color: var(--ok); flex: none; font-style: normal; }

.comece-aqui { border: 1px solid var(--acento-suave); background: linear-gradient(180deg, var(--acento-tinta), var(--fundo-1) 60%); }
.comece-aqui .progresso-trilho { margin: var(--e2) 0 var(--e4); }
.passos-inicio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e2); }
.passos-inicio a { display: flex; align-items: center; gap: var(--e2); padding: var(--e3); border-radius: 12px; border: 1px solid var(--regua); background: var(--fundo-1); text-decoration: none; color: var(--texto); font-weight: 600; }
.passos-inicio a:hover { border-color: var(--acento); }
.passos-inicio svg { width: 18px; height: 18px; color: var(--acento); flex: none; }
.passos-inicio .feito a { color: var(--texto-2); font-weight: 500; text-decoration: line-through; background: var(--ok-f); border-color: transparent; }
.passos-inicio .feito svg { color: var(--ok); }

/* Regua da cobranca automatica de documentos */
.cobranca-auto h2 { display: flex; align-items: center; gap: var(--e2); }
.cobranca-auto h2 svg { width: 20px; height: 20px; color: var(--ok); }
.regua-cobranca { list-style: none; margin: var(--e4) 0 var(--e2); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--e2); counter-reset: none; }
.regua-cobranca li { position: relative; display: grid; gap: 2px; padding: var(--e3); border-radius: 12px; background: var(--acento-tinta); border: 1px solid var(--acento-suave); }
.regua-cobranca li strong { color: var(--acento); font-family: var(--titulo); }
.regua-cobranca li span { font-size: var(--t-p); color: var(--texto); }
.regua-cobranca .regua-equipe { background: var(--erro-f); border-color: transparent; }
.regua-cobranca .regua-equipe strong { color: var(--erro); }

/* Faixa de atraso/bloqueio da mensalidade */
.faixa-bloqueio { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); margin-bottom: var(--e4); border-radius: 14px; background: var(--atencao-f); border: 1px solid var(--atencao); color: var(--texto); }
.faixa-bloqueio.ativo { background: var(--erro-f); border-color: var(--erro); }
.faixa-bloqueio > svg { width: 22px; height: 22px; flex: none; color: var(--erro); }
.faixa-bloqueio > span { flex: 1 1 320px; }
.conciliacao-resultado { display: grid; gap: var(--e3); margin-top: var(--e4); }
.conciliacao-resultado ul { margin: 0; padding-left: 1.2em; }
.comprovante-campo { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.comprovante-campo input[type=file] { width: 360px; max-width: 100%; font-size: var(--t-p); }

/* Nota nova: preencher pelo XML de uma NFS-e anterior */
.importar-xml { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); border: 1px dashed var(--acento-suave); background: var(--acento-tinta); }
.importar-xml-texto { flex: 1 1 360px; }
.importar-xml-texto h2 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e1); }
.importar-xml-texto h2 svg { width: 20px; height: 20px; color: var(--acento); }
.importar-xml-form { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.importar-xml-form input[type=file] { width: 320px; max-width: 100%; font-size: var(--t-p); }

/* Envio em massa: programa do escritorio */
.programa-envio { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; justify-content: space-between; padding: var(--e4); border-radius: var(--raio); background: var(--acento-tinta); border: 1px solid var(--acento-suave); margin: var(--e3) 0 var(--e4); }
.programa-envio > div { flex: 1 1 360px; }
.programa-envio h3 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e1); }
.programa-envio h3 svg { width: 20px; height: 20px; color: var(--acento); }

/* Pulso do mes nas faixas dos paineis: numeros grandes sobre o fundo da marca */
.pulso { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0 var(--e3); padding: 0; }
.pulso > div { min-width: 150px; padding: var(--e3) var(--e4); border-radius: var(--raio-p); background: rgba(0, 200, 240, .08); border: 1px solid rgba(0, 200, 240, .28); display: grid; gap: 2px; }
.pulso dt { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: #8fd8ff; }
.pulso dd { margin: 0; font-family: var(--titulo); font-size: clamp(1.25rem, 1.6vw, 1.6rem); font-weight: 600; color: var(--lateral-texto); font-variant-numeric: tabular-nums; }
.pulso span { font-size: var(--t-micro); color: #b8cde3; }
.faixa-cliente .texto-marca { max-width: min(66%, 820px); }
@media (max-width: 760px) { .pulso > div { flex: 1 1 140px; min-width: 0; } .faixa-cliente .texto-marca { max-width: none; } }
.faixa-compacta .pulso { flex-wrap: nowrap; }
.faixa-compacta .pulso > div { flex: 1 1 0; min-width: 0; }
.faixa-compacta:not(.faixa-cliente) .texto-marca { max-width: min(70%, 900px); }
@media (max-width: 1100px) { .faixa-compacta .pulso { flex-wrap: wrap; } .faixa-compacta .pulso > div { flex: 1 1 140px; } }

/* Cabecalho de todas as telas internas: faixa da marca, a mesma identidade dos paineis */
.cabecalho-pagina { background: radial-gradient(120% 160% at 100% 0%, #0a3d74 0%, #00213f 45%, #00091d 100%); background-color: #00091d;
  color: #e4f4ff; border: 1px solid rgba(0, 200, 240, .22); border-radius: var(--raio); padding: var(--e5) var(--e6); box-shadow: var(--sombra-2); align-items: center; }
.cabecalho-pagina::after { left: var(--e6); bottom: 0; }
.cabecalho-pagina h1 { color: #cfe0f0; font-size: var(--t-gg); font-weight: 600; line-height: 1.2; }
.cabecalho-pagina .sobretitulo { color: #00c8f0; border-left: 0; padding-left: 0; }
.cabecalho-pagina .sub, .cabecalho-pagina p, .cabecalho-pagina label { color: #b8cde3; }
.cabecalho-pagina a:not(.botao) { color: #7fe3ff; }
.cabecalho-pagina code { background: rgba(255, 255, 255, .1); color: #e4f4ff; }
.cabecalho-pagina .filtro { margin: 0; }
.cabecalho-pagina .filtro label, .cabecalho-pagina .filtro label.check { color: #cfe3f5; }
.cabecalho-pagina input, .cabecalho-pagina select { background: #fff; color: #0b1f3a; }
.cabecalho-pagina .botao:not(.primario) { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(228, 244, 255, .35); }
.cabecalho-pagina .botao:not(.primario):hover { border-color: #00c8f0; }
.cabecalho-pagina .selo { background: rgba(255, 255, 255, .92); }
@media (max-width: 760px) { .cabecalho-pagina { padding: var(--e4); } }

.importar-xml-empresa { margin: var(--e3) 0 var(--e4); padding: var(--e4); border-radius: var(--raio); }
.importar-xml-empresa h3 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e1); }
.importar-xml-empresa h3 svg { width: 20px; height: 20px; color: var(--acento); }

/* Inicio do cliente: duas colunas, blocos compactos */
.inicio-cliente { margin-top: var(--e5); }
.lista-resumo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.lista-resumo a { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--raio-p); border: 1px solid var(--regua); background: var(--fundo-1); color: var(--texto); text-decoration: none; }
.lista-resumo a:hover { border-color: var(--acento); }
.lista-resumo span { display: grid; gap: 2px; font-weight: 600; }
.lista-resumo span svg { width: 16px; height: 16px; color: var(--erro); vertical-align: -3px; }
.lista-resumo small { font-size: var(--t-micro); color: var(--texto-2); font-weight: 400; }
.lista-resumo strong { font-family: var(--titulo); font-size: var(--t-g); font-variant-numeric: tabular-nums; }
.lista-resumo .alerta a { background: var(--erro-f); border-color: var(--erro); }
.calendario-compacto .calendario .d, .calendario-compacto .calendario .tem, .calendario-compacto .calendario .vencido { min-height: 38px; padding: 4px; }
.lista-resumo b { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* Notas fiscais: escolha entre emissao simplificada e completa */
.tipos-emissao { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e4); margin-bottom: var(--e5); }
.tipo-emissao { display: flex; gap: var(--e4); align-items: center; padding: var(--e4) var(--e5); border-radius: var(--raio); background: var(--fundo-1); border: 1px solid var(--regua); box-shadow: var(--sombra-1); color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s; }
.tipo-emissao:hover { border-color: var(--acento); transform: translateY(-1px); }
.tipo-emissao.destaque { border-color: var(--acento); background: var(--acento-tinta); }
.tipo-emissao > span:last-child { display: grid; gap: 4px; }
.tipo-emissao strong { font-family: var(--titulo); font-size: var(--t-g); }
.tipo-emissao small { font-size: var(--t-p); color: var(--texto-2); }
.tipo-icone { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, #0067d1, #00c8f0); color: #fff; }
.tipo-icone svg { width: 24px; height: 24px; }

/* Controle de obrigacoes */
.lista-obrigacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.lista-obrigacoes li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e2); padding: var(--e1) 0; border-bottom: 1px dashed var(--regua); }
.lista-obrigacoes select { max-width: 240px; }
.obs-curta { width: 170px; min-height: 32px; font-size: var(--t-micro); }
.matriz-obrigacoes th.col-obrigacao { vertical-align: bottom; min-width: 96px; max-width: 120px; text-align: center; }
.matriz-obrigacoes th.col-obrigacao span { display: block; white-space: normal; font-size: 10px; line-height: 1.2; letter-spacing: .02em; overflow-wrap: normal; word-break: normal; hyphens: none; }
.matriz-obrigacoes td[class^="cel-"] { text-align: center; }
.matriz-obrigacoes td svg { width: 18px; height: 18px; }
.cel-entregue, .cel-justificada { background: var(--ok-f); color: var(--ok); }
.cel-fora_prazo, .cel-meta_vencida { background: var(--atencao-f); color: var(--texto); }
.cel-atrasada { background: var(--erro-f); color: var(--erro); }
.cel-pendente { background: var(--acento-tinta); color: var(--acento); }
.cel-dispensada, .cel-nada { color: var(--texto-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Perfil da empresa -> obrigacoes sugeridas */
.perfil-resumo { display: grid; gap: var(--e1); align-content: end; }
.lista-sugestao { list-style: none; margin: var(--e3) 0; padding: 0; border: 1px solid var(--regua); border-radius: var(--raio-p); }
.lista-sugestao li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e2); padding: var(--e3); border-bottom: 1px solid var(--regua); }
.lista-sugestao li:last-child { border-bottom: 0; }
.lista-sugestao .sug-marca { padding-top: 2px; color: var(--ok); }
.lista-sugestao .sug-marca input { width: 18px; height: 18px; }
.lista-sugestao p { margin: var(--e1) 0 0; }
.sug-motivo { color: var(--texto); }
.sug-fonte { color: var(--texto-2); font-size: var(--t-micro); }
.sug-sobra { background: var(--fundo-2); }

/* Vincular obrigacoes */
.vincular-obrigacao { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--regua); }
.vincular-obrigacao h3 { display: flex; align-items: center; gap: var(--e2); margin: 0 0 var(--e1); }
.vincular-obrigacao > .campos-2 { align-items: start; }
.lista-vincular { list-style: none; margin: var(--e2) 0 0; padding: var(--e2); max-height: 260px; overflow: auto; border: 1px solid var(--regua); border-radius: var(--raio-p); display: grid; gap: var(--e1); }
.lista-vincular li[hidden] { display: none; }
.filtro-empresas { width: 100%; }

/* Celular: nada pode alargar a pagina (sem mudar o visual).
   1fr numa grade vira minmax(auto, 1fr) e cresce com o conteudo mais largo;
   .sr-only e absoluto e escapava da tabela com rolagem. */
main, .conteudo, .painel, fieldset { min-width: 0; }
input, select, textarea { max-width: 100%; }
.tabela-rolagem { position: relative; }
@media (max-width: 960px) {
  .estrutura { grid-template-columns: minmax(0, 1fr); }
  .lateral { visibility: hidden; transition: transform .2s, visibility .2s; }
  body.menu-aberto .lateral { visibility: visible; }
}
.importar-xml-form, .importar-xml-form input[type=file] { min-width: 0; max-width: 100%; }
.painel-cab { flex-wrap: wrap; }
.painel-cab .selo { white-space: normal; }
@media (max-width: 640px) { .grade-conferencia { grid-template-columns: minmax(0, 1fr); } .grade-conferencia > * { grid-column: 1 / -1; } }
.grade-2 > *, .grade-3 > *, .grade-larga > *, .pedido, .comprovante-campo > *, .pedido-acoes > *, .em-linha > * { min-width: 0; max-width: 100%; }
.em-linha { flex-wrap: wrap; }
.lista-cobrancas > *, .cobranca > *, .cobranca-acoes > * { min-width: 0; max-width: 100%; }
.comprovante-campo label { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .comprovante-campo label, .comprovante-campo input[type=file] { width: 100%; } }

/* Atendimento por WhatsApp */
.wa-mensagens { list-style: none; margin: 0; padding: var(--e3); display: flex; flex-direction: column; gap: var(--e2); max-height: 55vh; overflow-y: auto; background: var(--fundo-0); border-radius: var(--raio-p); }
.wa-msg { max-width: 78%; padding: var(--e2) var(--e3); border-radius: var(--raio-p); background: var(--fundo-1); border: 1px solid var(--regua); overflow-wrap: anywhere; }
.wa-msg p { margin: 0 0 var(--e1); white-space: pre-wrap; }
.wa-saida { align-self: flex-end; background: var(--acento-tinta); border-color: var(--acento-suave); }
.wa-entrada { align-self: flex-start; }
.wa-sistema { align-self: center; background: none; border: 0; color: var(--texto-2); font-size: var(--t-p); text-align: center; }
.wa-hora { display: block; font-size: var(--t-micro); color: var(--texto-2); text-align: right; }
.wa-responder { margin-top: var(--e3); }
.wa-qr { margin: var(--e3) 0; text-align: center; }
.wa-qr img { background: #fff; padding: var(--e2); border-radius: var(--raio-p); }
.erro-texto { color: var(--erro); }
.wa-menu { white-space: pre-wrap; background: var(--fundo-0); border: 1px solid var(--regua); border-radius: var(--raio-p); padding: var(--e3); font: inherit; margin: 0; }
.wa-setores { border: 1px solid var(--regua); border-radius: var(--raio-p); padding: var(--e3); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--e1); }
.wa-setores legend { font-weight: 600; padding: 0 var(--e1); }
/* Sino do WhatsApp no topo */
.barra-topo .wa-sino { margin-left: auto; }
.barra-topo .wa-sino + .wa-balao + .avisos, .barra-topo .wa-sino ~ .avisos { margin-left: var(--e2); }
.wa-balao { position: fixed; top: 76px; right: var(--e4); z-index: 60; display: grid; gap: 2px;
  max-width: min(360px, calc(100vw - 32px)); padding: var(--e3) var(--e4); border-radius: var(--raio-p);
  background: var(--noite); color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.wa-balao[hidden] { display: none; }
.barra-topo .em-sino, .barra-topo .ch-sino { margin-left: var(--e2); }
.em-balao { top: 148px; }
.wa-balao span { opacity: .85; font-size: var(--t-p); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-texto { color: var(--ok, #1a7f37); }
/* Chamados do WhatsApp: cor por setor, atendente em destaque, alerta de espera */
.wa-setor-0 { --setor: #1e6fd9; }
.wa-setor-1 { --setor: #d9731e; }
.wa-setor-2 { --setor: #1f9d55; }
.wa-setor-3 { --setor: #7a4fd1; }
.wa-setor-4 { --setor: #0f8f9c; }
.wa-setor-5 { --setor: #4a5b73; }
.wa-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: 2px; }
.wa-setor-selo { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--setor, #4a5b73);
  color: #fff; font-weight: 700; font-size: var(--t-p); letter-spacing: .01em; }
.wa-setor-selo.wa-ura { background: var(--texto-2); }
.wa-atendente { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--noite); color: var(--lateral-texto); font-weight: 600; font-size: var(--t-p); }
.wa-atendente svg { width: 14px; height: 14px; }
.wa-aguardando { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px dashed var(--texto-2);
  color: var(--texto-2); font-size: var(--t-p); }
/* Atendimento por WhatsApp: caixa com cara de app de conversa (lista com avatar,
   baloes com cauda, divisor de dia, barra de resposta fixa). Tudo escopado em
   .wa-grade/.wa-chat para nao mexer na tela de e-mails, que reaproveita .wa-msg. */
.wa-grade {
  --wa-verde: #128c4a; --wa-verde-txt: #0d7a40; --wa-sobre-verde: #ffffff;
  --wa-papel: #e8eff7; --wa-ponto: rgba(0, 103, 209, .09);
  --wa-recebido: #ffffff; --wa-enviado: #d6eaff; --wa-sel: #e4f4ff; --wa-sombra: 0 1px 1.5px rgba(0, 25, 53, .14);
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--e5); align-items: start;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .wa-grade {
    --wa-verde: #25d366; --wa-verde-txt: #52d39c; --wa-sobre-verde: #00091d;
    --wa-papel: #010e24; --wa-ponto: rgba(0, 200, 240, .07);
    --wa-recebido: #0a2340; --wa-enviado: #053a5e; --wa-sel: #062a4a; --wa-sombra: 0 1px 2px rgba(0, 0, 0, .45);
  }
}
:root[data-tema="escuro"] .wa-grade {
  --wa-verde: #25d366; --wa-verde-txt: #52d39c; --wa-sobre-verde: #00091d;
  --wa-papel: #010e24; --wa-ponto: rgba(0, 200, 240, .07);
  --wa-recebido: #0a2340; --wa-enviado: #053a5e; --wa-sel: #062a4a; --wa-sombra: 0 1px 2px rgba(0, 0, 0, .45);
}
.wa-grade > * { min-width: 0; }
.wa-lista, .wa-conversa { padding: var(--e4); }

/* abas em pilula com contador */
.wa-abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e3); }
.wa-abas a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--regua); background: var(--fundo-0); color: var(--texto-2); text-decoration: none;
  font-size: var(--t-p); font-weight: 500; line-height: 1.3; transition: border-color .15s, color .15s; }
.wa-abas a:hover { border-color: var(--acento); color: var(--texto); }
.wa-abas a.atual { background: var(--acento); border-color: var(--acento); color: var(--fundo-1); font-weight: 600; }
.wa-abas a .contador { line-height: 17px; }
.wa-abas a.atual .contador { background: var(--fundo-1); color: var(--acento); }

/* busca compacta */
.wa-busca { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: var(--e3); }
.wa-busca label { display: block; margin: 0; min-width: 0; }
.wa-busca-campo { grid-column: 1 / -1; position: relative; }
.wa-busca-campo svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--texto-2); pointer-events: none; }
.wa-busca input, .wa-busca select { width: 100%; border-radius: 999px; font-size: var(--t-p); }
.wa-busca input { padding-left: 36px; }
.wa-busca .botao { border-radius: 999px; }

/* lista de chamados */
.wa-conversas { list-style: none; margin: 0 calc(-1 * var(--e2)); padding: 0 var(--e2); display: grid; gap: 2px;
  max-height: 68vh; overflow-y: auto; overscroll-behavior: contain; }
.wa-chamado > a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--e3); align-items: start;
  padding: 10px var(--e3); border-radius: 12px; border-left: 3px solid transparent; color: var(--texto);
  text-decoration: none; transition: background .15s; }
.wa-chamado > a:hover { background: var(--fundo-2); }
.wa-chamado.atual > a { background: var(--wa-sel); border-left-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento-suave); }
.wa-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  font: 600 14px/1 var(--titulo); letter-spacing: .02em;
  background: color-mix(in srgb, var(--setor, #4a5b73) 20%, var(--fundo-1));
  color: color-mix(in srgb, var(--setor, #4a5b73) 65%, var(--texto));
  border: 2px solid color-mix(in srgb, var(--setor, #4a5b73) 55%, transparent); }
.wa-corpo { display: grid; gap: 2px; min-width: 0; }
.wa-linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.wa-nome { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; line-height: 1.3; }
.wa-quando { flex: none; font-size: var(--t-micro); color: var(--texto-2); white-space: nowrap; }
.wa-tem-nova .wa-quando { color: var(--wa-verde-txt); font-weight: 600; }
.wa-linha2 { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.wa-previa { flex: 1 1 0; min-width: 0; color: var(--texto-2); font-size: var(--t-p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tem-nova .wa-previa { color: var(--texto); }
.wa-nao-lidas { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; text-align: center;
  line-height: 20px; background: var(--wa-verde); color: var(--wa-sobre-verde); font-size: var(--t-micro); font-weight: 700; }
.wa-quem { font-size: var(--t-micro); color: var(--texto-2); overflow-wrap: anywhere; }
.wa-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wa-grade .wa-etiquetas > span { font-size: var(--t-micro); padding: 1px 8px; }
.wa-lista-vazia { display: grid; justify-items: center; gap: var(--e2); padding: var(--e6) var(--e3); color: var(--texto-2); text-align: center; }
.wa-lista-vazia svg { width: 32px; height: 32px; opacity: .6; }

/* chips de setor, atendente e espera: cor suave, sem branco em negrito */
.wa-grade .wa-setor-selo { background: color-mix(in srgb, var(--setor, #4a5b73) 16%, transparent);
  color: color-mix(in srgb, var(--setor, #4a5b73) 60%, var(--texto)); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--setor, #4a5b73) 45%, transparent); }
.wa-grade .wa-setor-selo.wa-ura { --setor: var(--texto-2); }
.wa-grade .wa-atendente { background: var(--fundo-2); color: var(--texto); font-weight: 500; border: 1px solid var(--regua); }

/* espera: anel que pulsa no avatar; atrasado: vermelho, sem piscar a linha inteira */
@keyframes wa-anel { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--anel) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.wa-espera .wa-avatar { --anel: var(--atencao); animation: wa-anel 2.2s ease-out infinite; }
.wa-chamado.wa-atrasado > a { background: color-mix(in srgb, var(--erro) 9%, transparent); border-left-color: var(--erro); }
.wa-chamado.wa-atrasado.atual > a { background: var(--wa-sel); }
.wa-atrasado .wa-avatar { --anel: var(--erro); border-color: var(--erro); animation-duration: 1.2s; }
.wa-atrasado .wa-aguardando { border-color: var(--erro); color: var(--erro); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .wa-espera .wa-avatar, .wa-atrasado .wa-avatar { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--anel) 45%, transparent); } }

/* cabecalho da conversa */
.wa-conversa { display: flex; flex-direction: column; gap: var(--e3); }
.wa-topo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e3); align-items: center;
  padding-bottom: var(--e3); border-bottom: 1px solid var(--regua); }
.wa-avatar-g { width: 52px; height: 52px; font-size: 17px; }
.wa-topo h2 { margin: 0; font-size: var(--t-g); line-height: 1.25; overflow-wrap: anywhere; }
.wa-topo .sub { margin: 2px 0 0; font-size: var(--t-p); }
.wa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.wa-chips > span { font-size: var(--t-micro); }
.wa-topo-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; }
.wa-topo-acoes form { margin: 0; }

/* acoes secundarias numa faixa leve */
.wa-ajustes { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); padding: var(--e2) var(--e3);
  border-radius: 10px; background: var(--fundo-0); border: 1px solid var(--regua); }
.wa-ajuste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2); margin: 0; min-width: 0; }
.wa-ajuste label { display: grid; gap: 2px; margin: 0; font-size: var(--t-micro); color: var(--texto-2); min-width: 0; max-width: 100%; }
.wa-ajuste select { min-height: 32px; padding-top: 3px; padding-bottom: 3px; font-size: var(--t-p); max-width: 100%; }

/* area das mensagens */
.wa-chat { list-style: none; margin: 0; padding: var(--e4); display: flex; flex-direction: column; gap: 4px;
  height: clamp(340px, 58vh, 660px); max-height: none; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--regua); border-radius: 12px; background-color: var(--wa-papel);
  background-image: radial-gradient(var(--wa-ponto) 1.2px, transparent 1.5px),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--acento) 5%, transparent) 100%);
  background-size: 20px 20px, 100% 100%; background-attachment: local, local; }
.wa-chat .wa-msg { position: relative; max-width: min(78%, 560px); padding: 7px 12px 5px; border: 0; border-radius: 14px;
  background: var(--wa-recebido); box-shadow: var(--wa-sombra); color: var(--texto); font-size: 14px; line-height: 1.45; }
.wa-chat .wa-msg p { margin: 0; white-space: pre-wrap; }
.wa-chat .wa-entrada { align-self: flex-start; border-top-left-radius: 4px; }
.wa-chat .wa-saida { align-self: flex-end; background: var(--wa-enviado); border-top-right-radius: 4px; }
.wa-chat .wa-entrada::before, .wa-chat .wa-saida::before { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: inherit; }
.wa-chat .wa-entrada::before { left: -7px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa-chat .wa-saida::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-chat .wa-entrada + .wa-entrada, .wa-chat .wa-saida + .wa-saida { border-radius: 14px; }
.wa-chat .wa-entrada + .wa-entrada::before, .wa-chat .wa-saida + .wa-saida::before { display: none; }
.wa-chat .wa-entrada + .wa-saida, .wa-chat .wa-saida + .wa-entrada { margin-top: var(--e2); }
.wa-chat .wa-hora { display: block; margin-top: 1px; text-align: right; font-size: var(--t-micro); color: var(--texto-2); }
.wa-chat .wa-msg audio { display: block; width: 260px; max-width: 100%; height: 40px; margin: 4px 0 2px; }
.wa-chat .wa-msg a.botao { display: flex; width: fit-content; max-width: 100%; margin: 6px 0 2px; gap: var(--e2);
  white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: var(--t-p); font-weight: 500; color: var(--texto);
  background: color-mix(in srgb, var(--texto) 6%, transparent); border: 1px solid var(--regua); border-radius: 10px; box-shadow: none; }
.wa-chat .wa-sistema { align-self: center; max-width: 90%; margin: var(--e2) 0; padding: 4px 12px; border-radius: 999px;
  background: var(--atencao-f); color: var(--texto-2); font-size: var(--t-p); text-align: center; box-shadow: none; }
.wa-chat .wa-sistema .wa-hora { display: inline; margin-left: 6px; }
.wa-dia { align-self: center; margin: var(--e2) 0; }
.wa-dia span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--fundo-1); color: var(--texto-2);
  border: 1px solid var(--regua); box-shadow: var(--sombra-1); font-size: var(--t-micro); letter-spacing: .03em; }

/* barra de resposta */
.wa-barra { display: grid; gap: var(--e2); margin: 0; }
.wa-barra-extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); font-size: var(--t-p); }
.wa-barra-extra .sub { margin: 0; }
/* Mar.IA copiloto: o que o cliente pediu e ja esta no portal, em botao de um clique */
.wa-maria-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e2); }
.wa-maria-acoes .sub { margin: 0; flex-basis: 100%; }
.wa-maria-acoes form { margin: 0; }
.wa-rapida { display: inline-flex; align-items: center; gap: var(--e2); margin: 0; font-size: var(--t-p); color: var(--texto-2); }
.wa-rapida select { min-height: 32px; padding-top: 3px; padding-bottom: 3px; font-size: var(--t-p); }
.wa-barra-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e2); align-items: end;
  padding: 6px; border-radius: 28px; background: var(--fundo-0); border: 1px solid var(--regua); }
.wa-texto { display: block; margin: 0; min-width: 0; }
.wa-texto textarea { display: block; width: 100%; min-height: 44px; max-height: 180px; resize: vertical; margin: 0;
  padding: 11px 16px; border-radius: 22px; border: 1px solid var(--regua); background: var(--fundo-1);
  color: var(--texto); font: inherit; font-size: 14px; line-height: 1.45; }
.wa-texto textarea:focus { outline: none; border-color: var(--acento); box-shadow: var(--foco); }
.wa-anexar { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 14px; margin: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--regua); background: var(--fundo-1); color: var(--texto-2); font-size: var(--t-p); }
.wa-anexar:hover { color: var(--texto); border-color: var(--acento); }
.wa-anexar svg { width: 18px; height: 18px; flex: none; }
.wa-anexar input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wa-anexar:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.wa-anexar.wa-anexo-pronto { color: var(--wa-verde-txt); border-color: var(--wa-verde); }
.wa-anexar-rotulo { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-enviar { height: 44px; padding: 0 20px; border-radius: 999px; white-space: nowrap; }

/* estado vazio */
.wa-vazio { display: grid; place-items: center; align-content: center; gap: var(--e2); min-height: 420px; padding: var(--e6) var(--e4);
  text-align: center; border-radius: 12px; border: 1px solid var(--regua); background-color: var(--wa-papel);
  background-image: radial-gradient(var(--wa-ponto) 1.2px, transparent 1.5px); background-size: 20px 20px; }
.wa-vazio p { margin: 0; }
.wa-vazio-icone { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: var(--e2); border-radius: 50%; color: var(--acento);
  background: radial-gradient(circle, color-mix(in srgb, var(--ciano) 20%, transparent) 0%, transparent 72%);
  border: 1px solid color-mix(in srgb, var(--ciano) 40%, transparent); box-shadow: 0 0 24px rgba(0, 200, 240, .22); }
.wa-vazio-icone svg { width: 40px; height: 40px; }
.wa-vazio-titulo { font-family: var(--titulo); font-size: var(--t-g); font-weight: 600; }

/* tablet e celular: uma coluna; com conversa aberta, ela vem primeiro */
@media (max-width: 960px) {
  .wa-grade { grid-template-columns: minmax(0, 1fr); }
  .wa-com-conversa .wa-conversa { order: -1; }
  .wa-conversas { max-height: 60vh; }
}
@media (max-width: 560px) {
  .wa-lista, .wa-conversa { padding: var(--e3); }
  .wa-topo { grid-template-columns: auto minmax(0, 1fr); }
  .wa-topo-acoes { grid-column: 1 / -1; justify-content: stretch; }
  .wa-topo-acoes form { flex: 1 1 auto; }
  .wa-topo-acoes .botao { width: 100%; justify-content: center; }
  .wa-ajuste { width: 100%; }
  .wa-ajuste label { flex: 1 1 140px; }
  .wa-ajuste select { width: 100%; }
  .wa-chat { height: 62vh; padding: var(--e3); }
  .wa-chat .wa-msg { max-width: 86%; }
  .wa-barra-linha { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "texto texto" "anexo enviar"; border-radius: 22px; }
  .wa-texto { grid-area: texto; }
  .wa-anexar { grid-area: anexo; }
  .wa-enviar { grid-area: enviar; justify-self: end; padding: 0 22px; }
  .wa-vazio { min-height: 260px; }
}
/* celular e tablet estreito: topo so com icones (Menu, WhatsApp, E-mail, tema e Avisos
   cabem de 320 a 760px). Alvo de 40px e contador sobreposto no canto do icone. Comeca
   pela esquerda: se um dia nao couber, sobra para a direita e o Menu nunca e cortado. */
@media (max-width: 760px) {
  .barra-topo { gap: var(--e2); justify-content: flex-start; padding-left: var(--e3); padding-right: var(--e3); }
  .barra-topo .rotulo-topo { display: none; }
  .barra-topo > .botao, .barra-topo .avisos > summary {
    position: relative; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    padding: 0; gap: 0; justify-content: center;
  }
  .barra-topo .abrir-menu { margin-right: auto; }
  .barra-topo .wa-sino, .barra-topo .em-sino, .barra-topo .ch-sino, .barra-topo .wa-sino ~ .avisos { margin-left: 0; }
  .barra-topo .contador {
    position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 5px; text-align: center;
    box-shadow: 0 0 0 2px var(--fundo-0); pointer-events: none;
  }
}
@media (max-width: 340px) { .barra-topo { gap: var(--e1); } }
header .selo { white-space: normal; max-width: 100%; text-align: left; }
.contato-cartao { border: 1px solid var(--regua); border-radius: var(--raio-p); padding: var(--e3); margin-bottom: var(--e3); }
.contato-cartao h3 { margin: 0 0 var(--e2); }
.contato-deps { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--e1); }
.contato-deps legend { font-weight: 600; margin-bottom: var(--e1); }
.limite-sub-titulo { margin: var(--e5) 0 var(--e2); }
.regra-limite { margin-top: var(--e3); }
.regra-limite summary { cursor: pointer; font-weight: 600; }
.regra-limite ul { margin: var(--e2) 0 0; padding-left: var(--e5); display: grid; gap: var(--e1); }
.card-destaque { outline: 2px solid var(--acento, #0090f0); }
.aviso-demonstracao { display: flex; gap: var(--e3); align-items: flex-start; padding: var(--e3) var(--e4);
  margin-bottom: var(--e5); border: 1px solid #e0a100; border-left-width: 6px; border-radius: var(--raio-p);
  background: #fff7e0; color: #4a3800; }
.aviso-demonstracao p { margin: 0; }
.aviso-demonstracao svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
/* Conciliacao bancaria: static/conciliacao.css */
.lista-historico li > span { min-width: 0; overflow-wrap: anywhere; }

/* faixa "vendo como cliente": acoes para trocar de empresa e voltar ao escritorio */
.faixa-equipe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.faixa-equipe .faixa-acoes { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.faixa-equipe .faixa-acoes form { margin: 0; }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes-linha form { margin: 0; }

/* mensagem do escritorio para o cliente: mesma caixa do tutorial, sem holofote */
.msg-camada { position: fixed; inset: 0; z-index: 900; background: rgba(0, 9, 29, .74); }
.msg-cliente { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100vh - 32px); overflow-y: auto; }
.msg-cliente .msg-texto { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 0; }
.msg-cliente .msg-texto::after { content: none; }
.msg-cliente .msg-texto.digitando::after { content: "▌"; margin-left: 2px; color: var(--ciano); animation: tour-cursor 1s steps(1) infinite; }
.msg-documento { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.msg-onde { display: inline-flex; gap: var(--e1); align-items: center; color: rgba(228, 255, 255, .92); font-size: var(--t-p); }
.msg-onde strong { color: var(--ciano); }
@media (max-width: 520px) { .msg-cliente { grid-template-columns: 1fr; } .msg-cliente .tour-retrato { width: 64px; height: 64px; } }
.em-erro { color: var(--erro); }
.em-assunto { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-caixa-selo { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--acento-tinta); border: 1px solid var(--acento-suave); font-size: var(--t-p); font-weight: 700; }
.em-prazo-vencido { color: var(--erro); font-weight: 600; font-size: var(--t-p); }
.em-vendo { margin: var(--e1) 0 0; padding: var(--e1) var(--e3); border-radius: var(--raio-p); background: var(--atencao-f); color: var(--texto); border-left: 3px solid var(--atencao); font-size: var(--t-p); }
.em-vendo[hidden] { display: none; }
.em-mensagens .wa-msg { max-width: 92%; }
.em-de { display: block; font-size: var(--t-p); color: var(--texto-2); margin-bottom: var(--e1); overflow-wrap: anywhere; }
.em-nota { align-self: stretch; max-width: 100%; background: var(--atencao-f); border-color: var(--atencao); color: var(--texto); }
.em-nota-rotulo { display: block; font-size: var(--t-p); font-weight: 600; color: var(--atencao); margin-bottom: var(--e1); }
.em-anexo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: var(--e1) 0; }
.em-anexo form { display: inline; }
.em-nota-form { margin-top: var(--e3); padding: var(--e3); border: 1px dashed var(--atencao); border-radius: var(--raio-p); background: var(--atencao-f); color: var(--texto); }
.em-nota-form label { color: var(--texto); }
.em-caixa-config { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.em-check { display: flex; align-items: center; gap: var(--e1); }
.em-inline { display: inline; margin-left: var(--e2); }
/* Caixa de e-mail para alto volume: filtros no topo, lista densa, leitura ao lado */
.em-cabecalho { padding-bottom: var(--e3); }
.em-filtros { position: sticky; top: 0; z-index: 5; display: grid; gap: var(--e2); padding: var(--e3) 0; margin-bottom: var(--e3); background: var(--fundo-0); border-bottom: 1px solid var(--regua); }
.em-abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--regua); }
.em-abas a { padding: var(--e2) var(--e3); text-decoration: none; color: var(--texto-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.em-abas a:hover { color: var(--texto); }
.em-abas a.atual { color: var(--texto); border-bottom-color: var(--ciano); }
.em-n { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--noite); color: #fff; font-size: var(--t-micro); text-align: center; }
.em-filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.em-campo-caixa select { min-width: 190px; }
.em-campo-busca { flex: 1 1 280px; display: flex; align-items: center; gap: var(--e1); border: 1px solid var(--regua); border-radius: var(--raio-p); padding: 0 var(--e2); background: var(--fundo-1); }
.em-campo-busca input { flex: 1; border: 0; background: transparent; padding: var(--e2) 0; min-width: 0; }
.em-campo-busca svg { width: 16px; height: 16px; color: var(--texto-2); }
.em-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--regua); border-radius: 999px; font-size: var(--t-p); cursor: pointer; white-space: nowrap; }
.em-chip:has(input:checked) { background: var(--acento-tinta); border-color: var(--acento-suave); font-weight: 700; }
.em-aviso-caixa { margin: 0; color: var(--erro); font-size: var(--t-p); }
.em-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-items: start; }
.em-area.em-com-conversa { grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr); }
.em-area > * { min-width: 0; }
.em-lista { padding: 0; overflow: hidden; }
.em-lote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--regua); background: var(--fundo-0); }
.em-lote-acoes { display: none; flex-wrap: wrap; align-items: center; gap: var(--e1); }
.em-lote.em-lote-ativo .em-lote-acoes { display: flex; }
.em-lote-campo select, .em-lote-campo input { padding: 4px 6px; font-size: var(--t-p); }
.em-todos { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-p); font-weight: 600; }
.em-contagem { margin-left: auto; color: var(--texto-2); font-size: var(--t-p); white-space: nowrap; }
.em-convs { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 260px); overflow-y: auto; }
.em-conv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e2); padding: 0 var(--e3); border-bottom: 1px solid var(--regua); border-left: 3px solid transparent; }
.em-conv:hover { background: var(--fundo-0); }
.em-conv.atual { background: var(--acento-tinta); border-left-color: var(--ciano); }
.em-conv.em-vencido { border-left-color: var(--erro); }
.em-conv > a { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: center; gap: var(--e3); padding: var(--e2) 0; min-height: 44px; text-decoration: none; color: var(--texto); }
.em-quem, .em-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-quem { display: flex; align-items: center; gap: 6px; }
.em-nao-lida .em-quem, .em-nao-lida .em-assunto { font-weight: 800; }
.em-assunto { font-weight: 600; }
.em-previa { color: var(--texto-2); }
.em-meta { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-p); color: var(--texto-2); white-space: nowrap; }
.em-meta svg { width: 14px; height: 14px; }
.em-quando { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
.em-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-2); }
.em-st-nova .em-ponto { background: var(--ciano); box-shadow: 0 0 6px var(--ciano); }
.em-st-atendendo .em-ponto { background: var(--eletrico); }
.em-st-aguardando .em-ponto { background: var(--atencao); }
.em-st-resolvida .em-ponto { background: var(--regua); }
.em-caixa-selo { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--acento-tinta); border: 1px solid var(--acento-suave); font-size: var(--t-micro); font-weight: 700; color: var(--texto); }
.em-dono { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--texto); }
.em-sem-dono, .em-sem-empresa { padding: 0 6px; border: 1px dashed var(--texto-2); border-radius: 999px; font-size: var(--t-micro); }
.em-sem-empresa { border-color: var(--atencao); }
.em-prazo { color: var(--texto-2); }
.em-prazo-vencido { color: var(--erro); font-weight: 600; }
.em-paginas { display: flex; justify-content: center; align-items: center; gap: var(--e3); padding: var(--e3); border-top: 1px solid var(--regua); font-size: var(--t-p); }
/* com uma conversa aberta, a lista fica estreita: cada conversa em tres linhas */
.em-com-conversa .em-conv > a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quem quando" "texto texto" "meta meta"; gap: 2px var(--e2); }
.em-com-conversa .em-quem { grid-area: quem; }
.em-com-conversa .em-texto { grid-area: texto; }
.em-com-conversa .em-meta { grid-area: meta; flex-wrap: wrap; }
.em-com-conversa .em-conv { align-items: start; }
.em-com-conversa .em-conv > input { margin-top: calc(var(--e2) + 3px); }
.em-leitura { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; }
.em-leitura-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); border-bottom: 1px solid var(--regua); padding-bottom: var(--e3); }
.em-leitura-topo h2 { margin: 0; overflow-wrap: anywhere; }
.em-ajustes { padding: var(--e2) 0; border-bottom: 1px solid var(--regua); }
.em-ajustes summary { cursor: pointer; font-weight: 600; color: var(--texto-2); }
.em-ajustes[open] { display: grid; gap: var(--e2); }
.em-voltar { display: none; margin-bottom: var(--e2); }
.em-mensagens { max-height: none; }
@media (max-width: 1100px) {
  .em-conv > a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quem quando" "texto texto" "meta meta"; gap: 2px var(--e2); }
  .em-quem { grid-area: quem; } .em-texto { grid-area: texto; } .em-meta { grid-area: meta; flex-wrap: wrap; }
  .em-conv { align-items: start; } .em-conv > input { margin-top: calc(var(--e2) + 3px); }
}
@media (max-width: 900px) {
  .em-area.em-com-conversa { grid-template-columns: minmax(0, 1fr); }
  .em-com-conversa .em-lista { display: none; }
  .em-voltar { display: inline-flex; }
  .em-leitura { position: static; max-height: none; }
  .em-convs { max-height: none; }
  .em-filtros { position: static; }
  :has(> .em-area.em-com-conversa) > .em-filtros { display: none; }   /* no celular, a conversa ocupa a tela */
}

/* NFS-e: ambiente por cliente (ficha da empresa) */
.ambiente-nfse { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--raio); margin-bottom: var(--e4); }
.ambiente-nfse p { margin: 0; }
.ambiente-homologacao { background: var(--atencao-f); }
.ambiente-homologacao svg { color: var(--atencao); }
.ambiente-producao { background: var(--ok-f, rgba(40, 180, 120, .12)); }

/* E-mails: quem leu */
.em-lido { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-micro); color: var(--ok); }
.em-nao-lido-ninguem { font-size: var(--t-micro); color: var(--atencao); }
.em-lidos .em-inline { display: inline; margin-left: var(--e2); }
.em-automatico { display: inline-flex; align-items: center; gap: var(--e1); }

/* E-mails: texto menor e mais suave (o branco em negrito cansava a vista) */
.em-convs, .em-leitura { --em-forte: color-mix(in srgb, var(--texto) 55%, var(--texto-2)); }
.em-convs { font-size: var(--t-p); line-height: 1.35; }
.em-conv > a { color: var(--texto-2); min-height: 38px; padding: 6px 0; }
.em-quem { font-weight: 500; }
.em-assunto { font-weight: 500; color: var(--em-forte); }
.em-nao-lida .em-quem, .em-nao-lida .em-assunto { font-weight: 600; color: var(--em-forte); }
.em-previa { color: var(--texto-3); opacity: .75; }
.em-meta { font-size: var(--t-micro); }
.em-mensagens .wa-msg { color: var(--em-forte); font-size: var(--t-p); }

/* E-mails: remetente e assunto sempre completos; a previa so ocupa o espaco que sobrar */
.em-quem { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.em-texto { display: flex; align-items: baseline; gap: .4em; overflow: hidden; white-space: normal; text-overflow: clip; }
.em-assunto { flex: 0 1 auto; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.em-previa { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1101px) {
  /* a coluna do remetente tem a largura do maior nome da pagina (ate 34 caracteres;
     acima disso o nome quebra em duas linhas, mas aparece inteiro) */
  .em-area:not(.em-com-conversa) .em-convs { display: grid; grid-template-columns: auto fit-content(34ch) minmax(0, 1fr) auto; }
  .em-area:not(.em-com-conversa) .em-conv { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .em-area:not(.em-com-conversa) .em-conv > a { grid-column: 2 / -1; grid-template-columns: subgrid; }
  .em-area:not(.em-com-conversa) .em-convs > .vazio { grid-column: 1 / -1; }
}

/* E-mails: novo e responder */
.wa-responder h3 { margin: 0; font-size: var(--t-base); }
.wa-responder h3 .sub { font-weight: 400; }
.em-leitura #responder { scroll-margin-top: 140px; }

/* E-mails: editor */
.em-editor { border: 1px solid var(--regua); border-radius: var(--raio); background: var(--fundo-0); }
.em-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--regua); }
.em-ferramentas button { min-width: 32px; min-height: 30px; padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--texto-2); font-size: var(--t-p); cursor: pointer; }
.em-ferramentas button:hover, .em-ferramentas button:focus-visible { border-color: var(--regua); color: var(--texto); background: var(--fundo-1); }
.em-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--regua); }
.em-texto-editor { min-height: 200px; max-height: 55vh; overflow-y: auto; padding: var(--e3); color: var(--em-forte, var(--texto)); font-size: var(--t-p); line-height: 1.5; outline: none; }
.em-texto-editor:focus { box-shadow: inset 0 0 0 2px var(--acento-suave); }
.em-texto-editor blockquote { margin: var(--e2) 0; padding-left: var(--e3); border-left: 3px solid var(--regua); color: var(--texto-2); }
.em-linha-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.em-cco summary { cursor: pointer; font-size: var(--t-p); color: var(--texto-2); }
.em-anexos-origem { display: flex; flex-wrap: wrap; gap: var(--e3); border: 1px dashed var(--regua); border-radius: var(--raio); padding: var(--e2) var(--e3); }
.em-assinatura-edit { margin-top: var(--e3); }
.em-assinatura-edit summary { cursor: pointer; color: var(--texto-2); font-size: var(--t-p); }
.em-novo .em-texto-editor { --em-forte: color-mix(in srgb, var(--texto) 72%, var(--texto-2)); }
.em-linha-opcoes [hidden] { display: none !important; }

/* E-mails: nomes completos (responsavel e "lido por") quebram linha em vez de cortar */
.em-meta { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
.em-dono, .em-lido { overflow-wrap: anywhere; }
.em-mensagens .em-nota { color: var(--texto); }
/* empresa nao identificada: a escolha fica na propria linha do aviso */
.em-vincular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0 0 var(--e3); }
.em-vincular form { margin: 0; }
.em-vincular select { min-height: 32px; max-width: 100%; }
.em-ajustes .filtro select { min-width: 220px; }

/* tela de acesso: alvos de toque de pelo menos 24 px (celular) */
.linha-entrada label.check { min-height: 32px; align-items: center; }
.linha-entrada label.check input[type="checkbox"] { width: 24px; height: 24px; margin: 0; flex: none; }
.linha-entrada a, .entrada-ajuda a { display: inline-flex; align-items: center; min-height: 32px; }

/* Calculadoras publicas (/calculadoras) */
.calc { max-width: 620px; }
.calc-aviso { margin: var(--e4) 0; padding: var(--e3) var(--e4); border-left: 3px solid var(--ciano); background: var(--acento-tinta); color: var(--texto); border-radius: var(--raio-2, 14px); }
.calc-bloco { margin: var(--e5) 0; padding-top: var(--e5); border-top: 1px solid var(--regua); }
.calc-bloco h2 { margin: 0 0 var(--e2); font-size: var(--t-g); }
.calc-resultado { margin-top: var(--e4); padding: var(--e4); border-radius: var(--raio-2, 14px); background: var(--fundo-1); border: 1px solid var(--regua); }
.calc-frase { margin: 0 0 var(--e3); color: var(--texto); }
.calc-itens { display: grid; gap: var(--e2); margin: 0; }
.calc-itens div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e2); }
.calc-itens dt { color: var(--texto-2); }
.calc-itens dd { margin: 0; font-weight: 600; }
.calc-rodape { display: grid; gap: var(--e3); margin-top: var(--e5); }
.calc-volta { text-align: center; }
/* Bloco Novidades (Painel e Inicio): uma linha por funcao, botao onde o olho ja esta */
.novidades { border-left: 4px solid var(--acento); }
.novidades-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e3); }
.novidades-cab h2 { margin: 0; display: flex; align-items: center; gap: var(--e2); font-size: var(--t-g); font-weight: 600; }
.novidades-cab .sub { margin: var(--e1) 0 0; }
.novidades-cab form { margin: 0; }
.novidades-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.novidades-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e2) var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--regua); }
.novidade-texto { display: grid; gap: 2px; min-width: 0; }
.novidade-texto strong { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.novidade-texto span { font-size: var(--t-p); color: var(--texto-2); overflow-wrap: anywhere; }
.novidade-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2); }
.novidade-links .botao.pequeno { min-height: 36px; }
@media (max-width: 760px) { .novidades { padding: var(--e4); } .novidade-links { flex-direction: column; align-items: stretch; } .novidade-links .botao.pequeno { min-height: 40px; } }

/* Primeiros passos do financeiro do cliente (/app/financeiro/passos): um cartao por passo, abre um por vez */
.passos-progresso { display: grid; gap: var(--e2); margin: 0 0 var(--e5); padding: var(--e4) var(--e5); background: var(--fundo-1); border: 1px solid var(--regua); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.passos-progresso .acoes { margin: 0; }
.passos-pct-0 { width: 0%; } .passos-pct-1 { width: 16.7%; } .passos-pct-2 { width: 33.3%; } .passos-pct-3 { width: 50%; }
.passos-pct-4 { width: 66.7%; } .passos-pct-5 { width: 83.3%; } .passos-pct-6 { width: 100%; }
.link-discreto { color: var(--texto-2); font-size: var(--t-p); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; margin-right: var(--e4); }
.link-discreto:hover { color: var(--acento); }
.passos-atalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
ol.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.passo { background: var(--fundo-1); border: 1px solid var(--regua); border-left: 4px solid var(--regua-forte); border-radius: var(--raio); box-shadow: var(--sombra-1); }
.passo[open] { border-left-color: var(--acento); }
.passo.feito { border-left-color: var(--ok); }
.passo > summary { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--e3); padding: var(--e4); }
.passo-num { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--acento-tinta); color: var(--acento); border: 1px solid var(--acento); font-weight: 600; }
.passo.feito .passo-num { background: var(--ok-f); color: var(--ok); border-color: var(--ok); }
.passo-num .ic { width: 20px; height: 20px; }
.passo-titulo { display: grid; gap: 2px; min-width: 0; }
.passo-titulo strong { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.passo-titulo span { font-size: var(--t-p); color: var(--texto-2); overflow-wrap: anywhere; }
.passo-estado { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--e2); }
.passo-corpo { padding: 0 var(--e5) var(--e5) calc(36px + var(--e3) + var(--e4)); display: grid; gap: var(--e3); }
.passo-corpo > * { margin: 0; }
.passo-sub { font-size: var(--t-base); font-weight: 600; color: var(--acento); margin: var(--e2) 0 0; }
.passo-lista { margin: 0; padding-left: 1.4em; display: grid; gap: var(--e2); color: var(--texto); line-height: 1.5; }
.passo-lista li::marker { color: var(--acento); font-weight: 600; }
.passo-lista strong { font-weight: 600; }
.passo-checklist { list-style: none; margin: 0; padding: var(--e3) var(--e4); display: grid; gap: var(--e2); background: var(--fundo-0); border: 1px solid var(--regua); border-radius: var(--raio-p); }
.passo-checklist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); color: var(--texto-2); }
.passo-checklist li.ok { color: var(--texto); }
.passo-checklist li.ok .ic { color: var(--ok); }
.passo-checklist li span { font-size: var(--t-p); color: var(--texto-2); }
.passo-qr img { background: #fff; padding: var(--e2); border-radius: var(--raio-p); }
.passo-corpo .ajuda-dobra { border: 1px solid var(--regua); border-radius: var(--raio-p); padding: var(--e3) var(--e4); }
.passo-corpo .ajuda-dobra[open] summary { margin-bottom: var(--e3); }
.passo-corpo input[type="file"] { max-width: 100%; }
@media (max-width: 760px) {
  .passos-progresso { padding: var(--e4); }
  .passo > summary { grid-template-columns: 32px minmax(0, 1fr); padding: var(--e3); }
  .passo-num { width: 32px; height: 32px; }
  .passo-estado { grid-column: 2; justify-content: flex-start; }
  .passo-estado .botao.pequeno { min-height: 40px; }
  .passo-corpo { padding: 0 var(--e3) var(--e4); }
}
/* popup de novidades (_novidades_popup.html): aqui, porque a CSP (style-src 'self') bloqueia <style> na pagina */
.novidades-fundo{position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:rgba(2,8,23,.72);backdrop-filter:blur(3px)}
.novidades-popup{width:min(720px,100%);max-height:86vh;overflow:auto;margin:0}
.novidades-pop-acoes{display:flex;justify-content:flex-end;margin-top:12px}

/* Ocultar valores: campo com valor em dinheiro vira bolinhas enquanto o botao do topo estiver ligado */
.valores-ocultos .valor-mascarado { -webkit-text-security: disc; text-security: disc; }

/* WhatsApp: chip de horario, caixa de chamados offline */
.wa-horario-chip { display: inline-flex; align-items: center; gap: .3em; font-size: var(--t-p); font-weight: 600; padding: .2em .7em; border-radius: 999px; vertical-align: middle; margin-left: .5em; border: 1px solid var(--regua); }
.wa-horario-chip.aberto { color: #25d366; border-color: rgba(37, 211, 102, .5); background: rgba(37, 211, 102, .1); }
.wa-horario-chip.fechado { color: var(--texto-2); background: var(--fundo-1); }
.wa-offline { margin-bottom: var(--e4); border-color: rgba(255, 196, 0, .35); }
.wa-offline-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.wa-offline-lista form { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e3); border-radius: var(--raio-p); background: var(--fundo-1); border: 1px solid var(--regua); }
.wa-offline-lista .wa-corpo { flex: 1; min-width: 0; display: grid; gap: .15em; }
.wa-offline-lista .wa-previa { white-space: normal; }
.wa-offline-lista .wa-avatar { background: rgba(255, 196, 0, .18); color: #ffc400; }
@media (max-width: 640px) { .wa-offline-lista form { flex-wrap: wrap; } .wa-offline-lista .botao { width: 100%; justify-content: center; } }

/* WhatsApp: responder a uma mensagem (citacao) */
.wa-msg { position: relative; }
.wa-responder-a { position: absolute; top: 4px; right: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .25); color: inherit; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; }
.wa-responder-a .ic { width: 14px; height: 14px; }
.wa-msg:hover .wa-responder-a, .wa-msg:focus-within .wa-responder-a { opacity: 1; }
.wa-citacao { display: grid; gap: 2px; margin: 0 0 6px; padding: 6px 8px; border-left: 3px solid var(--eletrico, #0090f0);
  border-radius: 6px; background: rgba(0, 0, 0, .18); color: inherit; text-decoration: none; font-size: .85em; }
.wa-citacao-quem { font-weight: 600; color: var(--ciano, #00c8f0); }
.wa-citacao-texto { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-respondendo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 10px;
  border-left: 3px solid var(--eletrico, #0090f0); border-radius: 6px; background: var(--fundo-1); font-size: .85em; }
.wa-respondendo[hidden] { display: none; }
.wa-respondendo-fechar { border: 0; background: transparent; color: inherit; font-size: 1.1em; cursor: pointer; }
:root[data-tema="claro"] .wa-citacao, :root[data-tema="claro"] .wa-responder-a { background: rgba(0, 0, 0, .06); }

/* WhatsApp: funcoes do aplicativo oficial na conversa */
.wa-menu-botao { position: absolute; top: 2px; right: 34px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .25); color: inherit; cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 14px; line-height: 1; }
.wa-msg:hover .wa-menu-botao, .wa-msg:focus-within .wa-menu-botao { opacity: 1; }
.wa-menu-msg { position: absolute; top: 26px; right: 6px; z-index: 5; display: grid; min-width: 180px; padding: 4px; border-radius: 10px; background: var(--fundo-2, var(--fundo-1)); border: 1px solid var(--regua); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.wa-menu-msg button { text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--texto); cursor: pointer; font: inherit; white-space: nowrap; }
/* balao curto do cliente (26/10/2026): o menu preso a direita crescia para a esquerda, para fora da conversa,
   e aparecia cortado e sem texto. Na mensagem recebida ele abre a partir da borda esquerda do balao. */
.wa-entrada > .wa-menu-msg { right: auto; left: 0; }
.wa-menu-msg.wa-menu-acima { top: auto; bottom: 26px; }
.wa-menu-msg { color: var(--texto); max-width: min(260px, 80vw); }
.wa-menu-msg button:hover, .wa-menu-msg button:focus-visible { background: var(--eletrico, #0090f0); color: #fff; }
.wa-reacoes-escolha { position: absolute; top: -34px; left: 8px; z-index: 5; display: flex; gap: 2px; padding: 3px 5px; border-radius: 999px; background: var(--fundo-2, var(--fundo-1)); border: 1px solid var(--regua); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.wa-reacoes-escolha button { border: 0; background: transparent; font-size: 20px; cursor: pointer; padding: 2px 4px; border-radius: 50%; }
.wa-reacoes-escolha button:hover { transform: scale(1.25); }
.wa-reacoes { position: absolute; bottom: -12px; right: 10px; padding: 1px 6px; border-radius: 999px; background: var(--fundo-2, var(--fundo-1)); border: 1px solid var(--regua); font-size: 13px; line-height: 1.3; }
.wa-chat .wa-msg:has(.wa-reacoes) { margin-bottom: 14px; }
.wa-apagada-texto { font-style: italic; opacity: .7; }
.wa-encaminhada { display: block; font-size: .78em; opacity: .7; font-style: italic; margin-bottom: 2px; }
.wa-marca { font-size: .9em; opacity: .85; }
.wa-marca-fav { color: #ffb300; }
.wa-tiques { font-size: .9em; letter-spacing: -2px; opacity: .8; }
.wa-tiques.wa-lida { color: #4fc3f7; opacity: 1; }
.wa-msg.wa-favorita { box-shadow: inset 3px 0 0 #ffb300; }
.wa-msg.wa-oculta { display: none; }
.wa-msg.wa-achada { outline: 2px solid var(--eletrico, #0090f0); outline-offset: 2px; }
.wa-busca-conversa { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--regua); }
.wa-busca-conversa label { display: flex; align-items: center; gap: 6px; flex: 1; }
.wa-busca-conversa input { flex: 1; min-width: 0; }
.wa-busca-conversa[hidden] { display: none; }
.wa-painel { padding: 8px 12px; border-bottom: 1px solid var(--regua); max-height: 220px; overflow: auto; font-size: .9em; }
.wa-painel[hidden] { display: none; }
.wa-painel h3 { margin: 6px 0 2px; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.wa-painel ul { margin: 0; padding-left: 16px; }
.wa-painel a { overflow-wrap: anywhere; }
.wa-fixada-barra { margin: 6px 12px 0; display: grid; }
.wa-fixada-barra[hidden] { display: none; }
.wa-digitando { color: var(--ciano, #00c8f0); font-style: italic; }
.wa-digitando[hidden] { display: none; }
.wa-menu-conversa { position: relative; }
.wa-menu-conversa summary { list-style: none; cursor: pointer; }
.wa-menu-conversa summary::-webkit-details-marker { display: none; }
.wa-menu-conversa[open] > *:not(summary) { position: absolute; right: 0; top: 100%; z-index: 6; min-width: 220px; display: grid; padding: 4px; border-radius: 10px; background: var(--fundo-2, var(--fundo-1)); border: 1px solid var(--regua); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.wa-menu-conversa[open] > form { gap: 0; }
.wa-menu-conversa[open] > form button, .wa-menu-conversa[open] > a { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.wa-menu-conversa[open] > a { position: static; min-width: 0; box-shadow: none; border: 0; }
.wa-menu-conversa[open] > form button:hover, .wa-menu-conversa[open] > a:hover { background: var(--eletrico, #0090f0); color: #fff; }
.wa-ferramenta { padding: 4px 8px; font-size: 16px; line-height: 1; }
.wa-ferramenta.wa-gravando { background: #e53935; color: #fff; animation: wa-pulsa 1s infinite; }
@keyframes wa-pulsa { 50% { opacity: .6; } }
.wa-emoji-paleta { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0; }
.wa-emoji-paleta[hidden] { display: none; }
.wa-emoji-paleta button { border: 0; background: transparent; font-size: 20px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.wa-emoji-paleta button:hover { background: var(--fundo-2, var(--fundo-1)); }
.wa-responder.wa-soltar { outline: 2px dashed var(--eletrico, #0090f0); outline-offset: -4px; }
.wa-descer { position: absolute; right: 24px; bottom: 120px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--regua); background: var(--fundo-2, var(--fundo-1)); color: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.wa-descer[hidden] { display: none; }
.wa-conversa { position: relative; }
.wa-aviso-acao { margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; background: var(--fundo-2, var(--fundo-1)); border: 1px solid var(--regua); font-size: .9em; }
.wa-aviso-acao.erro { border-color: #e53935; }
.wa-aviso-acao[hidden] { display: none; }
.wa-dialogo { border: 1px solid var(--regua); border-radius: 12px; background: var(--fundo-1); color: inherit; padding: 16px; min-width: min(420px, 92vw); }
.wa-dialogo::backdrop { background: rgba(0, 0, 0, .5); }
.wa-dialogo label { display: grid; gap: 4px; margin: 8px 0; }
.wa-destinos { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow: auto; }
.wa-destinos button { width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.wa-destinos button:hover { background: var(--eletrico, #0090f0); color: #fff; }
.wa-nao-lidas-divisor span { background: var(--eletrico, #0090f0); color: #fff; }
:root[data-tema="claro"] .wa-menu-botao, :root[data-tema="claro"] .wa-responder-a { background: rgba(0, 0, 0, .06); }
/* barra de resposta com as ferramentas novas (emoji, enquete, audio) */
.wa-barra-linha { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; }
.wa-ferramenta { height: 44px; min-width: 44px; border-radius: 999px; }
@media (max-width: 560px) {
  .wa-barra-linha { grid-template-columns: auto auto auto auto minmax(0, 1fr); grid-template-areas: "texto texto texto texto texto" "emoji anexo enquete gravar enviar"; }
  #wa-emoji { grid-area: emoji; }
  [data-abrir-enquete] { grid-area: enquete; }
  #wa-gravar { grid-area: gravar; }
}
/* chamados com a cor do setor (pedido do Fabio, 20/10/2026): faixa, avatar e fundo levam a cor */
.wa-chamado > a { border-left: 5px solid var(--setor, #4a5b73); background: color-mix(in srgb, var(--setor, #4a5b73) 7%, transparent); }
.wa-chamado > a:hover { background: color-mix(in srgb, var(--setor, #4a5b73) 14%, var(--fundo-2)); }
.wa-chamado.atual > a { border-left-color: var(--setor, var(--acento)); background: color-mix(in srgb, var(--setor, #4a5b73) 18%, var(--wa-sel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--setor, #4a5b73) 55%, transparent); }
.wa-chamado .wa-avatar { background: var(--setor, #4a5b73); color: #fff; }
.wa-grade .wa-chamado .wa-setor-selo { background: var(--setor, #4a5b73); color: #fff; font-weight: 600; }
.wa-chamado.wa-atrasado > a { border-left-color: var(--erro); }
.wa-legenda-setores { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 4px; font-size: .78em; color: var(--texto-2); }
.wa-legenda-setores span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; background: var(--setor); vertical-align: -1px; }

/* Leitura do e-mail como "papel" (Fabio, 21/10/2026: "nessa cor nao esta muito legal para visualizar").
   Corpo claro com tinta escura nos dois temas, como num cliente de e-mail: contraste alto, letra maior,
   linha mais aberta. A faixa azul a esquerda e o azul do escritorio; enviado pelo escritorio, papel azulado. */
.em-mensagens {
  --em-papel: #f7f9fc; --em-papel-enviado: #eaf3ff; --em-tinta: #0d1b33; --em-tinta-2: #4a5b78;
  --em-borda: #d5deeb; --em-link: #0a58ca;
}
.em-mensagens .wa-entrada, .em-mensagens .wa-saida {
  align-self: stretch; max-width: 100%; background: var(--em-papel); color: var(--em-tinta);
  border: 1px solid var(--em-borda); border-left: 4px solid var(--acento); border-radius: var(--raio);
  padding: var(--e4) var(--e5); box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  font-size: var(--t-base); line-height: 1.6;
}
.em-mensagens .wa-saida { background: var(--em-papel-enviado); border-left-color: var(--eletrico, var(--acento)); }
.em-mensagens .wa-entrada p, .em-mensagens .wa-saida p { color: var(--em-tinta); margin-bottom: var(--e2); }
.em-mensagens .wa-entrada .em-de, .em-mensagens .wa-saida .em-de {
  color: var(--em-tinta-2); font-weight: 600; padding-bottom: var(--e2); margin-bottom: var(--e3);
  border-bottom: 1px solid var(--em-borda);
}
.em-mensagens .wa-entrada a:not(.botao), .em-mensagens .wa-saida a:not(.botao) { color: var(--em-link); }
.em-mensagens .wa-entrada .wa-hora, .em-mensagens .wa-saida .wa-hora { color: var(--em-tinta-2); }
.em-mensagens .wa-entrada .botao, .em-mensagens .wa-saida .botao {
  background: #ffffff; color: var(--em-tinta); border: 1px solid var(--em-borda);
}
.em-mensagens .wa-entrada .botao:hover, .em-mensagens .wa-saida .botao:hover { border-color: var(--acento); color: var(--em-link); }
.em-mensagens .wa-entrada .sub, .em-mensagens .wa-saida .sub { color: var(--em-tinta-2); }
.em-mensagens .em-anexo { padding: var(--e1) 0; border-top: 1px dashed var(--em-borda); }
/* notebook e tablet deitado (761 a 1280px): com o nome em cada botao o topo nao cabe e os botoes
   iam para cima do logo da barra lateral; aqui o topo fica so com icones, como no celular */
@media (min-width: 761px) and (max-width: 1280px) {
  .barra-topo { gap: var(--e2); }
  .barra-topo .rotulo-topo { display: none; }
  .barra-topo > .botao, .barra-topo .avisos > summary {
    position: relative; flex: 0 0 auto; width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    padding: 0; gap: 0; justify-content: center;
  }
  .barra-topo .contador {
    position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 5px; text-align: center;
    box-shadow: 0 0 0 2px var(--fundo-0); pointer-events: none;
  }
}