/* P-C (04/11): Minha fatura 16, Conversas 20, Avisos 19, Monitoramento 25 e Tutorial 26 (fatura.js, conversas.js, avisos.js, monitor.js, tutorial.js).
   Os estilos de linha do esboço (style="…" no app.js) viraram classes aqui. Fica num arquivo próprio para não brigar com as outras cópias. */
.eb .ft-nota-topo{margin:0 0 12px}
.eb .ft-vazio{color:var(--suave)}
.eb .ft-hist{margin-top:8px}
.eb .ft-plano-nome{margin:0;font-size:19px;font-weight:700}
.eb .ft-faixas{margin:16px -16px 0}
.eb .ft-auto{margin-top:16px}
.eb .ft-zap{margin-top:12px}
.eb .ft-b0{margin:0}
.eb .ft-forte{color:var(--texto)}
.eb .conta .novo.ft-primeira{border:0;padding:0}
.eb .ft-desligada{margin:0 4px 12px}
.eb .bt.cinza{background:var(--marcado);color:var(--suave);border-color:var(--borda);cursor:default}
.eb .bt.cinza:hover{filter:none}
/* janela Pagar com Pix: o QR real (imagem do servidor) cabe na caixa e fica sobre fundo branco para o banco ler */
.eb .qr.pix-qr{width:216px;height:216px;padding:8px;border:0;background:#fff}
.eb .qr.pix-qr img{width:200px;height:200px;display:block}
.eb .qr.pix-qr .pix-gerando{color:#5C5752}
.eb .valor-grande.pix-valor{min-height:44px;text-align:center;color:var(--texto);margin:0 0 12px}
.eb .copia-cola[data-cola]{user-select:all;-webkit-user-select:all}
.eb .pix-erro{margin:12px 0 0;color:var(--erro);font-size:14px}
.eb .pix-fora{margin:0 0 12px;font-size:15px}
.eb .pix-pago{text-align:center;padding:16px 0}
.eb .pix-pago .ic{width:44px;height:44px;margin:0 auto 8px;display:block;color:var(--ok)}
.eb .pix-pago h3{margin:0 0 4px}
.eb .esperando.pix-espera::before{margin-right:10px}
@media (prefers-reduced-motion:reduce){.eb .esperando::before{animation:none}}

/* ---- 20 Conversas ---- */
.eb.ch-tela .ch-busca{padding:12px}
.eb.ch-tela .ct-vazio-linha{margin:0;padding:12px 16px;color:var(--suave);font-size:14px}
.eb.ch-tela .chat-item.nao-lida b{font-weight:700}
.eb.ch-tela .chat-item[aria-current=true]{background:var(--marcado)}
.eb .conv-topo .ct-bt-bloquear{margin-left:8px}
.eb .conv-topo small.vencido{color:var(--erro)}
.eb .conv-topo small.vencendo{color:var(--aviso,var(--suave))}
.eb .conv-topo .ct-mais{position:relative;flex:none;margin-left:8px}
.eb .conv-topo .ct-mais>summary{list-style:none;display:grid;place-items:center;width:44px;min-height:44px;padding:0;cursor:pointer}
.eb .conv-topo .ct-mais>summary::-webkit-details-marker{display:none}
.eb .conv-topo .ct-mais>summary .ic{width:20px;height:20px;margin:0}
.eb .conv-topo .ct-mais[open]>summary{background:var(--marcado)}
.eb .conversa .ct-mais .ct-plano{position:absolute;right:0;top:calc(100% + 6px);z-index:6;display:block;min-width:230px;padding:4px 0;background:var(--superficie);border:1px solid var(--borda-forte);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.eb .conversa .ct-mais .ct-plano .bt,.eb .conversa .ct-mais .ct-plano .bt.texto.pequeno{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:48px;margin:0;padding:0 16px;border:0;text-align:left;text-decoration:none;box-sizing:border-box;min-width:0;font-size:14px;line-height:1.3;gap:0}
.eb .conversa .ct-plano .bt .ic{flex:none;width:18px;height:18px;margin-right:10px}
.eb .conversa .ct-bloqueado{flex:none;display:flex;align-items:center;margin:0;padding:8px 16px;font-size:13px;color:var(--suave);background:var(--superficie);border-bottom:1px solid var(--borda)}
.eb .conversa .ct-bloqueado .ic{width:18px;height:18px;margin-right:8px;color:var(--erro)}
.eb .msgs{display:flex;flex-direction:column;min-height:0}
.eb .msgs .msg{align-self:flex-start;flex:none}
.eb .msgs .msg.minha{align-self:flex-end;margin-left:0}
.eb .msg .ct-visto{display:inline-flex;vertical-align:-3px;margin-left:6px}
.eb .msg .ct-visto svg{width:16px;height:16px;color:var(--ativo)}
.eb .msg .ct-visto.pendente svg{color:var(--suave)}
.eb .msg.enviando{opacity:.7}
.eb .msg.com-foto{padding:4px 4px 8px}
.eb .msg.com-foto small{padding:0 8px}
.eb .msg .ct-foto{display:block;width:240px;max-width:100%;padding:0;border:0;background:var(--fundo)}
.eb .msg .ct-foto-carregando{display:grid;place-items:center;height:160px;font-size:13px;color:var(--suave)}
.eb .msgs .ct-antigas{align-self:center;flex:none;margin:0 0 8px}
.eb .msgs .ct-sem-msg{margin:auto;color:var(--suave);font-size:13px}
.eb .msgs .msg-dia{flex:none}
.eb .conversa .ct-status{flex:none;margin:0;padding:6px 16px;font-size:13px;background:var(--superficie);border-top:1px solid var(--borda)}
.eb .conversa .ct-somente-leitura{flex:none;display:flex;justify-content:center;align-items:center;margin:0;padding:14px 16px;font-size:14px;color:var(--suave);background:var(--superficie);border-top:1px solid var(--borda)}
.eb .conversa .ct-somente-leitura .ic{width:18px;height:18px;margin-right:8px}
.eb .conversa .escrever{display:block;flex:none;padding:10px}
.eb .escrever .ct-campos{display:flex;align-items:flex-end}
.eb .escrever textarea{flex:1;min-width:0;min-height:48px;max-height:132px;border:1px solid var(--borda-forte);background:var(--campo);padding:12px 14px;font-size:16px;line-height:1.35;resize:none;display:block}
.eb .escrever .bt.anexo{position:relative;display:grid;place-items:center;flex:none;width:48px;min-height:48px;padding:0;margin:0 8px 0 0;cursor:pointer}
.eb .escrever .bt.anexo input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.eb .escrever .bt.anexo:focus-within{outline:2px solid var(--ativo);outline-offset:2px}
.eb .escrever .ct-mandar{flex:none;width:auto;min-height:48px;margin-left:8px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center}
.eb .escrever .ct-mandar .ic{margin-right:0}
.eb .escrever .ct-mandar .so-pc{margin-left:8px}
.eb .escrever .ct-anexo{display:flex;align-items:center;padding:0 0 8px 4px}
.eb .escrever .ct-anexo[hidden]{display:none}
.eb .escrever .ct-anexo img{width:48px;height:48px;object-fit:cover;border:1px solid var(--borda);margin-right:12px}
.eb .escrever .ct-anexo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--suave)}
.eb .escrever .ct-anexo button{display:grid;place-items:center;width:44px;min-height:44px;padding:0;border:0;background:none}
.eb .escrever .erro{margin:0 4px 8px;font-size:13px;color:var(--erro)}.eb .escrever .erro:empty{display:none}
.eb .conversa .ct-escolha{margin:auto}
@media (max-width:999px){
 .eb.ch-tela .chat:not([data-aberta]) .conversa{display:none}
 .eb.ch-tela .chat[data-aberta] .chat-lista{display:none}
 .eb.ch-tela.chat-aberta>.cabeca,.eb.ch-tela.chat-aberta>.chat-chave{display:none}   /* conversa aberta no celular: só a conversa, em tela cheia */
 body[data-ct-chat] .eb.ch-tela{height:100%;display:flex;flex-direction:column}
 body[data-ct-chat] .eb.ch-tela .chat{flex:1;min-height:0;margin:0}
 body[data-ct-chat] .eb.ch-tela .conversa{height:100%;min-height:0}
 body[data-ct-chat] #conteudo{padding:16px 16px 16px}   /* a conversa é um cartão entre o topo e a barra de baixo, como no esboço */
 .eb.ch-tela .conv-topo{padding:10px 10px 10px 4px}
 .eb.ch-tela .conv-topo .ct-voltar{width:40px;min-height:44px;margin:0;padding:0}
 .eb.ch-tela .conv-topo .avatar{margin-right:10px}
 .eb.ch-tela .conv-topo .ct-mais{margin-left:6px}
 .eb.ch-tela .conv-topo .ct-mais>summary{width:40px}
 .eb.ch-tela .conversa.entrando{animation:folha var(--folha,220ms) var(--entrada,ease-out)}
 .eb.ch-tela .conversa .ct-escolha{display:none}
}
@media (max-width:999px) and (prefers-reduced-motion:reduce){.eb.ch-tela .conversa.entrando{animation:none}}
@media (min-width:1000px){
 .eb.ch-tela .conv-topo .fechar{display:none}
}

/* ---- 19 Avisos do app ---- */
.eb .av-tela .seg-off button:disabled{opacity:.55;cursor:default}
.eb .av-tela .em-breve{display:block;margin-top:4px;font-size:12px;color:var(--suave)}
.eb .av-tela input:disabled{opacity:.55}
.eb .av-tela .ct-cont{text-align:right}
.eb .av-tela .ct-dias-in{display:flex;align-items:center}
.eb .av-tela .ct-dias-in input{width:96px;margin-right:8px}
.eb .av-tela .ct-selecao{background:var(--superficie);border:1px solid var(--borda)}
.eb .av-tela .ct-selecao[hidden]{display:none}
.eb .av-tela .ct-loja{display:flex;font-size:13px;color:var(--suave);background:var(--marcado);border:1px solid var(--borda);padding:12px}
.eb .av-tela .ct-loja .ic{flex:none;width:20px;height:20px;margin-right:10px}
.eb .av-tela .ct-loja p{margin:0}
.eb .av-tela .ct-loja b{color:var(--texto)}
.eb .av-tela .ct-loja-alerta{margin:0;font-size:13px;color:var(--erro)}
.eb .av-tela .ct-previa-txt,.eb .av-tela .erro{margin:0;font-size:14px}
.eb .av-tela .erro{color:var(--erro)}.eb .av-tela .erro:empty,.eb .av-tela .ct-previa-txt:empty{display:none}
.eb .av-tela .av-envio{margin-top:16px;display:flex;flex-wrap:wrap}
.eb .av-tela .av-envio .bt{margin:0 8px 8px 0}
.eb .av-tela .av-cota{margin:4px 0 0}.eb .av-tela .av-cota b{font-size:16px;color:var(--texto)}.eb .av-tela .av-cota.esgotada b{color:var(--erro)}
.eb .av-tela .av-vazio{margin:8px 0 0}
.eb .av-tela .av-enviados{margin-top:8px}
.eb .av-tela .ct-cliente{display:flex;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--borda)}
.eb .av-tela .ct-cliente input{flex:none;margin:4px 12px 0 0}
.eb .av-tela .ct-cliente small{display:block;font-size:12px;color:var(--suave)}
.eb .av-tela .ct-cliente small.vencido{color:var(--erro)}
.eb .av-tela .ct-clientes{max-height:288px;overflow-y:auto}
.eb .av-tela .ct-marcados{margin:0;padding:12px 16px;font-size:13px;font-weight:700;color:var(--suave)}

/* ---- 25 Monitoramento ---- */
.eb .mn-tela .mn-busca{max-width:480px}
.eb .mn-tela .mn-vazio{margin:16px}

/* ---- 26 Tutorial de instalação ---- */
.eb .tt-tela .tuto-pe{padding:0 16px 16px}

/* ---- 16e Painel vencido ---- */
.eb .vencido-caixa .vc-fale{margin:0 0 20px}
.eb .vencido-caixa .vc-fale .bt{display:flex;width:100%;min-height:52px;justify-content:center}
.eb .vencido-caixa .vc-fale .bt .ic,.eb .vencido-caixa .vc-fale svg{flex:none;width:20px;height:20px;margin-right:8px}
.eb .vencido-caixa .vc-ok{display:flex;align-items:center;margin:0 0 16px;font-size:14px;color:var(--suave)}
.eb .vencido-caixa .vc-ok svg{flex:none;width:20px;height:20px;margin-right:10px;color:var(--ok)}
.eb .vencido-caixa .vc-subs{margin-top:24px}
.eb .vencido-caixa .vc-rodape{display:block;margin-top:16px}
.eb .vencido-caixa .vc-rodape .bt{display:flex;width:100%;min-height:48px;justify-content:center;margin:0 0 8px}
.eb .vencido-caixa .vc-fatura .bt.principal{width:100%;min-height:52px;margin-top:16px}
.eb .vencido-caixa .venc-volta{display:flex;align-items:center;margin:16px 0 0;font-size:14px}
.eb .vencido-caixa .venc-volta svg{flex:none;width:20px;height:20px;margin-right:10px;color:var(--ok)}

/* ---- Largura das telas da cópia C no PC: igual às outras telas do esboço (o painel.css limitava #conteudo e os filhos a 1200 px; o Tutorial a 720) ---- */
@media (min-width:1000px){
 body[data-tela=fatura] #conteudo,body[data-tela=conversas] #conteudo,body[data-tela=avisos-massa] #conteudo,body[data-tela=numeros] #conteudo,body[data-tela=instalar] #conteudo{max-width:none;scrollbar-gutter:auto}
 body[data-tela=fatura] #conteudo>*:not(dialog),body[data-tela=conversas] #conteudo>*:not(dialog),body[data-tela=avisos-massa] #conteudo>*:not(dialog),body[data-tela=numeros] #conteudo>*:not(dialog),body[data-tela=instalar] #conteudo>*:not(dialog){max-width:1440px}
}
/* 16: cabeçalho da tabela de planos ("100 inclusos" / "Distribuidor") com respiro entre as colunas */
.eb .ft-tela .comp thead th{padding-left:6px;padding-right:6px;font-size:12px}
@media (min-width:1000px){.eb .ft-tela .comp thead th{padding-left:10px;padding-right:10px}}
/* 16e: a etiqueta tem 1 quadradinho só (o ::before do esboço); o <i> do painel antigo ficava como 2º */
.eb .situacao>i{display:none}

/* ---- P-fix2 (04/11): funções do painel antigo devolvidas em Clientes, no jeito do esboço ---- */
/* selos pequenos na linha "TV xxxx" (mesma etiqueta .etq do esboço; só aparecem quando verdadeiros) */
.eb .etq.selo-tv{display:inline-block;margin:2px 6px 0 0;padding:0 6px;border:1px solid var(--borda-forte);color:var(--suave);font-size:11px;font-weight:700;line-height:1.6;letter-spacing:.02em;vertical-align:1px;white-space:nowrap}
.eb .etq.selo-tv.renovado{border-color:var(--laranja);color:var(--ativo)}
.eb .t-cli .codigo .etq.selo-tv{display:inline-block;margin:4px 6px 0 0}
.eb .cli-info .cl-linha-vence{display:inline-block}
.eb .tabela-wrap td .cl-linha-vence{display:block;margin-top:2px;font-size:12px;color:var(--suave)}
.eb [data-colar-dica].cl-colar-aviso{color:var(--erro);font-weight:700}
/* filtro "Contas do app": a lista de clientes e os filtros de data/servidor saem de cena; as contas entram no lugar */
.eb.cl-tela.em-contas .lista-cel,.eb.cl-tela.em-contas .tabela-wrap,.eb.cl-tela.em-contas>.vazio,.eb.cl-tela.em-contas .lista-titulo,.eb.cl-tela.em-contas .so-clientes,.eb.cl-tela.em-contas .periodo{display:none}
.eb .cl-contas-lugar{margin-top:16px}
.eb .cl-contas-lugar h3{margin:0 0 4px;font-size:16px}
.eb .cl-contas-lugar .espera-ativacao{margin:0 0 24px;padding:16px;border:1px solid var(--laranja);background:var(--marcado)}
.eb .cl-contas-lugar .espera-ativacao h3{margin:0 0 6px}
.eb .cl-contas-lugar .espera-ativacao .cartao:last-child{border-bottom:0;padding-bottom:0}
.eb .cl-contas-lugar .cli-topo>.cli-sit .bt{min-height:40px}
.eb .cl-contas-lugar .cl-contas>.nota{margin:0 0 4px}
.eb .cl-contas-pag{display:flex;align-items:center;justify-content:space-between;margin:16px 0 0}
/* 27: Testar chave do PaggPay (verde = conectada, vermelho = recusada) */
.eb .integ-testar{display:flex;flex-wrap:wrap;align-items:center;margin:12px -4px 0}
.eb .integ-testar>*{margin:4px}
.eb .integ-testar .situacao{flex:1 1 100%;white-space:normal;line-height:1.35}
#am-paggpay-resultado{margin:4px 0 0}
#am-paggpay-resultado .erro{margin:4px 0 0;color:var(--erro);font-size:14px;font-weight:700}
.eb .integ-testar+#am-paggpay-resultado:empty{display:none}

/* ---- P-fix3 (04/11): tela "Teste grátis e logins" (Testes) com as peças do esboço 17: cabeça de tela, blocos, campos, botões .bt, etiquetas ----
   A marcação antiga (ids, data-acao, .estoque, .codigo-loja, .como-sai, .segmentos, .selo) continua; aqui ela só ganha o visual do esboço. */
.eb.cfg-testes .painel-bloco{margin:24px 0 0;padding:16px;background:var(--superficie);border:1px solid var(--borda)}
.eb.cfg-testes .painel-bloco>h2,.eb.cfg-testes .painel-bloco legend{margin:0 0 8px;padding:0;font-size:17px;line-height:1.3}
.eb.cfg-testes .painel-bloco>.dica:first-of-type{margin-top:0}
.eb.cfg-testes .dica,.eb.cfg-testes .ordem,.eb.cfg-testes .estoque-destino{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--suave);max-width:72ch}
.eb.cfg-testes .ordem{border-top:1px solid var(--borda);padding-top:12px;margin-top:16px}
.eb.cfg-testes label{display:block;margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--texto)}
.eb.cfg-testes input:not([type=radio]):not([type=checkbox]):not([type=hidden]),.eb.cfg-testes select,.eb.cfg-testes textarea{display:block;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--borda-forte);border-radius:0;background:var(--campo);color:var(--texto);font-size:16px}
.eb.cfg-testes textarea{padding:12px 14px;min-height:112px;line-height:1.5;resize:vertical}
.eb.cfg-testes input:not([type=radio]):not([type=checkbox]):focus,.eb.cfg-testes select:focus,.eb.cfg-testes textarea:focus{border-color:var(--texto);outline:none;box-shadow:0 0 0 1px var(--texto)}
.eb.cfg-testes .com-botao{display:flex}
.eb.cfg-testes .com-botao input{flex:1;min-width:0}
.eb.cfg-testes .com-botao .bt{margin-left:-1px}
.eb.cfg-testes .acoes{display:flex;flex-wrap:wrap;margin:12px -4px 0}
.eb.cfg-testes .acoes>*{margin:4px}
.eb.cfg-testes .codigo-grande{margin:4px 0 2px;font-size:34px;letter-spacing:.14em}
.eb.cfg-testes .bt.texto{padding:0 4px;margin-top:8px}
.eb.cfg-testes .estoque #estoque-form{display:block}
.eb.cfg-testes .estoque #estoque-form>button{margin-top:12px}
.eb.cfg-testes .estoque-numeros b{font-size:28px}
/* duração do teste = o seletor de pílulas do esboço (.seg) */
.eb.cfg-testes .duracao legend{margin-bottom:0}
.eb.cfg-testes .segmentos{display:flex;margin-top:12px;border:1px solid var(--borda-forte);background:var(--campo)}
.eb.cfg-testes .segmentos label{flex:1 1 0;margin:0;font-size:14px}
.eb.cfg-testes .segmentos label+label{border-left:1px solid var(--borda)}
.eb.cfg-testes .segmentos span{min-height:44px;color:var(--suave);font-size:14px}
.eb.cfg-testes .segmentos input:checked+span{background:var(--texto);color:var(--superficie)}
:root[data-tema=escuro] .eb.cfg-testes .segmentos input:checked+span{background:var(--laranja);color:#101112}
/* selos = etiqueta de situação do esboço (quadradinho + texto) */
.eb.cfg-testes .selo{display:flex;flex-wrap:wrap;align-items:center;margin:12px 0;padding:6px 10px;border:1px solid var(--borda);font-size:13px;line-height:1.4}
.eb.cfg-testes .selo i{position:static;flex:none;width:8px;height:8px;margin-right:8px;border-radius:0;background:var(--ok)}
.eb.cfg-testes .selo.alerta i{background:var(--ambar)}
.eb.cfg-testes .selo.erro{border-color:var(--erro)}
.eb.cfg-testes .selo.erro i{background:var(--erro)}
.eb.cfg-testes .selo.neutro i{background:var(--suave)}
.eb.cfg-testes .selo strong{margin-right:6px;font-weight:700}
.eb.cfg-testes .faixa-erro{margin:0 0 12px;padding:10px 12px;border:1px solid var(--erro);background:var(--superficie)}
.eb.cfg-testes .url-teste .ajuda,.eb.cfg-testes .recolhido{margin:8px 0 12px;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.eb.cfg-testes .erro{margin:8px 0 0;color:var(--erro);font-size:14px;font-weight:700}
.eb.cfg-testes .erro:empty{display:none}
@media (max-width:999px){.eb.cfg-testes .segmentos span{padding:0 2px}}
body[data-tela=testes] #conteudo{max-width:none;scrollbar-gutter:auto}
/* P-fix3: o select "Mostrar" dos filtros de Clientes no celular tem 16 px (o do esboço tem 15; o painel não pode ter campo menor que 16). Fica aqui porque painel-esboco.css é gerado do esboço. */
.eb .filtros-grade select{font-size:16px}