/* Painel Vendas no Zap — preto e azul, funciona no celular. */
:root {
  color-scheme: dark;
  --fundo: #06080c; --fundo-2: #0c1018; --cartao: #121826; --borda: #222b3d;
  --texto: #eef2f8; --apagado: #8f9bb3; --azul: #2563eb; --azul-claro: #60a5fa;
  --ok: #34d399; --alerta: #fbbf24; --erro: #f87171;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Inter, sans-serif; }
a { color: var(--azul-claro); }
h1 { font-size: 1.4rem; margin: 0 0 14px; }
h2 { font-size: 1.05rem; margin: 22px 0 10px; }

.topo { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); background: var(--fundo-2); border-bottom: 1px solid var(--borda); }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-weight: 700; }
.logo b { color: var(--azul-claro); }
.logo-marca { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg, var(--azul-claro), var(--azul)); color: #fff; }
.abas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.abas a { padding: 7px 12px; border-radius: 8px; color: var(--apagado); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: .9rem; }
.abas a.ativa, .abas a:hover { background: var(--cartao); color: var(--texto); }

.conteudo { max-width: 980px; margin: 0 auto; padding: 18px max(16px, env(safe-area-inset-right)) 60px max(16px, env(safe-area-inset-left)); }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 18px; margin: 14px 0; }
.aviso { padding: 10px 14px; border-radius: 10px; background: rgba(37, 99, 235, .14); border: 1px solid rgba(96, 165, 250, .35); margin: 0 0 14px; }
.erro { color: var(--erro); }
.dica { color: var(--apagado); font-size: .9rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo-2); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: #1a2233; }
.btn:disabled { opacity: .6; cursor: default; }
.btn:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.btn-azul { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-azul:hover { background: #1d4ed8; }
.btn-pequeno { min-height: 36px; padding: 6px 12px; font-size: .88rem; }
.linha { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.linha form { margin: 0; }

input, textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); font: inherit; font-size: 16px; }
textarea { resize: vertical; line-height: 1.45; }
.formulario label { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; font-weight: 600; font-size: .92rem; }
.formulario label small { font-weight: 400; color: var(--apagado); }
.formulario label.marcar { flex-direction: row; align-items: center; gap: 10px; }
.formulario label.marcar input { width: 20px; height: 20px; }
.entrar { max-width: 380px; margin: 40px auto; display: flex; flex-direction: column; gap: 12px; }
.entrar label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }

.numeros { margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.numero { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; }
.numero span { display: block; color: var(--apagado); font-size: .85rem; }
.numero b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.numero.alerta { border-color: var(--alerta); }

.conversas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.conversas li + li { border-top: 1px solid var(--borda); }
.conversas a { display: block; padding: 12px 14px; color: var(--texto); text-decoration: none; min-width: 0; }
.conversas a:hover { background: var(--cartao); }
.previa { display: block; color: var(--apagado); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; background: var(--fundo-2); border: 1px solid var(--borda); color: var(--apagado); }
.selo.alerta { color: var(--alerta); border-color: var(--alerta); }
.selo.ok { color: var(--ok); border-color: var(--ok); }

.historico { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.msg { max-width: 85%; padding: 8px 11px; border-radius: 10px; background: var(--cartao); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg small { display: block; font-size: .72rem; color: var(--apagado); margin-top: 2px; }
.msg.robo, .msg.voce { align-self: flex-end; background: #12306b; }
.msg.voce { background: #1e3a8a; }

.busca input { font-size: 1.05rem; padding: 12px 14px; }
.resultados { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.serie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao); }
.serie-nome { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.serie-acoes { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; justify-content: flex-end; min-width: 0; }
.serie-acoes input { flex: 1; min-width: 0; font-size: .85rem; padding: 7px 10px; }

.qr { width: 280px; max-width: 100%; background: #fff; padding: 10px; border-radius: 12px; }
.tabela-rola { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
th { color: var(--apagado); font-size: .82rem; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes form { margin: 0; }
.msg.erro { align-self: center; background: rgba(248, 113, 113, .12); border: 1px solid var(--erro); color: var(--erro); font-size: .85rem; }
.anuncio { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; margin: 10px 0; }
.anuncio.pausado { opacity: .65; }
.anuncio-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.codigo { font-family: ui-monospace, Consolas, monospace; background: var(--fundo); border: 1px solid var(--azul); color: var(--azul-claro); border-radius: 6px; padding: 1px 8px; font-size: .85rem; }
.excluir { display: flex; align-items: center; gap: 8px; }
.excluir .marcar { display: flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--apagado); }
.excluir .marcar input { width: 16px; height: 16px; }
.escolhida { margin: 0; color: var(--apagado); }
.msg.conferencia { align-self: center; background: rgba(52, 211, 153, .1); border: 1px solid var(--ok); font-size: .85rem; }
.responder { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: var(--fundo); }
.responder textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; }

/* ===================== Painel da loja: menu lateral ===================== */
body.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; background: var(--fundo-2); border-right: 1px solid var(--borda); overflow-y: auto; }
.lateral-marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; min-width: 0; }
.lateral-marca span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lateral-marca small { color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-menu { display: flex; flex-direction: column; gap: 2px; }
.lateral-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--apagado); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; }
.lateral-menu a:hover { background: var(--cartao); color: var(--texto); }
.lateral-menu a.ativa { background: rgba(37, 99, 235, .16); color: var(--texto); box-shadow: inset 3px 0 0 var(--azul); }
.lateral-menu a.ativa .ic { color: var(--azul-claro); }
.contador { margin-left: auto; font-style: normal; font-size: .72rem; background: var(--alerta); color: #1a1300; border-radius: 999px; padding: 0 7px; }
.lateral-pe { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--borda); }
.status-whats { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); text-decoration: none; font-size: .82rem; }
.status-whats .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--erro); flex-shrink: 0; }
.status-whats.ok .ponto { background: var(--ok); }
.lateral-link { padding: 7px 10px; border-radius: 9px; color: var(--apagado); text-decoration: none; font-size: .86rem; }
.lateral-link:hover { background: var(--cartao); color: var(--texto); }
.principal { min-width: 0; padding: 22px max(16px, 2.5vw) 60px; max-width: 1180px; width: 100%; }
.principal.larga { max-width: none; padding-bottom: 16px; }

.cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cabeca h1 { margin: 0; }
.segmentado { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--fundo-2); border: 1px solid var(--borda); }
.segmentado a { padding: 6px 12px; border-radius: 8px; color: var(--apagado); text-decoration: none; font-weight: 600; font-size: .86rem; }
.segmentado a.ativa { background: var(--cartao); color: var(--texto); }
.numero small { display: block; color: var(--apagado); font-size: .78rem; }
.numero.destaque { border-color: var(--azul); background: linear-gradient(135deg, rgba(37, 99, 235, .18), var(--cartao) 70%); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li + li { border-top: 1px solid var(--borda); }
.lista-simples a { display: block; padding: 10px 2px; color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.barras { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 18px; overflow-x: auto; }
.barra { flex: 1 0 34px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.barra-coluna { width: 70%; min-height: 2px; background: linear-gradient(180deg, var(--azul-claro), var(--azul)); border-radius: 6px 6px 2px 2px; }
.barra-valor { font-size: .66rem; color: var(--apagado); white-space: nowrap; }
.barra-dia { font-size: .7rem; color: var(--apagado); }

.subabas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--borda); }
.subabas a { flex: 0 0 auto; padding: 8px 14px; border-radius: 9px; color: var(--apagado); text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.subabas a.ativa { background: var(--cartao); color: var(--texto); }

.combo-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.formulario .combo-linha label { margin: 0; flex: 0 1 140px; }
.formulario .combo-linha label.cresce { flex: 1 1 180px; }
.formulario .combo-linha label span { font-size: .8rem; color: var(--apagado); font-weight: 600; }
.formulario .combo-linha label.marcar { flex: 0 0 auto; font-weight: 500; font-size: .86rem; }
.combo-linha .remover { color: var(--erro); }
.previa-msg { white-space: pre-wrap; background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px; padding: 12px; font: inherit; }
.toque { border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--fundo-2); }

/* ===================== Leads (estilo WhatsApp Web) ===================== */
.leads { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); height: calc(100vh - 40px); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: var(--fundo-2); }
.leads-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borda); }
.leads-busca { padding: 10px 10px 6px; }
.leads-busca input { padding: 8px 12px; }
.filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 10px 8px; border-bottom: 1px solid var(--borda); }
.filtros a { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--borda); color: var(--apagado); text-decoration: none; font-size: .78rem; white-space: nowrap; }
.filtros a.ativa { border-color: var(--azul); color: var(--azul-claro); background: rgba(37, 99, 235, .14); }
.filtros em { font-style: normal; font-weight: 700; }
.leads-itens { flex: 1; overflow-y: auto; }
.lead { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.lead:hover { background: var(--cartao); }
.lead.ativo { background: var(--cartao); box-shadow: inset 3px 0 0 var(--azul); }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: #1e2a44; color: var(--azul-claro); font-weight: 700; }
.lead-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lead-topo { display: flex; justify-content: space-between; gap: 8px; }
.lead-topo b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem; }
.lead-topo small { color: var(--apagado); flex-shrink: 0; font-size: .72rem; }
.lead-previa { color: var(--apagado); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead.nao-lida .lead-previa { color: var(--texto); }
.lead.nao-lida .lead-topo small { color: var(--azul-claro); font-weight: 700; }
.lead-selos { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lead-selos .selo { font-size: .68rem; padding: 0 7px; }
.bolinha { width: 9px; height: 9px; border-radius: 50%; background: var(--azul-claro); margin-left: auto; }
.leads-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--fundo); }
.vazio { flex: 1; display: grid; place-items: center; color: var(--apagado); }
.conversa-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--fundo-2); border-bottom: 1px solid var(--borda); }
.conversa-topo .voltar { display: none; color: var(--texto); text-decoration: none; font-size: 1.3rem; padding: 4px 8px; }
.conversa-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conversa-quem b, .conversa-quem small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-quem small { color: var(--apagado); }
.conversa-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.conversa-acoes form { margin: 0; }
.conversa-contexto { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--borda); }
.ctx { font-size: .76rem; padding: 3px 9px; border-radius: 7px; background: var(--cartao); border: 1px solid var(--borda); color: var(--apagado); }
.ctx.ok { color: var(--ok); border-color: var(--ok); }
.ctx.alerta { color: var(--alerta); border-color: var(--alerta); }
.leads-conversa .historico { flex: 1; overflow-y: auto; margin: 0; padding: 12px 5%; }
.leads-conversa .responder { position: static; margin: 0; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); background: var(--fundo-2); border-top: 1px solid var(--borda); }
.centro { text-align: center; padding: 20px; }

@media (max-width: 900px) {
  body.app { display: block; }
  .lateral { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); border-right: none; border-bottom: 1px solid var(--borda); overflow: visible; }
  .lateral-marca { border: none; padding: 0; flex: 1 1 auto; }
  .lateral-pe { flex-direction: row; margin: 0; padding: 0; border: none; }
  .lateral-pe .lateral-link { display: none; }
  .status-whats { padding: 6px 8px; font-size: .74rem; }
  .lateral-menu { order: 3; flex: 1 1 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .lateral-menu a { padding: 7px 10px; font-size: .85rem; }
  .lateral-menu a.ativa { box-shadow: inset 0 -2px 0 var(--azul); }
  .principal { padding: 14px max(12px, env(safe-area-inset-right)) 40px max(12px, env(safe-area-inset-left)); }
  .principal.larga { padding: 0; }
  .leads { display: block; height: calc(100dvh - 104px); border-radius: 0; border: none; }
  .leads-lista, .leads-conversa { height: 100%; }
  .leads .leads-conversa { display: none; }
  .leads.com-conversa .leads-lista { display: none; }
  .leads.com-conversa .leads-conversa { display: flex; }
  .conversa-topo .voltar { display: inline-block; }
  .conversa-acoes .btn { min-height: 34px; padding: 4px 10px; font-size: .8rem; }
  .responder textarea { font-size: 16px; }
}
.cartao > h2:first-child { margin-top: 0; }
td.num, th.num { white-space: nowrap; } td:first-child { white-space: nowrap; }