/* Central de Atendimento — visual simples, claro e escuro, do celular ao computador. */
:root {
  --fundo: #f4f6f8; --cartao: #ffffff; --texto: #1c2430; --suave: #5f6b7a; --linha: #dde3ea;
  --prim: #0f766e; --prim-forte: #0b5c56; --prim-claro: #e6f4f2; --perigo: #b42318; --ok: #15803d;
  --raio: 10px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0f1419; --cartao: #182029; --texto: #e6ebf0; --suave: #93a1b0; --linha: #2a3541;
    --prim: #2bb3a3; --prim-forte: #4fd1c1; --prim-claro: #15302e; --perigo: #f97066; --ok: #4ade80;
    --sombra: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input, select, textarea { font: inherit; color: inherit; }
.carregando { padding: 40px; text-align: center; color: var(--suave); }

/* ---------- entrada ---------- */
.tela-entrada { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.tela-entrada form { width: 100%; max-width: 360px; background: var(--cartao); padding: 28px 24px; border-radius: 14px; box-shadow: var(--sombra); border: 1px solid var(--linha); }
.tela-entrada h1 { margin: 0 0 4px; font-size: 22px; }
.tela-entrada p { margin: 0 0 20px; color: var(--suave); }

/* ---------- moldura ---------- */
/* Barra lateral azul-clara: grupos que abrem (Gestor, Relatórios), itens soltos e Sair. Encolhe para só os ícones. */
:root { --lat-fundo: #e0f2fe; --lat-sub: #f0f9ff; --lat-texto: #0c3b5e; --lat-suave: #3b6a8f; --lat-hover: #bae6fd; --lat-ativo: #0284c7; --lat-linha: #bfe0f5; }
@media (prefers-color-scheme: dark) {
  :root { --lat-fundo: #0e2a3f; --lat-sub: #0a2233; --lat-texto: #d6ecfb; --lat-suave: #8fb8d6; --lat-hover: #16405f; --lat-ativo: #38bdf8; --lat-linha: #1b3d57; }
}
.moldura { display: flex; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex: 0 0 220px; width: 220px; background: var(--lat-fundo); color: var(--lat-texto); border-right: 1px solid var(--lat-linha); font-size: 14px; scrollbar-width: thin; transition: width .15s, flex-basis .15s; z-index: 6; }
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral .item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; border: 0; border-left: 4px solid transparent; background: none; color: inherit; text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap; }
.lateral .item:hover { background: var(--lat-hover); }
.lateral .item:focus-visible { outline: 2px solid var(--lat-ativo); outline-offset: -2px; }
.lateral .icone { flex: 0 0 22px; text-align: center; font-size: 16px; line-height: 1; }
.lateral .rotulo { overflow: hidden; text-overflow: ellipsis; }
.lateral .seta { margin-left: auto; font-size: 11px; color: var(--lat-suave); transition: transform .15s; }
.lateral .grupo:not(.aberto) .seta { transform: rotate(-90deg); }
.lateral .grupo:not(.aberto) .sub { display: none; }
.lateral .sub { background: var(--lat-sub); padding: 4px 0; }
.lateral .sub .item { padding: 8px 16px 8px 52px; font-size: 13px; color: var(--lat-suave); }
.lateral .sub .item:hover { color: var(--lat-texto); }
.lateral a.item.ativo, .lateral .grupo.tem-ativo > .item { border-left-color: var(--lat-ativo); font-weight: 600; color: var(--lat-texto); }
.lateral a.item.ativo { background: var(--lat-hover); }
.lateral-cabeca { padding: 6px 0 12px; border-bottom: 1px solid var(--lat-linha); margin-bottom: 6px; }
.lateral-cabeca .marca { font-size: 18px; font-weight: 700; }
.lateral-cabeca .quem { padding: 0 16px 0 20px; font-size: 13px; color: var(--lat-suave); display: block; white-space: nowrap; }
.lateral-cabeca .quem small { display: block; padding-left: 22px; font-size: 12px; opacity: .85; }
.lateral > ul > li:last-child { margin-top: 10px; border-top: 1px solid var(--lat-linha); }
/* modo encolhido: só os ícones (como o "☰" do sistema antigo) */
.lateral-mini .lateral { flex-basis: 58px; width: 58px; }
.lateral-mini .lateral .rotulo, .lateral-mini .lateral .seta, .lateral-mini .lateral .sub { display: none; }
.lateral-mini .lateral .item { justify-content: center; padding: 12px 0; }
.conteudo { flex: 1; min-width: 0; }
main { max-width: 1040px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- blocos ---------- */
.cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cabeca h2 { margin: 0; font-size: 20px; margin-right: auto; }
.cabeca input[type=search] { min-width: 0; flex: 1 1 220px; max-width: 320px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--linha); }
.lista li:first-child { border-top: 0; }
.lista .info { flex: 1; min-width: 0; }
.lista .titulo { font-weight: 600; overflow-wrap: anywhere; }
.lista .sub { color: var(--suave); font-size: 13px; overflow-wrap: anywhere; }
.lista .previa { color: var(--suave); font-size: 13px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lista .acoes { display: flex; gap: 6px; flex-shrink: 0; }
.vazio { padding: 28px; text-align: center; color: var(--suave); }
.etiqueta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; margin: 2px 4px 0 0; }
.selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--fundo); color: var(--suave); border: 1px solid var(--linha); margin-left: 6px; font-weight: 500; }
.selo.gestor { background: var(--prim-claro); color: var(--prim-forte); border-color: transparent; }
.selo.inativo { color: var(--perigo); }
.bolinha { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.paginas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--linha); color: var(--suave); font-size: 13px; }

/* ---------- formulários ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 4px; }
.campo { margin-bottom: 14px; }
.campo small { display: block; color: var(--suave); font-weight: 400; margin-top: 3px; }
input[type=text], input[type=password], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--linha); border-radius: 8px; background: var(--cartao);
}
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--prim); outline-offset: 1px; }
textarea { resize: vertical; min-height: 90px; }
.linha2 { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.marcar { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin: 6px 0; cursor: pointer; }
.marcar input { width: 18px; height: 18px; accent-color: var(--prim); }
.opcoes { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.erro { color: var(--perigo); font-size: 14px; min-height: 1.2em; margin: 4px 0 10px; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--prim); background: var(--prim); color: #fff; font-weight: 600; cursor: pointer; }
.botao:hover { background: var(--prim-forte); border-color: var(--prim-forte); }
.botao:disabled { opacity: .6; cursor: default; }
.botao.leve { background: var(--cartao); color: var(--texto); border-color: var(--linha); font-weight: 500; }
.botao.leve:hover { background: var(--fundo); }
.botao.perigo { background: var(--cartao); color: var(--perigo); border-color: var(--linha); }
.botao.perigo:hover { border-color: var(--perigo); }
.botao.peq { padding: 5px 10px; font-size: 13px; }
.botao.cheio { width: 100%; }

/* ---------- janela ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); background: var(--cartao); color: var(--texto); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(15, 20, 25, .5); }
dialog form { padding: 20px; }
dialog h3 { margin: 0 0 16px; font-size: 18px; }
.rodape { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }
.rodape .esquerda { margin-right: auto; }

/* ---------- conta ---------- */
.secao { padding: 18px; margin-bottom: 16px; }
.secao h3 { margin: 0 0 14px; font-size: 16px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.dia { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linha); }
.dia:first-of-type { border-top: 0; }
.dia .nome { font-weight: 600; padding-top: 7px; }
.intervalos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.intervalo { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--linha); border-radius: 8px; }
.intervalo input { width: 84px; padding: 4px 6px; border: 0; background: transparent; }
.intervalo button { border: 0; background: none; color: var(--suave); cursor: pointer; padding: 2px 6px; font-size: 16px; }
.fechado { color: var(--suave); font-size: 13px; padding-top: 7px; }
.salvar-fixo { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--fundo) 30%); display: flex; justify-content: flex-end; }

/* ---------- atendimento ---------- */
main.larga { max-width: 1400px; padding-bottom: 16px; }
.atend { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 14px; height: calc(100vh - 40px); min-height: 460px; }
.at-lista, .at-chat { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.at-topo { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.at-topo h2 { margin: 0 auto 0 0; font-size: 18px; }
.abas { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.abas button { border: 0; background: none; padding: 8px 10px; color: var(--suave); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.abas button.ativo { color: var(--prim-forte); border-bottom-color: var(--prim); font-weight: 600; }
.abas .conta { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 5px; border-radius: 999px; background: var(--fundo); font-size: 12px; text-align: center; }
.abas .conta.forte { background: var(--perigo); color: #fff; }
.filtros { display: flex; gap: 6px; padding: 8px 10px; }
.filtros input { flex: 1; min-width: 0; padding: 7px 9px; }
.filtros select { width: auto; max-width: 140px; padding: 7px 9px; }
.massa { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: var(--prim-claro); font-size: 13px; }
.lista.conversas { overflow-y: auto; flex: 1; }
.lista.conversas li { cursor: pointer; align-items: flex-start; padding: 10px 12px; }
.lista.conversas li:hover { background: var(--fundo); }
.lista.conversas li.aberta { background: var(--prim-claro); }
.lista.conversas li input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--prim); }
.lista.conversas li.nao-lida .titulo::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--prim); margin-left: 6px; vertical-align: middle; }
.linha-topo { display: flex; gap: 8px; align-items: baseline; }
.linha-topo .titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-topo .hora { color: var(--suave); font-size: 12px; flex-shrink: 0; }
.espera { color: var(--suave); }
.espera.atrasada { color: var(--perigo); font-weight: 600; }

.chat-cabeca { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--linha); }
.chat-cabeca .quem-e { flex: 1; min-width: 200px; }
.chat-cabeca .titulo { font-weight: 700; font-size: 16px; }
.chat-cabeca .sub { color: var(--suave); font-size: 13px; }
.chat-cabeca .acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-cabeca .voltar { display: none; }
.nota { margin-top: 6px; font-size: 13px; background: var(--fundo); border-radius: 8px; padding: 6px 9px; white-space: pre-wrap; }
.selo.situacao-pendente { background: #fef3c7; color: #92400e; border-color: transparent; }
.selo.situacao-atendida { background: var(--prim-claro); color: var(--prim-forte); border-color: transparent; }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--fundo); }
.msg { max-width: min(78%, 560px); padding: 7px 11px 5px; border-radius: 12px; background: var(--cartao); border: 1px solid var(--linha); align-self: flex-start; overflow-wrap: anywhere; }
.msg.saida { align-self: flex-end; background: var(--prim-claro); border-color: transparent; }
.msg.saida.bot { background: var(--cartao); border-style: dashed; }
.msg .corpo { white-space: pre-wrap; }
.msg .midia-caixa { margin: 2px 0 4px; }
.msg img.midia, .msg video.midia { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; }
.msg audio.midia { width: min(280px, 100%); height: 36px; }
.msg .midia-texto { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: 4px; }
.msg .transcricao { white-space: pre-wrap; font-size: .92em; padding: 5px 8px; border-left: 3px solid var(--linha); background: rgba(127,127,127,.08); border-radius: 4px; }
.msg .transcricao small { display: block; opacity: .7; font-size: .8em; }
.msg .autor { font-size: 11px; font-weight: 600; color: var(--prim-forte); margin-bottom: 1px; }
.msg time { display: block; text-align: right; font-size: 11px; color: var(--suave); margin-top: 2px; }
.msg .envio-lido { color: #2563eb; font-weight: 600; }
.msg .envio-falhou { color: var(--perigo); font-weight: 600; cursor: help; }
.qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.qr img { background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--linha); max-width: 100%; height: auto; }
.chave-api { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.msg.interna { align-self: center; max-width: 90%; background: none; border: 0; color: var(--suave); font-size: 12px; text-align: center; padding: 2px 8px; }
.msg.interna time { display: inline; }
.chat-rodape { border-top: 1px solid var(--linha); }
.escrever { display: flex; gap: 8px; align-items: flex-end; padding: 10px; }
.escrever textarea { min-height: 42px; max-height: 160px; resize: none; flex: 1; }
.aviso-chat { margin: 0; padding: 14px; text-align: center; color: var(--suave); }
.lista.escolher { max-height: 50vh; overflow-y: auto; margin: 10px 0; border: 1px solid var(--linha); border-radius: 8px; }
.lista.escolher li { cursor: pointer; }
.lista.escolher li:hover, .lista.escolher li:focus { background: var(--fundo); outline: none; }

/* ---------- simulador ---------- */
.sim-area { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 420px); gap: 16px; align-items: start; }
.celular { display: flex; flex-direction: column; height: min(640px, calc(100vh - 220px)); min-height: 380px; overflow: hidden; }
.sim-titulo { padding: 10px 14px; border-bottom: 1px solid var(--linha); font-size: 14px; color: var(--suave); }
.sim-titulo b { color: var(--texto); }
.celular .escrever { border-top: 1px solid var(--linha); }

@media (max-width: 900px) {
  .atend { grid-template-columns: 1fr; height: calc(100vh - 30px); }
  .atend .at-chat { display: none; }
  .atend.com-chat .at-chat { display: flex; }
  .atend.com-chat .at-lista { display: none; }
  .chat-cabeca .voltar { display: inline-flex; }
  .sim-area { grid-template-columns: 1fr; }
}

#aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(20px); background: #1c2430; color: #fff; padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100vw - 32px); z-index: 50; }
#aviso.ver { opacity: 1; transform: translateX(-50%); }
#aviso.ruim { background: var(--perigo); }

@media (max-width: 600px) {
  main { padding-left: 10px; padding-right: 10px; }
  .lista li { flex-wrap: wrap; }
  .lista .acoes { width: 100%; justify-content: flex-end; }
  .cabeca input[type=search] { max-width: none; order: 3; flex-basis: 100%; }
}

/* ---------- robô (Fase 3) ---------- */
.campos-robo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.campo-robo { background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; padding: 2px 8px; font-size: 12px; overflow-wrap: anywhere; }
.campo-robo small { color: var(--suave); margin-right: 4px; }
.previa-robo { white-space: pre-line; background: var(--fundo); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; margin-top: 6px; font-size: 14px; }
.fluxo { margin-top: 12px; }
.fluxo.desligado { opacity: .8; }
.fluxo-topo { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.fluxo-topo h3 { margin: 0 0 4px; }
.fluxo-topo .sub { color: var(--suave); font-size: 13px; overflow-wrap: anywhere; }
.fluxo-topo .acoes, .passos .acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.selo.ligado { background: var(--prim-claro); color: var(--prim-forte); border-color: transparent; }
.passos { list-style: none; margin: 12px 0 0; padding: 0; }
.passos li { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linha); }
.passos .info { min-width: 0; flex: 1; }
.passos .titulo { font-weight: 600; }
.passos .previa { color: var(--suave); font-size: 13px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.passos .sub { color: var(--suave); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.tipo-passo { font-weight: 400; font-size: 12px; color: var(--suave); margin-left: 8px; }
.opcoes-passo { display: grid; gap: 6px; }
.linha-opcao { display: grid; grid-template-columns: auto 1fr minmax(0, 40%) auto; gap: 6px; align-items: center; }
@media (max-width: 600px) { .linha-opcao { grid-template-columns: auto 1fr auto; } .linha-opcao select { grid-column: 2 / 3; } .passos li { flex-direction: column; } }
.dica-agente { display: block; color: var(--suave); margin: -6px 0 10px; font-size: 13px; }

/* ---------- CRM e disparos (Fase 5) ---------- */
main > .abas { padding: 0; margin-bottom: 10px; }
main > .filtros { flex-wrap: wrap; align-items: center; padding: 0 0 10px; gap: 10px; }
main > .filtros label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
main > .filtros small { color: var(--suave); }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.coluna { flex: 0 0 270px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px; }
.coluna header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.coluna header b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coluna .itens { display: grid; gap: 8px; }
.coluna .vazio { padding: 12px 0; font-size: 13px; }
.cartao-crm { border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 10px; background: var(--fundo); }
.cartao-crm .titulo { font-weight: 600; }
.cartao-crm .sub { color: var(--suave); font-size: 13px; }
.cartao-crm .marcas { margin: 4px 0 0 -6px; }
.cartao-crm .acoes { display: flex; gap: 4px; margin-top: 6px; }
.cartao-crm .acoes button:nth-child(2) { flex: 1; }
.selo.atrasado { background: var(--perigo); color: #fff; border-color: transparent; }
.pilha { display: grid; gap: 8px; margin-bottom: 8px; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.grupo-botoes .ativo { background: var(--prim-claro); color: var(--prim-forte); border-color: var(--prim); }
main > .filtros .grupo-botoes { margin-bottom: 0; }
.dica { color: var(--suave); font-size: 13px; margin: 0 0 10px; }
.texto-disparo { white-space: pre-wrap; font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.selo.disparo-a_enviar { background: #fef3c7; color: #92400e; border-color: transparent; }
.selo.disparo-enviado, .selo.disparo-entregue { background: var(--prim-claro); color: var(--prim-forte); border-color: transparent; }
.selo.disparo-lido { background: #dcfce7; color: #166534; border-color: transparent; }
.selo.disparo-falhou, .selo.disparo-invalido, .selo.disparo-servidor_fora { color: var(--perigo); border-color: var(--perigo); }
.selo.disparo-cancelado { text-decoration: line-through; }
@media (max-width: 600px) { .coluna { flex-basis: 84vw; } }

/* ---------- Relatórios (Fase 6) ---------- */
.filtros-rel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros-rel input, .filtros-rel select { max-width: 200px; }
.filtros-rel label, main > .periodo label { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: .9em; }
main > .periodo { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.cabeca-rel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 10px 0; }
.cabeca-rel .dica { margin: 0; }
.cabeca-rel .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.indicador { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.indicador b { font-size: 1.6em; color: var(--prim-forte); }
.indicador span { font-weight: 600; }
.indicador small { color: var(--suave); }
.grade-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.grade-rel .cartao { margin: 0; }
.barras { display: flex; flex-direction: column; gap: 8px; }
.barra { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 4px 10px; align-items: center; }
.barra .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .trilho { height: 12px; background: var(--fundo); border-radius: 6px; overflow: hidden; }
.barra .cheio { display: block; height: 100%; background: var(--prim); border-radius: 6px; }
.barra .valor { font-variant-numeric: tabular-nums; font-weight: 600; }
.barra .extra { grid-column: 2 / 4; color: var(--suave); font-size: .82em; margin-top: -4px; }
.colunas { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; height: 140px; align-items: end; }
.dia-col { height: 100%; display: flex; align-items: flex-end; }
.dia-col .cheio { width: 100%; background: var(--prim); border-radius: 3px 3px 0 0; position: relative; min-height: 1px; }
.dia-col .cheio i { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-style: normal; font-size: .7em; color: var(--suave); }
.eixo { display: flex; justify-content: space-between; color: var(--suave); font-size: .8em; margin-top: 4px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: right; font-variant-numeric: tabular-nums; }
.tabela th:first-child { text-align: left; font-weight: 500; }
.tabela thead th { font-weight: 700; color: var(--suave); }
.tabela .divisao th { text-align: left; font-weight: 700; padding-top: 16px; color: var(--suave); }
.variacao.bom { color: var(--ok); font-weight: 600; }
.variacao.ruim { color: var(--perigo); font-weight: 600; }
.selo.nota { background: #fff3c4; color: #6b4e00; }
.selo.ruim { background: var(--perigo); color: #fff; }
.alerta { border-color: var(--perigo); }
.alerta h3 { color: var(--perigo); }
dialog:has(.ver-conversa) { width: min(680px, calc(100vw - 24px)); }
.ver-conversa { box-sizing: border-box; }
.ver-conversa .msgs { max-height: 60vh; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px; }
@media (max-width: 600px) { .grade-rel { grid-template-columns: 1fr; } .filtros-rel input, .filtros-rel select { max-width: none; flex: 1 1 140px; } }

/* Canais extras (Telegram, Instagram, chat do site) na tela Integrações */
.canal-extra { border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 12px; }
.canal-extra h4 { margin: 0 0 4px; font-size: 15px; }
.canal-extra p { margin: 4px 0; }
.canal-extra input[readonly] { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; margin: 4px 0; }
.canal-extra .botao { margin: 6px 0; }

/* Pix da conversa */
.lista-pix { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.item-pix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.item-pix small { color: var(--suave); flex: 1 1 100%; }

/* celular: a barra fica só com os ícones; aberta, passa por cima do conteúdo */
@media (max-width: 700px) {
  .lateral { position: fixed; left: 0; top: 0; box-shadow: 0 0 24px rgba(0,0,0,.2); }
  .lateral-mini .lateral { box-shadow: none; }
  .conteudo { margin-left: 58px; }
}

/* ---------- tela inicial ---------- */
.painel-bloco { margin-bottom: 18px; }
.painel-titulo { margin: 0 0 8px; font-size: 1em; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.aviso-exemplo { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--raio); background: #fef3c7; color: #78350f; font-size: .9em; }
.indicadores.exemplo .indicador { border-style: dashed; }
.indicadores.exemplo .indicador b { color: var(--suave); }
@media (prefers-color-scheme: dark) { .aviso-exemplo { background: #3a2e0b; color: #fde68a; } }