/* Relatório DZ9. Visual igual ao do Portal (mesmos tokens de cor, claro e escuro). */
/* --- Tokens: tema claro (padrão) e Escuro 1 · preto quente (body.dark). Nenhuma cor fica solta fora daqui. --- */
:root {
  --bg: #fff;
  --surface: #fff;
  --line: #E4D6BD;
  --text: #14120F;
  --text2: #5F5849;
  --card: #F3EADB;
  --card-line: #E4D6BD;
  --inset: #fff;
  --field: #fff;
  --card-field: #fff;
  --field-line: #8F8168;
  --hover: #FDEFD9;
  --orange: #F89833;
  --orange-hi: #FFAB52;
  --on-orange: #14120F;
  --orange-ink: #9A4B00;
  --tint: #FDEFD9;
  --tint-text: #4A2800;
  --red: #B3261E;
  --red-ink: #B3261E;
  --red-tint: #FBE4E1;
  --red-text: #6B1710;
  --on-red: #fff;
  --blue-ink: #2F5D8A;
  --blue-tint: #E4ECF4;
  --blue-text: #1F3A5A;
  --green-ink: #1F6F43;
  --green-tint: #E3F2E8;
  --green-text: #1F6F43;
  --strong: #14120F;
  --on-strong: #fff;
  --pill: #F3EADB;
  --seg-off: #E4D6BD;
  --seg-ink: #14120F;
  --seg-red: #B3261E;
  --chart-1: #14120F;
  --chart-2: #F89833;
  --chart-3: #B3261E;
  --chart-4: #1F6F43;
  --chart-muted: #8C826F;
  --rail: #14120F;
  --rail-line: #35312A;
  --rail-text: #E9E2D4;
  --rail-muted: #CFC6B4;
  --rail-hover: #2A2620;
  --rail-badge: #3A362F;
  --av-bg: #F3EADB;
  --av-text: #14120F;
  --overlay: rgba(20, 18, 15, .55);
  --shadow-card: 0 1px 2px rgba(20, 18, 15, .06), 0 6px 14px -8px rgba(20, 18, 15, .18);
  --shadow-pop: 0 10px 28px rgba(20, 18, 15, .2);
  --tip-bg: #14120F;
  --tip-text: #F5EFE3;
  --focus: #14120F;
  --scroll: #CDBF9F;
  --vend-fallback: #6b7280;
  /* nomes antigos, ainda usados em trechos do JavaScript */
  --texto: var(--text);
  --texto-suave: var(--text2);
  color-scheme: light;
}
body.dark {
  --bg: #14120F;
  --surface: #1D1A16;
  --line: #342F28;
  --text: #F5EFE3;
  --text2: #BDB2A0;
  --card: #1D1A16;
  --card-line: #342F28;
  --inset: #2A261F;
  --field: #1D1A16;
  --card-field: #14120F;
  --field-line: #776F61;
  --hover: #2A261F;
  --orange-ink: #FFB45A;
  --tint: #3A2A14;
  --tint-text: #FFD9A8;
  --red-ink: #FF8A7E;
  --red-tint: #3B1A17;
  --red-text: #FFC2BA;
  --blue-ink: #8FB8E8;
  --blue-tint: #1B2A3A;
  --blue-text: #C4DAF2;
  --green-ink: #7FD3A3;
  --green-tint: #16301F;
  --green-text: #BDEBD0;
  --strong: #F5EFE3;
  --on-strong: #14120F;
  --pill: #2A261F;
  --seg-off: #342F28;
  --seg-ink: #F5EFE3;
  --seg-red: #FF7A6E;
  --chart-1: #F5EFE3;
  --chart-3: #FF7A6E;
  --chart-4: #7FD3A3;
  --chart-muted: #8F8573;
  --rail: #0C0B09;
  --rail-line: #26231E;
  --rail-text: #D9D0BF;
  --rail-muted: #BDB2A0;
  --rail-hover: #26231E;
  --rail-badge: #35312A;
  --overlay: rgba(0, 0, 0, .68);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 18px -10px rgba(0, 0, 0, .6);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, .55);
  --tip-bg: #F5EFE3;
  --tip-text: #14120F;
  --focus: #FFB45A;
  --scroll: #4A443A;
  color-scheme: dark;
}

/* --- Base --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; caret-color: var(--orange-ink); scrollbar-color: var(--scroll) transparent;
}
::selection { background: var(--orange); color: #14120F; }
button, select, input, textarea, summary { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.topo :focus-visible { outline-color: var(--orange); }
::placeholder { color: var(--text2); opacity: .8; }
h1, h2, h3, h4, p { margin: 0; }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- Estrutura: faixa preta no topo + área de trabalho --- */
.topo { background: var(--rail); color: var(--rail-text); border-bottom: 1px solid var(--rail-line); }
.topo-in { max-width: 1600px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topo .logo { width: 96px; height: auto; display: block; }
.topo-nome { font-size: 15px; font-weight: 600; color: #F5EFE3; padding-left: 16px; border-left: 1px solid var(--rail-line); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topo-quem { font-size: 13px; color: var(--rail-muted); padding-right: 6px; }
.topo-quem b { color: #fff; font-weight: 600; }
.topo-botao {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--rail-line); border-radius: 10px; background: transparent; color: var(--rail-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; text-decoration: none; white-space: nowrap;
}
.topo-botao:hover { background: var(--rail-hover); color: #fff; }
.topo-botao.so-icone { width: 40px; padding: 0; }
main { max-width: 1600px; margin: 0 auto; padding: 28px 32px 56px; }
.head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.head h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.sub { margin-top: 4px; color: var(--text2); }
.head-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text2); }
@media (max-width: 700px) {
  .topo-in { padding: 10px 16px; gap: 10px; }
  .topo-nome { padding-left: 12px; }
  main { padding: 20px 16px 40px; }
  .head h1 { font-size: 24px; }
}

/* --- Botões, campos e links --- */
.btn {
  min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--card-field);
  color: var(--text); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .15s, background .15s;
}
.btn:hover:not(:disabled) { border-color: var(--text); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.lnk {
  background: none; border: 0; padding: 6px 0; min-height: 0; color: var(--text2); text-decoration: underline; text-underline-offset: 3px;
  font-size: 13px; font-weight: 500; cursor: pointer; display: inline-block;
}
.lnk:hover { color: var(--text); }
select, input[type="text"], input[type="email"], input[type="password"] {
  border: 1px solid var(--field-line); border-radius: 8px; background: var(--field); color: var(--text); min-height: 40px; padding: 0 10px;
}
select { padding-right: 6px; }
.caixa-login input { background: var(--card-field); }
.caixa-login button {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--orange); background: var(--orange); color: var(--on-orange); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s;
}
.caixa-login button:hover:not(:disabled) { background: var(--orange-hi); border-color: var(--orange-hi); }
.caixa-login button:disabled { opacity: .55; cursor: not-allowed; }
.vazio { text-align: center; color: var(--text2); padding: 40px 20px; font-size: 14px; }

/* --- Análise (copiado do Portal) --- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-grid-unico { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; max-width: 340px; }
.stat-tile { background: var(--card); border: 1px solid var(--card-line); border-radius: 14px; padding: 18px 20px; }
.stat-valor { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.stat-label { font-size: 14px; color: var(--text2); margin-top: 6px; }
.stat-sub { display: block; font-size: 12px; color: var(--text2); margin-top: 2px; }
.stat-tile-azul { background: var(--strong); border-color: var(--strong); }
.stat-tile-azul .stat-valor { color: var(--on-strong); }
.stat-tile-azul .stat-label, .stat-tile-azul .stat-sub { color: var(--on-strong); opacity: .8; }
.stat-tile-verde { background: var(--green-tint); border-color: var(--green-tint); }
.stat-tile-verde .stat-valor, .stat-tile-verde .stat-label, .stat-tile-verde .stat-sub { color: var(--green-text); }
.analise-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-card); }
.analise-card-titulo { font-size: 16px; margin-bottom: 14px; }
.origem-chart { display: flex; flex-direction: column; gap: 10px; }
.origem-linha { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) minmax(34px, auto); align-items: center; gap: 12px; }
.origem-label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.origem-barra-fundo { background: var(--seg-off); border-radius: 4px; height: 10px; overflow: hidden; }
.origem-barra { background: var(--orange); height: 100%; border-radius: 4px; min-width: 3px; }
.campanhas-google .origem-barra { background: var(--chart-1); }
.origem-valor { font-size: 13px; color: var(--text2); text-align: right; }
.analise-secao-titulo { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 16px; gap: 12px; flex-wrap: wrap; }
.analise-secao-titulo h3 { font-size: 18px; display: flex; align-items: center; }
.analise-filtro { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); }
.analise-total-mes { font-weight: 600; color: var(--text); }
.canal-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.canal-tabela th { text-align: left; font-weight: 600; color: var(--text2); font-size: 12px; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.canal-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.canal-tabela tr:last-child td { border-bottom: 0; }
.canal-tabela .num { text-align: right; }
.canal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--chart-1); }
.analise-card:has(.canal-tabela) { overflow-x: auto; }
/* --- Análise: botões "Análise de Resultados" / "Análise de Inválidos" e tela de inválidos --- */
.analise-visoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.analise-visao { min-height: 44px; padding: 0 20px; border: 1px solid var(--field-line); border-radius: 99px; background: var(--card-field); color: var(--text); font-weight: 600; }
.analise-visao:hover:not([aria-pressed="true"]) { background: var(--hover); }
.analise-visao[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.analise-aviso { display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 8px; padding: 14px 20px; border-radius: 16px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--orange-ink); font-size: 14px; line-height: 1.5; }
.analise-aviso p { margin: 0; max-width: 80ch; }
.analise-aviso .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--orange-ink); }
.analise-aviso .lnk { margin-left: 4px; }
.inv-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.inv-tabela th { text-align: left; font-weight: 600; color: var(--text2); font-size: 12px; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.inv-tabela td { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.inv-tabela tr:last-child td { border-bottom: 0; }
.inv-tabela .num { text-align: right; }
.inv-tabela tr.total td { font-weight: 600; background: var(--card); }
.analise-card:has(.inv-tabela) { overflow-x: auto; }
.inv-motivos .origem-barra { background: var(--chart-1); }
/* --- Análise: filtro único, textos explicativos e quadros do retorno do marketing --- */
.analise-barra { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 20px; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.analise-barra .analise-filtro label { font-size: 14px; color: var(--text); }
.analise-nota { font-size: 13px; color: var(--text2); margin: 0; max-width: 80ch; line-height: 1.5; }
.analise-bloco { margin: 32px 0 8px; }
.analise-bloco-titulo { font-size: 20px; margin: 0 0 6px; }
.analise-intro { font-size: 14px; color: var(--text2); max-width: 80ch; margin: 0 0 14px; line-height: 1.5; }
.analise-atualizacao { font-size: 13px; color: var(--text2); margin: 0 0 16px; line-height: 1.5; }
.analise-resumo { font-size: 14px; margin: 0 0 12px; }
.analise-card .analise-nota { margin-top: 12px; }
.analise-card-sub { font-size: 13px; color: var(--text2); margin: -8px 0 14px; max-width: 80ch; line-height: 1.5; }
.analise-det { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 20px; margin: 0 0 16px; font-size: 14px; }
.analise-det summary { cursor: pointer; font-weight: 600; padding: 12px 0; }
.analise-det dl { margin: 0 0 12px; }
.analise-det dt { font-weight: 600; margin-top: 10px; }
.analise-det dd { margin: 2px 0 0; color: var(--text2); line-height: 1.5; max-width: 80ch; }
.cenario-nome { font-weight: 600; display: block; }
.cenario-desc { display: block; font-size: 12px; color: var(--text2); font-weight: 400; margin-top: 2px; max-width: 42ch; line-height: 1.4; }
.canal-tabela tr.destaque td { background: var(--card); }
.canal-tabela td.sem-dado { color: var(--text2); }
/* --- Entrar --- */
.tela-login { position: fixed; inset: 0; z-index: 300; background: var(--rail); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.tela-login.escondida { display: none; }
.login-conteudo { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 28px; align-items: center; margin: auto; }
.login-conteudo .logo { width: 150px; margin: 0; }
.caixa-login { width: 100%; background: var(--surface); color: var(--text); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-pop); }
.caixa-login h2 { font-size: 20px; margin-bottom: 4px; }
.caixa-login p.sub { font-size: 14px; margin: 0 0 14px; }
.caixa-login label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.caixa-login input { width: 100%; font-size: 15px; }
.caixa-login button { width: 100%; margin-top: 20px; min-height: 44px; }
.login-erro { color: var(--red-ink); font-size: 13px; margin-top: 10px; min-height: 0; }
.login-erro:empty { display: none; }
.login-status { color: var(--text2); font-size: 13px; margin-top: 10px; }
.login-status:empty { display: none; }
/* --- Aviso de atualização dos dados --- */
.dados-lidos { font-size: 13px; color: var(--text2); }