/* Relatórios Bonum — identidade: #220d63, #442493, #9372d8, rosa claro; Proxima Nova */

@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('fonts/figtree-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url('fonts/figtree-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url('fonts/figtree-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url('fonts/figtree-latin-700-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --ink: #220d63;
  --roxo: #442493;
  --lilas: #9372d8;
  --rosa: #f3cde0;
  --rosa-forte: #d9799f;
  --papel: #fbfafe;
  --branco: #ffffff;
  --linha: #e6e1f2;
  --linha-forte: #cfc6e6;
  --texto: #2b2540;
  --suave: #6e6789;
  --feriado: #efedf3;
  --sobe: #1e7f5c;
  --desce: #b4325a;
  --foco: #9372d8;

  --fonte: 'Proxima Nova', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --raio: 10px;
  --raio-p: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--papel);
  font-variant-numeric: tabular-nums;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

/* ---------- Cabeçalho ---------- */
.topo {
  background: var(--ink);
  color: #fff;
  padding: 18px clamp(16px, 4vw, 40px) 16px;
  position: relative;
}
.topo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--roxo), var(--lilas) 55%, var(--rosa));
}
.topo-linha {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  justify-content: space-between;
}
.identidade { display: flex; align-items: center; gap: 16px; min-width: 0; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca img { height: 31px; width: auto; display: block; }
.marca-texto { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.identidade .divisor { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }
.titulo-cliente { line-height: 1.2; }
.titulo-cliente small { display: block; font-size: 13px; color: rgba(255,255,255,.68); }
.titulo-cliente strong { font-size: 19px; font-weight: 600; }

.periodo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.periodo select, .periodo input[type=date] {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  border-radius: var(--raio-p);
  padding: 7px 10px;
  min-height: 38px;
}
.periodo select option { color: var(--texto); }
.periodo input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }
.periodo .ate { color: rgba(255,255,255,.7); font-size: 14px; }
.btn-claro {
  background: #fff; color: var(--ink); border: 0; border-radius: var(--raio-p);
  padding: 8px 14px; min-height: 38px; font-weight: 600; cursor: pointer;
}
.btn-claro:hover { background: var(--rosa); }
.btn-claro[disabled] { opacity: .6; cursor: progress; }

/* ---------- Abas ---------- */
.abas {
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding: 0 clamp(16px, 4vw, 40px);
  position: sticky; top: 0; z-index: 5;
}
.abas nav {
  max-width: 1240px; margin: 0 auto;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.abas nav::-webkit-scrollbar { display: none; }
.aba {
  background: none; border: 0; cursor: pointer;
  padding: 14px 14px 12px; white-space: nowrap;
  color: var(--suave); font-weight: 500;
  border-bottom: 3px solid transparent;
}
.aba:hover { color: var(--ink); }
.aba[aria-selected=true] { color: var(--ink); font-weight: 600; border-bottom-color: var(--roxo); }

/* ---------- Conteúdo ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 64px; }
.contexto {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  margin-bottom: 20px;
}
.contexto h1 { font-size: 26px; line-height: 1.2; margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.contexto p { margin: 0; color: var(--suave); font-size: 14px; }
.contexto .comparacao { color: var(--suave); font-size: 15px; font-weight: 400; display: block; margin-top: 4px; letter-spacing: 0; }

.aviso {
  border-radius: var(--raio); padding: 12px 16px; margin-bottom: 18px; font-size: 14px;
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.aviso.demo { background: #f4effc; color: var(--ink); border: 1px dashed var(--lilas); }
.aviso.erro { background: #fbeef3; color: #7a1f3d; border: 1px solid #efc3d3; }
.aviso button { background: none; border: 1px solid currentColor; border-radius: var(--raio-p); padding: 4px 10px; cursor: pointer; }

.painel { display: none; }
.painel.ativo { display: block; }
.carregando .painel.ativo { opacity: .45; transition: opacity .2s; pointer-events: none; }

.bloco {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 20px;
}
.bloco > header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
  margin-bottom: 14px;
}
.bloco h2 { font-size: 17px; margin: 0; color: var(--ink); font-weight: 600; }
.bloco h2 + p, .bloco .sub { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; }
.grade-2 > .bloco { margin-bottom: 0; }
.grade-2 + .bloco, .grade-2 + .grade-2 { margin-top: 20px; }

/* Faixa de indicadores: uma régua só, dividida — não cartões soltos */
.indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio);
  margin-bottom: 20px; overflow: hidden;
}
.indicador { padding: 18px 20px; border-left: 1px solid var(--linha); }
.indicador:first-child { border-left: 0; }
.indicador .rotulo { font-size: 13px; color: var(--suave); }
.indicador .valor { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.15; margin: 4px 0 6px; letter-spacing: -0.02em; }
.indicador .antes { font-size: 13px; color: var(--suave); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.indicador.destaque { background: linear-gradient(160deg, #f6f1fd 0%, #fdf3f8 100%); }

.var { font-size: 12.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.var.sobe { color: var(--sobe); background: #e5f3ed; }
.var.desce { color: var(--desce); background: #fbe7ee; }
.var.igual { color: var(--suave); background: #f0eef5; }
.var.ruim.sobe { color: var(--desce); background: #fbe7ee; }   /* p/ perdas: subir é ruim */
.var.ruim.desce { color: var(--sobe); background: #e5f3ed; }

/* Funil */
.funil { display: grid; gap: 14px; }
.etapa { display: grid; grid-template-columns: minmax(130px, 190px) 1fr auto; gap: 6px 16px; align-items: center; }
.etapa .nome { font-weight: 500; }
.etapa .nome small { display: block; color: var(--suave); font-weight: 400; font-size: 12.5px; }
.trilho { position: relative; height: 22px; }
.trilho .atual { position: absolute; left: 0; top: 0; height: 14px; border-radius: 3px; background: var(--roxo); min-width: 2px; }
.trilho .ant { position: absolute; left: 0; top: 17px; height: 4px; border-radius: 2px; background: var(--lilas); opacity: .55; min-width: 2px; }
.etapa.venda .trilho .atual { background: linear-gradient(90deg, var(--roxo), var(--lilas)); }
.etapa.perda .trilho .atual { background: #b9aed6; }
.etapa .numeros { text-align: right; min-width: 150px; }
.etapa .numeros strong { font-size: 17px; color: var(--ink); }
.etapa .numeros > span:last-child { display: block; font-size: 12.5px; color: var(--suave); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--suave); }
.legenda i { display: inline-block; width: 14px; height: 6px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* Tabelas */
.rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--linha); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: 12.5px; font-weight: 600; color: var(--suave); border-bottom: 1px solid var(--linha-forte); vertical-align: bottom; }
thead th button { all: unset; cursor: pointer; }
thead th button:hover { color: var(--ink); }
thead th[aria-sort] button::after { content: ' ↓'; }
thead th[aria-sort=ascending] button::after { content: ' ↑'; }
tbody tr:hover td { background: #faf8fe; }
tfoot td { font-weight: 700; color: var(--ink); border-bottom: 0; border-top: 1px solid var(--linha-forte); }
td.nome-linha { font-weight: 500; }
.mini { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.mini .barra { width: 70px; height: 6px; background: #efeaf8; border-radius: 3px; overflow: hidden; }
.mini .barra span { display: block; height: 100%; background: var(--lilas); }
.muted { color: var(--suave); }

.acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-linha {
  background: var(--branco); border: 1px solid var(--linha-forte); color: var(--ink);
  border-radius: var(--raio-p); padding: 6px 12px; font-size: 13.5px; cursor: pointer; font-weight: 500;
}
.btn-linha:hover { border-color: var(--lilas); background: #f7f3fd; }
.chk { font-size: 13.5px; color: var(--suave); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }

.grafico { position: relative; height: 280px; }
.grafico.alto { height: 340px; }

/* Calendário mensal (atendimento diário e Instagram) */
.meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 20px; }
.mes { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.mes h3 {
  margin: 0; padding: 12px 16px; font-size: 16px; color: #fff; background: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; font-weight: 600;
}
.mes h3 span { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 400; }
.mes table { font-size: 13.5px; }
.mes th, .mes td { padding: 6px 10px; }
.mes td.data { color: var(--texto); }
.mes td.semana { text-align: left; color: var(--suave); padding-left: 0; }
.mes tr.fds td.semana { color: var(--lilas); }
.mes tr.feriado td { background: var(--feriado); }
.mes tr.feriado td.semana::after { content: attr(data-marco); display: block; font-size: 11.5px; color: var(--suave); }
.mes .marca-live {
  display: inline-block; font-size: 11px; font-weight: 600; color: #8a2c58; background: var(--rosa);
  border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: 1px;
}
.mes .marca-outro { display: inline-block; font-size: 11px; color: var(--ink); background: #ece6f8; border-radius: 999px; padding: 0 7px; margin-left: 6px; }
.volume { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; width: 100%; }
.volume .barra { width: 56px; flex: none; height: 8px; border-radius: 2px; background: #f1edf9; overflow: hidden; direction: rtl; }
.volume .barra span { display: block; height: 100%; background: var(--lilas); }
.volume b { min-width: 28px; font-weight: 600; }
.mes tfoot td { background: #f7f4fd; }
.mes tfoot tr.part td { font-weight: 600; color: var(--suave); background: #fff; border-top: 0; }

.pend {
  all: unset; cursor: pointer; display: inline-block; min-width: 40px; text-align: right;
  padding: 2px 6px; border-radius: 4px; border: 1px dashed transparent;
}
.pend:hover, .pend:focus-visible { border-color: var(--linha-forte); background: #faf8fe; }
.pend.vazio { color: #c3bcd6; }
.pend.manual::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--lilas); margin-right: 5px; vertical-align: middle; }
.pend-input { width: 64px; text-align: right; padding: 2px 6px; border: 1px solid var(--lilas); border-radius: 4px; }

/* Marcos */
.marcos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.marcos-lista li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.marcos-lista li:last-child { border-bottom: 0; }
.marcos-lista .tipo { font-size: 12px; border-radius: 999px; padding: 1px 8px; margin-right: 8px; }
.tipo.feriado { background: var(--feriado); color: var(--suave); }
.tipo.live { background: var(--rosa); color: #8a2c58; }
.tipo.outro { background: #ece6f8; color: var(--ink); }
.marcos-lista button { background: none; border: 0; color: var(--desce); cursor: pointer; font-size: 13px; }
.form-marco { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); }
.form-marco label { display: grid; gap: 3px; font-size: 12.5px; color: var(--suave); }
.form-marco input, .form-marco select { border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 6px 9px; min-height: 36px; background: #fff; }
.form-marco input[name=descricao] { min-width: 200px; }
.btn-roxo { background: var(--roxo); color: #fff; border: 0; border-radius: var(--raio-p); padding: 8px 14px; min-height: 36px; cursor: pointer; font-weight: 600; }
.btn-roxo:hover { background: var(--ink); }

/* Explicações */
details.calculo { margin-top: 8px; font-size: 14px; color: var(--suave); }
details.calculo summary { cursor: pointer; color: var(--roxo); font-weight: 500; }
details.calculo ul { margin: 10px 0 0; padding-left: 18px; max-width: 76ch; }
details.calculo li { margin-bottom: 6px; }

.vazio-msg { color: var(--suave); padding: 24px 0; text-align: center; }

.rodape { text-align: center; font-size: 12.5px; color: var(--suave); padding: 0 16px 32px; }

/* Agora */
.modo-agora .periodo select, .modo-agora .periodo input, .modo-agora .periodo .ate { display: none; }
.status-expediente {
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto);
  background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 16px; margin-bottom: 16px;
}
.status-expediente .ponto { width: 9px; height: 9px; border-radius: 50%; background: #b9b3c9; flex: none; }
.status-expediente.aberto .ponto { background: var(--sobe); box-shadow: 0 0 0 4px #e5f3ed; }
.indicador.alerta { background: #fdf1f5; }
.indicador.alerta .valor { color: var(--desce); }
.alerta-num { color: var(--desce); font-weight: 700; }
.hoje-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; }
.hoje-item { padding: 4px 16px 4px 0; display: grid; gap: 3px; align-content: start; }
.hoje-item + .hoje-item { border-left: 1px solid var(--linha); padding-left: 16px; }
.hoje-item .rotulo { font-size: 13px; color: var(--suave); }
.hoje-item .valor { font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.comp { font-size: 12.5px; color: var(--suave); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nota { font-size: 13px; color: var(--suave); margin: 12px 0 0; max-width: 76ch; }
a.abrir { color: var(--roxo); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
a.abrir:hover { text-decoration: underline; }
table.lista-clientes td:first-child { white-space: normal; min-width: 140px; }
.tag-suave { font-size: 11px; color: var(--suave); background: #f0eef5; border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.resumo-linha { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: var(--suave); margin-bottom: 12px; }
.resumo-linha strong { color: var(--ink); font-size: 16px; }

/* Mapa de horários */
.alternar { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: var(--raio-p); overflow: hidden; }
.alternar button { background: #fff; border: 0; padding: 6px 12px; font-size: 13.5px; cursor: pointer; color: var(--suave); }
.alternar button[aria-pressed=true] { background: var(--roxo); color: #fff; font-weight: 600; }
table.mapa { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; width: auto; }
table.mapa th, table.mapa td { padding: 0; border: 0; text-align: center; white-space: nowrap; }
table.mapa thead th { color: var(--suave); font-weight: 500; font-size: 11px; padding-bottom: 4px; }
table.mapa tbody th { text-align: left; color: var(--suave); font-weight: 500; padding-right: 8px; }
table.mapa td { width: 30px; height: 28px; border-radius: 4px; font-variant-numeric: tabular-nums; }
table.mapa td.exp { box-shadow: inset 0 0 0 1px var(--linha-forte); }
table.mapa td.tot { width: auto; padding-left: 10px; font-weight: 600; color: var(--ink); text-align: right; }
table.mapa tbody tr:hover td { background-clip: padding-box; }

/* Pós-venda e oportunidades */
.destaque-grande { margin-bottom: 8px; }
.destaque-grande .valor { font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; }
.destaque-grande .valor span { font-size: 18px; color: var(--suave); font-weight: 500; letter-spacing: 0; }
.destaque-grande p { margin: 6px 0 0; color: var(--suave); font-size: 14px; max-width: 70ch; }
.colunas-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.colunas-etapas h3 { font-size: 15px; margin: 0 0 6px; color: var(--ink); font-weight: 600; }
.colunas-etapas table { font-size: 13.5px; }

@media (max-width: 640px) {
  .hoje-item + .hoje-item { border-left: 0; padding-left: 0; }
  .hoje-item { padding: 10px 0; border-top: 1px solid var(--linha); }

  .contexto h1 { font-size: 22px; }
  .indicador { border-left: 0; border-top: 1px solid var(--linha); }
  .indicador:first-child { border-top: 0; }
  .etapa { grid-template-columns: 1fr auto; }
  .etapa .trilho { grid-column: 1 / -1; grid-row: 2; }
  .identidade .divisor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}