/* ============================================================================
   shell.css — Fase 3: porta a ESTRUTURA do financeiro (layout.css) e o polimento
   de componentes para as classes REAIS do portal. Consome tokens. Carrega após
   refino.css. Sem reescrever markup das views; o app.js (toggle/collapse) intacto.
   Fonte da verdade: /app/financeiro-portal/design-export/ (layout.css)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   SHELL — sidebar navy PROFUNDO (brand-900), 236px; o elemento mais visível.
   ---------------------------------------------------------------------------- */
.app{ grid-template-columns:236px 1fr; }
.app.sidebar-collapsed{ grid-template-columns:64px 1fr; }

.sidebar{
  background:var(--brand-900);           /* #15294d — navy profundo, igual ao financeiro */
  color:rgba(255,255,255,.76);
}
.sidebar-topo{ border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-marca{ color:#fff; }
.sidebar-rodape{ border-top:1px solid rgba(255,255,255,.08); color:#6f7da0; }

/* itens do menu */
.sidebar-nav a{
  color:rgba(255,255,255,.76); font-weight:500; border-radius:var(--r-md); margin:1px 0;
}
.sidebar-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
/* ativo = gradiente navy-azul + anel interno + barra azul à esquerda (assinatura) */
.sidebar-nav a.ativo{
  background:linear-gradient(90deg,rgba(43,92,184,.42),rgba(43,92,184,.16));
  color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(90,131,201,.34);
}
.sidebar-nav a.ativo::before{ background:#5a83c9; }   /* barra azul (refino punha branca) */
.sidebar-nav .titulo-secao{ color:#7f8db0; }

/* ----------------------------------------------------------------------------
   TOPBAR — hierarquia: eyebrow pequeno + título grande (igual ao .top .crumb b)
   ---------------------------------------------------------------------------- */
.topo{ padding:10px 26px; }
.topo-esquerda{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.topo-crumb{ font-size:11px; color:var(--text-muted); font-weight:500; }
.topo-titulo{ font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--text); }

/* ----------------------------------------------------------------------------
   CONTEÚDO — respiro do financeiro (26px) e título de página com mais presença
   ---------------------------------------------------------------------------- */
.conteudo{ padding:26px; }
.conteudo > h1{ letter-spacing:-.01em; }

/* ----------------------------------------------------------------------------
   CARDS DE MÓDULO (hero do Início) — raio grande, sombra em camadas, lift no
   hover, e ícone (emoji) dentro de um chip navy p/ parecer intencional.
   ---------------------------------------------------------------------------- */
.grade-modulos{ gap:18px; }
.card-modulo{
  border-radius:var(--r-xl);
  box-shadow:var(--sh-1);
  padding:22px;
  gap:4px;
}
.card-modulo:hover{
  box-shadow:var(--sh-3);
  border-color:var(--brand-500);
  transform:translateY(-3px);
}
.card-icone{
  width:46px; height:46px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); background:var(--brand-50);
  transition:background var(--t) var(--ease), transform var(--t) var(--ease-spring);
}
.card-icone svg{ width:24px; height:24px; color:var(--brand-600); }   /* navy forte sobre chip pálido */
.card-modulo:hover .card-icone{ transform:scale(1.06); }
/* legibilidade garantida do texto do card (independente de tema/animação) */
.card-nome{ font-size:15px; font-weight:700; color:var(--text); }
.card-descricao{ color:var(--text-muted); }

/* --- ESCURO: chip mais claro p/ o ícone destacar; ícone azul-claro; texto mais legível --- */
[data-theme="dark"] .card-icone{ background:var(--brand-100); }       /* #1c2e52 — separa do card #1a2130 */
[data-theme="dark"] .card-icone svg{ color:#9dbcfa; }                 /* azul claro, alto contraste */
[data-theme="dark"] .card-modulo:hover .card-icone{ background:#24386a; }
[data-theme="dark"] .card-descricao{ color:var(--gray-600); }         /* #aeb8cc — mais claro que o muted */

/* KPI cards (admin) — alinhar elevação/raio ao financeiro */
.kpi-card{ border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.kpi-card:hover{ box-shadow:var(--sh-2); }

@media (prefers-reduced-motion: reduce){
  .card-modulo:hover{ transform:none; }
  .card-modulo:hover .card-icone{ transform:none; }
}

/* ----------------------------------------------------------------------------
   MOBILE — manter o overlay da sidebar coerente com a nova largura (236px)
   ---------------------------------------------------------------------------- */
@media (max-width:900px){
  .app:not(.sidebar-collapsed) .sidebar{ width:236px; }
  .conteudo{ padding:16px; }
  .topo{ padding:10px 16px; }
}