/* Extraido do <style> inline do index.html (10/08/2026), */
/* para fechar a CSP: style-src 'self', sem 'unsafe-inline'. */

  /* fonte de display da Viana Criativa (auto-hospedada; Brovalgin não é web font do Google) */
  @font-face { font-family: 'Brovalgin'; src: url('fonts/brovalgin.ttf') format('truetype'); font-weight: 400 800; font-display: swap; }
  *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg:#0D0D0F; --card:#18181B; --card2:#1F1F23; --border:#2A2A2E;
    --text:#FAFAFA; --muted:#A1A1AA; --ink:#FAFAFA; --accent:#F2811D; --accent2:#FF9A3D;
    --good:#22C55E; --bad:#EF4444; --pie2:#FBD4A8;
    --title:'Montserrat',sans-serif; --body:'Inter',system-ui,sans-serif;
    --radius:14px;
  }
  body { font-family:var(--body); background:var(--bg); color:var(--text); line-height:1.6; }
  .wrap { max-width:1000px; margin:0 auto; padding:24px 28px 64px; }

  /* barra de controle */
  .controls { position:sticky; top:0; z-index:20; background:var(--bg);
    border-bottom:1px solid var(--border); padding:14px 0; margin-bottom:28px; }
  .controls .row { max-width:1000px; 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:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
  select, input[type=date] { background:var(--card); color:var(--text); border:1px solid var(--border);
    border-radius:9px; padding:9px 11px; font-family:var(--body); font-size:.92rem; cursor:pointer; transition:border-color .14s; }
  select:hover { border-color:var(--accent); }
  select:focus, input:focus { outline:2px solid var(--accent); outline-offset:1px; }
  .toggle { display:inline-flex; background:var(--card); border:1px solid var(--border); border-radius:9px; 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:#160c02; }
  .toggle button.on:hover { filter:brightness(1.08); }
  .btn { background:var(--accent); color:#160c02; border:0; border-radius:9px; padding:10px 18px; font-weight:700;
    font-family:var(--title); cursor:pointer; transition:.15s; }
  .btn:hover { background:var(--accent2); }
  .btn:disabled { opacity:.5; cursor:default; }

  /* 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:9px;
    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); }
  .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:14px; box-shadow:0 16px 44px rgba(0,0,0,.5); 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 { color:var(--accent); font-weight:700; }
  .dp-presets button.on::before { background:var(--accent); }
  .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:color-mix(in srgb, var(--accent) 20%, transparent); border-radius:0; }
  .dp-grid .day.edge { background:var(--accent); color:#160c02; font-weight:700; }
  .dp-grid .day.today { outline:1px solid var(--accent); 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); }
  .dp-cancel:active { transform:scale(.95); }
  .dp-apply { background:var(--accent); color:#160c02; border:0; border-radius:8px; padding:7px 15px; cursor:pointer; font-family:var(--title); font-weight:700; font-size:.85rem; transition:.14s; }
  .dp-apply:hover { filter:brightness(1.08); }
  .dp-apply:active { transform:scale(.95); }
  .dp-apply:disabled { opacity:.45; cursor:default; }
  .dp-apply:disabled:hover { filter:none; }

  .header { display:flex; align-items:center; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:26px; flex-wrap:wrap; }
  /* tema claro: cabeçalho num card bege pra dar contraste (no escuro fica solto mesmo) */
  body[data-tema="light"] .header { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px 22px; margin-bottom:24px; }
  .brand-mark { font-family:var(--title); font-weight:800; font-size:1.5rem; letter-spacing:-.02em;
    background:var(--accent); color:#fff; padding:6px 16px; border-radius:12px; }
  .logo-img { height:64px; width:auto; max-width:240px; object-fit:contain; }
  body[data-client="viana-criativa"] .logo-img { height:88px; }  /* logo da Viana tem mais margem interna: aumenta só pra ela */
  .header h1 { font-family:var(--title); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; line-height:1.1; color:var(--ink); }
  .header .meta { color:var(--muted); font-size:.9rem; margin-top:5px; }
  .header .meta span { margin-right:13px; }
  .header .meta b { color:var(--accent); font-weight:600; }

  .resumo { font-size:1.1rem; color:var(--text); margin:0 0 24px; line-height:1.55; }
  .resumo b { color:var(--accent); font-weight:700; }

  .highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:26px; }
  .hl { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .hl:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.35); border-color:var(--accent); }
  .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.3rem; color:var(--accent); line-height:1.1; margin-top:6px; letter-spacing:-.02em; }
  .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:30px 0 15px; letter-spacing:-.01em; color:var(--ink); }
  .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(-4px); box-shadow:0 12px 26px rgba(0,0,0,.32); border-color:var(--accent); }
  .antes { font-size:.72rem; color:var(--muted); opacity:.6; 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.4rem; 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; }
  .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:.9rem; color:var(--accent2); }
  .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(--border); }  /* 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.2) saturate(1.08); box-shadow:0 6px 16px rgba(0,0,0,.35); }
  .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:#F59E0B; 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:#160c02; }
  .f-step .f-label { font-size:.8rem; font-weight:600; opacity:.82; }
  .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(--accent2); }

  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:.76rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border); }
  td { border-bottom:1px solid var(--border); }
  td.r,th.r { text-align:right; }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--good); margin-right:8px; }

  .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:rgba(56,189,248,.16); color:#38BDF8; }
  .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(--accent); border-radius:10px; padding:15px 18px; margin-bottom:11px; }
  .item.warn { border-left-color:#F59E0B; }
  .item.good { border-left-color:#22C55E; }
  .item.info { border-left-color:var(--accent); }
  .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(--accent2); font-weight:600; }
  .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; }

  footer { margin-top:38px; 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; }
  /* tema claro: textos sobre o fundo (rodapé + meta do cabeçalho) ficam no marrom pra contrastar */
  body[data-tema="light"] footer, body[data-tema="light"] .header .meta { color:var(--ink); }

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

  /* barra lateral de plataforma (Meta Ads / Instagram) */
  body { padding-left:66px; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; width:66px; z-index:30;
    background:var(--card); border-right:1px solid var(--border);
    display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 0; }
  .sidebar button { width:50px; height:50px; border:0; border-radius:13px; cursor:pointer;
    background:transparent; display:flex; align-items:center; justify-content:center;
    opacity:.5; transition:.15s; }
  .sidebar button svg { width:26px; height:26px; transition:.15s; }
  .sidebar button:hover { opacity:1; background:var(--card2); filter:brightness(1.3) saturate(1.15); }
  .sidebar button.on { opacity:1; background:var(--card2); }

  /* miniatura de post/story nas tabelas */
  .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);}

  /* 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:58px; height:58px; background:var(--accent); color:#160c02; border:0; border-radius:50%; cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.4); transition:.15s; }
  .fab:hover{ filter:brightness(1.08); transform:translateY(-2px); }
  .fab svg{ width:26px; height:26px; }
  .fab:disabled{ cursor:wait; }
  .fab.loading svg{ display:none; }
  .fab.loading::after{ content:""; width:22px; height:22px; border:3px solid rgba(22,12,2,.35); border-top-color:#160c02; border-radius:50%; animation:spin .7s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  @page{ margin:0; }
  @media print{
    html, body{ background:var(--bg) !important; padding-left:0 !important; }
    .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; }
    /* não cortar cards/tabelas/gráficos no meio da quebra de página */
    .panel, .kpi, .hl, table, .chart, .pie-wrap{ break-inside:avoid; }
    .section-title{ break-after:avoid; }
  }

  @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;}
    body{padding-left:54px;} .sidebar{width:54px;} .sidebar button{width:44px;height:48px;}
    .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;}
  }

  /* ---- 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; }
  }

  /* 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; }