:root { --fundo: #F1F2F5; --painel: #FFFFFF; --caixa: #F4F5F7; --linha: #E4E6EB; --borda: #D5D9E0; --texto: #1A1D24; --fraco: #5F6675; --medio: #4E5565; --destaque: #1D4ED8; --escuro: #FFFFFF; --barra: #1D4ED8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: Manrope, system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
h1, h2 { font-family: Sora, sans-serif; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
button, input, select { font-family: inherit; font-size: 15px; }
button { cursor: pointer; }
label { display: block; font-size: 13px; font-weight: 700; color: var(--fraco); margin: 14px 0 6px; }
input, select { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--caixa); color: var(--texto); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sub { color: var(--medio); margin: 4px 0 0; }
.fraco { color: var(--fraco); font-size: 13px; font-weight: 600; }
.erro { color: #B42318; min-height: 22px; margin: 10px 0; font-weight: 600; }
.aviso { color: #92400E; font-size: 13px; margin: 0; padding: 0 22px 16px; }
.btn { height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--borda); background: var(--painel); color: var(--texto); font-weight: 700; }
.btn.principal { border: 0; background: var(--destaque); color: #FFFFFF; }
.marca { width: 36px; height: 36px; border-radius: 10px; background: var(--destaque); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: Sora, sans-serif; font-weight: 800; font-size: 17px; }

.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-caixa { width: 100%; max-width: 400px; padding: 32px; border-radius: 24px; background: var(--painel); border: 1px solid var(--linha); }
.login-caixa h1 { margin-top: 18px; font-size: 26px; }
.login-caixa .btn { width: 100%; }

.app { display: flex; flex-wrap: wrap; align-content: flex-start; min-height: 100vh; }
.trilho { flex: 1 1 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 60px; padding: 8px 20px; background: var(--barra); }
.trilho .marca { margin-right: 14px; background: #FFFFFF; color: var(--barra); }
.nav { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: #E0E9FD; font-size: 14px; font-weight: 700; }
.nav.ativo { background: #3B66D9; color: #FFFFFF; }
.nav.sair { margin-left: auto; }
.nav:focus-visible { outline-color: #FFFFFF; }
.tela { flex: 999 1 480px; min-width: 0; padding: 12px; min-height: calc(100vh - 60px); }
.conversas { display: flex; flex-wrap: wrap; gap: 12px; }
.lista { flex: 1 1 290px; max-width: 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 12px; border-radius: 20px; background: var(--painel); }
.topo-lista { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 8px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.pilula { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borda); background: var(--painel); color: #3A4150; font-size: 14px; font-weight: 700; }
.pilula.ativo { border-color: var(--destaque); background: var(--destaque); color: #FFFFFF; }
.itens { display: flex; flex-direction: column; gap: 4px; }
.item { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 12px; border-radius: 14px; border: 0; background: transparent; color: var(--texto); text-align: left; }
.item:hover { background: #F6F7F9; }
.item.ativo { background: #EEF0F3; }
.item .linha1 { display: flex; justify-content: space-between; gap: 10px; }
.item .nome { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .hora { flex: none; font-size: 12px; color: var(--fraco); }
.item .previa { font-size: 13.5px; color: var(--medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .linha3 { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.canal { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.canal.whatsapp { background: #DCFCE7; color: #166534; } .canal.instagram { background: #FCE7F3; color: #9D174D; } .canal.facebook { background: #DBEAFE; color: #1E40AF; }
.novas { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--destaque); color: #FFFFFF; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.vazio { color: var(--medio); padding: 40px 28px; text-align: center; }

.pastas { flex: 1 1 200px; max-width: 250px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 20px 10px; border-radius: 20px; background: var(--painel); }
.pastas h1 { font-size: 19px; padding: 0 10px; margin-bottom: 10px; }
.grupo { display: flex; flex-direction: column; gap: 4px; }
.pasta { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 0; background: transparent; color: var(--texto); font-size: 15px; font-weight: 500; text-align: left; }
.pasta:hover { background: #F6F7F9; }
.pasta.ativo { background: #E9EBEF; font-weight: 700; }
.rotulo { margin: 16px 0 2px; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--fraco); }
.ponto { flex: none; width: 10px; height: 10px; border-radius: 999px; background: #8A91A0; }
.ponto.whatsapp { background: #16A34A; } .ponto.instagram { background: #DB2777; } .ponto.facebook { background: #2563EB; }
.empresa { margin-top: auto; padding: 12px 12px 0; }
.lista h2 { font-size: 19px; }
#busca { height: 44px; border: 0; }
.avatar { flex: 0 0 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--texto); background: #E3E6EC; }
.avatar.c1 { background: #CFEFF5; } .avatar.c2 { background: #D3F2E0; } .avatar.c3 { background: #FAD4D4; } .avatar.c4 { background: #E6DDFB; }
.corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item.nao-lida .nome { font-weight: 800; } .item.nao-lida .previa { font-weight: 700; color: var(--texto); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.etq { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #EDE9FE; color: #5B21B6; }
.etq.atd { padding: 1px 8px; background: transparent; border: 1px solid #C3C8D2; color: #3A4150; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acoes select { width: auto; min-width: 170px; background: var(--painel); }
.btn.ligado { border-color: var(--destaque); background: #E6EEFD; color: var(--destaque); }

.chat { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; border-radius: 20px; background: var(--painel); overflow: hidden; }
.chat > .vazio { margin: auto; font-family: Sora, sans-serif; font-weight: 700; font-size: 17px; color: var(--texto); }
.chat-aberto { flex: 1; display: flex; flex-direction: column; min-height: calc(100vh - 84px); }
.chat-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--linha); }
.mensagens { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px; overflow-y: auto; background: #FAFAFB; }
.msg { max-width: 72%; align-self: flex-start; display: flex; flex-direction: column; gap: 3px; }
.msg .balao { padding: 11px 15px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--linha); font-size: 15px; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .pe { font-size: 12px; color: var(--fraco); }
.msg.saida { align-self: flex-end; }
.msg.saida .balao { background: var(--destaque); border-color: var(--destaque); color: #FFFFFF; }
.msg.saida .pe { align-self: flex-end; }
.escrever { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--linha); }
.escrever input { flex: 1; min-width: 0; }

.pagina { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.tabela-caixa { overflow-x: auto; border-radius: 20px; background: var(--painel); }
table { width: 100%; min-width: 640px; border-collapse: collapse; }
th { text-align: left; padding: 16px 22px; font-size: 13px; color: var(--fraco); border-bottom: 1px solid var(--linha); }
td { padding: 14px 22px; border-bottom: 1px solid var(--caixa); font-weight: 600; }
.cartao { padding: 24px; border-radius: 20px; background: var(--painel); }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

.busca-geral { position: relative; flex: 1 1 240px; max-width: 460px; margin: 0 auto; }
.busca-geral input { height: 44px; border: 0; border-radius: 999px; padding: 0 18px; background: #1E3A8A; color: #FFFFFF; }
.busca-geral input::placeholder { color: #D9D7F0; }
.busca-geral input:focus-visible { outline-color: #FFFFFF; }
.resultado { position: absolute; z-index: 10; top: 52px; left: 0; right: 0; max-height: 70vh; overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--painel); border: 1px solid var(--linha); box-shadow: 0 12px 32px rgba(26, 29, 36, 0.18); display: flex; flex-direction: column; gap: 4px; }
.resultado .vazio { padding: 18px; }
.busca-pagina { max-width: 420px; border: 0; background: var(--painel); }
.pessoa { display: flex; align-items: center; gap: 12px; }
.etq.sit-ativa { background: #DCFCE7; color: #166534; } .etq.sit-teste { background: #E3E6EC; color: #3A4150; } .etq.sit-pendente { background: #FEF3C7; color: #92400E; }
td.vazio { font-weight: 500; }

.etq.e0 { background: #EDE9FE; color: #5B21B6; } .etq.e1 { background: #DBEAFE; color: #1E40AF; } .etq.e2 { background: #FEF3C7; color: #92400E; }
.etq.e3 { background: #DCFCE7; color: #166534; } .etq.e4 { background: #CFFAFE; color: #155E75; } .etq.e5 { background: #E3E6EC; color: #3A4150; }
select.funcao { width: auto; min-width: 160px; height: 44px; background: var(--painel); }
.rapidas { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 0; border-top: 1px solid var(--linha); }
.rapidas + .escrever { border-top: 0; }
.rapida { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borda); background: var(--painel); color: #3A4150; font-size: 13px; font-weight: 700; }
.rapida:hover { border-color: var(--destaque); color: var(--destaque); }
.campos .largo { grid-column: span 2; }
.dica { margin: 12px 0 0; }
td.texto-longo { font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.aviso.neutro { color: var(--medio); padding-top: 14px; }
#erro-chat { margin: 0; padding: 0 22px; min-height: 0; }
.btn.pequeno { height: 44px; padding: 0 14px; font-size: 14px; }
td .acoes input { width: 200px; height: 44px; }
td .acoes .erro { min-height: 0; margin: 0; font-size: 13px; }

.topo-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rot { font-size: 13px; font-weight: 700; color: var(--fraco); }
.valor { font-family: Sora, sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.02em; }
.valor.destaque { color: var(--destaque); }
.duas { display: flex; flex-wrap: wrap; gap: 12px; }
.duas .cartao { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.duas .cartao.larga { flex: 2 1 420px; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 240px; }
.coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.coluna .numero { font-size: 13px; font-weight: 700; min-height: 18px; }
.coluna .barra { width: 100%; max-width: 56px; border-radius: 6px 6px 2px 2px; background: var(--destaque); }
.coluna .dia { font-size: 12px; color: var(--fraco); white-space: nowrap; }
.faixas { display: flex; flex-direction: column; gap: 16px; }
.faixa-topo { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; margin-bottom: 8px; }
.trilha { height: 12px; border-radius: 999px; background: #E3E6EC; }
.cheio { height: 12px; border-radius: 999px; background: #8A91A0; }
.cheio.whatsapp { background: #16A34A; } .cheio.instagram { background: #DB2777; } .cheio.facebook { background: #2563EB; }
.tabela-caixa.plana { margin-top: 10px; border-radius: 0; }
.tabela-caixa.plana th, .tabela-caixa.plana td { padding-left: 0; }

@media (max-width: 640px) {
  .trilho { padding: 8px 10px; }
  .trilho .marca { margin-right: 4px; }
  .busca-geral { order: 9; flex: 1 1 100%; max-width: 100%; }
  .nav { padding: 0 12px; }
  .lista, .pastas { max-width: 100%; }
  .campos .largo { grid-column: auto; }
  .grupo { flex-direction: row; flex-wrap: wrap; }
  .empresa { margin-top: 0; }
  .chat-aberto { min-height: 70vh; }
  .pagina { padding: 16px 12px; }
}

/* WhatsApp por QR Code (Revenda) */
.painel-qr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.painel-qr[hidden] { display: none; }
.qr-texto { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.qr-situacao { margin: 0; font-weight: 700; }
.qr-passos { margin: 0; padding-left: 20px; color: var(--medio); }
.qr-passos li { margin: 4px 0; }
.aviso.qr-aviso { padding: 0; }
.painel-qr .erro { min-height: 0; margin: 0; }
.painel-qr .acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.qr-imagem { flex: 0 0 280px; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.qr-imagem img { width: 280px; max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--linha); background: #FFFFFF; }
.qr-vazio { width: 280px; max-width: 100%; min-height: 200px; padding: 20px; border-radius: 16px; border: 1px dashed var(--borda); color: var(--fraco); font-size: 14px; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; }
.qr-vazio[hidden] { display: none; }

/* Etapa 11: tela da conversa */
textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--caixa); color: var(--texto); font: inherit; resize: vertical; }
textarea:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quem-texto { min-width: 0; }
.quem-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.btn.icone { width: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn.icone.ligado { border-color: var(--destaque); background: #E6EEFD; color: var(--destaque); }

.msg .autor { align-self: flex-end; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fraco); }
.msg .balao { display: flex; flex-direction: column; gap: 6px; }
.msg .balao .pe { align-self: flex-end; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.msg.saida .balao .pe { color: #DAD8F2; }
.msg.saida .balao .pe.lida { color: #A5F3FC; }
.msg.saida .balao .pe.falha { color: #FECACA; font-weight: 800; }
.msg.nota { align-self: flex-end; }
.msg.nota .balao { background: #FEF3C7; border-color: #FCD34D; color: #1A1D24; }
.msg.nota .balao .pe { color: #92400E; }
.msg.nota .autor { color: #92400E; }
.msg img { display: block; max-width: 100%; max-height: 300px; border-radius: 10px; background: #E3E6EC; }
.msg img.figurinha { max-height: 140px; background: transparent; }
.msg audio { width: 260px; max-width: 100%; height: 44px; }
.msg video { max-width: 100%; max-height: 300px; border-radius: 10px; }
.msg .midia-arquivo { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: inherit; overflow-wrap: anywhere; }

.rapidas { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-height: 240px; overflow-y: auto; margin: 0 22px; padding: 8px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); }
.rapidas[hidden], .emojis[hidden], .gravando[hidden], .faixa-nota[hidden] { display: none; }
.rapida { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 12px; border-radius: 10px; border: 0; text-align: left; }
.rapida:hover, .rapida:focus-visible { background: #E6EEFD; }
.rapida .previa-rapida { font-size: 13px; font-weight: 500; color: var(--medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rapidas .vazio { padding: 12px; }
.emojis { display: flex; flex-wrap: wrap; gap: 2px; max-height: 190px; overflow-y: auto; margin: 0 22px; padding: 8px; border: 1px solid var(--borda); border-radius: 14px; background: var(--painel); }
.emojis button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; }
.emojis button:hover { background: #E6EEFD; }
.gravando { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 22px; padding: 10px 14px; border-radius: 14px; background: #FEF2F2; color: #991B1B; font-weight: 700; }
.gravando .tempo { margin-right: auto; font-variant-numeric: tabular-nums; }
.ponto-gravando { width: 12px; height: 12px; border-radius: 999px; background: #DC2626; animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .ponto-gravando { animation: none; } }

.escrever, .rapidas + .escrever { flex-direction: column; gap: 6px; margin: 12px 22px 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 16px; background: var(--painel); }
.escrever:focus-within { border-color: var(--destaque); }
.escrever.modo-nota { background: #FFFBEB; border-color: #FCD34D; }
.escrever textarea { min-height: 44px; max-height: 180px; padding: 10px 6px; border: 0; background: transparent; resize: none; font-size: 15px; line-height: 1.45; }
.escrever textarea:focus-visible { outline: none; }
.colado { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--linha); border-radius: 12px; background: #F8FAFC; }
.colado[hidden] { display: none; }
.colado img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.colado-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.colado-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soltar { outline: 2px dashed #1D4ED8; outline-offset: -4px; background: #EFF6FF; }
.faixa-nota { margin: 0; padding: 0 6px; font-size: 13px; font-weight: 700; color: #92400E; }
.ferramentas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.ferr { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--medio); }
.ferr:hover { background: #E9EBEF; color: var(--texto); }
.ferr.ligado { background: #E6EEFD; color: var(--destaque); }
#b-nota.ligado { background: #FDE68A; color: #92400E; }
.ferr.enviar { background: var(--destaque); color: #FFFFFF; margin-left: 4px; }
.ferr.enviar:hover { background: #1E3A8A; color: #FFFFFF; }
.ferr:disabled { opacity: 0.5; }
.chat-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 22px 16px; }
.chat-etiquetas .etq { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 12px; min-height: 32px; font-size: 13px; }
.chat-etiquetas .tirar { width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 17px; line-height: 1; }
.chat-etiquetas .tirar:hover { background: rgba(26, 29, 36, 0.12); }
.chat-etiquetas select { width: auto; height: 36px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--painel); }
#erro-chat { padding: 6px 22px 0; }

.ficha { flex: 1 1 280px; max-width: 340px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; border-radius: 20px; background: var(--painel); position: relative; max-height: calc(100vh - 84px); overflow-y: auto; }
.ficha[hidden] { display: none; }
.ficha .fechar { position: absolute; top: 12px; left: 12px; border: 0; font-size: 24px; }
.avatar.grande { flex: 0 0 88px; width: 88px; height: 88px; font-size: 28px; }
.ficha h2 { margin: 6px 0 0; font-size: 18px; text-align: center; overflow-wrap: anywhere; }
.ficha > p { margin: 0; text-align: center; }
.ficha form { align-self: stretch; display: flex; flex-direction: column; }
.ficha h3 { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 15px; }
.ficha form .btn { margin-top: 8px; }
.ficha .erro { min-height: 0; margin: 8px 0 0; }
#ficha-salva { margin-top: 8px; text-align: center; min-height: 18px; }

.mais { position: relative; }
.menu-mais { position: absolute; z-index: 10; top: 52px; right: 0; min-width: 240px; padding: 6px; border-radius: 14px; background: var(--painel); border: 1px solid var(--linha); box-shadow: 0 12px 32px rgba(26, 29, 36, 0.18); display: flex; flex-direction: column; }
.menu-mais[hidden], .barra-pesquisa[hidden] { display: none; }
.menu-mais button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); font-weight: 600; text-align: left; }
.menu-mais button:hover, .menu-mais button:focus-visible { background: #E6EEFD; }
.barra-pesquisa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: 1px solid var(--linha); }
.barra-pesquisa input { flex: 1 1 200px; height: 44px; }
.msg.achada .balao { outline: 3px solid #F59E0B; outline-offset: 2px; }
.mensagens.pesquisando .msg:not(.achada) { opacity: 0.35; }
.chat-aberto { height: calc(100vh - 84px); min-height: 480px; }
.mensagens { min-height: 0; }

/* ===== Etapa 12: barra de cima, filtros, lista nova, janelas e visual mais vivo ===== */
:root { --destaque-2: #2563EB; --sombra: 0 1px 2px rgba(26, 29, 36, 0.05), 0 8px 24px rgba(29, 78, 216, 0.07); --sombra-alta: 0 16px 40px rgba(23, 47, 122, 0.22); --mola: cubic-bezier(0.34, 1.56, 0.64, 1); }
body { background: linear-gradient(180deg, #E6EEFD 0, var(--fundo) 260px) fixed, var(--fundo); }
button, .btn, input, select, textarea { transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s; }
button { cursor: pointer; }
button:disabled { cursor: default; }
.btn:hover { border-color: var(--destaque); color: var(--destaque); box-shadow: 0 4px 12px rgba(29, 78, 216, 0.12); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn.principal { background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); }
.btn.principal:hover { color: #FFFFFF; box-shadow: 0 6px 18px rgba(29, 78, 216, 0.35); }
input:hover, select:hover, textarea:hover { border-color: #B3C5EE; }
.pastas, .lista, .chat, .ficha, .cartao, .tabela-caixa, .login-caixa { box-shadow: var(--sombra); }
.cartao { transition: box-shadow 0.2s, transform 0.2s; }
.cartoes .cartao:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29, 78, 216, 0.14); }
tbody tr { transition: background-color 0.15s; }
tbody tr:hover { background: #F7F7FC; }
.tela:not([hidden]) { animation: entrar 0.25s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes descer { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes pulo { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }

/* Barra de cima */
.trilho { background: linear-gradient(100deg, #1E3A8A, #1D4ED8 45%, #2563EB); box-shadow: 0 4px 18px rgba(23, 47, 122, 0.28); position: sticky; top: 0; z-index: 20; }
.trilho .marca { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transition: transform 0.3s var(--mola); }
.trilho .marca:hover { transform: rotate(-8deg) scale(1.08); }
.nav { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; }
.nav .rot { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.25s ease, opacity 0.2s; }
.nav.ativo .rot, .nav:hover .rot, .nav:focus-visible .rot { max-width: 140px; opacity: 1; }
.nav:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
.nav.ativo { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.nav svg { flex: none; transition: transform 0.3s var(--mola); }
.nav:hover svg { transform: scale(1.15); }
.canto { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.suspenso { position: relative; }
.nav.redondo { width: 44px; padding: 0; justify-content: center; position: relative; }
.selo { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #FACC15; color: #1A1D24; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #1D4ED8; }
.selo[hidden] { display: none; }
.selo.pulo { animation: pulo 0.5s var(--mola); }
.nav.usuario { padding: 0 4px; position: relative; }
.avatar.pequeno { flex: 0 0 38px; width: 38px; height: 38px; font-size: 13px; background: #FFFFFF; color: var(--destaque); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.ponto-disp { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 999px; background: #22C55E; border: 2px solid #1D4ED8; animation: onda 1.8s infinite; }
.ponto-disp.fora { background: #F59E0B; animation: none; }
.painel-suspenso { position: absolute; z-index: 30; top: 52px; right: 0; width: 290px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; padding: 8px; border-radius: 16px; background: var(--painel); color: var(--texto); border: 1px solid var(--linha); box-shadow: var(--sombra-alta); display: flex; flex-direction: column; gap: 2px; animation: descer 0.18s ease-out; transform-origin: top right; }
.painel-suspenso[hidden] { display: none; }
.painel-suspenso label { margin: 8px 10px 4px; }
.painel-suspenso select { height: 44px; }
.linha-menu { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); font-size: 14.5px; font-weight: 600; text-align: left; }
.linha-menu:hover, .linha-menu:focus-visible { background: #E6EEFD; }
label.linha-menu.chave { justify-content: space-between; color: var(--texto); font-size: 14.5px; cursor: pointer; }
.linha-menu.chave input { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: #C9CDD6; position: relative; cursor: pointer; }
.linha-menu.chave input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--mola); }
.linha-menu.chave input:checked { background: #22A559; }
.linha-menu.chave input:checked::after { transform: translateX(18px); }
.eu-topo { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--linha); }
.titulo-painel { padding: 8px 12px; }
.aviso-item .corpo { gap: 0; }
.aviso-item .previa { font-size: 13px; font-weight: 500; color: var(--medio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Filtros da esquerda */
.pasta { position: relative; }
.pasta svg { flex: none; color: var(--fraco); }
.pasta:hover { background: #F1F0FA; transform: translateX(2px); }
.pasta.ativo { background: #E6EEFD; color: var(--destaque); }
.pasta.ativo svg { color: var(--destaque); }
.pasta.ativo::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 999px; background: var(--destaque); }
.pasta .conta { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--fraco); }
.pasta.ausente { color: var(--fraco); }
.pasta.ausente .ponto { opacity: 0.35; }
.ponto { transition: transform 0.2s var(--mola); }
.pasta:hover .ponto { transform: scale(1.35); }

/* Lista de conversas */
.topo-lista { align-items: center; }
.botoes-lista { display: flex; gap: 6px; }
.btn.redondo { width: 44px; height: 44px; border-radius: 999px; background: #F1F2F5; border-color: transparent; }
.btn.redondo:hover { background: #E6EEFD; }
.campo-busca { position: relative; display: flex; align-items: center; }
.campo-busca svg { position: absolute; left: 14px; color: var(--fraco); pointer-events: none; }
.campo-busca input, #busca { height: 44px; padding-left: 40px; border: 2px solid transparent; background: var(--caixa); }
.campo-busca input:focus-visible { outline: none; border-color: var(--destaque); background: var(--painel); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12); }
.item { align-items: center; border: 1px solid transparent; transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.item:hover { background: #F1F5FE; transform: translateX(2px); }
.item.ativo { background: #E6F0FF; border-color: #BFD7FF; }
.item.atrasada { background: #FDECEC; border-color: #F9CACA; }
.item.atrasada.ativo { background: #E6F0FF; border-color: #BFD7FF; }
.foto { position: relative; flex: none; }
.selo-canal { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; border: 2px solid #FFFFFF; background: #8A91A0; }
.selo-canal.whatsapp { background: #16A34A; } .selo-canal.instagram { background: #DB2777; } .selo-canal.facebook { background: #2563EB; }
.item .nome { display: flex; align-items: center; gap: 6px; min-width: 0; }
.alerta { flex: none; width: 18px; height: 18px; border-radius: 999px; background: #DC2626; color: #FFFFFF; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; animation: pulo 1.6s ease-in-out infinite; }
.item .hora { font-weight: 700; }
.linha2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.linha2 .previa { flex: 1; min-width: 0; }
.quem-atende { flex: none; width: 24px; height: 24px; border-radius: 999px; background: #E3E6EC; color: #3A4150; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.novas { animation: surgir 0.3s var(--mola); }
.tags.uma-linha { flex-wrap: nowrap; overflow: hidden; margin-top: 4px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tags.uma-linha .etq { flex: none; }
.itens.sem-tags .tags { display: none; }
.caixinha { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #A9AFBD; background: #FFFFFF; color: #FFFFFF; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s, border-color 0.15s, transform 0.2s var(--mola); }
.caixinha.marcada { background: var(--destaque); border-color: var(--destaque); transform: scale(1.1); }
.barra-lote { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: #E6EEFD; animation: descer 0.2s ease-out; }
.barra-lote[hidden] { display: none; }
.barra-lote select { height: 44px; background: var(--painel); }
.barra-lote .erro { min-height: 0; margin: 0; }
.etq.e6 { background: #FCE7F3; color: #9D174D; } .etq.e7 { background: #FFEDD5; color: #9A3412; }

/* Conversa */
.msg { animation: surgir 0.25s ease-out; }
.msg .balao { border-radius: 18px 18px 18px 6px; box-shadow: 0 1px 2px rgba(26, 29, 36, 0.06); transition: box-shadow 0.15s, transform 0.15s; }
.msg.saida .balao, .msg.nota .balao { border-radius: 18px 18px 6px 18px; }
.msg.saida .balao { background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); border-color: transparent; }
.msg .balao:hover { box-shadow: 0 6px 16px rgba(26, 29, 36, 0.12); transform: translateY(-1px); }
.mensagens { background: radial-gradient(circle at 20% 0, #F3F2FB 0, #FAFAFB 45%); scroll-behavior: smooth; }
.ferr { transition: background-color 0.15s, color 0.15s, transform 0.25s var(--mola); }
.ferr:hover { transform: scale(1.12); }
.ferr.enviar { background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35); }
.ferr.enviar:hover { transform: scale(1.12) translateY(-2px); }
.ferr.enviar:active { transform: scale(0.94); }
.emojis button { transition: transform 0.2s var(--mola), background-color 0.15s; }
.emojis button:hover { transform: scale(1.3); }
.rapidas:not([hidden]), .emojis:not([hidden]), .menu-mais:not([hidden]) { animation: surgir 0.18s ease-out; }
.audio-caixa { display: flex; flex-direction: column; gap: 6px; }
.btn-transcrever { align-self: flex-start; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12.5px; font-weight: 700; opacity: 0.9; }
.btn-transcrever:hover { opacity: 1; background: rgba(127, 127, 160, 0.16); }
.transcricao { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(127, 127, 160, 0.14); font-size: 14px; font-style: italic; }
.transcricao[hidden] { display: none; }
.transcricao.falhou { font-style: normal; font-weight: 700; }
.chat > .vazio { animation: entrar 0.4s ease-out; }
.avatar { transition: transform 0.25s var(--mola); }
.item:hover .avatar, .quem:hover .avatar { transform: scale(1.06); }

/* Janelas */
.dialogo { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 24px; border: 0; border-radius: 22px; background: var(--painel); color: var(--texto); box-shadow: var(--sombra-alta); overflow-y: auto; }
.dialogo[open] { animation: surgir 0.22s var(--mola); }
.dialogo::backdrop { background: rgba(26, 24, 60, 0.45); backdrop-filter: blur(3px); }
.topo-dialogo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialogo h3 { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 15px; }
.dialogo p.fraco { margin: 4px 0 0; }
.numero { display: flex; gap: 8px; }
.ddi { flex: none; display: flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--caixa); font-weight: 700; }
.acoes.fim { justify-content: flex-end; margin-top: 8px; }
.aviso-rapido { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background: #1F1B4D; color: #FFFFFF; font-weight: 700; box-shadow: var(--sombra-alta); animation: surgir 0.25s var(--mola); }
.aviso-rapido[hidden] { display: none; }

/* Configurações: etiquetas */
.lista-etiquetas { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.linha-etiqueta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--caixa); }
.linha-etiqueta > .etq { flex: 0 0 150px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-etiqueta input:not([type=radio]) { flex: 1 1 160px; width: auto; height: 44px; background: var(--painel); }
.cores { display: flex; flex-wrap: wrap; gap: 6px; }
.cor { position: relative; margin: 0; width: 36px; height: 36px; padding: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s var(--mola), border-color 0.15s; }
.cor input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.cor:hover { transform: scale(1.12); }
.cor:has(input:checked) { border-color: currentColor; transform: scale(1.12); }
.cor:has(input:focus-visible) { outline: 2px solid var(--destaque); outline-offset: 2px; }
.linha-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding-top: 16px; border-top: 1px solid var(--linha); }
.linha-form > div:first-child { flex: 1 1 200px; }
.rot-campo { display: block; font-size: 13px; font-weight: 700; color: var(--fraco); margin: 14px 0 6px; }
.login { background: radial-gradient(circle at 20% 10%, #DAD7F5 0, transparent 45%), radial-gradient(circle at 85% 90%, #D5E8FF 0, transparent 40%); }
.login-caixa { animation: surgir 0.4s var(--mola); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.foto .avatar { width: 44px; }
.nav .rot { color: inherit; font-size: 14px; }

/* Etapa 12.1: a conversa cabe sempre na tela, com a caixa de resposta visível e a última mensagem logo acima dela */
@media (min-width: 900px) {
  .app { height: 100vh; height: 100dvh; min-height: 0; flex-direction: column; flex-wrap: nowrap; overflow: hidden; }
  .trilho { flex: 0 0 auto; position: static; }
  .tela { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .conversas { flex-wrap: nowrap; overflow: hidden; }
  .conversas > * { min-height: 0; }
  .pastas, .lista, .ficha { overflow-y: auto; max-height: none; }
  .pastas { flex: 0 1 220px; }
  .lista { flex: 0 1 340px; }
  .chat-aberto { height: 100%; min-height: 0; }
  .chat-topo { padding: 10px 18px; }
}
.mensagens > .msg:first-child { margin-top: auto; }
.ferramentas { flex-wrap: nowrap; gap: 0; }
.escrever textarea { min-height: 40px; }
@media (min-width: 900px) { .ficha { flex: 0 1 300px; } .chat { flex: 1 1 380px; } .acoes select { min-width: 150px; } }
.mensagens { scroll-behavior: auto; }

/* Etapa 12.2: Ambiente, com o menu do lado esquerdo */
.ambiente { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.menu-amb { position: sticky; top: 0; }
.conteudo-amb { flex: 999 1 420px; min-width: 0; }
.painel-amb { padding: 12px; display: flex; flex-direction: column; gap: 18px; animation: entrar 0.25s ease-out; }
.pasta.breve { color: var(--fraco); cursor: default; }
.pasta.breve:hover { background: transparent; transform: none; }
.pasta.breve .conta { font-weight: 600; font-size: 11px; white-space: nowrap; }
@media (min-width: 900px) { .ambiente { flex-wrap: nowrap; overflow: hidden; } .ambiente > * { min-height: 0; max-height: 100%; overflow-y: auto; } .menu-amb { flex: 0 0 250px; align-self: stretch; } .conteudo-amb { align-self: stretch; } }
.barras.horas { height: 180px; gap: 4px; }
.barras.horas .dia { font-size: 11px; }
.barra { transition: height 0.5s var(--mola), background-color 0.15s; }
.barra.pico { background: linear-gradient(180deg, #F59E0B, #D97706); }
.coluna:hover .barra { background: var(--destaque-2); }
.valor { font-size: 32px; }

/* Etapa 13: Canais */
.lista-canais { display: flex; flex-direction: column; gap: 12px; }
.canal-cartao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid transparent; }
.canal-cartao.ligado { border-color: #BBF7D0; }
.canal-cartao:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29, 78, 216, 0.14); }
.canal-texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.canal-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; }
.canal-cartao .acoes input { width: 200px; height: 44px; }
.selo-canal.grande { position: static; flex: none; width: 46px; height: 46px; border: 0; }
.selo-canal.grande svg { width: 22px; height: 22px; }
.canal-cartao.ligado .selo-canal.grande { animation: onda 2s infinite; }
.outros-canais { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.canal-futuro { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--linha); }
.canal-futuro > div { flex: 1; min-width: 0; }
.canal-futuro p { margin: 2px 0 0; color: var(--medio); font-size: 14px; }
.canal-futuro .selo-canal { opacity: 0.75; }
.linha-form.sem-linha { border-top: 0; padding-top: 0; }

/* Etapa 13: menu principal na lateral esquerda (telas largas). No celular continua em cima. */
.nav.so-lateral { display: none; }
@media (min-width: 900px) {
  .app { flex-direction: row; }
  .trilho { flex: 0 0 88px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; height: 100%; min-height: 0; padding: 14px 8px; overflow: visible; background: linear-gradient(180deg, #172F7A, #1D4ED8 55%, #2563EB); box-shadow: 4px 0 18px rgba(23, 47, 122, 0.2); z-index: 20; }
  .trilho .marca { align-self: center; margin: 0 0 14px; width: 42px; height: 42px; border-radius: 13px; }
  .nav, .nav.so-lateral { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 2px; border-radius: 14px; }
  .nav .rot, .nav.ativo .rot, .nav:hover .rot { max-width: none; opacity: 1; overflow: visible; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; }
  .nav.ativo { position: relative; }
  .nav.ativo::before { content: ''; position: absolute; left: -8px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 999px 999px 0; background: #FFFFFF; }
  .tela { height: 100%; }
  .canto { flex-direction: column; margin: auto 0 0; gap: 8px; align-items: center; }
  .nav.redondo, .nav.usuario { min-height: 48px; width: 48px; padding: 0; }
  .selo { top: 0; right: -2px; }
  .painel-suspenso { top: auto; bottom: 0; right: auto; left: calc(100% + 14px); transform-origin: bottom left; }
  .lista .painel-suspenso { top: 52px; bottom: auto; left: auto; right: 0; transform-origin: top right; }
  .busca-geral { display: none; position: fixed; z-index: 40; left: 100px; top: 14px; width: min(460px, calc(100vw - 120px)); max-width: none; margin: 0; padding: 12px; border-radius: 18px; background: var(--painel); box-shadow: var(--sombra-alta); animation: descer 0.18s ease-out; }
  .busca-geral.aberta { display: block; }
  .busca-geral input { background: var(--caixa); color: var(--texto); border: 2px solid transparent; border-radius: 12px; }
  .busca-geral input::placeholder { color: var(--fraco); }
  .busca-geral input:focus-visible { outline: none; border-color: var(--destaque); }
  .resultado { position: static; margin-top: 8px; box-shadow: none; border: 0; padding: 0; max-height: 60vh; }
}

/* Etapa 14: Instagram e Facebook */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn.desligado { opacity: 0.5; cursor: not-allowed; }
.meta-acoes { margin: 16px 0 4px; gap: 12px; }
.meta-aviso { padding: 8px 0 0; font-weight: 700; }
.meta-aviso:empty { display: none; }
#cartao-meta .qr-passos { margin-top: 12px; list-style: disc; }

/* Etapa 15: cadastro com teste grátis, tela de bloqueio, faixa de teste e administração separada */
.cadastro-rodape { margin: 16px 0 0; text-align: center; color: var(--medio); font-size: 14px; }
.cadastro-rodape a, .aceite a { color: var(--destaque); font-weight: 700; }
#tela-bloqueio .login-caixa { display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
#tela-bloqueio .btn { width: 100%; }
.faixa-teste { position: fixed; z-index: 45; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 18px; border-radius: 999px; background: #FEF3C7; color: #78350F; font-size: 14px; font-weight: 700; box-shadow: var(--sombra-alta); animation: descer 0.3s ease-out; }
.faixa-teste[hidden] { display: none; }
.faixa-teste a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: #78350F; color: #FFFFFF; text-decoration: none; }
.faixa-teste a[hidden] { display: none; }
.faixa-teste:not(:has(a:not([hidden]))) { padding-right: 18px; }
.aceite { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--medio); cursor: pointer; }
.aceite input { flex: none; width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--destaque); }
.aceite[hidden] { display: none; }
.etq.sit-bloqueada, .etq.sit-vencida { background: #FEE2E2; color: #991B1B; }
/* Página /admin: some o menu do atendimento, fica só a administração */
body.modo-admin .trilho .nav[data-tela], body.modo-admin #abrir-busca, body.modo-admin .busca-geral, body.modo-admin #abrir-avisos { display: none; }
body.modo-admin .trilho { background: linear-gradient(180deg, #1A1D24, #2B2F3A); }
#tela-revenda td .acoes { gap: 6px; }
#tela-revenda td .fraco { font-weight: 500; }
/* Página de cadastro */
.pagina-cadastro { background: radial-gradient(circle at 15% 10%, #DAD7F5 0, transparent 45%), radial-gradient(circle at 90% 90%, #D5E8FF 0, transparent 40%), var(--fundo); }
.cadastro { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; padding: 32px 16px; }
.cadastro-apresenta { flex: 1 1 340px; max-width: 520px; display: flex; flex-direction: column; gap: 16px; animation: entrar 0.5s ease-out; }
.cadastro-apresenta .marca { width: 52px; height: 52px; border-radius: 16px; font-size: 24px; background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35); }
.cadastro-apresenta h1 { font-family: Sora, sans-serif; font-weight: 800; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.cadastro-sub { font-size: 18px; color: var(--medio); margin: 0; }
.cadastro-lista { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cadastro-lista li { position: relative; padding-left: 34px; color: var(--medio); }
.cadastro-lista li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 999px; background: #DCFCE7; color: #166534; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.cadastro-lista strong { color: var(--texto); }
.cadastro-teste { align-self: flex-start; margin: 6px 0 0; padding: 8px 16px; border-radius: 999px; background: #FEF3C7; color: #78350F; font-weight: 800; }
.cadastro-caixa { flex: 0 1 440px; max-width: 440px; }
.cadastro-caixa h2 { font-family: Sora, sans-serif; font-size: 22px; margin: 0 0 4px; }
.cadastro-caixa .btn { width: 100%; margin-top: 4px; }
/* Em página que rola, nenhum quadro pode encolher (a tabela sumia quando a página ficava mais alta que a tela) */
.pagina > *, .painel-amb > * { flex-shrink: 0; }

/* Site de apresentação */
.pagina-site { background: radial-gradient(circle at 10% 0, #DAD7F5 0, transparent 38%), radial-gradient(circle at 95% 20%, #D5E8FF 0, transparent 34%), var(--fundo); }
.pagina-site a { color: var(--destaque); }
.pagina-site a.btn.principal { color: #FFFFFF; }
.pagina-site a.btn { color: var(--texto); }
.site-topo { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 5vw, 64px); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.site-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto) !important; font-family: Sora, sans-serif; font-size: 18px; }
.site-marca .marca { background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); }
.site-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.site-menu a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--medio); font-weight: 700; text-decoration: none; }
.site-menu a:not(.btn):hover { color: var(--destaque); }
.btn.grande { height: 54px; padding: 0 28px; font-size: 16px; }
.site-heroi { max-width: 860px; margin: 0 auto; padding: clamp(40px, 8vw, 96px) 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; animation: entrar 0.5s ease-out; }
.site-heroi h1 { font-family: Sora, sans-serif; font-weight: 800; font-size: clamp(32px, 5.4vw, 56px); line-height: 1.08; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.site-heroi .cadastro-teste { align-self: center; margin: 0; }
.site-sub { max-width: 640px; margin: 0; font-size: 18px; color: var(--medio); }
.site-heroi .acoes { justify-content: center; gap: 12px; }
.site-canais { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 8px 0 0; padding: 0; list-style: none; font-weight: 700; color: var(--medio); }
.site-canais li { display: inline-flex; align-items: center; gap: 8px; }
.site-secao { max-width: 1120px; margin: 0 auto; padding: 40px 16px; }
.site-secao h2, .site-chamada h2 { font-family: Sora, sans-serif; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; margin: 0 0 24px; text-align: center; }
.site-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.site-grade.duas-colunas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.site-grade .cartao { display: flex; flex-direction: column; gap: 8px; }
.site-grade .cartao:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(29, 78, 216, 0.16); }
.site-grade h3 { margin: 0; font-size: 17px; }
.site-grade p { margin: 0; color: var(--medio); }
.site-passos { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 14px; }
.site-passos li { counter-increment: passo; position: relative; padding: 18px 20px 18px 72px; border-radius: 18px; background: var(--painel); box-shadow: var(--sombra); color: var(--medio); }
.site-passos li::before { content: counter(passo); position: absolute; left: 18px; top: 16px; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); color: #FFFFFF; font-family: Sora, sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.site-passos strong { color: var(--texto); }
.site-chamada { max-width: 860px; margin: 24px auto 56px; padding: 44px 24px; border-radius: 28px; background: linear-gradient(120deg, #1E3A8A, #1D4ED8 50%, #2563EB); color: #FFFFFF; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.site-chamada h2 { margin: 0; }
.site-chamada p { margin: 0; max-width: 520px; color: #E0E9FD; }
.site-chamada a.btn.principal { background: #FFFFFF; color: var(--destaque) !important; }
.site-rodape { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; padding: 36px clamp(16px, 5vw, 64px); background: #1F1B4D; color: #D9D7F0; }
.site-rodape strong { color: #FFFFFF; }
.site-rodape p { margin: 8px 0 0; }
.site-rodape a { color: #FFFFFF; }

/* Etapa 16: foto do perfil, origem do cliente e mesma pessoa em vários canais */
.avatar { overflow: hidden; }
.avatar.com-foto { background: #E3E6EC; padding: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; animation: entrar 0.3s ease-out; }
.ficha-origem { align-self: stretch; margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: #FEF3C7; color: #78350F; font-size: 13.5px; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.ficha-origem[hidden], .ficha-pessoa[hidden] { display: none; }
.ficha-origem a { color: #78350F; font-weight: 800; }
.ficha-pessoa { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.ficha-pessoa h3 { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 14px; }
.pessoa-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--caixa); }
.pessoa-linha .selo-canal.grande { width: 36px; height: 36px; }
.pessoa-linha .selo-canal.grande svg { width: 17px; height: 17px; }
.pessoa-texto { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.pessoa-linha .acoes { flex: 1 1 100%; }
.pessoa-linha .acoes .btn { flex: 1; }
.cheio:not(.whatsapp):not(.instagram):not(.facebook) { background: var(--destaque); }

/* Mensagens antigas carregadas aos poucos */
.mensagens > .msg:first-child { margin-top: 0; }
.mensagens > :first-child { margin-top: auto; }
.carregar-antigas { align-self: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--borda); background: var(--painel); color: var(--destaque); font-size: 13.5px; font-weight: 700; }
.carregar-antigas:hover { border-color: var(--destaque); background: #E6EEFD; }
.inicio-conversa { align-self: center; padding: 6px 14px; border-radius: 999px; background: #E9EBEF; color: var(--fraco); font-size: 12.5px; font-weight: 700; }

/* Etapa 17: Dashboard com filtros por vendedor, conexão e período */
.filtros-dash { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.campo-dash label, .campo-dash .rotulo { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--fraco); }
.campo-dash select { width: auto; min-width: 170px; max-width: 240px; background: var(--painel); }
.campo-dash .pilulas { padding: 0; }
.cartao.kpi { position: relative; overflow: hidden; padding: 20px 20px 18px 24px; }
.cartao.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--destaque); }
.kpi.k-verde::before { background: #16A34A; } .kpi.k-azul::before { background: #2563EB; } .kpi.k-ambar::before { background: #F59E0B; } .kpi.k-cinza::before { background: #8A91A0; }
.kpi .valor { font-size: 32px; margin: 4px 0 2px; }
.cab-grafico { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; font-weight: 700; color: var(--medio); }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.legenda.coluna-leg { flex-direction: column; gap: 10px; }
.legenda.coluna-leg b { margin-left: auto; padding-left: 12px; color: var(--texto); }
.legenda.coluna-leg > span { width: 100%; }
.ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.c-roxo { background: #1D4ED8; } .c-verde { background: #16A34A; } .c-azul { background: #2563EB; } .c-ambar { background: #F59E0B; }
.desenho svg { display: block; width: 100%; height: auto; }
.g-linha { stroke: #E4E6EB; stroke-width: 1; }
.g-texto { font: 600 11px Manrope, system-ui, sans-serif; fill: #5F6675; }
.g-texto.forte { font-weight: 700; fill: #3A4150; }
.traco { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.traco.roxo { stroke: #1D4ED8; } .traco.verde { stroke: #16A34A; }
.area.roxo { fill: rgba(29, 78, 216, 0.12); } .area.verde { fill: rgba(22, 163, 74, 0.10); }
.bola { stroke: #FFFFFF; stroke-width: 1.5; } .bola.roxo { fill: #1D4ED8; } .bola.verde { fill: #16A34A; }
.col.roxo { fill: #1D4ED8; } .col.azul { fill: #2563EB; }
.col, .bola { transition: opacity 0.15s; } .col:hover, .bola:hover { opacity: 0.7; }
.rosca-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.rosca-linha .desenho { flex: 0 0 180px; }
.rosca-linha .legenda { flex: 1 1 170px; }
.rosca-fundo { fill: none; stroke: #E9EBF0; stroke-width: 24; }
.rosca { fill: none; stroke-width: 24; }
.rosca.ambar { stroke: #F59E0B; } .rosca.azul { stroke: #2563EB; } .rosca.verde { stroke: #16A34A; }
.rosca-num { font: 800 30px Sora, sans-serif; fill: #1A1D24; }
.g-teia { fill: none; stroke: #DADDE4; stroke-width: 1; }
.radar { fill: rgba(29, 78, 216, 0.22); stroke: #1D4ED8; stroke-width: 2.5; stroke-linejoin: round; }
#g-radar .desenho { max-width: 340px; margin: 0 auto; }
.lista-radar { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.linha-radar { display: flex; justify-content: space-between; gap: 12px; color: var(--medio); }
.linha-radar b { color: var(--texto); }
.calor { overflow-x: auto; }
.calor-grade { display: grid; grid-template-columns: 40px repeat(24, minmax(18px, 1fr)); gap: 4px; min-width: 620px; align-items: center; }
.calor-rot, .calor-hora { font-size: 11px; font-weight: 700; color: var(--fraco); }
.calor-hora { text-align: left; }
.calor-cel { height: 26px; border-radius: 6px; background: #EEF0F4; transition: transform 0.15s; }
.calor-cel:hover { transform: scale(1.15); }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: #F1F5FE; }
tr.clicavel.escolhido td { background: #ECEAF8; }
td.forte { font-weight: 700; }
.selo-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.selo-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo-status.on { background: #DCFCE7; color: #166534; } .selo-status.off { background: #ECEEF2; color: #4E5565; }
.duas .cartao h2 + .faixas { margin-top: -4px; }
.cartoes:has(.kpi) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cartoes:has(.kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpi .valor { font-size: 24px; } .cartao.kpi { padding: 14px 12px 14px 18px; } }

/* Etapa 18: campanhas, importação de contatos e funil de vendas */
.dialogo.larga { width: min(920px, calc(100vw - 24px)); }
.btn.perigo-leve { color: #B42318; margin-right: auto; }
.linha-topo-contatos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.campo-dash input { height: 46px; min-width: 200px; background: var(--painel); }
.camp-cartoes.cartoes:has(.kpi) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .camp-cartoes.cartoes:has(.kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.selo-status.s-enviando, .selo-status.s-pendente { background: #DBEAFE; color: #1E40AF; }
.selo-status.s-programada { background: #FEF3C7; color: #92400E; }
.selo-status.s-pausada, .selo-status.s-pulado { background: #ECEEF2; color: #4E5565; }
.selo-status.s-concluida, .selo-status.s-enviada { background: #DCFCE7; color: #166534; }
.selo-status.s-cancelada, .selo-status.s-erro { background: #FEE2E2; color: #991B1B; }
td .selo-status { white-space: normal; }
.trilha.fina, .trilha.fina .cheio { height: 8px; }
.trilha.fina { margin-top: 6px; min-width: 140px; }
.aviso-linha { margin-top: 4px; font-size: 12px; font-weight: 600; color: #92400E; max-width: 360px; }
.passos { display: flex; gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
.passos li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--caixa); color: var(--fraco); font-size: 14px; font-weight: 700; }
.passos li span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #D5D9E0; color: #FFFFFF; font-size: 13px; }
.passos li.ativo { background: #E6EEFD; color: var(--destaque); }
.passos li.ativo span { background: var(--destaque); }
.passos li.feito span { background: #16A34A; }
.lado-a-lado { display: flex; flex-wrap: wrap; gap: 20px; }
.lado-a-lado .lado { flex: 1 1 300px; min-width: 0; }
.lado-a-lado .previa-lado { flex: 0 1 280px; }
.abas-msg { display: flex; gap: 6px; margin: 14px 0 8px; }
.aba-msg { flex: 1; height: 40px; border-radius: 10px; border: 1px solid var(--borda); background: var(--painel); color: var(--medio); font-size: 13px; font-weight: 700; }
.aba-msg.cheia { border-color: #16A34A; }
.aba-msg.ativo { border-color: var(--destaque); background: var(--destaque); color: #FFFFFF; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 0; background: #E6EEFD; color: var(--destaque); font-size: 12px; font-weight: 700; }
.chip:hover { background: #D3E0FB; }
.rotulo-previa { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--fraco); }
.celular { border-radius: 26px; border: 6px solid #1A1D24; overflow: hidden; background: #E7DFD5; }
.celular-topo { padding: 12px 16px; background: #075E54; color: #FFFFFF; font-weight: 700; font-size: 14px; }
.celular-corpo { min-height: 240px; max-height: 320px; overflow-y: auto; padding: 14px 12px; }
.balao-previa { padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: #FFFFFF; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); }
#dlg-campanha .acoes input[type=search] { flex: 1 1 200px; width: auto; }
#dlg-campanha .passo > .acoes { margin-top: 14px; }
.lista-marcar { margin-top: 10px; max-height: 260px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 14px; }
.lista-canais { margin-top: 8px; border: 1px solid var(--linha); border-radius: 14px; }
.linha-marcar { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; font-size: 14px; color: var(--texto); cursor: pointer; border-bottom: 1px solid var(--linha); }
.linha-marcar:last-child { border-bottom: 0; }
.linha-marcar:hover { background: #F7F6FC; }
.linha-marcar input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--destaque); }
.linha-marcar .fraco { margin-left: auto; }
.linha-marcar .selo-status { margin-left: 0; }
.pad { padding: 12px 14px; }
.alerta-camp { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #FEF3C7; color: #78350F; font-size: 13px; font-weight: 600; }
.alerta-camp[hidden] { display: none; }

.resumo-funil { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bloco-resumo { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(135deg, #1D4ED8, #2563EB); color: #FFFFFF; box-shadow: var(--sombra); }
.bloco-resumo:nth-child(2) { background: linear-gradient(135deg, #047857, #10B981); }
.bloco-resumo:nth-child(3) { background: linear-gradient(135deg, #B45309, #F59E0B); }
.bloco-resumo:nth-child(4) { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
.bloco-resumo .rot, .bloco-resumo .fraco { color: rgba(255, 255, 255, 0.88); }
.bloco-resumo b { font: 800 26px Sora, sans-serif; letter-spacing: -0.02em; }
.quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; min-height: 420px; }
.coluna-funil { flex: 1 0 250px; max-width: 340px; display: flex; flex-direction: column; border-radius: 18px; background: #E9EBF1; border: 2px solid transparent; transition: border-color 0.15s, background 0.15s; }
.coluna-funil.alvo { border-color: var(--cor); background: #F1F5FE; }
.cab-funil { padding: 14px 14px 10px; border-top: 5px solid var(--cor); border-radius: 16px 16px 0 0; }
.tit-funil { display: flex; align-items: center; gap: 8px; }
.tit-funil .ponto { background: var(--cor); }
.tit-funil h2 { font-size: 15px; flex: 1; min-width: 0; }
.tit-funil .conta { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #FFFFFF; font-size: 12px; font-weight: 800; text-align: center; }
.total-funil { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--medio); }
.corpo-funil { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 10px; max-height: calc(100vh - 330px); min-height: 90px; overflow-y: auto; }
.cartao-negocio { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: #FFFFFF; border-left: 4px solid var(--cor); box-shadow: 0 1px 2px rgba(26, 29, 36, 0.08); cursor: grab; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; }
.cartao-negocio:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(29, 78, 216, 0.16); }
.cartao-negocio:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.cartao-negocio.arrastando { opacity: 0.45; transform: rotate(2deg); }
.cartao-negocio .avatar { flex: 0 0 38px; width: 38px; height: 38px; font-size: 13px; }
.quem-negocio { display: flex; flex-direction: column; min-width: 0; }
.quem-negocio b, .quem-negocio span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-negocio { display: flex; align-items: center; gap: 8px; }
.valor-negocio { padding: 3px 10px; border-radius: 999px; background: #DCFCE7; color: #166534; font-size: 12px; font-weight: 800; }
.resp-negocio { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--destaque); color: #FFFFFF; font-size: 10px; font-weight: 800; }
.solte-aqui { padding: 22px 10px; border: 2px dashed #C9CDD6; border-radius: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--fraco); }

/* Etapa 19: fonte do lead */
.fontes-funil { display: flex; flex-wrap: wrap; gap: 8px; }
.fontes-funil:empty { display: none; }
.fonte-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid transparent; background: var(--painel); font-size: 13px; font-weight: 700; color: var(--texto); box-shadow: var(--sombra); }
.fonte-chip .ponto { background: var(--cor); }
.fonte-chip.ativo { border-color: var(--cor); }
.fonte-chip:hover { transform: translateY(-1px); }
.fonte-selo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--medio); white-space: nowrap; }
.fonte-selo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); }
.pe-negocio { flex-wrap: wrap; }

/* Etapa 20: adição rápida, visão em lista e etapas personalizadas no funil */
.btn-etapa { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; color: var(--medio); font-size: 18px; font-weight: 800; line-height: 1; }
.btn-etapa:hover { background: #FFFFFF; color: var(--destaque); }
.abrir-rapida { width: 100%; min-height: 40px; border-radius: 12px; border: 2px dashed #C9CDD6; background: transparent; color: var(--medio); font-size: 13px; font-weight: 700; }
.abrir-rapida:hover { border-color: var(--cor); color: var(--texto); background: #FFFFFF; }
.form-rapida { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: #FFFFFF; border: 2px solid var(--cor); }
.form-rapida[hidden], .abrir-rapida[hidden] { display: none; }
.form-rapida input { height: 40px; font-size: 14px; }
.form-rapida .erro { min-height: 0; margin: 0; font-size: 12px; }
.form-rapida .btn.pequeno { height: 38px; flex: 1; }
.nova-etapa { flex: 0 0 170px; min-height: 64px; border-radius: 18px; border: 2px dashed #C9CDD6; background: transparent; color: var(--medio); font-weight: 700; }
.nova-etapa:hover { border-color: var(--destaque); color: var(--destaque); background: #FFFFFF; }
.quadro[hidden], #crm-lista[hidden] { display: none; }
.sel-etapa { width: auto; min-width: 150px; height: 38px; font-size: 14px; background: var(--painel); }
.cores-etapa { display: flex; flex-wrap: wrap; gap: 8px; }
.cores-etapa[hidden], #et-funil-mover[hidden] { display: none; }
#et-funil-mover { margin-top: 16px; }
.cor-etapa { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--borda); }
.cor-etapa.ativo { box-shadow: 0 0 0 3px var(--texto); }

/* Etapa 21: relatório de vendas no Dashboard */
#bloco-vendas { display: flex; flex-direction: column; gap: 14px; }
#bloco-vendas .cartoes .cartao { background: var(--caixa); box-shadow: none; }
#bloco-vendas h3 { margin: 14px 0 10px; font-size: 15px; }
.vendas-duas { gap: 28px; }
.lado-venda { flex: 1 1 320px; min-width: 0; }
.lado-venda:last-child { flex: 2 1 460px; }

/* Etapa 22: Agenda */
.nav { position: relative; }
.bolha-nav { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #FACC15; color: #1A1D24; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.bolha-nav[hidden] { display: none; }
.barra-agenda { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.barra-agenda h2 { flex: 1; min-width: 180px; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--linha); box-shadow: var(--sombra); }
.cab-dia { padding: 10px; background: var(--painel); font-size: 12px; font-weight: 800; color: var(--fraco); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.dia-cal { display: flex; flex-direction: column; gap: 4px; min-height: 112px; padding: 6px; background: var(--painel); min-width: 0; }
.calendario.semana .dia-cal { min-height: 420px; }
.dia-cal.fora { background: #F7F8FA; }
.dia-cal.fora .num-dia { color: #A3A9B5; }
.num-dia { align-self: flex-end; width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; font-size: 13px; font-weight: 800; color: var(--texto); }
.num-dia:hover { background: #E6EEFD; }
.dia-cal.hoje { background: #F1F5FE; }
.dia-cal.hoje .num-dia { background: var(--destaque); color: #FFFFFF; }
.item-cal { display: flex; gap: 6px; align-items: baseline; width: 100%; padding: 5px 8px; border: 0; border-left: 3px solid #1D4ED8; border-radius: 8px; background: #E6EEFD; color: var(--texto); font-size: 12px; text-align: left; }
.item-cal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.calendario.semana .item-cal { flex-direction: column; gap: 2px; }
.calendario.semana .item-cal span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.item-cal.mensagem { border-left-color: #16A34A; background: #DCFCE7; }
.item-cal.atrasada { border-left-color: #DC2626; background: #FEE2E2; }
.item-cal.st-erro { border-left-color: #DC2626; background: #FEE2E2; }
.item-cal.st-feita, .item-cal.st-enviada { opacity: 0.6; }
.item-cal.st-feita span { text-decoration: line-through; }
.item-cal:hover { filter: brightness(0.96); }
.mais-cal { border: 0; background: transparent; color: var(--destaque); font-size: 12px; font-weight: 700; text-align: left; padding: 2px 8px; }
#ag-tipo { margin-top: 14px; padding: 0; }
#ag-bloco-titulo[hidden], #ag-bloco-texto[hidden], #ag-bloco-cliente[hidden] { display: none; }
.texto-item { white-space: pre-wrap; overflow-wrap: anywhere; }
.texto-item:empty { display: none; }
@media (max-width: 700px) { .dia-cal { min-height: 76px; padding: 3px; } .item-cal b { display: none; } .cab-dia { padding: 6px 2px; font-size: 10px; } }

/* Etapa 22.1: lista própria da campanha */
#cp-origem { margin-top: 14px; padding: 0; }
#cp-bloco-lista[hidden], #cp-bloco-sistema[hidden] { display: none; }
#cp-bloco-lista .btn { margin-top: 12px; }
.forte-contagem { margin-top: 10px; font-size: 14px; color: var(--destaque); }

/* Etapa 23: abas Todas, Atendendo, Aguardando e Finalizadas na lista de conversas */
.abas-lista { display: flex; gap: 2px; padding: 0 4px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.abas-lista::-webkit-scrollbar { display: none; }
.aba-lista { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--fraco); font-size: 13px; font-weight: 700; white-space: nowrap; }
.aba-lista:hover { color: var(--texto); }
.aba-lista.ativo { color: var(--destaque); border-bottom-color: var(--destaque); }
.aba-lista .conta { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #E3E6EC; color: #3A4150; font-size: 11px; font-weight: 800; text-align: center; }
.aba-lista.ativo .conta { background: var(--destaque); color: #FFFFFF; }
.aba-lista .conta.alerta { background: #F59E0B; color: #1A1D24; }
.aba-lista .conta:empty { display: none; }
.lista > .abas-lista { flex: 0 0 auto; min-height: 44px; }
.aba-lista { flex: 1 1 auto; padding: 0 4px; font-size: 12px; gap: 4px; }
.item-cal.campanha { border-left-color: #F59E0B; background: #FEF3C7; }

/* Etapa 23.1: detalhes de entrega da campanha */
.numeros-camp { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 14px 0 6px; }
.num-camp { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--caixa); border-left: 4px solid #8A91A0; }
.num-camp span { font-size: 12px; font-weight: 700; color: var(--fraco); }
.num-camp b { font: 800 20px Sora, sans-serif; }
.num-camp.n-azul { border-left-color: #2563EB; } .num-camp.n-verde { border-left-color: #16A34A; } .num-camp.n-roxo { border-left-color: #1D4ED8; } .num-camp.n-vermelho { border-left-color: #DC2626; }
.selo-status.s-respondeu { background: #E6EEFD; color: #1D4ED8; }
td .acoes .btn.perigo-leve { margin-right: 0; }

/* Etapa 24: esconder os filtros e abas que cabem inteiras */
.cab-filtros { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cab-filtros h1 { margin-bottom: 0; }
.cab-filtros .btn, #mostrar-filtros { width: 36px; height: 36px; font-size: 20px; line-height: 1; }
#mostrar-filtros[hidden] { display: none; }
.sem-filtros > .pastas { display: none; }
@media (min-width: 900px) { .sem-filtros > .lista { flex-basis: 420px; max-width: 460px; } }
.topo-lista { align-items: center; }
.topo-lista h2 { flex: 1; min-width: 0; }
.abas-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: visible; padding: 0; }
.lista > .abas-lista { min-height: 50px; }
.aba-lista { flex-direction: column; gap: 2px; min-height: 50px; padding: 4px 2px; font-size: 11.5px; }
.aba-lista .conta { min-width: 24px; }
.aba-lista .conta.alerta { font-size: 11px; padding: 1px 6px; min-width: 24px; height: auto; line-height: inherit; }
#amb-transcricao { display: none !important; }

/* Etapa 24.1: a tela treme quando chega cliente precisando de resposta */
@keyframes tremer { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-7px); } 20%, 40%, 60%, 80% { transform: translateX(7px); } }
.app.tremer { animation: tremer 0.8s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .app.tremer { animation: none; outline: 4px solid #F59E0B; outline-offset: -4px; } }

/* Etapa 24.2: criar etiqueta direto na conversa */
.nova-etq { display: inline-flex; align-items: center; gap: 6px; }
.nova-etq input { width: 180px; height: 40px; }
.nova-etq .btn.pequeno { height: 40px; }

/* Etapa 25: canal Telegram */
.canal.telegram { background: #E0F2FE; color: #075985; } .ponto.telegram { background: #0EA5E9; } .selo-canal.telegram { background: #0EA5E9; } .cheio.telegram { background: #0EA5E9; }
#form-telegram h2 { margin: 0; }

/* Etapa 25: campanhas por e-mail */
#cp-meio { padding: 0; }
#cp-bloco-assunto[hidden] { display: none; }
.so-email, .assunto-previa { display: none; }
.por-email .so-zap { display: none; }
.por-email .so-email { display: block; }
.por-email .celular { border-width: 1px; border-color: var(--borda); border-radius: 14px; background: #FFFFFF; }
.por-email .celular-topo { background: #1D4ED8; }
.por-email .assunto-previa { display: block; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); font-weight: 800; }
.por-email .balao-previa { box-shadow: none; padding: 0; border-radius: 0; }
#form-email h3 { margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 15px; }
#form-email .btn.principal { margin-top: 6px; align-self: flex-start; }
#em-bloco-teste[hidden] { display: none; }
#em-bloco-teste .acoes input { flex: 1 1 240px; width: auto; }

/* Etapa 26: modelos de e-mail e chamadas */
#cp-bloco-modelo.so-email { display: none; }
.por-email #cp-bloco-modelo.so-email { display: block; }
.modelos-email { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.modelo-email { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 2px solid var(--borda); background: var(--painel); font-size: 12px; font-weight: 700; color: var(--medio); }
.modelo-email.ativo { border-color: var(--destaque); color: var(--destaque); background: #F1F5FE; }
.mini { display: block; width: 48px; height: 38px; border-radius: 6px; background: #F1F2F5; border: 1px solid var(--borda); position: relative; overflow: hidden; }
.mini::before, .mini::after { content: ''; position: absolute; left: 6px; right: 6px; border-radius: 2px; }
.m-simples::before { top: 0; left: 0; right: 0; height: 9px; background: var(--destaque); border-radius: 0; } .m-simples::after { top: 15px; height: 3px; background: #B9BDC7; box-shadow: 0 6px 0 #B9BDC7, 0 12px 0 #B9BDC7; }
.m-destaque::before { top: 6px; height: 6px; background: var(--destaque); } .m-destaque::after { top: 24px; left: 12px; right: 12px; height: 7px; background: var(--destaque); border-radius: 3px; }
.m-promocao::before { top: 0; left: 0; right: 0; height: 18px; background: #DB2777; border-radius: 0; } .m-promocao::after { top: 25px; left: 13px; right: 13px; height: 6px; background: #DB2777; border-radius: 3px; }
.m-carta { background: #FFFFFF; } .m-carta::before { top: 7px; height: 3px; background: #B9BDC7; box-shadow: 0 6px 0 #B9BDC7, 0 12px 0 #B9BDC7; } .m-carta::after { top: 29px; right: 24px; height: 3px; background: #1A1D24; }
.previa-email { display: none; width: 100%; height: 470px; border: 1px solid var(--borda); border-radius: 14px; background: #F1F2F5; }
.por-email .previa-email { display: block; }
.por-email .celular.so-zap { display: none; }
#cp-cores { margin-bottom: 6px; }
@media (max-width: 600px) { .modelos-email { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Etapa 26.1: atendente e etapa da negociação na lista e na conversa */
.linha3 { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: 12px; }
.etapa-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #F1F2F5; color: #1A1D24; font-weight: 800; font-size: 11px; }
.etapa-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.atende-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--medio); font-weight: 700; }
.atende-nome.sem { color: #B45309; }
#chat-etapa { width: auto; min-width: 150px; background: var(--painel); border-left: 5px solid #D5D9E0; font-weight: 700; }
#chat-etapa.com-etapa { border-left-color: var(--cor); }

/* Etapa 27: convites e funções da equipe */
.link-botao { padding: 0; border: 0; background: none; color: var(--destaque); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.caixa-link { margin-top: 14px; padding: 14px; border-radius: 14px; background: #F1F5FE; }
.caixa-link[hidden] { display: none; }
.caixa-link .acoes input { flex: 1 1 260px; width: auto; height: 44px; background: #FFFFFF; }
td .caixa-link { margin: 0; min-width: 280px; }
.papeis-ajuda { margin-top: 16px; }

/* Etapa 27.1: campanha pelo Telegram */
.so-telegram { display: none; }
.por-telegram .so-telegram { display: block; }
.por-telegram .so-qr, .por-telegram .so-nao-telegram, .por-telegram #cp-bloco-lista { display: none !important; }
.por-telegram .so-sair { display: flex; }

/* Etapa 28: marca Atendo Agora (verde e azul) */
.marca { background: #FFFFFF !important; box-shadow: 0 4px 12px rgba(23, 47, 122, 0.18); }
.marca img { display: block; width: 72%; height: auto; }
.nome-marca { color: #1D4ED8; }
.nome-marca span { color: #16A34A; }
.trilho .marca img { width: 78%; }
.login-caixa .marca, .cadastro-apresenta .marca { width: 56px; height: 56px; border-radius: 16px; }

/* Cabeçalho da conversa mais discreto */
.chat-topo { padding: 8px 16px; gap: 8px; }
.chat-topo .avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: 12px; }
.chat-topo #chat-nome { font-size: 15px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-topo .quem-linha { font-size: 12px; gap: 6px; }
.chat-topo .quem-linha .canal { font-size: 11px; padding: 1px 8px; }
.chat-topo .acoes { gap: 4px; flex-wrap: wrap; }
.chat-topo .acoes select { height: 32px; min-width: 0; max-width: 150px; padding: 0 26px 0 10px; font-size: 13px; border-radius: 8px; }
.chat-topo .btn { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.chat-topo .btn.icone { width: 32px; padding: 0; }
.chat-topo .btn.icone svg { width: 16px; height: 16px; }
.chat-topo .quem { flex: 1 1 200px; }
.chat-topo .acoes { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.chat-topo .acoes select { flex: 0 1 140px; width: 140px; min-width: 70px; }
.chat-topo .acoes .btn { flex: none; }
.colado { padding: 6px 8px; gap: 10px; }
.colado img { width: 40px; height: 40px; }
.colado-info { font-size: 12px; }
.colado-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#colado-tirar { width: 30px; height: 30px; padding: 0; border-radius: 999px; font-size: 18px; line-height: 1; }
.chat-topo .acoes { flex-wrap: wrap; justify-content: flex-start; }
.chat-topo .acoes select { flex: 1 1 110px; width: 110px; max-width: 150px; }

.previa-midia { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mini-previa { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; flex: none; }
.ic-previa { display: inline-flex; color: var(--destaque); flex: none; }