/* ─────────────────────────────────────────────────────────────────────────────────────────────
   dashboard.css — base visual compartilhada de todas as telas (design system).

   Ordem no <head> de cada página: fonte Inter (CDN) → /css/dashboard.css → /css/sidebar.css →
   /css/pages/<pagina>.css (só o que é exclusivo da tela). Enquanto uma página ainda não foi
   migrada, o <style> inline dela vem depois deste arquivo e vence os empates, então nada muda
   de aparência até alguém tirar o CSS duplicado de lá.

   Regras da casa:
   - Só light mode (não existe dark mode no app, não adicionar).
   - Texto nunca abaixo de 12px, exceto o rótulo em CAIXA ALTA (--fs-label, 11.5px): letra
     maiúscula ocupa a altura toda da linha, então 11.5px em caixa alta lê como ~13px normal.
   - Cor de texto sempre com contraste AA (4.5:1) sobre branco: --text, --sub e --muted passam.
     --faint NÃO passa (2.6:1) e é só pra borda, ícone decorativo e placeholder de gráfico.
   - Número de KPI/tabela usa algarismos tabulares (font-variant-numeric) pra alinhar em coluna.
   - Classe nova genérica leva prefixo quando o nome já existe com outro significado em alguma
     página não migrada (.ui-btn, .ui-badge, .ui-input, .data-table): assim este arquivo não
     muda a cara de uma tela que ainda tem o próprio .btn/.badge/.field/table.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root{
  /* ── Cores base ── */
  --bg:#f6f7f9;              /* fundo da página (cards brancos se destacam sobre ele) */
  --surface:#ffffff;         /* card, topbar, popover */
  --surface2:#f3f5f7;        /* fundo de pill, input, hover de linha */
  --surface3:#e9edf1;        /* hover mais forte, trilho de toggle */
  --border:rgba(28,43,57,.10);
  --border2:rgba(28,43,57,.18);
  --text:#1c2b39;            /* navy da marca: títulos e valores (14.4:1) */
  --sub:#4f5d6a;             /* texto secundário (6.8:1) */
  --muted:#667380;           /* rótulos, legendas, metadado (4.9:1, AA) */
  --faint:#96a3ad;           /* só decorativo, nunca texto (2.6:1) */
  --on-dark:#ffffff;         /* texto sobre --text (pill ativa, botão primário) */

  /* ── Status (texto sobre o próprio fundo claro passa AA) ── */
  --green:#1f6e4c;  --green-bg:rgba(31,110,76,.10);
  --red:#b3261e;    --red-bg:rgba(179,38,30,.09);
  --gold:#946200;   --gold-bg:rgba(148,98,0,.07);  --gold-border:rgba(148,98,0,.20);
  --blue:#0b63d6;   --blue-bg:rgba(11,99,214,.08);
  --neutral-bg:rgba(28,43,57,.06);

  /* ── Marca das redes ── */
  --ig-1:#f58529; --ig-2:#dd2a7b; --ig-3:#8134af; --ig-4:#515bd4;
  --ig:#dd2a7b;              /* cor de acento (borda, ponto de legenda) */
  --ig-text:#c21f6a;         /* rosa escurecido pra texto (5.7:1) */
  --ig-gradient:linear-gradient(135deg,var(--ig-1),var(--ig-2) 45%,var(--ig-3) 70%,var(--ig-4));
  --fb:#1877f2;
  --fb-text:#0b63d6;         /* azul escurecido pra texto (5.6:1) */

  /* ── Paleta de gráfico (Chart.js lê estas variáveis via UI.chartColors()) ──
     Ordem fixa: 1 navy (Brasil), 2 rosa (Estados Unidos), depois cores bem distintas entre si. */
  --chart-1:#1c2b39; --chart-2:#dd2a7b; --chart-3:#0f8b8d; --chart-4:#8134af;
  --chart-5:#e8710a; --chart-6:#5b8def;
  --chart-grid:rgba(28,43,57,.07);
  --chart-axis:#667380;
  --chart-positive:#2e8a63;  --chart-negative:#c9443a;  --chart-neutral:#b4bec6;

  /* ── Tipografia ── */
  --font:'Inter Variable',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-label:11.5px;         /* rótulo em CAIXA ALTA (ver regra no topo) */
  --fs-xs:12px;              /* legenda, metadado, chip */
  --fs-sm:13px;              /* texto de controle, célula de tabela */
  --fs-md:14px;              /* corpo */
  --fs-lg:16px;              /* título de card / topbar */
  --fs-xl:20px;              /* valor secundário */
  --fs-2xl:26px;             /* valor de KPI */
  --fs-3xl:32px;             /* valor de destaque */
  --lh:1.5;

  /* ── Espaçamento (grade de 4px) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* ── Raios, sombras, foco ── */
  --radius-xs:6px; --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(28,43,57,.05);
  --shadow-sm:0 1px 3px rgba(28,43,57,.08),0 1px 2px rgba(28,43,57,.04);
  --shadow-pop:0 12px 32px rgba(28,43,57,.16),0 2px 6px rgba(28,43,57,.06);
  --focus:#3b6fd8;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ── Medidas de controle ── */
  --control-h:36px;
  --sidebar-w:224px;
}

/* ── Base ── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-md);
  line-height:var(--lh);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01'}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Layout: coluna principal + topbar + conteúdo ── */
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .25s var(--ease)}
body.sidebar-hidden .main{margin-left:0}

.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:var(--sp-3) var(--sp-8);min-height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  position:sticky;top:0;z-index:100}
.topbar h1{font-size:var(--fs-lg);font-weight:700;margin:0;letter-spacing:-.01em}
.topbar .sub{color:var(--muted);font-size:var(--fs-xs);margin-top:1px}
.topbar-controls{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end}

/* Largura máxima fica com cada página (.content{max-width:...} no css/pages/): Cliques usa a
   largura toda, Configurações é estreita, etc. */
.content{padding:var(--sp-6) var(--sp-8) var(--sp-8);width:100%;flex:1}
h3.section{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:var(--sp-8) 0 var(--sp-3)}
h3.section:first-child{margin-top:0}
footer{padding:var(--sp-6) var(--sp-8);color:var(--muted);font-size:var(--fs-xs);text-align:center}

/* ── Filter pill (gatilho dos dropdowns da topbar) ──
   Estrutura gerada por UI.select/UI.periodPicker:
     <div class="csel"><button class="filter-pill">lbl · val · arr</button><div class="csel-pop">…</div></div>
   Nas páginas ainda não migradas o .filter-pill é o próprio wrapper (.filter-pill.csel) — as regras
   abaixo funcionam nos dois formatos. */
.filter-pill{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 var(--sp-3) 0 14px;
  border-radius:var(--radius-pill);border:1px solid var(--border2);background:var(--surface);
  font-size:var(--fs-sm);font-weight:500;color:var(--sub);cursor:pointer;white-space:nowrap;user-select:none;
  transition:border-color .15s,background .15s,color .15s;font-family:inherit;line-height:1}
.filter-pill:hover{border-color:var(--text);color:var(--text)}
.filter-pill .lbl{font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.filter-pill .val{font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.filter-pill .arr{color:var(--muted);font-size:10px;margin-left:2px;transition:transform .15s}
.filter-pill img{flex-shrink:0}

/* Estado "ativo" (período escolhido): pill escura. */
.filter-pill.is-active,.period-pill-active{background:var(--text);border-color:var(--text)}
.filter-pill.is-active .lbl,.period-pill-active .lbl{color:rgba(255,255,255,.72)}
.filter-pill.is-active .val,.period-pill-active .val{color:var(--on-dark)}
.filter-pill.is-active .arr,.period-pill-active .arr{color:rgba(255,255,255,.6)}
.filter-pill.is-active:hover{background:#0f1922}

/* ── Dropdown (UI.select) ── */
/* fit-content: dentro de um campo de formulário o wrapper ocupava a largura toda e a lista
   (alinhada à borda dele) abria longe do botão. Onde precisa largura total, a página define. */
.csel{position:relative;width:fit-content;max-width:100%}
.csel.open .arr{transform:rotate(180deg)}
.csel.open>.filter-pill,.filter-pill.csel.open{border-color:var(--text)}
.csel-pop{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;max-height:min(360px,70vh);overflow-y:auto;
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-pop);
  z-index:500;display:none;flex-direction:column;padding:var(--sp-1)}
.csel-pop.align-left{right:auto;left:0}
.csel.open .csel-pop{display:flex}
.csel-opt{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 10px;border-radius:var(--radius-sm);
  font-size:var(--fs-sm);color:var(--sub);cursor:pointer;transition:background .1s,color .1s;white-space:nowrap;outline:none}
.csel-opt:hover,.csel-opt.is-focused{background:var(--surface2);color:var(--text)}
.csel-opt.active{color:var(--text);font-weight:600}
.csel-opt.active::before{content:'✓';color:var(--text);font-size:12px;font-weight:700;width:12px;flex-shrink:0}
.csel-opt:not(.active)::before{content:'';display:inline-block;width:12px;flex-shrink:0}
.csel-opt .opt-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Ícones dentro de pill/opção têm SEMPRE tamanho fixo: SVG de bandeira sem tamanho renderiza no
   tamanho intrínseco (a dos EUA tem 1235px de largura e abria gigante no dropdown de Cliques). */
.csel-opt img,.filter-pill img,img.flag{width:18px;height:13px;object-fit:cover;border-radius:3px;
  box-shadow:0 0 0 1px rgba(28,43,57,.08);flex-shrink:0}
.csel-opt img.brand-logo-mini,.filter-pill img.brand-logo-mini,img.brand-logo-mini,
.csel-opt img.opt-logo,.filter-pill img.opt-logo{width:auto;height:14px;max-width:64px;object-fit:contain;border-radius:0;box-shadow:none}
.csel-opt img.platform-icon,.filter-pill img.platform-icon,img.platform-icon{width:var(--icon-size,16px);height:var(--icon-size,16px);
  object-fit:contain;border-radius:0;box-shadow:none}
.opt-glyph{font-size:14px;line-height:1;color:var(--sub);flex-shrink:0}
/* Bolinha de aviso numa opção (ex.: marca sem conexão com a Meta). */
.csel-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex-shrink:0}
.csel-dot.warn{background:#e0a800}

/* ── Period picker (UI.periodPicker) — layout padrão do dashboard ── */
.period-pop{position:absolute;top:calc(100% + 6px);right:0;width:292px;background:var(--surface);
  border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow-pop);
  padding:var(--sp-4);z-index:500;display:none;flex-direction:column;gap:var(--sp-3)}
.period-pop.open,.csel.open>.period-pop{display:flex}
.pp-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pp-presets.pp-presets-1{grid-template-columns:1fr}
/* Número ímpar de atalhos: o último ocupa a linha inteira em vez de ficar sozinho numa coluna. */
.pp-presets button:last-child:nth-child(odd){grid-column:1/-1}
.pp-presets button{font-size:var(--fs-xs);font-weight:600;padding:9px 6px;border:1px solid var(--border2);background:var(--surface2);
  color:var(--sub);border-radius:var(--radius-sm);cursor:pointer;transition:all .12s;font-family:inherit;line-height:1.3}
.pp-presets button:hover{border-color:var(--text);color:var(--text)}
.pp-presets button.active{background:var(--text);border-color:var(--text);color:var(--on-dark)}
.pp-divider{height:1px;background:var(--border)}
.pp-section-label{font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pp-dates{display:flex;flex-direction:column;gap:var(--sp-2)}
.pp-field{display:flex;align-items:center;gap:10px}
.pp-field label{font-size:var(--fs-xs);font-weight:600;color:var(--sub);width:28px;flex-shrink:0}
.pp-field input[type=date]{flex:1;min-width:0;font-size:var(--fs-sm);font-family:inherit;color:var(--text);padding:7px 10px;
  border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface2);outline:none;transition:border-color .12s}
.pp-field input[type=date]:focus{border-color:var(--text)}
.pp-field input[aria-invalid=true]{border-color:var(--red)}
.pp-err{font-size:var(--fs-xs);color:var(--red);min-height:16px;line-height:16px}
.pp-err:empty{min-height:0;margin-top:calc(var(--sp-3) * -1)}
.pp-apply{font-size:var(--fs-sm);font-weight:600;padding:10px 0;background:var(--text);color:var(--on-dark);border:none;
  border-radius:var(--radius-sm);cursor:pointer;transition:background .12s;font-family:inherit}
.pp-apply:hover{background:#0f1922}

/* ── Botões ── */
.sync-btn{height:var(--control-h);padding:0 var(--sp-4);border-radius:var(--radius-pill);border:1px solid var(--border2);background:var(--surface);
  font-size:var(--fs-sm);font-weight:600;color:var(--sub);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.sync-btn:hover{border-color:var(--text);color:var(--text)}
.sync-btn:disabled{opacity:.6;cursor:default}
.sync-btn:disabled .bi-arrow-repeat{animation:uiSpin 1s linear infinite}
@keyframes uiSpin{to{transform:rotate(360deg)}}

.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--control-h);padding:0 var(--sp-4);
  border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--surface);color:var(--text);
  font-size:var(--fs-sm);font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,opacity .15s}
.ui-btn:hover{border-color:var(--text)}
.ui-btn:disabled{opacity:.55;cursor:default}
.ui-btn.primary{background:var(--text);border-color:var(--text);color:var(--on-dark)}
.ui-btn.primary:hover{background:#0f1922}
.ui-btn.secondary{background:var(--surface2)}
.ui-btn.ghost{background:transparent;border-color:transparent;color:var(--sub)}
.ui-btn.ghost:hover{background:var(--surface2);color:var(--text)}
.ui-btn.danger{color:var(--red);border-color:rgba(179,38,30,.3)}
.ui-btn.danger:hover{background:var(--red-bg);border-color:var(--red)}
.ui-btn.sm{height:30px;padding:0 var(--sp-3);font-size:var(--fs-xs)}
.ui-btn.pill{border-radius:var(--radius-pill)}

/* Segmentado (Lista/Tabela/Gráfico etc.): botões reais com aria-pressed. */
.seg{display:inline-flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px}
.seg-btn{border:none;background:none;height:28px;padding:0 var(--sp-3);border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;
  color:var(--sub);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s;font-family:inherit}
.seg-btn:hover:not(.active){color:var(--text);background:var(--surface3)}
.seg-btn.active{background:var(--text);color:var(--on-dark)}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-5);box-shadow:var(--shadow-xs)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;min-height:var(--control-h)}
.card-head h2{font-size:15px;font-weight:700;margin:0;letter-spacing:-.005em;display:flex;align-items:center;gap:var(--sp-2)}
.card-head .card-actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.card-sub{font-size:var(--fs-xs);color:var(--muted);margin:2px 0 0}
.card-foot{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border)}

/* ── KPI ── */
.kpi-label{font-size:var(--fs-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-2)}
.kpi-label .bi{font-size:13px;color:var(--faint)}
.kpi-value{font-size:var(--fs-2xl);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text);
  font-variant-numeric:tabular-nums;margin-bottom:var(--sp-2)}
.kpi-delta{font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ── Chip de variação (↑/↓) e badges ── */
.delta-val{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-xs);font-weight:700;padding:1px 8px;border-radius:var(--radius-pill);
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:20px}
.delta-val.up{background:var(--green-bg);color:var(--green)}
.delta-val.down{background:var(--red-bg);color:var(--red)}
.delta-val.flat{background:var(--neutral-bg);color:var(--muted)}

.ui-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;line-height:20px;padding:0 var(--sp-2);
  border-radius:var(--radius-pill);white-space:nowrap;background:var(--neutral-bg);color:var(--sub)}
.ui-badge.pos{background:var(--green-bg);color:var(--green)}
.ui-badge.neg{background:var(--red-bg);color:var(--red)}
.ui-badge.warn{background:var(--gold-bg);color:var(--gold)}
.ui-badge.info{background:var(--blue-bg);color:var(--blue)}

/* Ícone de plataforma (UI.platformIcon) e marcador de legenda. */
.platform-icon{display:inline-block;vertical-align:middle;flex-shrink:0}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;flex-shrink:0}

/* ── Tabela ── */
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.data-table th,.data-table td{text-align:left;padding:10px var(--sp-3);border-bottom:1px solid var(--border)}
.data-table th{color:var(--muted);font-weight:700;font-size:var(--fs-label);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.data-table td.num,.data-table th.num{text-align:right}
.data-table tbody tr:hover{background:var(--surface2)}
.data-table tbody tr:last-child td{border-bottom:none}
.table-scroll{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}

/* ── Campos de formulário ── */
.ui-field{display:flex;flex-direction:column;gap:6px}
.ui-field>label{font-size:var(--fs-label);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ui-input{height:var(--control-h);padding:0 var(--sp-3);font-size:var(--fs-sm);font-family:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-sm);outline:none;transition:border-color .12s,box-shadow .12s}
textarea.ui-input{height:auto;padding:var(--sp-2) var(--sp-3);min-height:72px;resize:vertical}
.ui-input:focus{border-color:var(--text);box-shadow:0 0 0 3px rgba(28,43,57,.08)}
.ui-input::placeholder{color:var(--faint)}

/* ── Estados: vazio, carregando, erro ── */
.empty{color:var(--muted);font-size:var(--fs-sm);padding:22px 0;text-align:center}

/* Bloco de erro de carga (loadErrorHtml em js/sidebar.js). Mesma caixa em todas as telas. */
.load-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:min(40vh,320px);max-width:440px;margin:0 auto;line-height:1.6;text-align:center}
.load-error-icon{font-size:24px;color:#c9a227}
.load-error-retry{border:1px solid var(--border2);background:var(--surface);color:var(--text);border-radius:var(--radius-sm);
  padding:7px 14px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit}
.load-error-retry:hover{background:var(--surface2)}

/* ── Aviso fixo (.limit-note) + minimizar/reabrir (initCollapsibleNotice em js/sidebar.js) ──
   O espaçamento em volta do aviso fica com cada página (margin), não aqui. */
.limit-note{position:relative;display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--gold-bg);
  border:1px solid var(--gold-border);border-radius:var(--radius);padding:var(--sp-4) 18px;
  transform-origin:top right;opacity:1;transform:scale(1);max-height:640px;overflow:hidden;
  transition:opacity .22s ease,transform .22s ease,max-height .32s ease,margin-bottom .32s ease,padding .32s ease}
.limit-note.is-collapsing{opacity:0;transform:scale(.92);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}
.limit-note>i{color:var(--gold);font-size:16px;margin-top:2px;flex-shrink:0}
.notice-collapse-btn{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  border:none;background:rgba(148,98,0,.12);color:var(--gold);cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notice-collapse-btn:hover{background:rgba(148,98,0,.22)}
.notice-fab{display:none;position:fixed;bottom:26px;right:26px;width:46px;height:46px;border-radius:50%;
  border:none;background:var(--gold);color:#fff;font-size:18px;cursor:pointer;align-items:center;
  justify-content:center;box-shadow:0 4px 16px rgba(148,98,0,.4);z-index:250;
  transform:scale(0);opacity:0;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.notice-fab.show{display:flex}
.notice-fab.show.in{transform:scale(1);opacity:1}
.notice-fab:hover{box-shadow:0 6px 20px rgba(148,98,0,.5)}

/* ── Loader genérico (pageLoaderHtml em js/sidebar.js) ──
   Peça de <uiverse.io/Nawsome>. Tudo escopado sob .page-loader e com os @keyframes renomeados:
   os nomes originais (bounce05/slide05/paper05/keyboard05) eram genéricos demais pra CSS global.
   padding-top generoso: .paper é position:absolute com top:-26px e sobe durante a animação,
   invadindo o espaço acima da caixa; sem essa folga ele passa por cima do conteúdo de cima. */
.page-loader{display:flex;align-items:center;justify-content:center;padding:46px 0 18px}
.page-loader .typewriter{--blue:#5C86FF;--blue-dark:#275EFE;--key:#fff;--paper:#EEF0FD;--text:#D3D4EC;--tool:#FBC56C;--duration:3s;
  position:relative;animation:pageLoaderBounce var(--duration) linear infinite}
.page-loader .typewriter .slide{width:92px;height:20px;border-radius:3px;margin-left:14px;transform:translateX(14px);
  background:linear-gradient(var(--blue),var(--blue-dark));animation:pageLoaderSlide var(--duration) ease infinite}
.page-loader .typewriter .slide:before,.page-loader .typewriter .slide:after,
.page-loader .typewriter .slide i:before{content:"";position:absolute;background:var(--tool)}
.page-loader .typewriter .slide:before{width:2px;height:8px;top:6px;left:100%}
.page-loader .typewriter .slide:after{left:94px;top:3px;height:14px;width:6px;border-radius:3px}
.page-loader .typewriter .slide i{display:block;position:absolute;right:100%;width:6px;height:4px;top:4px;background:var(--tool)}
.page-loader .typewriter .slide i:before{right:100%;top:-2px;width:4px;border-radius:2px;height:14px}
.page-loader .typewriter .paper{position:absolute;left:24px;top:-26px;width:40px;height:46px;border-radius:5px;
  background:var(--paper);transform:translateY(46px);animation:pageLoaderPaper var(--duration) linear infinite}
.page-loader .typewriter .paper:before{content:"";position:absolute;left:6px;right:6px;top:7px;border-radius:2px;height:4px;
  transform:scaleY(0.8);background:var(--text);box-shadow:0 12px 0 var(--text),0 24px 0 var(--text),0 36px 0 var(--text)}
.page-loader .typewriter .keyboard{width:120px;height:56px;margin-top:-10px;z-index:1;position:relative}
.page-loader .typewriter .keyboard:before,.page-loader .typewriter .keyboard:after{content:"";position:absolute}
.page-loader .typewriter .keyboard:before{top:0;left:0;right:0;bottom:0;border-radius:7px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));transform:perspective(10px) rotateX(2deg);transform-origin:50% 100%}
.page-loader .typewriter .keyboard:after{left:2px;top:25px;width:11px;height:4px;border-radius:2px;
  box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key);
  animation:pageLoaderKeyboard var(--duration) linear infinite}
@keyframes pageLoaderBounce{
  85%,92%,100%{transform:translateY(0)}
  89%{transform:translateY(-4px)}
  95%{transform:translateY(2px)}
}
@keyframes pageLoaderSlide{
  5%{transform:translateX(14px)}
  15%,30%{transform:translateX(6px)}
  40%,55%{transform:translateX(0)}
  65%,70%{transform:translateX(-4px)}
  80%,89%{transform:translateX(-12px)}
  100%{transform:translateX(14px)}
}
@keyframes pageLoaderPaper{
  5%{transform:translateY(46px)}
  20%,30%{transform:translateY(34px)}
  40%,55%{transform:translateY(22px)}
  65%,70%{transform:translateY(10px)}
  80%,85%{transform:translateY(0)}
  92%,100%{transform:translateY(46px)}
}
@keyframes pageLoaderKeyboard{
  5%,12%,21%,30%,39%,48%,57%,66%,75%,84%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  9%{box-shadow:15px 2px 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  18%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 2px 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  27%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 12px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  36%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 12px 0 var(--key),60px 12px 0 var(--key),68px 12px 0 var(--key),83px 10px 0 var(--key)}
  45%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 2px 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  54%{box-shadow:15px 0 0 var(--key),30px 2px 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  63%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 12px 0 var(--key)}
  72%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 2px 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 10px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
  81%{box-shadow:15px 0 0 var(--key),30px 0 0 var(--key),45px 0 0 var(--key),60px 0 0 var(--key),75px 0 0 var(--key),90px 0 0 var(--key),22px 10px 0 var(--key),37px 12px 0 var(--key),52px 10px 0 var(--key),60px 10px 0 var(--key),68px 10px 0 var(--key),83px 10px 0 var(--key)}
}

/* ── Loader de espera de IA (aiLoaderHtml em js/sidebar.js). Peças de <uiverse.io/andrew-manzyk>.
   IDs internos do SVG podem se repetir com mais de uma instância na tela: inofensivo, todas usam
   as mesmas definições. min-height reserva o alcance vertical real da animação (as "joias" viajam
   além da caixa de altura 0 do .loader); sem ele o texto abaixo fica no caminho delas. ── */
.ai-loader{display:flex;align-items:center;justify-content:center;padding:6px 0;min-height:140px}
.ai-loader .loader{--fill-color:#946200;--shine-color:#94620033;transform:scale(.4);width:100px;height:auto;position:relative;filter:drop-shadow(0 0 10px var(--shine-color))}
.ai-loader .loader #pegtopone{position:absolute;animation:aiLoaderFloweOne 1s linear infinite}
.ai-loader .loader #pegtoptwo{position:absolute;opacity:0;transform:scale(0) translateY(-200px) translateX(-100px);animation:aiLoaderFloweTwo 1s linear infinite;animation-delay:.3s}
.ai-loader .loader #pegtopthree{position:absolute;opacity:0;transform:scale(0) translateY(-200px) translateX(100px);animation:aiLoaderFloweThree 1s linear infinite;animation-delay:.6s}
.ai-loader .loader svg g path:first-child{fill:var(--fill-color)}
@keyframes aiLoaderFloweOne{
  0%{transform:scale(.5) translateY(-200px);opacity:0}
  25%{transform:scale(.75) translateY(-100px);opacity:1}
  50%{transform:scale(1) translateY(0);opacity:1}
  75%{transform:scale(.5) translateY(50px);opacity:1}
  100%{transform:scale(0) translateY(100px);opacity:0}
}
@keyframes aiLoaderFloweTwo{
  0%{transform:scale(.5) rotateZ(-10deg) translateY(-200px) translateX(-100px);opacity:0}
  25%{transform:scale(1) rotateZ(-5deg) translateY(-100px) translateX(-50px);opacity:1}
  50%{transform:scale(1) rotateZ(0deg) translateY(0) translateX(-25px);opacity:1}
  75%{transform:scale(.5) rotateZ(5deg) translateY(50px) translateX(0);opacity:1}
  100%{transform:scale(0) rotateZ(10deg) translateY(100px) translateX(25px);opacity:0}
}
@keyframes aiLoaderFloweThree{
  0%{transform:scale(.5) rotateZ(10deg) translateY(-200px) translateX(100px);opacity:0}
  25%{transform:scale(1) rotateZ(5deg) translateY(-100px) translateX(50px);opacity:1}
  50%{transform:scale(1) rotateZ(0deg) translateY(0) translateX(25px);opacity:1}
  75%{transform:scale(.5) rotateZ(-5deg) translateY(50px) translateX(0);opacity:1}
  100%{transform:scale(0) rotateZ(-10deg) translateY(100px) translateX(-25px);opacity:0}
}

/* Overlay de "pensando" (showAiThinkingOverlay em js/sidebar.js): borrão leve por cima do card
   inteiro + texto trocando, enquanto uma chamada de IA está em andamento. */
.ai-thinking-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;background:rgba(255,255,255,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);border-radius:inherit;z-index:80;animation:aiThinkingFadeIn .2s ease}
.ai-thinking-text{font-size:var(--fs-xs);font-weight:700;color:var(--gold);letter-spacing:.2px}
@keyframes aiThinkingFadeIn{from{opacity:0}to{opacity:1}}

/* ── Mobile (≤768px): sidebar vira gaveta, controles da topbar ocupam a largura toda (cada um
   cresce pra preencher a linha, sem deixar pill sozinha num canto) e popovers esticam até a
   largura do gatilho em vez de um valor fixo que podia estourar a tela. ── */
@media(max-width:768px){
  .main{margin-left:0}
  .topbar{padding:14px var(--sp-4);flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .topbar-controls{width:100%;justify-content:flex-start}
  .topbar-controls>*{flex:1 1 140px}
  .topbar-controls button{justify-content:center}
  .topbar .filter-pill{width:100%;justify-content:flex-start}
  .topbar .filter-pill .arr{margin-left:auto}
  .topbar-controls>.csel.is-wide,.topbar-controls>.sync-btn{flex-basis:100%}
  .csel-pop{left:0;right:0;width:auto;min-width:0}
  .period-pop{left:0;right:0;width:auto}
  .content{padding:var(--sp-5) var(--sp-4) var(--sp-6)}
  .notice-fab{right:18px;bottom:18px}
  footer{padding:var(--sp-5) var(--sp-4)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}