/* app.css — camada base compartilhada do dashboard.
   Carregada ANTES do <style> inline de cada página: enquanto a página
   mantiver seus blocos inline, eles vencem (mesma especificidade, ordem
   posterior) — a migração remove os blocos duplicados página a página.
   Regra: só entra aqui o que é ≥95% idêntico entre as páginas. */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
/* Saíram daqui. Quem declara token é `design-system.css`, carregado ANTES
   deste arquivo em toda página — inclusive os nomes antigos (--brand, --fg1,
   --bg...), traduzidos lá na camada de compatibilidade. Ter dois arquivos
   declarando a mesma cor é o problema que a migração existe para acabar:
   com dois donos, um deles sempre fica para trás. */

/* ── 2. Base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font);background:var(--bg);color:var(--fg1);
  -webkit-font-smoothing:antialiased;display:flex;min-height:100vh;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* width:100%+min-width:0 — .page é filho de .shell{display:flex;flex-direction:column}
   (sidebar.js); sem os dois, um elemento largo lá dentro (tabela com
   min-width, grid com coluna mínima grande) faz .page crescer pro tamanho do
   conteúdo em vez de ficar no tamanho da tela e deixar o próprio elemento
   rolar internamente — foi assim que /linkedin vazava 800px+ de tabela pra
   fora da viewport no mobile. */
/* §5 — acima de 1600px o conteudo para de esticar e CENTRALIZA em 1720.
   O max-width ja fazia a primeira metade; sem margin auto, a sobra ia
   toda para a direita e a tela ficava torta em monitor largo. */
.page{max-width:1720px;width:100%;min-width:0;margin-inline:auto;
      padding:var(--space-8) var(--space-8) var(--space-12);}

/* ── 3. Componentes de shell (≥95% idênticos entre páginas) ──────────── */
/* topbar */
.topbar-title{font-size:13px;font-weight:700;color:var(--text-primary);}
.topbar-sub{font-size:11px;color:var(--text-tertiary);}
.topbar-sep{width:1px;height:16px;background:var(--border-subtle);}
.topbar-live{display:flex;align-items:center;gap:var(--space-3);font-size:11px;font-weight:500;
             color:var(--success-600);margin-left:auto;}
.topbar-live::before{content:'';width:6px;height:6px;border-radius:var(--radius-full);
                     background:var(--success-600);animation:pulse 2s infinite;}

/* botão de recarregar / período — cor de destaque via --accent */
.period-bar{display:flex;align-items:center;gap:var(--space-2);}
.period-btn{height:var(--control-sm);padding:0 var(--space-5);font:500 12px var(--font);
            border-radius:var(--radius-md);border:1px solid var(--border-strong);
            background:var(--surface-raised);color:var(--text-secondary);cursor:pointer;
            white-space:nowrap;
            transition:background var(--duration-instant) var(--ease-productive),
                       border-color var(--duration-instant) var(--ease-productive);}
.period-btn:hover{border-color:var(--accent);color:var(--accent);}
.period-btn.active{background:var(--accent);border-color:var(--accent);color:var(--neutral-0);}

/* drawer lateral (#drawer) */
#drawer-overlay{position:fixed;inset:0;background:var(--overlay);z-index:300;opacity:0;
                pointer-events:none;transition:opacity var(--duration-base) var(--ease-exit)}
#drawer-overlay.open{opacity:1;pointer-events:all}
#drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;
        background:var(--surface-raised);z-index:400;box-shadow:var(--elevation-3);
        transform:translateX(100%);
        transition:transform var(--duration-slow) var(--ease-entrance);
        overflow-y:auto;display:flex;flex-direction:column}
#drawer.open{transform:translateX(0)}
.dr-header{padding:var(--space-8) var(--space-8) var(--space-5);
           border-bottom:1px solid var(--border-subtle);display:flex;align-items:flex-start;
           justify-content:space-between;gap:var(--space-5);position:sticky;top:0;
           background:var(--surface-raised);z-index:1}
.dr-title{font:700 16px/22px var(--font);color:var(--text-primary);flex:1}
.dr-close{background:none;border:none;cursor:pointer;width:var(--control-md);height:var(--control-md);
          border-radius:var(--radius-md);color:var(--text-tertiary);font-size:18px;line-height:1;
          flex-shrink:0;display:grid;place-items:center}
.dr-close:hover{color:var(--text-primary);background:var(--action-ghost-hover)}
.dr-body{padding:var(--space-7) var(--space-8);flex:1;display:flex;flex-direction:column;gap:var(--space-6)}
.dr-section{display:flex;flex-direction:column;gap:var(--space-3)}
.dr-section-title{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                  color:var(--text-tertiary);margin-bottom:var(--space-1)}
.dr-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);
        padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}
.dr-row:last-child{border-bottom:none}
.dr-label{font-size:12px;color:var(--text-tertiary);white-space:nowrap;flex-shrink:0}
.dr-val{font-size:12px;font-weight:500;color:var(--text-primary);text-align:right;
        word-break:break-word;font-variant-numeric:tabular-nums}
.dr-val.empty{color:var(--text-disabled);font-weight:400}
.dr-hs-link{display:inline-flex;align-items:center;gap:var(--space-3);font:500 13px var(--font);
            color:var(--accent);text-decoration:none;height:var(--control-sm);
            padding:0 var(--space-5);border:1px solid var(--accent);
            border-radius:var(--radius-md);margin-top:var(--space-2);width:fit-content}
.dr-hs-link:hover{background:var(--info-100)}

/* botão de recarregar da topbar — cor de destaque via --accent. Existia
   quase idêntico (só o hover mudava de cor) em pipeline/midia_paga/
   briefing/email/instagram/blog/lps/campanha antes desta consolidação. */
.topbar-refresh{display:inline-flex;align-items:center;gap:var(--space-3);
                height:var(--control-sm);padding:0 var(--space-5);font:500 12px var(--font);
                border-radius:var(--radius-md);border:1px solid var(--border-strong);
                background:transparent;color:var(--text-secondary);cursor:pointer;
                margin-left:var(--space-5);
                transition:border-color var(--duration-instant) var(--ease-productive),
                           color var(--duration-instant) var(--ease-productive);}
.topbar-refresh:hover{border-color:var(--accent);color:var(--accent);}
.topbar-refresh svg{width:var(--icon-sm);height:var(--icon-sm);
                    transition:transform var(--duration-slow) var(--ease-productive);}
.topbar-refresh.spinning svg{animation:spin .7s linear infinite;}

/* ── 4. KPI cards ─────────────────────────────────────────────────────── */
/* grid + card idênticos entre páginas — só a cor do valor varia por métrica
   (.warn/.danger/.blue/.green/.purple) ou a página usa .kpi-row (flex) em
   vez de .kpi-grid quando o número de cards é sempre o mesmo. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
          gap:var(--space-6);margin-bottom:var(--space-8);}
.kpi-row{display:flex;gap:var(--space-6);margin-bottom:var(--space-8);}
.kpi-row .kpi{flex:1;}
.kpi{background:var(--surface-raised);border:1px solid var(--border-subtle);
     border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:none;}
.kpi-label{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
           color:var(--text-tertiary);margin-bottom:var(--space-3);}
.kpi-value{font:700 24px/28px var(--font);letter-spacing:-.02em;color:var(--text-primary);
           font-variant-numeric:tabular-nums;}
.kpi-sub{font:400 12px/16px var(--font);color:var(--text-tertiary);margin-top:var(--space-2);}
.kpi.warn .kpi-value{color:var(--warning-600);}
.kpi.danger .kpi-value{color:var(--danger-600);}
.kpi.blue .kpi-value{color:var(--b1);}
.kpi.green .kpi-value{color:var(--g1);}
.kpi.purple .kpi-value{color:var(--p1);}

/* ── 5. Loading / erro / cache ────────────────────────────────────────── */
.loading-state{display:flex;align-items:center;justify-content:center;
               padding:var(--space-12);gap:var(--space-5);color:var(--text-tertiary);font-size:14px;}
.spinner{width:20px;height:20px;border:2px solid var(--border-subtle);
         border-top-color:var(--accent);border-radius:var(--radius-full);
         animation:spin .7s linear infinite;}
.error-box{background:var(--danger-100);border:1px solid var(--danger-200);
           border-left:3px solid var(--danger-600);border-radius:var(--radius-lg);
           padding:var(--space-5) var(--space-6);color:var(--danger-700);font-size:14px;
           margin-bottom:var(--space-7);}
.cache-info{font-size:12px;color:var(--text-tertiary);font-weight:400;}
.cache-info.stale{color:var(--warning-600);font-weight:500;}

/* ── 6. Abas de visão + seção de tabela ───────────────────────────────── */
.view-tabs{display:flex;gap:var(--space-2);margin-bottom:-1px;}
.view-tab{height:var(--control-md);padding:0 var(--space-6);font:500 13px var(--font);
          border-radius:var(--radius-lg) var(--radius-lg) 0 0;
          border:1px solid var(--border-subtle);border-bottom:none;
          background:var(--surface-sunken);color:var(--text-secondary);cursor:pointer;
          transition:background var(--duration-instant) var(--ease-productive);}
.view-tab.active{background:var(--surface-raised);color:var(--text-primary);}
.view-tab-panel{border:1px solid var(--border-subtle);
                border-radius:0 var(--radius-xl) var(--radius-xl) var(--radius-xl);
                overflow:hidden;background:var(--surface-raised);box-shadow:none;}

.table-section{background:var(--surface-raised);border:1px solid var(--border-subtle);
               border-radius:var(--radius-xl);overflow:hidden;box-shadow:none;}
.table-header{display:flex;align-items:center;justify-content:space-between;
              padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-subtle);
              flex-wrap:wrap;gap:var(--space-4);}
.table-header-title{font:500 11px/14px var(--font);letter-spacing:.08em;text-transform:uppercase;
                    color:var(--text-tertiary);}

/* O atributo `hidden` do HTML esconde via `display:none` da folha do
   navegador — que perde pra QUALQUER regra de `display` na página. Um
   `.modal{display:flex}` ou `.btn{display:inline-flex}` faz o elemento
   escondido continuar na tela, e no caso do modal ele segue interceptando os
   cliques de tudo que está atrás. Já aconteceu duas vezes (banco.html e
   funil-vendas.html), então a regra mora aqui, para todas as telas. */
[hidden]{display:none !important;}

/* ── 7. Mobile ────────────────────────────────────────────────────────── */
/* sidebar.js injeta seu próprio <style id="sidebar-css"> via JS, a partir de
   um <script> no <body> — como isso roda depois do <head> (onde este
   arquivo e o <style> inline de cada página já foram parseados), o bloco
   dele entra por ÚLTIMO no DOM e vence qualquer empate de especificidade.
   Ele define `.topbar{height:52px}` no desktop e, no mobile,
   `.topbar{padding:0 12px!important;gap:8px!important}` — sem herdar
   `flex-wrap`, então quando o conteúdo da topbar não cabe numa única linha
   de 52px (subtítulo, seletor de período, botão de recarregar, busca...)
   ele vaza da barra em vez de quebrar. Esse exato bloco vivia copiado, com
   pequenas variações, em pipeline/midia_paga/banco/briefing/email/
   instagram/blog/lps/tarefas.css — cada página reimplementando a mesma
   correção. Centralizado aqui, `height:auto` não é anulado pelo
   `!important` do sidebar.js (que só toca `padding`/`gap`) e passa a valer
   para qualquer página que carregue app.css. Cada página continua
   responsável por reordenar/reexibir seus PRÓPRIOS elementos filhos (ids
   específicos, já que sidebar.js esconde `.topbar-sub`/`.topbar-refresh`/
   `.period-bar` por classe com `!important`). */
@media(max-width:768px){
  .topbar{flex-wrap:wrap!important;height:auto!important;padding:8px 14px 10px!important;gap:6px;row-gap:6px;}
}

/* §1.13 — anel de foco visível em todo elemento focável, para todas as
   telas de uma vez. Era o item da checklist mais fácil de esquecer
   componente a componente. */
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);outline-offset:2px;
}

/* §7 — prefers-reduced-motion zera a duração sem remover o feedback. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}