/* Painel (área logada): barra do topo, listas, gráficos, medidor e diálogos.
   Usa as cores, os campos e os botões de account.css; aqui só o que é do painel. */
:root { --dado: #2B37F5; --dado-trilho: #E3E6FE; --aviso: #B26A00; --aviso-trilho: #FCEBD0; --perigo: #C7342A; --perigo-trilho: #F9DEDB; --sup-dica: #0D1026; --texto-dica: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root { --dado: #7C86FF; --dado-trilho: #1E2558; --aviso: #F2B544; --aviso-trilho: #3A2D10; --perigo: #FF8B80; --perigo-trilho: #3A1715; --sup-dica: #FFFFFF; --texto-dica: #0D1026; }
}

/* barra do topo (anula o header centralizado de account.css) */
.topo-painel { max-width: none; padding: 0; display: block; border-bottom: 1px solid var(--borda); background: var(--sup-1); position: sticky; top: 0; z-index: 20; }
.topo-painel .barra { max-width: 1120px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 28px; }
.topo-painel .marca span { font-size: 21px; }
.abas { display: flex; gap: 4px; flex: 1; }
.abas a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--texto-2); font-size: 15px; font-weight: 500; }
.abas a:hover { background: var(--sup-2); color: var(--texto); }
.abas a[aria-current="page"] { background: var(--sup-3); color: var(--texto); }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--texto-2); }
.usuario .nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-pequeno { height: 36px; padding: 0 14px; font-size: 14px; width: auto; }

/* conteúdo */
.painel-main { max-width: 1120px; margin: 0 auto; padding: 32px 32px 80px; width: 100%; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecalho h1 { font-size: clamp(26px, 4vw, 34px); margin: 4px 0 0; }
.cabecalho .acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.botao-auto { width: auto; padding: 0 18px; height: 44px; font-size: 15px; }
.voltar-link { font-size: 14px; text-decoration: none; color: var(--texto-2); }
.voltar-link:hover { color: var(--texto); }
.secao { border: 1px solid var(--borda); border-radius: 14px; background: var(--sup-1); padding: 22px 24px; }
.secao + .secao, .grade + .secao, .secao + .grade { margin-top: 16px; }
.grade > .secao { margin-top: 0; } /* na grade o espaço vem do gap */
.secao h2 { margin: 0; font-size: 17px; font-weight: 700; }
.secao .sub { margin: 4px 0 0; font-size: 14px; color: var(--texto-3); }
.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vazio { text-align: center; padding: 48px 16px; color: var(--texto-2); }
.vazio h2 { color: var(--texto); font-size: 20px; }
.vazio p { max-width: 420px; margin: 8px auto 20px; }
.carregando { color: var(--texto-3); padding: 24px 0; }

/* aviso no topo do conteúdo */
.faixa { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; font-size: 15px; background: var(--aviso-fundo); color: var(--aviso-texto); }
.faixa .botao { width: auto; height: 36px; padding: 0 14px; font-size: 14px; background: transparent; border: 1px solid currentColor; color: inherit; }

/* medidor de uso */
.medidores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.medidor .rotulo-m { font-size: 14px; color: var(--texto-2); }
.medidor .valor-m { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.medidor .valor-m small { font-size: 14px; font-weight: 400; color: var(--texto-3); }
.trilho { margin-top: 10px; height: 8px; border-radius: 999px; background: var(--dado-trilho); overflow: hidden; }
.trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--dado); }
.medidor.aviso .trilho { background: var(--aviso-trilho); } .medidor.aviso .trilho > span { background: var(--aviso); }
.medidor.perigo .trilho { background: var(--perigo-trilho); } .medidor.perigo .trilho > span { background: var(--perigo); }
.medidor .nota-m { margin-top: 8px; font-size: 13px; color: var(--texto-3); }
.medidor .nota-m strong { color: var(--texto-2); font-weight: 500; }

/* lista de links */
.links { margin-top: 16px; border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; background: var(--sup-1); }
.link-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 20px; text-decoration: none; color: inherit; }
.link-linha + .link-linha { border-top: 1px solid var(--borda); }
.link-linha:hover { background: var(--sup-2); }
.link-linha .titulo-l { font-weight: 500; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-linha .curto { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--link); }
.link-linha .destino-l { font-size: 13px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.link-linha .numero { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 17px; min-width: 64px; }
.link-linha .numero small { display: block; font-size: 12px; font-weight: 400; color: var(--texto-3); }
.selo { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--sup-3); color: var(--texto-2); white-space: nowrap; }
.selo.ativo { background: var(--ok-fundo); color: var(--ok); }
.copiar { border: 1px solid var(--borda-forte); background: var(--sup-1); color: var(--texto-2); border-radius: 8px; height: 30px; padding: 0 10px; font: inherit; font-size: 13px; cursor: pointer; }
.copiar:hover { color: var(--texto); background: var(--sup-3); }

/* detalhe do link */
.endereco { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.endereco .curto { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--link); }
.destino-d { margin: 6px 0 0; font-size: 14px; color: var(--texto-3); word-break: break-all; }
.periodos { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: 10px; overflow: hidden; }
.periodos button { border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: 14px; padding: 8px 14px; cursor: pointer; }
.periodos button + button { border-left: 1px solid var(--borda-forte); }
.periodos button[aria-pressed="true"] { background: var(--sup-3); color: var(--texto); font-weight: 500; }
.periodos button:disabled { color: var(--texto-3); cursor: not-allowed; opacity: 0.6; }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.numero-card .rotulo-m { font-size: 14px; color: var(--texto-2); }
.numero-card .heroi { font-size: 48px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin-top: 6px; }
.numero-card .grande { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; }
.numero-card .nota-m { font-size: 13px; color: var(--texto-3); margin-top: 4px; }

/* gráfico de colunas */
.grafico { position: relative; margin-top: 16px; }
.grafico svg { display: block; width: 100%; height: 240px; overflow: visible; }
.grafico .grade-linha { stroke: var(--borda); stroke-width: 1; shape-rendering: crispEdges; }
.grafico .eixo { fill: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico .coluna { fill: var(--dado); }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover + .coluna, .grafico .coluna.ativa { opacity: 0.8; }
.dica-grafico { position: absolute; pointer-events: none; background: var(--sup-dica); color: var(--texto-dica); font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 6px 18px rgba(9, 13, 32, 0.18); }
.dica-grafico strong { font-size: 15px; }
.ver-tabela { margin-top: 10px; background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.tabela-dados { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-dados th, .tabela-dados td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.tabela-dados td:last-child, .tabela-dados th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* listas com barra (origens, aparelhos...) */
.barras { list-style: none; margin: 14px 0 0; padding: 0; }
.barras li { margin: 0 0 12px; }
.barras .linha-b { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.barras .linha-b span:first-child { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras .linha-b span:last-child { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.barras .trilho { height: 6px; margin-top: 6px; }
.barras .vazio-b { font-size: 14px; color: var(--texto-3); }

/* QR code */
.qr { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.qr img { width: 132px; height: 132px; border-radius: 10px; background: #FFFFFF; padding: 6px; border: 1px solid var(--borda); }
.qr .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* diálogos */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(480px, calc(100vw - 32px)); background: var(--sup-1); color: var(--texto); box-shadow: 0 24px 64px rgba(9, 13, 32, 0.3); }
dialog::backdrop { background: rgba(9, 13, 32, 0.5); }
dialog .cartao { border: 0; box-shadow: none; }
dialog .botoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
dialog .botoes .botao { width: auto; padding: 0 18px; }
.prefixo { display: flex; align-items: stretch; }
.prefixo span { display: flex; align-items: center; padding: 0 10px 0 14px; border: 1px solid var(--borda-forte); border-right: 0; border-radius: 10px 0 0 10px; background: var(--sup-2); color: var(--texto-3); font-family: 'JetBrains Mono', monospace; font-size: 14px; white-space: nowrap; }
.prefixo input { border-radius: 0 10px 10px 0 !important; font-family: 'JetBrains Mono', monospace; }
.botao-perigo { background: var(--erro) !important; }
.botao-perigo:hover { filter: brightness(0.92); }
.zona-perigo { border-color: var(--perigo-trilho); }

/* aviso flutuante */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--sup-dica); color: var(--texto-dica); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; box-shadow: 0 8px 24px rgba(9, 13, 32, 0.25); }

@media (max-width: 860px) {
  .grade-2, .grade-3, .numeros, .medidores { grid-template-columns: minmax(0, 1fr); }
  .link-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .link-linha .selo { display: none; }
}
@media (max-width: 560px) {
  .topo-painel .barra { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
  .abas { order: 3; flex-basis: 100%; }
  .usuario .nome { display: none; }
  .painel-main { padding: 24px 16px 64px; }
  .secao { padding: 18px 16px; }
  .link-linha { padding: 14px 16px; gap: 12px; }
  .numero-card .heroi { font-size: 40px; }
}

/* escolha do tipo de link no diálogo */
.tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.tipos label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borda-forte); border-radius: 12px; padding: 12px; cursor: pointer; }
.tipos label:has(input:checked) { border-color: var(--dado); background: var(--sup-2); box-shadow: 0 0 0 1px var(--dado) inset; }
.tipos input { margin-top: 3px; accent-color: #2B37F5; }
.tipos strong { display: block; font-size: 15px; font-weight: 600; }
.tipos small { display: block; font-size: 13px; color: var(--texto-3); line-height: 1.4; margin-top: 2px; }
.selo.whatsapp { background: #E3F5EA; color: #13703C; }
@media (prefers-color-scheme: dark) { .selo.whatsapp { background: #123524; color: #5FD08B; } }
.mensagem-pronta { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--borda); font-size: 14px; color: var(--texto-2); white-space: pre-wrap; max-width: 560px; }

/* identificar conversa */
.identificar textarea { min-height: 140px; }
.resultado { border: 1px solid var(--borda); border-radius: 12px; padding: 16px 18px; margin-top: 12px; background: var(--sup-2); }
.resultado h3 { margin: 0; font-size: 16px; }
.resultado dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 14px; }
.resultado dt { color: var(--texto-3); }
.resultado dd { margin: 0; color: var(--texto); }

/* integrações */
.passos { margin: 14px 0 0; padding-left: 20px; color: var(--texto-2); font-size: 14px; line-height: 1.55; }
.passos li { margin-bottom: 6px; }
.rotulo-campo { margin: 14px 0 6px; font-size: 14px; font-weight: 500; }
.endereco-webhook { display: flex; gap: 8px; align-items: center; }
.endereco-webhook code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--sup-2); color: var(--texto); }

/* vendas na página do link e na de conversas */
.vendas-tabela { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.vendas-tabela th, .vendas-tabela td { text-align: left; padding: 8px; border-bottom: 1px solid var(--borda); }
.vendas-tabela td.valor, .vendas-tabela th.valor { text-align: right; font-variant-numeric: tabular-nums; }
.vendas-tabela .apagar-venda { border: 0; background: none; color: var(--texto-3); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.status-venda { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--sup-3); color: var(--texto-2); white-space: nowrap; }
.status-venda.aprovada { background: var(--ok-fundo); color: var(--ok); }
.registrar-venda { margin-top: 14px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.registrar-venda .campo { margin: 0; flex: 1 1 140px; }

.link-linha .vendas-l { font-size: 13px; color: var(--ok); margin-top: 4px; font-weight: 500; }
@media (max-width: 1000px) { .medidores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .medidores { grid-template-columns: minmax(0, 1fr); } }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }