/* ============================================================
   CRIS — Camada Premium "Copiloto Fiscal" · v3 · 19/06/2026
   Carregada POR ÚLTIMO. Override 100% VISUAL (não toca lógica/JS).
   Reversível: remover os <link>/<script> premium do index.html.
   QA: sem texto vazando, sobreposto ou cortado (nowrap+ellipsis nos
   pontos de risco; grids responsivos; min-width:0 nos filhos flex/grid).
   ============================================================ */

:root{
  --title:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono','Menlo',monospace;
  --pp-gold:#C9A227; --pp-gold-deep:#A8821C; --pp-gold-dark:#8B6914;
  --pp-gold-light:#F5E9C0; --pp-gold-xlight:#FBF5E0;
  --pp-ink:#14110A; --pp-paper:#EEEDEA; --pp-line:#E5E2D9; --pp-line-soft:#EFEDE7;
  --pp-ok:#0E7A4F; --pp-ok-bg:#E4F4EC; --pp-danger:#B4231B; --pp-danger-bg:#FBE9E7;
  --pp-sh-s:0 1px 2px rgba(20,17,10,.05); --pp-sh-m:0 6px 20px rgba(20,17,10,.08);
  --pp-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 0. Menu lateral — alinhamento à esquerda (mantido da v2) ---------- */
.sidebar nav .menu-item:not(.has-submenu){ justify-content: flex-start !important; }
.sidebar nav .menu-item .ti{ margin-right: 0; flex: 0 0 auto; }

/* ---------- 1. Base "papel" + tipografia editorial ---------- */
main{ background: var(--pp-paper) !important; }
#view-title, #view-title-mobile{ font-family: var(--title) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.section > h2, .ck-name{ font-family: var(--title) !important; letter-spacing: -.01em; }

/* Números em mono tabular — assinatura "extrato de banca" */
.pf-value, .value, .ck-gv, .fin-kpi-value, .card .value, .saldo-valor, .num-mono, td.num, [data-tabular]{
  font-family: var(--mono) !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ============================================================
   2. COCKPIT — painel de instrumentos vivo do CRIS
   ============================================================ */
.ck{ position:relative; overflow:hidden; border-radius:20px; padding:20px 24px; margin-bottom:16px; color:#eef0f3;
  background:radial-gradient(120% 160% at 12% 0%,#20242d 0%,#141821 46%,#0d1017 100%);
  border:1px solid #23272f; box-shadow:var(--pp-sh-m); }
.ck::before{ content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(rgba(201,162,39,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(201,162,39,.06) 1px,transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(80% 120% at 10% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(80% 120% at 10% 0%,#000 30%,transparent 75%); }
.ck::after{ content:''; position:absolute; top:-40%; left:-12%; width:55%; height:180%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(201,162,39,.12),transparent); animation:ckSweep 9s ease-in-out infinite; }
@keyframes ckSweep{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(150%)} }
.ck-row{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:22px; flex-wrap:wrap; }
.ck-left{ min-width:min(280px,100%); flex:1 1 280px; }
.ck-brand{ display:flex; align-items:center; gap:11px; }
.ck-id{ min-width:0; }
.ck-orb{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:conic-gradient(from 220deg,var(--pp-gold),#7a5e10,var(--pp-gold)); box-shadow:0 0 0 4px rgba(201,162,39,.12); animation:ckSpin 7s linear infinite; }
.ck-orb i{ font-size:18px; color:#1a1500; animation:ckSpin 7s linear infinite reverse; }
@keyframes ckSpin{ to{transform:rotate(360deg)} }
.ck-name{ font-size:19px; font-weight:800; color:#fff; }
.ck-name span{ color:var(--pp-gold); }
.ck-status{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#9fe4bf; background:rgba(16,122,79,.16); border:1px solid rgba(16,122,79,.34); padding:3px 10px; border-radius:30px; margin-top:6px; }
.ck-pulse{ width:8px; height:8px; border-radius:50%; background:#2fd07e; position:relative; flex:0 0 auto; }
.ck-pulse::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid #2fd07e; animation:ckPing 1.6s var(--pp-ease) infinite; }
@keyframes ckPing{ 0%{transform:scale(.6);opacity:.8} 100%{transform:scale(1.9);opacity:0} }
.ck-narr{ margin-top:14px; font-family:var(--mono); font-size:12.5px; color:#cfd3da; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-narr-lbl{ color:var(--pp-gold); font-weight:700; }
.ck-cur{ display:inline-block; width:7px; background:var(--pp-gold); margin-left:1px; animation:ckBlink 1s steps(1) infinite; }
@keyframes ckBlink{ 50%{opacity:0} }
.ck-gauges{ display:flex; gap:11px; flex-wrap:wrap; }
.ck-gauge{ background:rgba(255,255,255,.035); border:1px solid rgba(201,162,39,.15); border-radius:13px; padding:11px 14px; min-width:104px; }
.ck-gl{ display:flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#8b919b; white-space:nowrap; }
.ck-gl .ti{ font-size:13px; color:var(--pp-gold); }
.ck-gv{ font-size:21px; font-weight:700; color:#fff; margin-top:6px; white-space:nowrap; }
.ck-gv.ckmoney{ font-size:18px; }
.ck-gv.ckmoney.pos{ color:#5fdb9b; } .ck-gv.ckmoney.neg{ color:#ff9b91; }

/* ============================================================
   3. DASHBOARD — cards reais com a cara do preview
   ============================================================ */
/* Sub-abas do dashboard → barra editorial com sublinhado dourado */
.dash-tabs{ border-bottom:1px solid var(--pp-line) !important; gap:2px !important; background:transparent !important; box-shadow:none !important; padding-bottom:0 !important; flex-wrap:wrap; }
.dash-tab{ position:relative; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  color:#6b7079 !important; font-family:var(--title) !important; font-weight:600 !important; padding:11px 14px !important; margin:0 2px -1px 0 !important; }
.dash-tab:hover{ color:var(--pp-ink) !important; background:transparent !important; }
.dash-tab.active{ color:var(--pp-ink) !important; }
.dash-tab.active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; background:var(--pp-gold); border-radius:3px; }

/* Cards de status (Tarefas hoje / Lembretes / A pagar / Atrasadas) */
.pf-cards{ gap:14px !important; }
.pf-card{ background:#fff !important; border:1px solid var(--pp-line) !important; border-radius:16px !important;
  box-shadow:var(--pp-sh-s) !important; padding:16px 17px !important; min-width:0;
  transition:transform .2s var(--pp-ease),box-shadow .2s var(--pp-ease),border-color .2s var(--pp-ease) !important; }
.pf-card:hover{ transform:translateY(-3px); box-shadow:var(--pp-sh-m) !important; border-color:#dcd7c9 !important; }
.pf-icon{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:20px;
  background:var(--pp-gold-xlight); border:1px solid var(--pp-gold-light); flex:0 0 auto; }
.pf-label{ font-size:11px !important; font-weight:700 !important; letter-spacing:.08em; text-transform:uppercase; color:#7a7f88 !important; }
.pf-value{ font-size:23px !important; font-weight:700 !important; color:var(--pp-ink) !important; line-height:1.15; word-break:normal; }
.pf-value.red{ color:var(--pp-danger) !important; }
.pf-card .sub{ font-size:12px; }
.pf-saldo{ background:#fff !important; }

/* Próximos 7 dias */
.pf-venc{ border:1px solid var(--pp-line) !important; border-radius:13px !important; background:#fff !important;
  transition:transform .16s var(--pp-ease),box-shadow .16s var(--pp-ease),border-color .16s var(--pp-ease) !important; min-width:0; }
.pf-venc:hover{ transform:translateY(-2px); border-color:var(--pp-gold-light) !important; box-shadow:var(--pp-sh-s) !important; }
.pf-venc-icon{ flex:0 0 auto; }
.pf-venc-info{ min-width:0; }
.pf-venc-desc{ font-weight:600; color:var(--pp-ink); overflow:hidden; text-overflow:ellipsis; }
.pf-venc-meta{ color:#7a7f88; }

/* Alertas inteligentes */
.pf-insight{ background:#fff !important; border:1px solid var(--pp-line) !important; border-left-width:4px !important; border-radius:12px !important; min-width:0; }
.pf-insight-txt{ min-width:0; }

/* Cards "Mês vigente" e genéricos */
.section .card{ border:1px solid var(--pp-line) !important; border-radius:14px !important; box-shadow:var(--pp-sh-s); }
.section .card h3{ font-size:11px !important; font-weight:700 !important; letter-spacing:.07em; text-transform:uppercase; color:#7a7f88 !important; }
.card .value{ font-size:26px !important; font-weight:700 !important; line-height:1.12; }
.card .value.gold{ color:var(--pp-gold-dark) !important; }

/* Atividade recente (stories) — molduras premium */
.stories-nav{ border:1px solid var(--pp-line) !important; background:#fff !important; color:#6b7079 !important; box-shadow:var(--pp-sh-s); }
.stories-nav:hover{ border-color:var(--pp-gold) !important; color:var(--pp-gold-dark) !important; }
.filtros-tipo-chip{ border-radius:9px; }

/* ============================================================
   4. FINANCEIRO — KPIs + sub-abas (mantido/refinado da v2)
   ============================================================ */
.fin-kpi-grid{ gap:14px !important; }
.fin-kpi{ background:#fff !important; border:1px solid var(--pp-line) !important; border-radius:16px !important; padding:18px !important; box-shadow:var(--pp-sh-s) !important; min-width:0;
  transition:transform .2s var(--pp-ease),box-shadow .2s var(--pp-ease) !important; }
.fin-kpi:hover{ transform:translateY(-2px); box-shadow:var(--pp-sh-m) !important; }
.fin-kpi-label{ font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; color:#7a7f88 !important; font-weight:700; }
.fin-kpi-value{ font-size:25px !important; line-height:1.14; margin-top:8px; }

.subtabs{ border-bottom:1px solid var(--pp-line) !important; display:flex !important; flex-wrap:wrap; gap:2px; background:transparent !important; box-shadow:none !important; }
.subtab{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; color:#6b7079 !important;
  font-family:var(--title) !important; font-weight:600 !important; padding:11px 14px !important; margin:0 2px -1px 0 !important; position:relative; }
.subtab:hover{ color:var(--pp-ink) !important; background:transparent !important; }
.subtab.active{ color:var(--pp-ink) !important; }
.subtab.active::after{ content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; background:var(--pp-gold); border-radius:3px; }
.subtab .ti{ font-size:16px; vertical-align:-3px; margin-right:6px; opacity:.85; }
.subtab.active .ti{ color:var(--pp-gold-deep); opacity:1; }

/* ============================================================
   5. Superfícies, botões, movimento calmo
   ============================================================ */
.card, .stat-card, .task-card, .dashboard-card, .proj-card{ border:1px solid var(--pp-line); box-shadow:var(--pp-sh-s); border-radius:12px; }
.card::before{ display:none !important; }
@media (hover:hover){
  .card:hover, .stat-card:hover, .tr-card:hover, .task-card:hover{ transform:none; border-color:var(--pp-gold-deep); box-shadow:var(--pp-sh-m); }
}
.fab, .tarefa-fab{ animation:none !important; }
.btn:not(.ghost):not(.small):not(.danger){ background:var(--pp-gold) !important; color:#1a1500 !important; box-shadow:none !important; }
.btn:not(.ghost):not(.small):not(.danger):hover{ background:var(--pp-gold-deep) !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(201,162,39,.28) !important; }

/* ---------- 6. Ícones de linha (sidebar/abas) ---------- */
.menu-item .ti{ font-size:18px; width:22px; text-align:center; vertical-align:-3px; opacity:.9; display:inline-block; }
.menu-item.active .ti{ color:var(--pp-gold-light); opacity:1; }
.mode-btn .ti{ font-size:15px; vertical-align:-2px; margin-right:5px; }
.bottom-nav .ico .ti{ font-size:22px; }
.topbar-actions .ti{ font-size:16px; vertical-align:-3px; }

/* ---------- 7. Foco acessível ---------- */
:focus-visible{ outline:2px solid var(--pp-gold); outline-offset:2px; }
::selection{ background:rgba(201,162,39,.22); color:var(--pp-ink); }

/* ---------- 8. Responsivo (anti-overflow no mobile) ---------- */
@media (max-width:640px){
  .ck{ padding:16px 16px; }
  .ck-gauges{ width:100%; }
  .ck-gauge{ flex:1 1 calc(50% - 6px); min-width:0; }
  .ck-gauge:last-child{ flex-basis:100%; }   /* "Resultado mês" ocupa a linha toda — nunca corta valor longo */
  .ck-gv{ font-size:19px; } .ck-gv.ckmoney{ font-size:17px; }
  .ck-narr{ font-size:11.5px; }
}

/* ---------- 9. Entrada suave (fade+rise) dos cards a cada render ---------- */
/* 🆕 21/06 — vanilla, sem lib; reaplica a cada re-render do #content. Reduced-motion-safe.
   NÃO toca no .ck (que já tem animação própria de cockpit). */
@keyframes ppRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
#content .pf-card,
#content .pf-venc,
#content .pf-insight,
#content .fin-kpi{ animation:ppRise .42s cubic-bezier(.22,.61,.36,1) both; }
#content .pf-card:nth-child(2){ animation-delay:.05s; }
#content .pf-card:nth-child(3){ animation-delay:.10s; }
#content .pf-card:nth-child(4){ animation-delay:.15s; }
#content .pf-venc:nth-child(n+2),
#content .pf-insight:nth-child(n+2){ animation-delay:.06s; }
@media (prefers-reduced-motion: reduce){
  #content .pf-card,#content .pf-venc,#content .pf-insight,#content .fin-kpi{ animation:none; }
}