/* ═══════════════════════════════════════════════════════════════════════════════
   CRESCERP — padrão visual comum (Bento azul + vermelho da marca Crescer)
   Fonte canônica: CRESCERP_HUB/padrao-visual/  ·  regra em PADRAO-VISUAL.md
   Tokens = crescertask/docs/design-bento.md (v03 Bento aprovada, versão do rebranding).
   NÃO editar a cópia dentro de um app: editar aqui e rodar  node padrao-visual/sincronizar.mjs
   ═══════════════════════════════════════════════════════════════════════════════ */
:root{
  /* neutros frios azulados — nunca cinza puro */
  --cx-paper:#eef1f8; --cx-paper2:#e7ecf6; --cx-tile:#ffffff; --cx-tile2:#f7f9fc;
  --cx-ink:#0c1a33; --cx-ink2:#1e2b45; --cx-muted:#5b6b86; --cx-faint:#93a0b8;
  --cx-line:#e4e9f3; --cx-line2:#eef2f9; --cx-line-f:#d3dbea;
  /* marca */
  --cx-navy:#0a2a5e; --cx-navy2:#123c8a; --cx-navy3:#1a4aa8; --cx-navy-deep:#081f45; --cx-navy-soft:#eaeff8;
  --cx-red:#d5202c; --cx-red-dark:#a3161f; --cx-red-soft:#fdecec;
  /* apoios semânticos (só para estado, nunca decoração) */
  --cx-amber:#d97706; --cx-amber-txt:#92400e; --cx-amber-soft:#fcf1de;
  --cx-green:#059669; --cx-green-txt:#065f46; --cx-green-soft:#e3f5ee;
  --cx-teal:#0d9488; --cx-teal-soft:#e2f6f3;
  /* forma */
  --cx-r:22px; --cx-r2:16px; --cx-r3:12px;
  --cx-sh:0 1px 2px rgba(12,26,51,.05), 0 10px 26px -18px rgba(12,26,51,.28);
  --cx-sh-lg:0 26px 60px -30px rgba(12,26,51,.5);
  --cx-font:"Plus Jakarta Sans", Inter, system-ui, "Segoe UI", Arial, sans-serif;
  --cx-side-w:252px;
  --cx-dur:180ms; --cx-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--cx-font); color:var(--cx-ink); line-height:1.5;
  background:var(--cx-paper2) linear-gradient(180deg,var(--cx-paper) 0%,var(--cx-paper2) 100%) fixed;
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
:focus-visible{outline:2px solid var(--cx-red); outline-offset:2px; border-radius:6px}
.cx-eyebrow{font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--cx-muted)}
.cx-num{font-variant-numeric:tabular-nums}

/* ── tile Bento ───────────────────────────────────────────────────────────── */
.cx-tile{background:var(--cx-tile); border:1px solid var(--cx-line); border-radius:var(--cx-r); box-shadow:var(--cx-sh); padding:22px; min-width:0}
.cx-hero{background:linear-gradient(150deg,var(--cx-navy) 0%,var(--cx-navy3) 100%); color:#fff; border:0}

/* ── shell: coluna lateral + área principal ───────────────────────────────── */
.cx-shell{display:grid; grid-template-columns:var(--cx-side-w) minmax(0,1fr); min-height:100dvh}
.cx-main{min-width:0; display:flex; flex-direction:column}

.cx-side{
  position:sticky; top:0; height:100dvh; overflow-y:auto; scrollbar-width:none; z-index:50;
  display:flex; flex-direction:column; padding:20px 14px 14px; color:#c9d6ef;
  background:linear-gradient(180deg,#081f45 0%,#0a2a5e 55%,#0d3271 100%);
}
.cx-side::-webkit-scrollbar{display:none}
.cx-logo{display:block; padding:0 6px 16px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12); text-decoration:none}
/* chip branco atrás do logo: a marca é navy + vermelho e sumiria no fundo navy */
.cx-logo img{display:block; width:100%; max-width:176px; height:auto; background:#fff; border-radius:12px; padding:8px 12px; box-shadow:0 2px 10px rgba(0,0,0,.18)}
.cx-logo b{display:block; margin-top:12px; color:#fff; font-size:16px; font-weight:800; letter-spacing:-.01em}
.cx-logo small{display:block; font-size:11.5px; font-weight:600; color:#9db2d6}
.cx-grupo{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7d92bd; margin:16px 10px 6px}
.cx-itens{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.cx-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 11px; border:0; border-radius:11px;
  background:none; color:#c9d6ef; font:700 13px/1.3 var(--cx-font); text-align:left; text-decoration:none;
  transition:background var(--cx-dur) var(--cx-ease), color var(--cx-dur);
}
.cx-item svg{flex:none; color:#8ea6d2; transition:color var(--cx-dur)}
.cx-item:hover{background:rgba(255,255,255,.08); color:#fff}
.cx-item:hover svg{color:#fff}
.cx-item.on,.cx-item[aria-current="true"],.cx-item[aria-current="page"]{background:#fff; color:var(--cx-navy); box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.cx-item.on svg,.cx-item[aria-current="true"] svg,.cx-item[aria-current="page"] svg{color:var(--cx-red)}
.cx-item .cx-n{font-weight:800; font-size:11.5px; color:#8ea6d2; min-width:18px; font-variant-numeric:tabular-nums}
.cx-item[aria-current="true"] .cx-n{color:var(--cx-red)}
.cx-item .cx-conta{margin-left:auto; font-size:11px; font-weight:800; border-radius:999px; padding:1px 8px; background:rgba(255,255,255,.12); color:#dbe6f7; font-variant-numeric:tabular-nums}
.cx-item[aria-current="true"] .cx-conta{background:var(--cx-navy-soft); color:var(--cx-navy)}
.cx-item .cx-rot{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-dica{font-size:12px; color:#9db2d6; padding:4px 11px; line-height:1.45}
.cx-user{margin-top:auto; display:flex; align-items:center; gap:10px; padding:14px 6px 2px; border-top:1px solid rgba(255,255,255,.12)}
.cx-av{width:34px; height:34px; border-radius:11px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:12px}
.cx-user-txt{min-width:0; flex:1}
.cx-user-txt b{display:block; font-size:12px; color:#fff; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cx-user-txt small{display:block; font-size:11px; color:#9db2d6; font-weight:600}
.cx-sair{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:none; color:#dbe6f7; cursor:pointer}
.cx-sair:hover{background:rgba(213,32,44,.9); border-color:transparent; color:#fff}

/* barra do topo da área principal (branca translúcida) */
.cx-topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 28px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cx-line);
}
.cx-titulo{min-width:0}
.cx-titulo h1{margin:2px 0 0; font-size:18px; font-weight:800; color:var(--cx-navy); letter-spacing:-.01em; line-height:1.15}
.cx-menu{display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--cx-line); background:#fff; color:var(--cx-navy); place-items:center; cursor:pointer; flex:none}
.cx-scrim{display:none}

/* celular: a coluna vira gaveta, aberta pelo botão de menu da barra */
@media (max-width:900px){
  .cx-shell{grid-template-columns:minmax(0,1fr)}
  .cx-side{position:fixed; left:0; top:0; bottom:0; width:min(280px,84vw); transform:translateX(-102%);
    transition:transform 220ms var(--cx-ease); box-shadow:var(--cx-sh-lg)}
  body.cx-menu-aberto .cx-side{transform:none}
  body.cx-menu-aberto .cx-scrim{display:block; position:fixed; inset:0; z-index:45; background:rgba(8,31,69,.45)}
  body.cx-menu-aberto{overflow:hidden}
  .cx-menu{display:grid}
  .cx-topbar{padding:10px 14px; gap:10px}
}
@media (prefers-reduced-motion:reduce){ .cx-side,.cx-item{transition:none} }
@media print{ .cx-side,.cx-topbar,.cx-scrim{display:none !important} .cx-shell{display:block} }