/* ============================================================
   TEMA WISE / STUDIO CONTROL  (camada de identidade)
   Sobrepõe os tokens do app.css para a paleta clara (creme+lima+
   floresta) e troca a fonte para Google Sans. Carregado por ÚLTIMO,
   então vence o app.css. Não edita o app.css (reversível: basta
   remover o <link> desta folha).
   ============================================================ */

/* ---- Beausite Classic (fonte oficial) + Google Sans (fallback) ---- */
@font-face{font-family:'Beausite Classic';src:local('Beausite Classic'),local('Beausite Classic Regular'),url('../fonts/BeausiteClassic-Regular.ttf') format('truetype');font-weight:1 450;font-display:swap}
@font-face{font-family:'Beausite Classic';src:local('Beausite Classic Semibold'),url('../fonts/BeausiteClassic-Semibold.ttf') format('truetype');font-weight:451 1000;font-display:swap}

/* Os @font-face de 'Google Sans' viviam aqui e apontavam para tres .ttf que
   nunca existiram na pasta fonts/ - so ha as duas Beausite. Davam 404 em toda
   visita. O nome continua na pilha de fontes abaixo: quem tiver Google Sans
   instalada usa, quem nao tiver cai na Segoe UI, que ja era o que acontecia. */

/* ---- Tokens (paleta Wise) ---- */
:root{
  --accent:#9FE870;
  --accent2:#163300;
  --lime:#9FE870;
  --lime-lt:rgba(159,232,112,.16);
  --accent-soft:rgba(159,232,112,.16);
  --accent-mid:#8ADC5C;
  --lime-mid:#8ADC5C;
  --grad-start:#9FE870;
  --grad-end:#7BC94F;
  --gradient:linear-gradient(135deg,#9FE870,#7BC94F);
  --forest:#163300;
  --ink:#0E0F0C;
  --lime-card:#C9F16F;
  --amber-bg:#FBEFD2;

  --green:#2F7C33;
  --green-lt:rgba(47,124,51,.12);
  --green-soft:rgba(47,124,51,.12);
  --amber:#8A5A00;
  --amber-lt:#FBEFD2;
  --amber-soft:#FBEFD2;
  --red:#A8200D;
  --red-lt:rgba(168,32,13,.10);

  --bg:#f7f6f2;
  --sidebar-w:320px;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --surface2:#F7F6F3;
  --sidebar-bg:#FFFFFF;
  --sidebar-border:#E9E8E3;
  --border:#E9E8E3;
  --border2:#EFEEEA;
  --gray-bd:#E9E8E3;
  --gray-lt:#F2F1EE;
  --gray-md:#9A9C97;
  --gray-dk:#6E706C;

  --text:#0E0F0C;
  --text2:#3A3B37;
  --text3:#6E706C;
  --text4:#9A9C97;

  --r:16px;
  --r-sm:12px;
  --radius:12px;
  --radius-lg:16px;

  --font:'Beausite Classic','Google Sans','Segoe UI',Roboto,sans-serif;
  --mono:'Beausite Classic','Google Sans','Segoe UI',Roboto,sans-serif;
}
body{font-family:'Beausite Classic','Google Sans','Segoe UI',sans-serif}

/* números tabulares apertados como no protótipo */
.mono,.kpi-num,.big-num,.donut-val{font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---- Sidebar: escura -> clara ---- */
.sidebar{background:var(--bg);width:var(--sidebar-w)}
.sb-glow{display:none!important}
#top-banner{display:none!important}   /* faixa de navegação do topo removida */
.sb-wordmark{color:var(--text)!important}
.sb-wordmark span{color:#fff!important;background:#000;border-radius:6px;padding:0 5px}
/* logo em preto e branco (era caixa lime + ícone preto) */
.sb-logo-mark{background:#000!important}
.sb-logo-mark svg rect{fill:#000!important}
.sb-logo-mark svg polygon{fill:#fff!important}
.nav-item{background:transparent!important;border-color:transparent!important;border-radius:999px}
.nav-label{color:#706f6b!important}
.nav-item.active{background:#ffffff!important;border-color:transparent!important;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.nav-item.active .nav-label{color:#000000!important}
.nav-item.active .nav-icon,.nav-item.active .nav-num{color:#2f22a8!important}
.nav-item:not(.active) .nav-icon{color:#706f6b}
/* ícones da sidebar um pouco maiores */
.nav-icon{width:22px!important;height:22px!important}
.nav-icon svg{width:20px!important;height:20px!important}
.nav-item:not(.active):hover{background:#ffffff!important}
.nav-item:not(.active):hover .nav-label{color:#1d1c18!important}
.sb-name{color:var(--text)!important}
.sb-role{color:var(--text3)!important}
.sb-footer{border-top:1px solid var(--sidebar-border)}
.sb-avatar{background:var(--forest);color:var(--lime)}
.sb-icon-btn{border:1px solid var(--sidebar-border);color:var(--text3)}
.sb-icon-btn:hover{border-color:var(--forest);color:var(--forest);background:var(--bg)}
.sb-badge,.ap-nav-tag{background:var(--bg);color:var(--text3)}

/* ---- Botões primários: lima neon -> floresta (texto branco) ---- */
.btn-save,.btn-add{background:var(--forest);color:#fff}
.btn-save:hover,.btn-add:hover{background:var(--forest);opacity:.9}

/* ---- Topbar pills e cards herdam os tokens novos automaticamente ---- */
.tb-greeting{color:var(--text)}

/* ---- Topbar: busca + conta (estilo protótipo) ---- */
.wise-topbar{display:flex;align-items:center;gap:14px}
.wise-topbar .tb-left,.wise-topbar .tb-right,.wise-topbar .plugin-pill,.wise-topbar .tb-pill{display:none!important}
.wise-search{flex:1;max-width:400px;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--text3)}
.wise-search input{border:none;background:transparent;outline:none;font-family:inherit;font-size:13.5px;color:var(--text);width:100%}
.wise-account{margin-left:auto;display:flex;align-items:center;gap:10px}
.wa-acc-txt{text-align:right;line-height:1.25}
.wa-acc-name{font-weight:700;font-size:13px;color:var(--text)}
.wa-acc-date{font-size:11px;color:var(--text3)}
.wa-acc-av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
/* seletor de mês (topbar) */
.wise-month{display:flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 6px;flex-shrink:0}
.wm-arrow{border:none;background:transparent;color:var(--text3);width:26px;height:26px;border-radius:999px;cursor:pointer;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit}
.wm-arrow:hover{background:var(--bg);color:var(--forest)}
.wm-label{font-size:13px;font-weight:700;color:var(--text);padding:0 6px;min-width:66px;text-align:center}
/* card tempo por projeto */
#wise-time-body{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.wt-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.wt-name{font-size:13px;font-weight:400;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-h{font-size:12.5px;font-weight:700;color:var(--forest);flex-shrink:0}
.wt-bar{height:6px;background:var(--bg);border-radius:999px;overflow:hidden}
.wt-bar>i{display:block;height:100%;background:linear-gradient(90deg,#9FE870,#7BC94F);border-radius:999px}
/* Verde de marca -> verde do gráfico. O bundle escreve o gradiente #D7FE03,#83AF3B
   inline em várias barras SEM classe (participação, resumo, etc.); alcançamos pelo
   seletor de atributo, trocando o fundo pelo verde do gráfico. */
.al-fill,.area-perf-bar-fill,[style*="#D7FE03" i]{background:linear-gradient(90deg,#9FE870,#7BC94F)!important}
.wise-time-empty{font-size:12.5px;color:var(--text3);margin-top:12px}

/* ---- Rodapé sidebar: botão Configurações + logout ---- */
.wise-footer-btns{display:flex;gap:8px;align-items:center}
.wise-cfg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px;border:1px solid var(--sidebar-border);background:var(--card);border-radius:999px;font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.wise-cfg-btn:hover{background:var(--bg)}
.wise-cfg-btn svg{width:16px;height:16px}
.wise-logout{width:40px;height:40px;flex-shrink:0;border:1px solid var(--sidebar-border);background:var(--card);border-radius:999px;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.wise-logout:hover{border-color:var(--forest);color:var(--forest);background:var(--bg)}
.wise-logout svg{width:15px;height:15px}

/* ---- Faixa tempo real (plugin) ---- */
.wise-livebar{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--amber-bg);border:1px solid var(--amber-bg);border-radius:var(--radius);padding:14px 20px;margin-bottom:16px}
.wl-txt{display:flex;flex-direction:column;gap:2px;color:var(--amber);min-width:0}
.wl-txt strong{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.wl-txt span{font-size:12.5px;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:wlblink 1.8s ease infinite}
@keyframes wlblink{50%{opacity:.25}}
.wl-btn{flex-shrink:0;background:var(--amber);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.wl-btn:hover{opacity:.9}

/* ---- Barra de progresso do card de ação ---- */
.wa-meter{height:6px;background:rgba(255,255,255,.25);border-radius:999px;margin-top:14px;overflow:hidden}
.wa-meter>i{display:block;height:100%;background:#fff;border-radius:999px;transition:width .3s}
.wa-scale{display:flex;justify-content:space-between;font-size:10.5px;color:#fff;opacity:.8;margin-top:5px}

/* ---- Hero: recebido do mês + meta ---- */
.wise-hero{padding:2px 2px 16px}
.wh-rotulo{font-size:13px;color:var(--text3);font-weight:500;margin-bottom:4px}
.wh-big{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.wh-big .num{font-size:clamp(37px,3.4vw,61px);font-weight:700;letter-spacing:-.05em;color:var(--text)}
.wh-unit{font-size:14px;color:var(--text3)}
.meta-edit{border:none;background:transparent;color:var(--text);font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.03em;border-bottom:1.5px dashed var(--line);padding:0 1px;cursor:pointer}
.meta-edit:hover{border-bottom-color:var(--forest)}
.meta-input{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.03em;border:none;border-bottom:1.5px solid var(--forest);width:8ch;outline:none;background:transparent;color:var(--text)}
.wh-equiv{font-size:13px;color:var(--text3);margin-top:3px}
.wh-equiv b{color:var(--green);font-weight:700}
.wh-equiv.abaixo b{color:var(--text)}

/* ---- Coluna direita: estrategista ---- */
.wise-right{display:flex;flex-direction:column;gap:16px}
.wise-right .rc-title{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px;color:var(--text)}
.wise-right .rc-title .rc-sub{font-size:12px;color:var(--text3);font-weight:400}
.wise-chart{margin-top:10px;position:relative}
.wise-chart svg{width:100%;height:auto;display:block}
.wise-chart-tip{position:absolute;transform:translate(-50%,-125%);background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 11px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px rgba(14,15,12,.10);display:none;z-index:2}
.wise-chart-tip small{display:block;color:var(--text3);font-size:10.5px}
.wise-chart-tip b{font-size:13px;font-weight:700;letter-spacing:-.03em}
.wise-chart-x{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--text3)}
.wise-chart-sub.up{color:var(--green)}
.wise-chart-sub.down{color:var(--red)}
.wise-chart-note{font-size:12px;color:var(--text3);line-height:1.45;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.wise-chart-note b{color:var(--forest);font-weight:700}
.wise-insight{display:flex;flex-direction:column}
.wise-ins-row{display:flex;gap:11px;align-items:flex-start;margin-top:14px}
.wise-ins-ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wise-ins-ico svg{width:22px;height:22px}
.wi-meta{color:#2f22a8}
.wi-alert{color:var(--red)}
.wi-time{color:var(--amber)}
.wi-star{color:var(--forest)}
.wise-ins-txt{font-size:12.5px;line-height:1.5;color:var(--text)}
.wise-ins-txt strong{font-weight:700}
.wise-meta-bar{height:6px;background:rgba(14,15,12,.1);border-radius:999px;margin-top:7px;overflow:hidden}
.wise-meta-bar>i{display:block;height:100%;background:var(--forest);border-radius:999px;transition:width .3s}
.wise-meta-bar>i.batida{background:var(--green)}
.wise-acao{background:#1a1258!important;border-color:#1a1258!important}
#acao-slides{min-height:252px}
.wa-slide{display:none}
.wa-slide.on{display:block}
.wa-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wa-ico{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92)}
.wa-ico svg{width:22px;height:22px}
.wa-rot{font-size:13px;color:rgba(255,255,255,.85);font-weight:400}
.wa-word{font-size:26px;font-weight:900;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.wa-txt{font-size:13px;color:rgba(255,255,255,.9);line-height:1.55}
.wa-links{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.wa-link{background:#fff;color:#1a1258;border:none;border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer}
.wa-link.ghost{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.wa-link:hover{opacity:.9}
.wa-dots{display:flex;gap:6px;margin-top:16px}
.wa-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);border:none;padding:0;cursor:pointer;transition:background .15s,width .15s}
.wa-dot.on{background:#fff;width:20px;border-radius:999px}
@media (min-width:1500px){ .wise-acao .wa-word{font-size:32px} }
/* remove blocos antigos do dashboard (substituídos) */
.bottom-row,#pay-dash-card{display:none!important}

/* ---- Layout fixo: bloco de projetos rola por dentro e alinha com a coluna direita ---- */
.tbl-card{max-height:none!important;min-height:0}
.tbl-card .tbl-wrap{flex:1;min-height:0;overflow-y:auto}
.wise-table thead th{position:sticky;top:0;background:var(--card);z-index:2}

/* Desktop: página de altura fixa. mid-row preenche a tela; as duas colunas
   têm a mesma altura; os 3 cards da direita ficam com alturas iguais; a
   tabela rola por dentro e termina junto com o card de ação. */
@media (min-width:861px){
  /* rola só quando a tela for baixa demais para o conteúdo mínimo caber */
  #page-dashboard{display:flex;flex-direction:column;overflow-y:auto}
  .wise-livebar{flex:none}
  /* flex:1 0 auto = cresce pra preencher telas altas, mas nunca encolhe
     abaixo do conteúdo mínimo (aí a página rola em vez de cortar) */
  .mid-row{flex:1 0 auto;align-items:stretch;grid-template-rows:minmax(auto,1fr)}
  .wise-main-col{min-height:0}
  .wise-main-col .tbl-card{flex:1 1 0}
  /* 3 cards com alturas iguais; min-height garante que nada corte em telas baixas */
  .right-col.wise-right > .card{flex:1 1 0;min-height:280px;overflow:hidden}
  .wise-acao{display:flex;flex-direction:column}
  #acao-slides{flex:1;min-height:0}
  .wise-time{display:flex;flex-direction:column}
  .wise-time > #wise-time-body{flex:1;min-height:0;overflow-y:auto}
}

/* ---- Filtros rápidos (chips) ---- */
.wise-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.wise-chip{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.wise-chip:hover{background:var(--bg)}
.wise-chip.ativo{background:var(--forest);border-color:var(--forest);color:#fff;font-weight:700}
/* filtros antigos da tabela (substituídos pelos chips acima) */
#dash-filter-tabs,#filters-wrap{display:none!important}

/* ---- Layout 2 colunas: principal (hero+chips+cards+tabela) + estrategista ---- */
.mid-row{display:grid!important;grid-template-columns:minmax(0,1fr) clamp(340px,26vw,430px)!important;gap:18px!important;margin:0!important}
.wise-main-col{display:flex;flex-direction:column;min-width:0}
.wise-main-col .wise-receitas{margin:16px 0}
.wise-main-col .tbl-card{margin-top:2px}

/* ---- 3 cards de receita ---- */
.wise-receitas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.wrec{padding:16px;display:flex;flex-direction:column;gap:12px}
.wr-head{display:flex;align-items:center;gap:10px}
.wr-ico{width:38px;height:38px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--forest);flex-shrink:0}
.wr-ico svg{width:19px;height:19px}
.wr-name{font-weight:700;font-size:14px;letter-spacing:-.01em}
.wr-name small{display:block;font-weight:400;color:var(--text3);font-size:11px;letter-spacing:0}
.wr-val{font-size:24px;font-weight:700;letter-spacing:-.05em;color:var(--text)}
.wr-sub{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:6px}
.wr-sub .up{color:var(--green);font-weight:700}
.wr-sub .down{color:var(--red);font-weight:700}
@media (min-width:1500px){ .wise-receitas{gap:18px} .wrec{padding:24px} .wr-ico{width:42px;height:42px} .wr-val{font-size:30px} }

/* ---- Tabela de projetos (estilo protótipo, 4 colunas) ---- */
.wise-table{width:100%;border-collapse:collapse;font-size:14px}
.wise-table th,.wise-table td{padding:12px 8px;text-align:right;border-bottom:1px solid var(--line)}
.wise-table th:first-child,.wise-table td:first-child{text-align:left}
.wise-table th{color:var(--text3);font-size:12px;font-weight:500}
/* vence o app.css (thead th:last-child{text-align:center}) - alinha cabeçalho ao conteúdo */
.wise-table thead th{text-align:right}
.wise-table thead th:first-child{text-align:left}
.wise-table tbody tr:last-child td{border-bottom:none}
.wise-row{cursor:pointer}
.wise-row:hover{background:var(--bg)}
.wise-table .cel-nome{display:flex;align-items:center;gap:11px;font-weight:500;text-align:left}
.wise-table .cel-nome small{display:block;color:var(--text3);font-weight:400;font-size:11px}
.wise-table .tipo-ico{width:40px;height:40px;border-radius:50%;background:var(--bg);color:var(--forest);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wise-table .tipo-ico svg{width:20px;height:20px}
.wise-table td.valor{font-weight:700;letter-spacing:-.05em}
.wise-fin{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;justify-content:flex-end;width:100%}
.wise-fin svg{width:15px;height:15px}
.wise-fin.wf-ok{color:var(--green)}
.wise-fin.wf-and{color:var(--text3);font-weight:500}
.wise-fin.wf-atr{color:var(--red)}

/* ============================================================
   ESCALA DE FONTES (4 degraus) - incorporada do preview validado
   Hero · Títulos 20 · Corpo 12 · Legendas 11 · sidebar 13
   ============================================================ */
.nav-label{font-weight:400}
/* CORPO = 12px (base) */
body{font-size:12px}
.nav-item,.nav-label,.sb-name,.wise-cfg-btn,
.wise-table,.wise-table .cel-nome,.wr-name,.wise-fin,
.wise-ins-txt,.wa-txt,.wise-search input,.wa-acc-name,.wl-txt strong,
.wa-link,.wt-name{font-size:12px}
/* LEGENDAS = 11px */
.wh-rotulo,.rotulo,.wa-rot,.wh-unit,.meta-edit,.meta-input,.wh-equiv,
.wr-name small,.wr-sub,.wise-chip,
.wise-table th,.wise-table .cel-nome small,.t-nota,
.wise-right .rc-title .rc-sub,.wise-chart-x,.wise-chart-note,
.wt-h,.wa-scale,.wl-txt span,.sb-badge,.ap-nav-tag,.sb-role,
.wa-acc-date,.wm-label{font-size:11px}
/* TÍTULOS DOS CARDS = 20px */
.wr-val,.wa-word,.wise-right .rc-title,.tbl-card .card-title,.card-title{font-size:20px}
/* HERO */
.wh-big .num{font-size:clamp(42px,3.4vw,54px)}
/* SIDEBAR = 13px (vence o corpo) */
.nav-item,.nav-label,.sb-name{font-size:13px!important}
/* trava a escala >=1500 (sem saltos) */
@media (min-width:1500px){
  .wr-val,.wa-word{font-size:20px}
  .wise-right .rc-title{font-size:20px}
  .wise-table th{font-size:11px}
  .wise-table td,.wise-table td.valor{font-size:12px}
}