/* Sistema visual do painel. Tokens em :root (claro); o escuro troca só os tokens.
   Paleta dos gráficos: slots 1 e 2 da paleta validada (azul e laranja), conferidos com o validador nos dois modos. */
:root {
  color-scheme: light;
  --plano: #f6f6f3; --superficie: #ffffff; --superficie-2: #fafaf8; --grafico: #fcfcfb;
  --texto: #121212; --texto-2: #52514e; --texto-3: #898781;
  --borda: #e6e5df; --borda-forte: #d3d2ca; --grade: #e1e0d9; --eixo: #c3c2b7;
  --marca: #2a78d6; --marca-forte: #1c5cab; --marca-suave: #e8f1fc; --sobre-marca: #ffffff;
  --s1: #2a78d6; --s2: #eb6834;
  --q1: #cde2fb; --q2: #86b6ef; --q3: #3987e5; --q4: #1c5cab; --q5: #0d366b;
  --ok: #0a7d0a; --ok-fundo: #e9f6e9; --atencao: #946200; --atencao-fundo: #fff5dc; --problema: #c62f2f; --problema-fundo: #fdecec;
  --sombra: 0 1px 2px rgba(17, 17, 17, .04), 0 4px 16px rgba(17, 17, 17, .04);
  --raio: 12px; --raio-p: 8px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plano: #0f0f0e; --superficie: #181817; --superficie-2: #1f1f1d; --grafico: #1a1a19;
    --texto: #f3f3f1; --texto-2: #c3c2b7; --texto-3: #898781;
    --borda: #2c2c2a; --borda-forte: #3a3a37; --grade: #2c2c2a; --eixo: #383835;
    --marca: #3987e5; --marca-forte: #6da7ec; --marca-suave: #17283d; --sobre-marca: #ffffff;
    --s1: #3987e5; --s2: #d95926;
  --q1: #104281; --q2: #1c5cab; --q3: #3987e5; --q4: #86b6ef; --q5: #cde2fb;
    --q1: #104281; --q2: #1c5cab; --q3: #3987e5; --q4: #86b6ef; --q5: #cde2fb;
    --ok: #3fb83f; --ok-fundo: #132613; --atencao: #f2b33d; --atencao-fundo: #2b2310; --problema: #ef6b6b; --problema-fundo: #2d1515;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0f0f0e; --superficie: #181817; --superficie-2: #1f1f1d; --grafico: #1a1a19;
  --texto: #f3f3f1; --texto-2: #c3c2b7; --texto-3: #898781;
  --borda: #2c2c2a; --borda-forte: #3a3a37; --grade: #2c2c2a; --eixo: #383835;
  --marca: #3987e5; --marca-forte: #6da7ec; --marca-suave: #17283d; --sobre-marca: #ffffff;
  --s1: #3987e5; --s2: #d95926;
  --ok: #3fb83f; --ok-fundo: #132613; --atencao: #f2b33d; --atencao-fundo: #2b2310; --problema: #ef6b6b; --problema-fundo: #2d1515;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--plano); color: var(--texto); font: 14px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0; font-weight: 600; }
h3 { font-size: 13px; margin: 0 0 8px; font-weight: 600; color: var(--texto-2); }
p { margin: 0 0 8px; }
[hidden] { display: none !important; }
.suave { color: var(--texto-2); }
.fraco { color: var(--texto-3); font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--superficie); border-right: 1px solid var(--borda); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.marca svg { flex: 0 0 auto; }
.seletor-conta { margin: 0 4px 12px; }
.seletor-conta select { width: 100%; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio-p); color: var(--texto-2); font-weight: 500; cursor: pointer; border: 0; background: none; font: inherit; text-align: left; width: 100%; }
.nav-item:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.nav-item.ativo { background: var(--marca-suave); color: var(--marca-forte); }
.nav-item .contador { margin-left: auto; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 0 7px; }
.nav-sep { height: 1px; background: var(--borda); margin: 10px 6px; }
.lateral-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--borda); display: grid; gap: 4px; }
.usuario { padding: 6px 10px; font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.principal { min-width: 0; padding: 24px 32px 48px; max-width: 1400px; width: 100%; }
.topo-movel { display: none; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho .sub { color: var(--texto-2); margin-top: 4px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

/* ---------- cartões ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px; min-width: 0; }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.cartao-topo .sub { color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.grade { display: grid; gap: 16px; }
.grade.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade + .grade, .grade + .cartao, .cartao + .cartao, .cartao + .grade, .aviso + .grade, .aviso + .cartao { margin-top: 16px; }
.grade > .cartao { margin-top: 0; }
.numeros + .cartao, .numeros + .grade { margin-top: 16px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.numeros.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); min-width: 0; }
.stat .rotulo { color: var(--texto-2); font-size: 12px; font-weight: 500; }
.stat .valor { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .detalhe { color: var(--texto-3); font-size: 12px; margin-top: 2px; }
.stat.destaque { border-color: var(--marca); }

/* ---------- controles ---------- */
button, .botao { font: inherit; font-weight: 550; border-radius: var(--raio-p); padding: 8px 14px; border: 1px solid transparent; cursor: pointer; background: var(--marca); color: var(--sobre-marca); display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
button:hover { filter: brightness(1.06); }
button:disabled { opacity: .55; cursor: default; filter: none; }
button.sec { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
button.sec:hover { background: var(--superficie-2); }
button.fantasma { background: transparent; color: var(--texto-2); border-color: transparent; padding: 6px 8px; }
button.fantasma:hover { background: var(--superficie-2); color: var(--texto); }
button.perigo { background: var(--problema); }
button.peq { padding: 5px 10px; font-size: 13px; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio-p); padding: 8px 10px; min-width: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
label.campo { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--texto-2); }
label.marcar { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto); }
.form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.segmentado { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 2px; }
.segmentado button { white-space: nowrap; background: transparent; color: var(--texto-2); border: 0; padding: 6px 12px; font-weight: 500; }
.segmentado button.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.busca { min-width: 220px; }

/* ---------- etiquetas, avisos ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; padding: 2px 9px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); white-space: nowrap; }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.etiqueta.atencao { background: var(--atencao-fundo); color: var(--atencao); border-color: transparent; }
.etiqueta.problema { background: var(--problema-fundo); color: var(--problema); border-color: transparent; }
.etiqueta.marca { background: var(--marca-suave); color: var(--marca-forte); border-color: transparent; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--raio); padding: 12px 14px; border: 1px solid var(--borda); background: var(--superficie); }
.aviso.atencao { background: var(--atencao-fundo); border-color: transparent; }
.aviso.problema { background: var(--problema-fundo); border-color: transparent; }
.aviso.ok { background: var(--ok-fundo); border-color: transparent; }
.aviso .icone-aviso { flex: 0 0 auto; margin-top: 1px; }
.aviso.atencao .icone-aviso { color: var(--atencao); } .aviso.problema .icone-aviso { color: var(--problema); } .aviso.ok .icone-aviso { color: var(--ok); }
.msg-erro { color: var(--problema); font-size: 13px; }
.msg-ok { color: var(--ok); font-size: 13px; }

/* ---------- tabelas ---------- */
.tabela-caixa { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-weight: 550; color: var(--texto-2); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; user-select: none; }
th.ordenavel { cursor: pointer; }
th.ordenavel:hover { color: var(--texto); }
th .seta { color: var(--texto-3); margin-left: 4px; }
td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover td { background: var(--superficie-2); }
tr.destaque td { background: var(--atencao-fundo); }
.vazio { text-align: center; padding: 32px 16px; color: var(--texto-3); }
.vazio b { display: block; color: var(--texto-2); margin-bottom: 4px; }

/* ---------- gaveta (painel lateral) ---------- */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 40; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--superficie); z-index: 41; overflow-y: auto; box-shadow: -8px 0 32px rgba(0, 0, 0, .12); padding: 0 0 32px; }
.gaveta-topo { position: sticky; top: 0; background: var(--superficie); border-bottom: 1px solid var(--borda); padding: 16px 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; z-index: 1; }
.gaveta-corpo { padding: 16px 20px; display: grid; gap: 16px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linha-tempo li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; }
.linha-tempo .hora { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 6px; }
.balao { border-radius: 10px; padding: 7px 11px; background: var(--superficie-2); border: 1px solid var(--borda); max-width: 92%; word-wrap: break-word; }
.balao.empresa { justify-self: end; background: var(--marca-suave); border-color: transparent; }
.balao.sistema { background: transparent; border-style: dashed; color: var(--texto-2); font-size: 12px; }
.balao .meta { font-size: 11px; color: var(--texto-3); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.linha-tempo li.dia-sep { display: block; text-align: center; font-size: 11px; color: var(--texto-3); margin: 6px 0 2px; }
.lista-def { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; }
.lista-def dt { color: var(--texto-2); }
.lista-def dd { margin: 0; }

/* ---------- gráficos ---------- */
.grafico { position: relative; }
.grafico svg { display: block; width: 100%; overflow: visible; }
.grafico .rot-eixo { fill: var(--texto-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .grade-l { stroke: var(--grade); stroke-width: 1; }
.grafico .base-l { stroke: var(--eixo); stroke-width: 1; }
.grafico .s1 { fill: var(--s1); } .grafico .s2 { fill: var(--s2); }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover, .grafico .alvo.ativo { fill: var(--texto); fill-opacity: .04; }
.grafico .rot-valor { fill: var(--texto-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin-bottom: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legenda i.s1 { background: var(--s1); } .legenda i.s2 { background: var(--s2); }
.dica { position: absolute; pointer-events: none; background: var(--superficie); border: 1px solid var(--borda); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); border-radius: 8px; padding: 8px 10px; font-size: 12px; min-width: 140px; z-index: 5; }
.dica .t { color: var(--texto-2); margin-bottom: 4px; }
.dica .l { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.dica .l b { font-variant-numeric: tabular-nums; }
.dica .chave { width: 12px; height: 2px; display: inline-block; border-radius: 2px; }
.dica .chave.s1 { background: var(--s1); } .dica .chave.s2 { background: var(--s2); }
.barra-h { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.barra-h .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.barra-h .trilho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra-h .preenche { height: 14px; border-radius: 0 4px 4px 0; background: var(--s1); min-width: 2px; flex: 0 0 auto; }
.barra-h .v { font-variant-numeric: tabular-nums; color: var(--texto); white-space: nowrap; }
/* no celular: nome em cima, barra e valor embaixo, com a largura toda */
@media (max-width: 480px) {
  .barra-h { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome v" "barra barra"; gap: 4px 8px; padding: 6px 0; }
  .barra-h .nome { grid-area: nome; }
  .barra-h .trilho { display: contents; }
  .barra-h .preenche { grid-area: barra; }
  .barra-h .v { grid-area: v; text-align: right; }
}

/* ---------- QR ---------- */
.qr { width: 240px; max-width: 100%; background: #fff; border-radius: 12px; padding: 10px; border: 1px solid var(--borda); }
.qr svg { width: 100%; height: auto; display: block; }

/* ---------- entrar / convite ---------- */
.tela-acesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.tela-acesso .cartao { width: min(400px, 100%); padding: 28px; }
.tela-acesso .marca { padding: 0 0 20px; }
.tela-acesso form { display: grid; gap: 12px; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 50; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 8px 0 32px rgba(0, 0, 0, .15); }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 49; }
  .topo-movel { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 30; }
  .topo-movel .marca { padding: 0; font-size: 15px; }
  .principal { padding: 16px 16px 40px; }
  .grade.g2, .grade.g3 { grid-template-columns: 1fr; }
  .numeros, .numeros.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .valor { font-size: 20px; }
  .busca { min-width: 0; flex: 1 1 100%; }
  /* tabelas viram cartões no celular */
  table.responsiva thead { display: none; }
  table.responsiva, table.responsiva tbody, table.responsiva tr, table.responsiva td { display: block; width: 100%; }
  table.responsiva tr { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; background: var(--superficie); display: flex; flex-direction: column; }
  table.responsiva td { border: 0; padding: 4px 0; display: flow-root; text-align: right; overflow-wrap: anywhere; }
  table.responsiva td::before { content: attr(data-rotulo); color: var(--texto-3); font-size: 12px; text-align: left; float: left; margin-right: 12px; padding-top: 1px; }
  table.responsiva .etiqueta { white-space: normal; text-align: left; }
  table.responsiva .ultima-msg { clear: both; max-width: none; text-align: left; padding-top: 2px; }
  table.responsiva td.principal-celula { display: block; text-align: left; font-weight: 600; order: -1; padding-bottom: 6px; }
  table.responsiva td.principal-celula::before { content: none; }
  .tabela-caixa { margin: 0; padding: 0; }
}
.pilha { display: grid; gap: 12px; }
.mais { display: flex; justify-content: center; padding-top: 12px; }

/* horário comercial (Configurações) */
.horario { display: grid; gap: 8px; max-width: 460px; }
.horario-dia { display: grid; grid-template-columns: 120px auto auto auto; gap: 8px; align-items: center; justify-content: start; }
.horario-dia input[type="time"] { width: auto; }
@media (max-width: 480px) { .horario-dia { grid-template-columns: 1fr auto auto auto; } }

/* fila: última mensagem em até 2 linhas */
.ultima-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 46ch; overflow-wrap: anywhere; }

/* interesses (Configurações) */
.interesses { display: grid; gap: 10px; }
.interesse { display: grid; grid-template-columns: minmax(140px, 200px) 1fr auto; gap: 8px; align-items: end; }
@media (max-width: 640px) { .interesse { grid-template-columns: 1fr; } }

/* mapa de calor dia da semana × hora */
.mapa-caixa { overflow-x: auto; }
.mapa { display: grid; grid-template-columns: 36px repeat(24, minmax(14px, 1fr)); gap: 6px 2px; min-width: 420px; position: relative; }
.mapa .rot { font-size: 11px; color: var(--texto-3); display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.mapa .rot.h { justify-content: center; }
.mapa .c { aspect-ratio: 1; border-radius: 3px; background: var(--superficie-2); border: 0; padding: 0; min-height: 14px; }
.mapa .c.exp { box-shadow: 0 4px 0 -1px var(--texto-3); } /* sublinhado: expediente */
.mapa .c.q1 { background: var(--q1); } .mapa .c.q2 { background: var(--q2); } .mapa .c.q3 { background: var(--q3); }
.mapa .c.q4 { background: var(--q4); } .mapa .c.q5 { background: var(--q5); }
.mapa .c:hover, .mapa .c:focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--texto-2); margin-top: 10px; }
.mapa-legenda .escala { display: inline-flex; gap: 2px; align-items: center; }
.mapa-legenda .escala i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.mapa-legenda .escala i.q0 { background: var(--superficie-2); border: 1px solid var(--borda); }
.mapa-legenda .escala i.q1 { background: var(--q1); } .mapa-legenda .escala i.q2 { background: var(--q2); } .mapa-legenda .escala i.q3 { background: var(--q3); }
.mapa-legenda .escala i.q4 { background: var(--q4); } .mapa-legenda .escala i.q5 { background: var(--q5); }
.mapa-legenda .exp-amostra { width: 14px; height: 3px; display: inline-block; vertical-align: middle; background: var(--texto-3); border-radius: 2px; }

/* celular: cartões menos apertados, nada cortado */
@media (max-width: 480px) {
  .cartao { padding: 14px; }
  .stat { padding: 12px; }
  .stat .valor { white-space: normal; overflow-wrap: anywhere; font-size: 19px; line-height: 1.2; }
  .segmentado { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .segmentado::-webkit-scrollbar { display: none; }
  .segmentado button { flex: 0 0 auto; padding: 6px 10px; }
  .cartao-topo > * { min-width: 0; max-width: 100%; }
  .mapa { min-width: 0; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 4px 1px; }
  .mapa .c { min-height: 0; border-radius: 2px; }
  .mapa .rot { font-size: 10px; }
}