/* Dashboard · Click Stack
   Identidade única (marca/DESIGN.md): dark-first, roxo #6D28D9 como ponto focal, Sora + Hanken Grotesk.
   Desde 14/11/2026 não há mais cor, fonte nem tema por cliente: o relatório é sempre da Click.
   CSS em arquivo próprio para fechar a CSP (style-src 'self'). Regras de uso do roxo:
   - roxo cheio (#6D28D9 / #7C3AED) só em preenchimento, linha, borda e glow;
   - texto pequeno nunca em roxo (contraste baixo no preto): fica branco, com o roxo no marcador. */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0D0D0F; --card:#18181B; --card2:#1F1F23; --border:#27272A; --border2:#3F3F46;
  --text:#FAFAFA; --muted:#A1A1AA; --ink:#FAFAFA;
  --accent:#6D28D9; --accent2:#7C3AED; --accent-soft:rgba(109,40,217,.16); --accent-line:rgba(124,58,237,.55);
  --glow:0 0 24px rgba(109,40,217,.35);
  --good:#22C55E; --bad:#EF4444; --warn:#F59E0B; --pie2:#52525B;
  --title:'Sora',sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif;
  --radius:12px; --btn:10px;
}
html { background:var(--bg); }
body { font-family:var(--body); background:var(--bg); color:var(--text); line-height:1.6; position:relative; min-height:100vh; padding-left:76px; }
/* brilho roxo sutil no canto, só no fundo da página (não entra no PDF, que captura só o #app) */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(900px 420px at 88% -8%, rgba(109,40,217,.16), transparent 62%); }
.wrap { max-width:1040px; margin:0 auto; padding:24px 28px 72px; }

/* ---------- barra lateral (plataformas) ---------- */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:76px; z-index:30; background:var(--bg);
  border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0; }
.sidebar .logo-sym { width:38px; height:38px; margin:2px 0 20px; flex:none; }
.sidebar button { width:60px; padding:10px 0 8px; border:0; border-radius:var(--radius); cursor:pointer; background:transparent;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:5px; font-family:var(--body);
  font-size:.64rem; font-weight:600; letter-spacing:.02em; transition:color .15s, background .15s, box-shadow .15s; }
.sidebar button svg { width:22px; height:22px; }
.sidebar button:hover { color:var(--text); background:var(--card); }
.sidebar button.on { color:var(--text); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-line); }
.sidebar button.on svg { color:var(--accent2); }
.sidebar button[hidden] { display:none; }

/* ---------- barra de controle ---------- */
.controls { position:sticky; top:0; z-index:20; background:rgba(13,13,15,.88); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:14px 0; margin-bottom:28px; }
.controls .row { max-width:1040px; margin:0 auto; padding:0 28px; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.field { display:flex; flex-direction:column; gap:5px; }
.field label, .field .field-lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:600; }
select, input[type=date] { background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--btn);
  padding:9px 12px; font-family:var(--body); font-size:.92rem; cursor:pointer; transition:border-color .14s; }
select:hover { border-color:var(--accent-line); }
select:focus, input:focus, button:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; }
.toggle { display:inline-flex; background:var(--card); border:1px solid var(--border); border-radius:var(--btn); overflow:hidden; }
.toggle button { background:transparent; color:var(--muted); border:0; padding:9px 16px; font-family:var(--body); font-size:.9rem; font-weight:600; cursor:pointer; transition:.15s; }
.toggle button:not(.on):hover { background:var(--card2); color:var(--text); }
.toggle button.on { background:var(--accent); color:#fff; }
.btn { background:var(--accent); color:#fff; border:0; border-radius:var(--btn); padding:10px 20px; font-weight:600; font-family:var(--body);
  font-size:.95rem; cursor:pointer; transition:background .15s, box-shadow .15s; }
.btn:hover { background:var(--accent2); box-shadow:var(--glow); }
.btn:disabled { opacity:.5; cursor:default; box-shadow:none; }

/* ---------- seletor de período (atalhos + calendário) ---------- */
.date-field { position:relative; }
.date-trigger { background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--btn);
  padding:9px 13px; font-family:var(--body); font-size:.92rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.date-trigger:hover { border-color:var(--accent-line); }
.date-trigger svg { width:15px; height:15px; opacity:.7; }
.date-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:40; display:flex; max-width:calc(100vw - 40px);
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 16px 44px rgba(0,0,0,.55); overflow:hidden; }
.date-pop[hidden] { display:none; }   /* o display:flex acima anula o atributo hidden; isso reativa o ocultar */
.dp-presets { display:flex; flex-direction:column; padding:8px; border-right:1px solid var(--border); min-width:158px; gap:2px; }
.dp-presets button { display:flex; align-items:center; gap:9px; text-align:left; background:transparent; border:0; color:var(--text); font-family:var(--body);
  font-size:.86rem; padding:8px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:.12s; }
.dp-presets button::before { content:""; width:7px; height:7px; border-radius:50%; background:transparent; flex:none; }  /* reserva o espaço da bolinha (alinha o texto) */
.dp-presets button:hover { background:var(--card2); }
.dp-presets button.on { font-weight:700; }
.dp-presets button.on::before { background:var(--accent2); }
.dp-cal { padding:12px 14px; width:282px; }
.dp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dp-head span { font-family:var(--title); font-weight:700; text-transform:capitalize; font-size:.95rem; }
.dp-head button { background:transparent; border:0; color:var(--text); font-size:1.3rem; line-height:1; cursor:pointer; padding:2px 9px; border-radius:6px; }
.dp-head button:hover { background:var(--card2); }
.dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dp-grid .dow { text-align:center; font-size:.64rem; color:var(--muted); font-weight:600; padding:4px 0; text-transform:uppercase; }
.dp-grid .day { aspect-ratio:1; border:0; background:transparent; color:var(--text); font-family:var(--body); font-size:.82rem;
  cursor:pointer; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.dp-grid .day:hover { background:var(--card2); }
.dp-grid .day.empty { visibility:hidden; cursor:default; }
.dp-grid .day.off { color:var(--muted); opacity:.3; cursor:default; }
.dp-grid .day.off:hover { background:transparent; }
.dp-grid .day.rng { background:var(--accent-soft); border-radius:0; }
.dp-grid .day.edge { background:var(--accent); color:#fff; font-weight:700; }
.dp-grid .day.today { outline:1px solid var(--accent-line); outline-offset:-2px; }
.dp-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:10px; }
.dp-sel { font-size:.78rem; color:var(--muted); }
.dp-foot .btns { display:flex; gap:8px; }
.dp-cancel { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; padding:7px 13px; cursor:pointer; font-family:var(--body); font-size:.85rem; transition:.14s; }
.dp-cancel:hover { background:var(--card2); border-color:var(--accent-line); }
.dp-cancel:active { transform:scale(.95); }
.dp-apply { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:7px 15px; cursor:pointer; font-family:var(--body); font-weight:600; font-size:.85rem; transition:.14s; }
.dp-apply:hover { background:var(--accent2); }
.dp-apply:active { transform:scale(.95); }
.dp-apply:disabled { opacity:.45; cursor:default; }
.dp-apply:disabled:hover { background:var(--accent); }

/* ---------- cabeçalho do relatório ---------- */
.header { display:flex; align-items:center; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:26px; flex-wrap:wrap; }
.header .id { display:flex; align-items:center; gap:16px; min-width:0; flex:1 1 auto; }
.header .by { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.header .by small { font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; }
/* logo do cliente: só identifica, sempre no mesmo quadro (sem cor nem tamanho próprios) */
.logo-chip { width:64px; height:64px; flex:none; border-radius:var(--radius); background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:7px; overflow:hidden; }
.logo-chip img { width:100%; height:100%; object-fit:contain; }
.logo-chip.ini { background:var(--accent); border-color:var(--accent); color:#fff; font-family:var(--title); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; padding:0; }
.header h1 { font-family:var(--title); font-weight:800; font-size:1.55rem; letter-spacing:-.02em; line-height:1.1; color:var(--ink); }
.header .meta { color:var(--muted); font-size:.9rem; margin-top:6px; }
.header .meta span { margin-right:14px; }
.header .meta b { color:var(--text); font-weight:600; }

/* logo da Click (símbolo + nome) em HTML/SVG, sem imagem */
.cs-logo { display:inline-flex; align-items:center; gap:7px; line-height:1; }
.cs-logo svg { width:26px; height:26px; flex:none; }
.cs-logo b { font-family:var(--title); font-weight:800; font-size:1.18rem; letter-spacing:-.045em; color:#FAFAFA; }
.cs-logo b i { font-style:normal; color:var(--accent2); }

/* marcador (destaque de texto da marca): texto branco em bloco roxo */
.resumo { font-size:1.1rem; color:var(--text); margin:0 0 24px; line-height:1.9; }
.resumo b { background:var(--accent); color:#fff; font-weight:600; padding:2px 9px; border-radius:8px; white-space:nowrap; }

/* ---------- destaques e KPIs ---------- */
.highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
.hl { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hl::before { content:""; position:absolute; left:0; top:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2) 55%,transparent); }
.hl:hover { transform:translateY(-3px); box-shadow:var(--glow); border-color:var(--accent-line); }
.hl .h-label { color:var(--muted); font-size:.84rem; font-weight:500; }
.hl .h-value { font-family:var(--title); font-weight:800; font-size:2.25rem; color:var(--ink); line-height:1.1; margin-top:6px; letter-spacing:-.03em; }
.hl .h-sub { color:var(--muted); font-size:.8rem; margin-top:3px; }

.section-title { font-family:var(--title); font-weight:700; font-size:1.05rem; margin:32px 0 15px; letter-spacing:-.01em; color:var(--ink); }
.section-title::before { content:""; display:inline-block; width:4px; height:1em; border-radius:2px; background:var(--accent2); margin-right:10px; vertical-align:-.12em; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.kpi { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kpi:hover { transform:translateY(-3px); box-shadow:var(--glow); border-color:var(--accent-line); }
.antes { font-size:.72rem; color:var(--muted); opacity:.7; margin-top:2px; font-weight:500; }
.kpi .k-label { color:var(--muted); font-size:.78rem; font-weight:500; }
.kpi .k-value { font-family:var(--title); font-weight:700; font-size:1.35rem; margin-top:5px; letter-spacing:-.02em; }
.delta { font-size:.76rem; font-weight:600; margin-top:7px; }
.d-good{color:var(--good);} .d-bad{color:var(--bad);} .d-neutral{color:var(--muted);}
.val-row { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.delta-i { font-size:.95rem; font-weight:700; white-space:nowrap; }
.hl .delta-i { font-size:1.1rem; }

.panel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; }
a.lnk { color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--accent2); text-decoration-thickness:2px; text-underline-offset:3px; }
a.lnk:hover { text-decoration-color:var(--text); }

/* ---------- gráficos ---------- */
.chart { display:flex; align-items:flex-end; gap:12px; height:175px; margin-top:6px; }
.col { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
.col .v { font-family:var(--title); font-weight:700; font-size:.88rem; color:var(--text); }
.bar { width:100%; background:linear-gradient(180deg,var(--accent2),var(--accent)); border-radius:6px 6px 0 0; min-height:5px; }
.col .d { color:var(--muted); font-size:.74rem; }
.chart.hours { gap:3px; }                 /* 24 barras: menos espaço entre elas */
.chart.hours .bar.dim { background:var(--border2); }  /* horas fora do pico ficam apagadas */
.chart.hours .d { font-size:.6rem; }      /* rótulo de hora menor pra caber as 24 */
.chart.dense { gap:5px; }                  /* período longo: barras mais juntas */
.chart.dense .v { font-size:.66rem; }      /* e número/data menores, mas ainda visíveis */
.chart.dense .d { font-size:.62rem; }
.chart.mes { justify-content:center; }     /* poucos meses: centraliza */
.chart.mes .col { max-width:110px; }       /* e não deixa a barra esticar a largura toda */
/* hover nas barras: acende a barra e dá um pulo no número */
.bar { transition:filter .16s ease, box-shadow .2s ease; }
.col:hover .bar { filter:brightness(1.25); box-shadow:var(--glow); }
.col .v { transition:transform .16s ease; }
.col:hover .v { transform:scale(1.25); }
.chart.hours .col:hover .bar { filter:none; box-shadow:none; }  /* horário do IG: sem hover */
.tag-fadiga { display:inline-block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#160c02; background:var(--warn); padding:1px 7px; border-radius:999px; margin-left:7px; vertical-align:middle; }
body.is-gestor tr.fadiga td { background:rgba(245,158,11,.08); }  /* tint só pro gestor */

.funil-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:13px; }
.funnel { display:flex; flex-direction:column; align-items:center; gap:7px; padding:5px 0; }
.f-step { background:linear-gradient(135deg,var(--accent2),var(--accent)); border-radius:10px; padding:12px 18px; text-align:center; color:#fff; }
.f-step .f-label { font-size:.8rem; font-weight:600; opacity:.88; }
.f-step .f-val { font-family:var(--title); font-weight:800; font-size:1.45rem; line-height:1.1; }
.f-rate { color:var(--muted); font-size:.76rem; }
.pie-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:14px; }
.pie { width:160px; height:160px; border-radius:50%; }
.legend { display:flex; flex-direction:column; gap:8px; font-size:.88rem; }
.legend span { display:flex; align-items:center; gap:8px; color:var(--text); }
.legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }

.hbar-row { display:grid; grid-template-columns:70px 1fr 34px; align-items:center; gap:10px; margin-bottom:10px; }
.hbar-row .hb-label { color:var(--text); font-size:.85rem; }
.hbar-track { background:var(--card2); border-radius:6px; height:13px; overflow:hidden; }
.hbar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:6px; }
.hbar-row .hb-val { font-family:var(--title); font-weight:700; font-size:.85rem; text-align:right; color:var(--text); }

/* ---------- tabelas ---------- */
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:11px 13px; font-size:.89rem; }
th { color:var(--muted); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); }
td { border-bottom:1px solid var(--border); }
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:rgba(255,255,255,.025); }
td.r,th.r { text-align:right; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent2); margin-right:8px; }
.post-cell{display:flex;align-items:center;gap:11px;}
.thumb{width:80px;height:80px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--border);background:var(--card2);}

/* ---------- diagnóstico e alertas (gestor) ---------- */
.obs li { margin:0 0 8px 18px; color:var(--text); font-size:.95rem; }
.diag { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.diag-item { display:flex; flex-direction:column; gap:5px; background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:13px; }
.diag-label { color:var(--muted); font-size:.78rem; }
.diag-val { font-family:var(--title); font-weight:700; font-size:1.2rem; }
.lvl { font-size:.68rem; font-weight:700; padding:2px 9px; border-radius:999px; align-self:flex-start; letter-spacing:.03em; }
.lvl-exc { background:rgba(34,197,94,.16); color:#22C55E; }
.lvl-bom { background:var(--accent-soft); color:var(--text); box-shadow:inset 0 0 0 1px var(--accent-line); }
.lvl-aten { background:rgba(245,158,11,.16); color:#F59E0B; }
.lvl-crit { background:rgba(239,68,68,.16); color:#EF4444; }
.hbar-row.wlabel { grid-template-columns:160px 1fr 34px; }
.item { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent2); border-radius:10px; padding:15px 18px; margin-bottom:11px; }
.item.warn { border-left-color:var(--warn); }
.item.good { border-left-color:var(--good); }
.item.info { border-left-color:var(--accent2); }
.item h4 { font-family:var(--title); font-weight:700; font-size:.96rem; margin-bottom:4px; }
.item p { color:var(--text); font-size:.9rem; }
.item .act { color:var(--text); font-weight:700; }
.gestor-only { display:none; }
body.is-gestor .gestor-only { display:block; }
.gestor-only-i { display:none; }
body.is-gestor .gestor-only-i { display:inline; }
body.is-gestor .gestor-only.section-title { display:block; }
body.is-cliente .cliente-only { display:block; }
body.is-gestor .cliente-only { display:none; }

/* ---------- aba Sites (só gestor) ---------- */
.sites-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cli { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
  display:flex; flex-direction:column; transition:box-shadow .18s ease, border-color .18s ease; }
.cli:hover { border-color:var(--accent-line); box-shadow:var(--glow); }
.cli-top { display:flex; align-items:center; gap:14px; }
.cli-top .logo-chip { width:50px; height:50px; font-size:1rem; }
.cli-top h3 { font-family:var(--title); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; line-height:1.2; }
.cli-top .seg { color:var(--muted); font-size:.82rem; margin-top:2px; }
.cli-top .chip { margin-left:auto; align-self:flex-start; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.03em; white-space:nowrap; }
.chip.ok { background:rgba(34,197,94,.14); color:#22C55E; }
.chip.pend { background:rgba(245,158,11,.14); color:#F59E0B; }
.chip.ok::before, .chip.pend::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.cli-valor { font-family:var(--title); font-weight:800; font-size:2rem; letter-spacing:-.03em; line-height:1.1; margin-top:18px; }
.cli-valor.vazio { font-size:1.15rem; color:var(--muted); font-weight:600; letter-spacing:0; padding:6px 0; }
.cli-nota { color:var(--muted); font-size:.8rem; margin-top:3px; }
.cli dl { margin-top:16px; border-top:1px solid var(--border); padding-top:12px; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:.86rem; }
.cli dt { color:var(--muted); }
.cli dd { text-align:right; overflow-wrap:anywhere; }
.cli dd a { color:var(--text); text-decoration:underline; text-decoration-color:var(--accent2); text-decoration-thickness:2px; text-underline-offset:3px; }
.banner.warn { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.4); color:#FCD9A5; }
.banner.warn b { color:#FDE8C4; }

footer { margin-top:40px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); font-size:.81rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
footer b { color:var(--text); font-weight:600; }

.state { padding:60px 20px; text-align:center; color:var(--muted); }
.spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--accent2); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 16px; }
.banner { border-radius:var(--radius); padding:16px 18px; margin-bottom:22px; font-size:.95rem; }
.banner.err { background:#2a1414; border:1px solid #5a2020; color:#fca5a5; }

/* ---------- botão flutuante de gerar PDF ---------- */
.fab{ position:fixed; right:22px; bottom:22px; z-index:50; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; background:var(--accent); color:#fff; border:0; border-radius:50%; cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.45), var(--glow); transition:.15s; }
.fab:hover{ background:var(--accent2); transform:translateY(-2px); }
.fab svg{ width:25px; height:25px; }
.fab:disabled{ cursor:wait; }
.fab.loading svg{ display:none; }
.fab.loading::after{ content:""; width:22px; height:22px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- aviso fixo no rodapé (ex: conta desconectada da BM) ---------- */
.aviso-rodape{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(120%);
  z-index:9999; max-width:min(620px, calc(100vw - 32px));
  display:flex; align-items:flex-start; gap:12px;
  background:#2a1414; border:1px solid #7f2a2a; border-left:4px solid #dc2626;
  color:#fca5a5; border-radius:12px; padding:14px 16px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  font-size:.92rem; line-height:1.45;
  opacity:0; transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s;
}
.aviso-rodape.visivel{ transform:translateX(-50%) translateY(0); opacity:1; }
.aviso-rodape b{ color:#fecaca; display:block; margin-bottom:2px; }
.aviso-rodape .fechar{
  background:none; border:none; color:#fca5a5; cursor:pointer;
  font-size:1.15rem; line-height:1; padding:0 2px; margin-left:auto; flex:0 0 auto;
}
.aviso-rodape .fechar:hover{ color:#fff; }
@media (prefers-reduced-motion: reduce){
  .aviso-rodape{ transition:none; }
  .hl, .kpi, .cli, .bar, .col .v { transition:none; }
}
/* variante amarela do aviso (alerta com antecedência, não falha) */
.aviso-rodape.atencao{ background:#2a2114; border-color:#7f5f2a; border-left-color:#d97706; color:#fcd9a5; }
.aviso-rodape.atencao b{ color:#fde8c4; }
.aviso-rodape.atencao .fechar{ color:#fcd9a5; }

@page{ margin:0; }
@media print{
  html, body{ background:var(--bg) !important; padding-left:0 !important; }
  body::before{ display:none; }
  .sidebar, .controls, .fab{ display:none !important; }
  .wrap{ max-width:none; margin:0; padding:18px 20px; }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  /* mantém as grades lado a lado (a folha A4 cairia no layout mobile sem isso) */
  .highlights{ grid-template-columns:repeat(3,1fr) !important; }
  .kpi-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .funil-grid{ grid-template-columns:1.4fr 1fr !important; }
  .sites-grid{ grid-template-columns:repeat(2,1fr) !important; }
  /* não cortar cards/tabelas/gráficos no meio da quebra de página */
  .panel, .kpi, .hl, .cli, table, .chart, .pie-wrap{ break-inside:avoid; }
  .section-title{ break-after:avoid; }
}

/* ---------- tablet e celular ---------- */
@media (max-width:860px){
  .sites-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .highlights{grid-template-columns:1fr;} .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .funil-grid{grid-template-columns:1fr;} .controls .row{gap:10px;}
  .date-pop{flex-direction:column;} .dp-presets{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border);min-width:0;} .dp-cal{width:auto;}
}
/* CELULAR (<= 720px): menu de plataformas vira barra inferior, a barra de controles deixa de ser fixa
   (ocupava 234px o tempo todo), tabelas viram cartões e os avisos ocupam a largura toda. */
@media (max-width:720px){
  body{ padding-left:0; padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .wrap{ padding:16px 14px 40px; }

  .sidebar{
    top:auto; right:0; width:auto; height:calc(64px + env(safe-area-inset-bottom));
    padding:6px 12px env(safe-area-inset-bottom); flex-direction:row; justify-content:space-around;
    align-items:stretch; gap:8px; border-right:0; border-top:1px solid var(--border);
  }
  .sidebar .logo-sym{ display:none; }
  .sidebar button{ flex:1; width:auto; max-width:160px; height:auto; justify-content:center; padding:6px 0 4px; }
  .sidebar button svg{ width:24px; height:24px; }
  body:has(select:focus, input:focus) .sidebar{ display:none; }

  /* controles: rolam junto com a página, em grade compacta */
  .controls{ position:static; padding:12px 0; margin-bottom:16px; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .controls .row{ padding:0 14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
  .controls .field{ min-width:0; }
  .controls .field:has(#client){ grid-column:1 / -1; }
  .controls .date-field{ grid-column:1 / -1; }
  .controls select, .date-trigger{ width:100%; font-size:16px; }
  .date-trigger{ justify-content:flex-start; }
  .toggle{ display:flex; } .toggle button{ flex:1; padding:10px 8px; }
  .controls .btn{ width:100%; padding:11px 12px; }
  .date-pop{ position:absolute; left:0; right:0; max-width:none; flex-direction:column; max-height:70vh; overflow-y:auto; }
  .dp-presets{ flex-direction:row; flex-wrap:wrap; gap:4px; }
  .dp-presets button{ padding:7px 10px; font-size:.82rem; }
  .dp-presets button::before{ display:none; }
  .dp-cal{ width:auto; }

  .header{ gap:12px; padding-bottom:16px; margin-bottom:18px; }
  .header .by{ margin-left:0; align-items:flex-start; flex-basis:100%; flex-direction:row; align-items:center; gap:10px; }
  .logo-chip{ width:52px; height:52px; }
  .header h1{ font-size:1.25rem; }
  .resumo{ font-size:1rem; }
  .hl{ padding:16px; } .hl .h-value{ font-size:1.9rem; }
  .section-title{ margin:24px 0 12px; }
  .panel{ padding:16px; }
  .cli{ padding:18px; }

  /* tabelas -> cartões */
  .panel:has(table.cartoes){ padding:10px; background:transparent; border:0; }
  table.cartoes, table.cartoes tbody{ display:block; }
  table.cartoes thead{ display:none; }
  table.cartoes tr{
    display:flex; flex-wrap:wrap; gap:2px 14px; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:12px 14px; margin-bottom:10px;
  }
  table.cartoes td{
    flex:1 1 calc(50% - 14px); min-width:0; display:flex; flex-direction:column; padding:4px 0;
    border:0; font-size:.9rem; text-align:left; overflow-wrap:anywhere;
  }
  table.cartoes td.r{ text-align:left; }
  table.cartoes td::before{
    content:attr(data-label); font-size:.64rem; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); margin-bottom:1px;
  }
  table.cartoes td:not([data-label])::before{ display:none; }
  table.cartoes td.cel-titulo{
    order:-1; flex:1 1 100%; font-size:1rem; font-weight:600; padding-bottom:8px; margin-bottom:4px;
    border-bottom:1px solid var(--border);
  }
  table.cartoes td:empty{ display:none; }
  body.is-gestor table.cartoes tr.fadiga{ background:rgba(245,158,11,.08); }
  body.is-gestor table.cartoes tr.fadiga td{ background:none; }
  tbody tr:hover td{ background:none; }
  .thumb{ width:56px; height:56px; }

  /* botão de PDF e aviso fixo sobem pra não ficar atrás da barra inferior */
  .fab{ right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); width:50px; height:50px; }
  .fab svg{ width:22px; height:22px; }
  .aviso-rodape{ left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom)); transform:translateY(120%); max-width:none; }
  .aviso-rodape.visivel{ transform:translateY(0); }

  .chart{ gap:5px; }
  /* período longo (30 dias = 30 colunas): a coluna não encolhia abaixo do rótulo da data e a página
     passava de 960px de largura no celular. Colunas podem encolher e a data fica na vertical. */
  .chart.dense{ gap:2px; }
  .chart.dense .col{ min-width:0; }
  .chart.dense .v{ font-size:.54rem; }
  .chart.dense .d{ font-size:.54rem; writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; }
  .funil-grid, .highlights{ gap:12px; }
}

/* ---------- aba Templates (só gestor) ---------- */
.tpl-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.tpl-search { flex:1 1 260px; position:relative; display:flex; align-items:center; }
.tpl-search svg { position:absolute; left:12px; width:16px; height:16px; color:var(--muted); pointer-events:none; }
.tpl-search input { width:100%; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:var(--btn);
  padding:10px 12px 10px 36px; font-family:var(--body); font-size:.92rem; transition:border-color .14s; }
.tpl-search input:hover { border-color:var(--accent-line); }
.tpl-search input::placeholder { color:var(--muted); }
.tpl-cats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.tpl-chip { background:var(--card); color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:6px 13px;
  font-family:var(--body); font-size:.84rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:color .14s, background .14s, border-color .14s; }
.tpl-chip span { margin-left:7px; font-size:.72rem; font-weight:600; opacity:.6; }
.tpl-chip:hover { color:var(--text); border-color:var(--accent-line); }
.tpl-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.tpl-chip.on span { opacity:.85; }
.tpl-count { color:var(--muted); font-size:.85rem; margin-bottom:14px; }
.tpl-count b { color:var(--text); font-weight:600; }
.tpl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tpl-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tpl-card:hover { transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--glow); }
.tpl-thumb { display:block; width:100%; aspect-ratio:4/5; border:0; padding:0; background:var(--card2); cursor:zoom-in; overflow:hidden; }
.tpl-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .35s ease; }
.tpl-card:hover .tpl-thumb img { transform:scale(1.035); }
.tpl-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tpl-body h3 { font-family:var(--title); font-weight:600; font-size:.88rem; line-height:1.3; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tpl-by { color:var(--muted); font-size:.76rem; margin-top:-6px; }
.tpl-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
/* blocks, components e 21st.dev: imagens horizontais (as de componentes chegam a 4:1), então cartão mais largo e imagem inteira */
.tpl-grid.paisagem { grid-template-columns:repeat(3,1fr); }
.paisagem .tpl-thumb { aspect-ratio:16/10; }
.paisagem .tpl-thumb img { object-fit:contain; object-position:center; }
.tpl-btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--body); font-weight:600; font-size:.78rem; border:1px solid transparent;
  padding:6px 11px; border-radius:8px; text-decoration:none; white-space:nowrap; transition:background .14s, color .14s, border-color .14s; }
.tpl-btn svg { width:13px; height:13px; }
.tpl-btn.real { background:var(--accent); color:#fff; }
.tpl-btn.real:hover { background:var(--accent2); }
.tpl-btn.busca { border:1px solid var(--border2); color:var(--muted); }
.tpl-btn.busca:hover { color:var(--text); border-color:var(--accent-line); }
.tpl-tag { font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border2); border-radius:999px; padding:1px 8px; }
.tpl-mais { display:flex; justify-content:center; padding:26px 0 4px; min-height:40px; }
.tpl-vazio { text-align:center; padding:50px 20px; color:var(--muted); display:flex; flex-direction:column; gap:16px; align-items:center; }

/* ampliar a imagem */
.tpl-lb { position:fixed; inset:0; z-index:100; display:none; flex-direction:column; align-items:center;
  background:rgba(8,8,10,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tpl-lb.on { display:flex; }
.tpl-lb-in { flex:1; width:100%; overflow:auto; display:flex; justify-content:center; padding:68px 16px 32px; }
.tpl-lb-in img { width:min(900px,100%); height:auto; align-self:flex-start; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.tpl-lb-x { position:absolute; top:14px; right:18px; z-index:2; width:40px; height:40px; border-radius:50%; border:1px solid var(--border2);
  background:var(--card); color:var(--text); font-size:1.5rem; line-height:1; cursor:pointer; transition:background .14s, border-color .14s; }
.tpl-lb-x:hover { background:var(--accent); border-color:var(--accent); }
.tpl-lb-nome { position:absolute; top:22px; left:24px; right:72px; z-index:2; font-family:var(--title); font-weight:700; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:1000px) { .tpl-grid { grid-template-columns:repeat(3,1fr); } .tpl-grid.paisagem { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) {
  .tpl-grid, .tpl-grid.paisagem { grid-template-columns:repeat(2,1fr); gap:10px; }
  .paisagem .tpl-thumb { aspect-ratio:4/3; }
  .tpl-bar .toggle { width:100%; } .tpl-bar .toggle button { flex:1; padding:10px 4px; font-size:.82rem; }
  .tpl-cats { flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 16px; padding:0 14px 4px; scrollbar-width:none; }
  .tpl-cats::-webkit-scrollbar { display:none; }
  .tpl-thumb { aspect-ratio:3/4; }
  .tpl-body { padding:10px 11px 12px; }
  .tpl-body h3 { font-size:.82rem; }
  .tpl-btn { font-size:.74rem; padding:6px 9px; }
  .tpl-lb-in { padding:64px 8px 24px; }
}
@media (prefers-reduced-motion: reduce) { .tpl-card, .tpl-thumb img { transition:none; } }