/* ═══════════════════════════════════════════════════════════════════
   J2A BANKER CRM — Tema Direção A
   Etapa 2: Painel do Personal Banker

   Carregado por último em cada tela. Sobrescreve pelos seletores que
   já existem. Nenhum CSS antigo foi editado, nenhum PHP foi tocado.

   Para desfazer: apague este arquivo.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --j2a-navy:#12385f; --j2a-navy-esc:#0d2540; --j2a-navy-cl:#1f5a91;
  --j2a-ouro:#f2a900; --j2a-ouro-esc:#a8720a;
  --j2a-bg:#f6f9fc; --j2a-borda:#e9eff6; --j2a-borda-2:#dbe5ef;
  --j2a-texto:#16283d; --j2a-mudo:#7c8da0; --j2a-fraco:#a7b8ca;
  --j2a-ok:#14794f; --j2a-aviso:#a8720a; --j2a-erro:#b4302a;
  --j2a-r:16px; --j2a-t:.18s;

  /* tokens do painel */
  --co-bg:#f6f9fc; --co-card:#fff; --co-border:#e9eff6;
  --co-text:#16283d; --co-muted:#7c8da0;
  --co-primary:#12385f; --co-danger:#b4302a; --co-warning:#a8720a;
}

/* ── Cabeçalho do painel ───────────────────────────────────────── */

.co-hero{
  padding:28px 30px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}

.co-eyebrow,
.co-head span{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}

.co-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}

/* O nome do banker em dourado.
   O h1 é "Bom dia, Jarbas." — o PHP não envolve o nome em nenhuma
   tag, então não dá para colorir só ele por CSS sem mexer no PHP.
   Solução: um degradê que muda de cor no ponto onde o nome começa
   não é confiável. Aqui o h1 inteiro fica marinho e o destaque vem
   do <em> que o PHP passa a gerar (ver alteração em index.php). */
.co-hero h1 em,
.co-hero h1 .j2a-nome{
  font-style:normal !important;
  color:var(--j2a-ouro) !important;
}

.co-hero p{
  color:var(--j2a-mudo) !important;
  font-size:13.5px !important;
  margin-top:3px !important;
}

/* ── Botões ────────────────────────────────────────────────────── */

.co-btn{
  min-height:40px !important;
  border-radius:11px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.co-btn.primary{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
}
.co-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}
.co-btn.ghost{
  background:#fff !important;
  border-color:var(--j2a-borda-2) !important;
  color:var(--j2a-texto) !important;
}
.co-btn.ghost:hover{
  background:#f4f8fc !important;
  border-color:var(--j2a-navy-cl) !important;
}

/* ── Indicadores ───────────────────────────────────────────────── */

.co-summary > *,
.co-panel{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}

.co-summary > *{
  position:relative;
  overflow:hidden;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t);
}
/* faixa colorida na lateral, como no esboço */
.co-summary > *::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--j2a-navy);
}
.co-summary > *:nth-child(2)::before{ background:var(--j2a-ouro); }
.co-summary > *:nth-child(3)::before{ background:var(--j2a-ok); }
.co-summary > *:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 24px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}

.co-summary strong,
.co-panel strong{ letter-spacing:-.03em; }

/* ── Abas ──────────────────────────────────────────────────────── */

.co-tabs{
  padding:4px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:13px !important;
  gap:3px !important;
}
.co-tab-btn{
  min-height:36px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  color:var(--j2a-mudo) !important;
  transition:background var(--j2a-t), color var(--j2a-t) !important;
}
.co-tab-btn:hover{ background:#f4f8fc !important; color:var(--j2a-navy) !important; }
.co-tab-btn.active{
  background:var(--j2a-navy) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(18,56,95,.2) !important;
}

/* ── Atalhos ───────────────────────────────────────────────────── */

.co-shortcuts a{
  border:1px solid var(--j2a-borda) !important;
  border-radius:14px !important;
  font-size:12px !important;
  font-weight:650 !important;
  color:var(--j2a-texto) !important;
  transition:background var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.co-shortcuts a:hover{
  background:#f6f9fc !important;
  border-color:var(--j2a-navy-cl) !important;
  transform:translateY(-2px);
}
.co-shortcuts a i{ color:var(--j2a-navy) !important; }

/* ── Tabelas ───────────────────────────────────────────────────── */

.co-table th{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.co-table td{
  border-bottom:1px solid #f2f6fa !important;
  font-size:13.5px !important;
}
.co-table tbody tr{ transition:background var(--j2a-t); }
.co-table tbody tr:hover{ background:#fbfcfe !important; }

/* ── Metas e progresso ─────────────────────────────────────────── */

.co-goal,
.co-meta-card{
  border:1px solid var(--j2a-borda) !important;
  border-radius:14px !important;
}
.co-progress > *,
.co-meta-barra > *{ background:var(--j2a-navy) !important; }
.co-bar-value{ background:var(--j2a-navy) !important; }

/* ── Estado vazio ──────────────────────────────────────────────── */

.co-empty{
  color:var(--j2a-mudo) !important;
  border-radius:14px !important;
}

@media (prefers-reduced-motion: reduce){
  .co-btn,.co-summary>*,.co-shortcuts a,.co-tab-btn,.co-table tbody tr{
    transition:none !important;
  }
  .co-btn.primary:hover,.co-summary>*:hover,.co-shortcuts a:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 3 — CLIENTES
   Os indicadores do topo são filtros clicáveis e cada cor tem
   significado (atrasadas, hoje, sem visita, sem contato, potencial).
   As cores foram harmonizadas com a paleta, NÃO unificadas: perder
   a distinção aqui seria perder informação.
   ═══════════════════════════════════════════════════════════════════ */

.clientes-unificado{ padding:26px 28px 40px !important; }

/* ── Cabeçalho ─────────────────────────────────────────────────── */

.clientes-hero span{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}
.clientes-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.clientes-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

/* ── Botões ────────────────────────────────────────────────────── */

.clientes-btn{
  min-height:40px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  color:var(--j2a-texto) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.clientes-btn:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }

.clientes-btn.primary{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
}
.clientes-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}
.clientes-btn.danger{ color:var(--j2a-erro) !important; border-color:#f0cfcd !important; }
.clientes-btn.danger:hover{ background:#fdf3f2 !important; border-color:var(--j2a-erro) !important; }

/* ── Indicadores / filtros ─────────────────────────────────────── */

.clientes-kpis{ gap:12px !important; }

.clientes-kpis a{
  padding:16px 17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-top:3px solid var(--j2a-navy-cl) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.clientes-kpis a:hover{
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}

/* cada cor continua significando o que significava, em tom mais sóbrio */
.clientes-kpis .atrasadas   { border-top-color:#c2452f !important; }
.clientes-kpis .hoje        { border-top-color:var(--j2a-ouro) !important; }
.clientes-kpis .sem-visita  { border-top-color:#8095ab !important; }
.clientes-kpis .sem-contato { border-top-color:#d97a2b !important; }
.clientes-kpis .potencial   { border-top-color:var(--j2a-ok) !important; }

.clientes-kpis span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.clientes-kpis strong{
  margin:8px 0 3px !important;
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.clientes-kpis small{ color:var(--j2a-mudo) !important; font-size:11.5px !important; }

/* estado ativo: fundo suave + anel, mantendo a cor do grupo */
.clientes-kpis a.ativo{
  background:#f2f7fc !important;
  border-color:var(--j2a-navy-cl) !important;
  box-shadow:inset 0 0 0 1px var(--j2a-navy-cl) !important;
}
.clientes-kpis a.atrasadas.ativo  { background:#fdf4f3 !important; box-shadow:inset 0 0 0 1px #c2452f !important; }
.clientes-kpis a.hoje.ativo       { background:#fdf7e9 !important; box-shadow:inset 0 0 0 1px var(--j2a-ouro) !important; }
.clientes-kpis a.sem-visita.ativo { background:#f5f8fb !important; box-shadow:inset 0 0 0 1px #8095ab !important; }
.clientes-kpis a.sem-contato.ativo{ background:#fdf5ee !important; box-shadow:inset 0 0 0 1px #d97a2b !important; }
.clientes-kpis a.potencial.ativo  { background:#eff8f3 !important; box-shadow:inset 0 0 0 1px var(--j2a-ok) !important; }

.clientes-kpi-filtro-ativo a{ color:var(--j2a-navy) !important; }

/* ── Filtros ───────────────────────────────────────────────────── */

.clientes-filtros{
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
}
.clientes-filtros summary{ padding:15px 18px !important; font-weight:700 !important; }
.clientes-filtros summary:hover{ background:#fbfcfe !important; }

/* ── Tabela ────────────────────────────────────────────────────── */

.clientes-tabela-card{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.clientes-tabela th{
  padding:11px 13px !important;
  color:var(--j2a-fraco) !important;
  background:#fbfcfe !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.clientes-tabela td{
  border-bottom:1px solid #f2f6fa !important;
  color:var(--j2a-texto) !important;
  font-size:13px !important;
}
.clientes-tabela tbody tr{ transition:background var(--j2a-t); }
.clientes-tabela tbody tr:hover{ background:#fbfcfe !important; }
.clientes-tabela small{ color:var(--j2a-mudo) !important; }

.cliente-identidade a{
  color:var(--j2a-navy) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
  transition:color var(--j2a-t);
}
.cliente-identidade a:hover{ color:var(--j2a-ouro-esc) !important; }

.cliente-money{ font-variant-numeric:tabular-nums; font-weight:700 !important; letter-spacing:-.02em; }

/* ── Barra de seleção em lote ──────────────────────────────────── */

.clientes-lote-barra{
  border-radius:14px !important;
  border:1px solid var(--j2a-borda-2) !important;
}

/* ── Menu de exportação ────────────────────────────────────────── */

.clientes-export-menu{
  border:1px solid var(--j2a-borda) !important;
  border-radius:13px !important;
  box-shadow:0 10px 30px rgba(16,40,61,.13) !important;
}
.clientes-export-menu a:hover{ background:#f4f8fc !important; }

/* ── Aviso e estado vazio ──────────────────────────────────────── */

.clientes-alert{
  border:1px solid #cfe8db !important;
  border-radius:13px !important;
  color:var(--j2a-ok) !important;
  background:#eff8f3 !important;
  font-weight:650 !important;
}
.clientes-vazio{ color:var(--j2a-mudo) !important; }

@media (prefers-reduced-motion: reduce){
  .clientes-btn,.clientes-kpis a,.clientes-tabela tbody tr,.cliente-identidade a{
    transition:none !important;
  }
  .clientes-btn.primary:hover,.clientes-kpis a:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 4 — CRÉDITO
   Duas telas: o painel de crédito (credito/index.php) e a esteira
   com kanban (credito/esteira/index.php). Compartilham o mesmo CSS.

   Aqui também há cor com significado: kpi-urgente e kpi-ok, e as
   colunas do kanban. Foram harmonizadas, não achatadas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho ─────────────────────────────────────────────────── */

.esteira-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.esteira-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

.eyebrow{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}

/* ── Botões ────────────────────────────────────────────────────── */

.btn-ghost{
  padding:10px 16px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  color:var(--j2a-texto) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), border-color var(--j2a-t) !important;
}
.btn-ghost:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }

.esteira-page .btn-primary,
.esteira-hero .btn-primary{
  border-radius:11px !important;
  background:var(--j2a-navy) !important;
  color:#fff !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.esteira-page .btn-primary:hover,
.esteira-hero .btn-primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}

/* ── Indicadores ───────────────────────────────────────────────── */

.painel-kpis{ gap:12px !important; }

.painel-kpis .kpi,
.kpi{
  padding:16px 17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-top:3px solid var(--j2a-navy-cl) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.kpi:hover{ box-shadow:0 8px 22px rgba(16,40,61,.08) !important; transform:translateY(-1px); }

/* Urgente e ok continuam se distinguindo — é o alerta do módulo.
   Seletor duplicado (.kpi.kpi-urgente) de propósito: a regra
   genérica .kpi acima tem a mesma especificidade e venceria por
   vir depois. Duplicar a classe eleva a especificidade. */
.kpi.kpi-urgente,
.painel-kpis .kpi.kpi-urgente{ border-top-color:#c2452f !important; }
.kpi.kpi-urgente strong,
.painel-kpis .kpi.kpi-urgente strong{ color:#c2452f !important; }
.kpi.kpi-ok,
.painel-kpis .kpi.kpi-ok{ border-top-color:var(--j2a-ok) !important; }
.kpi.kpi-ok strong,
.painel-kpis .kpi.kpi-ok strong{ color:var(--j2a-ok) !important; }

.kpi span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.kpi strong{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.kpi small{ color:var(--j2a-mudo) !important; font-size:11.5px !important; }

/* ── Lista "o que precisa de mim agora" ────────────────────────── */

.painel-hoje{
  margin-top:20px !important;
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.painel-hoje-head strong{ font-size:15.5px !important; letter-spacing:-.02em; }

.painel-item{
  border:1px solid var(--j2a-borda) !important;
  border-radius:13px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.painel-item:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 6px 18px rgba(16,40,61,.07) !important;
  transform:translateY(-1px);
}
.pi-cliente strong{ font-size:13.5px !important; font-weight:700 !important;
  color:var(--j2a-navy) !important; letter-spacing:-.015em; }
.pi-cliente span{ color:var(--j2a-fraco) !important; }
.pi-estagio{ color:var(--j2a-mudo) !important; font-size:11.5px !important; }
.pi-motivo{ font-size:12.5px !important; }

.painel-tudo-ok{
  border-radius:14px !important;
  background:#eff8f3 !important;
  border:1px solid #cfe8db !important;
}
.painel-tudo-ok strong{ color:var(--j2a-ok) !important; }

.painel-atalhos{
  border-top:1px solid var(--j2a-borda) !important;
}
.painel-atalhos a{
  color:var(--j2a-navy) !important;
  font-size:12.5px !important;
  transition:color var(--j2a-t);
}
.painel-atalhos a:hover{ color:var(--j2a-ouro-esc) !important; }

/* ── Esteira: filtro, kanban e tabela ──────────────────────────── */

.esteira-filter{
  padding:15px 16px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
}

.kanban{ gap:11px !important; }

.kanban-col{
  padding:12px !important;
  background:#f4f8fc !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
}
.kanban-col-head{
  padding-bottom:9px !important;
  margin-bottom:9px !important;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.kanban-col-head strong{
  font-size:12px !important;
  font-weight:750 !important;
  color:var(--j2a-navy) !important;
  letter-spacing:-.01em;
}
.kanban-count{
  color:var(--j2a-mudo) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
}
.kanban-cards > *{
  border:1px solid var(--j2a-borda) !important;
  border-radius:12px !important;
  background:#fff !important;
  transition:box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.kanban-cards > *:hover{
  box-shadow:0 6px 18px rgba(16,40,61,.09) !important;
  transform:translateY(-1px);
}
.kanban-vazio{ color:var(--j2a-fraco) !important; font-size:11.5px !important; }

.esteira-tabela-wrap{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.esteira-tabela th{
  padding:11px 12px !important;
  color:var(--j2a-fraco) !important;
  background:#fbfcfe !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.esteira-tabela td{ border-bottom:1px solid #f2f6fa !important; }
.esteira-tabela tbody tr{ transition:background var(--j2a-t); }
.esteira-tabela tbody tr:hover{ background:#fbfcfe !important; }

.empty-state{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  color:var(--j2a-mudo) !important;
}
.alerta{ color:var(--j2a-erro) !important; }

@media (prefers-reduced-motion: reduce){
  .kpi,.painel-item,.kanban-cards>*,.btn-ghost,.esteira-tabela tbody tr{ transition:none !important; }
  .kpi:hover,.painel-item:hover,.kanban-cards>*:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 5 — COMERCIAL
   Duas telas: o hub comercial (comercial/index.php, CSS
   refatoracao-v45) e a Inteligência Comercial
   (inteligencia-comercial/index.php, CSS próprio).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hub comercial ─────────────────────────────────────────────── */

.ra-hero{
  padding:26px 28px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.ra-hero span{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}
.ra-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.ra-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

.ra-btn{
  padding:10px 16px !important;
  border-radius:11px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.ra-btn.primary{
  background:var(--j2a-navy) !important;
  border:1px solid var(--j2a-navy) !important;
  color:#fff !important;
}
.ra-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}
.ra-btn.ghost{
  background:#fff !important;
  border:1px solid var(--j2a-borda-2) !important;
  color:var(--j2a-texto) !important;
}
.ra-btn.ghost:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }

.ra-grid{ gap:13px !important; }

.ra-card{
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.ra-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 24px rgba(16,40,61,.08) !important;
  transform:translateY(-2px);
}
.ra-card strong{ color:var(--j2a-navy) !important; letter-spacing:-.02em; }
.ra-card p,.ra-card span,.ra-card small{ color:var(--j2a-mudo) !important; }

/* A nota lateral era verde-azulada; passa a usar o dourado,
   que no sistema significa "preste atenção nisto". */
.ra-note{
  padding:15px 18px !important;
  border-left:3px solid var(--j2a-ouro) !important;
  border-radius:0 12px 12px 0 !important;
  background:#fdf7e9 !important;
  color:var(--j2a-texto) !important;
}

/* ── Inteligência Comercial ────────────────────────────────────── */

.page-header h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.page-header p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

.ic-kpis{ gap:12px !important; }

.ic-kpis a{
  padding:17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.ic-kpis a:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.ic-kpis strong{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.ic-kpis span,
.ic-kpis small{ color:var(--j2a-mudo) !important; }

.ic-layout{ gap:16px !important; }

.card{
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}

.ic-toolbar input,
.ic-toolbar select{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
}

.section-title strong,
.section-title h2{
  font-size:15.5px !important;
  font-weight:750 !important;
  letter-spacing:-.02em;
  color:var(--j2a-navy-esc) !important;
}
.section-title span{ color:var(--j2a-mudo) !important; font-size:12px !important; }

.client-list article,
.cad-list article{
  padding:14px 0 !important;
  border-bottom:1px solid #f2f6fa !important;
}
.client-list strong,
.cad-list strong{
  color:var(--j2a-navy) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
}
.client-list span,.client-list small,
.cad-list span,.cad-list small{ color:var(--j2a-mudo) !important; font-size:12px !important; }

/* Os três botões de ação por cliente eram roxo-lavanda, cor que não
   pertence à paleta. Passam a marinho sobre fundo azul-claro. */
.client-actions a{
  padding:7px 11px !important;
  border-radius:9px !important;
  background:#eef4fa !important;
  color:var(--j2a-navy) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), color var(--j2a-t) !important;
}
.client-actions a:hover{ background:var(--j2a-navy) !important; color:#fff !important; }

.empty{ color:var(--j2a-mudo) !important; }

@media (prefers-reduced-motion: reduce){
  .ra-card,.ra-btn,.ic-kpis a,.client-actions a{ transition:none !important; }
  .ra-card:hover,.ra-btn.primary:hover,.ic-kpis a:hover{ transform:none !important; }
}


/* ── Etapa 5, correções apuradas na renderização ───────────────── */

/* O "Acessar →" e o rótulo do cartão eram verde-azulados, cor que
   saiu da paleta quando o marinho virou o institucional. */
.ra-card small{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  letter-spacing:.16em !important;
}
.ra-card b{
  color:var(--j2a-navy) !important;
  font-size:12.5px !important;
  font-weight:750 !important;
  transition:color var(--j2a-t);
}
.ra-card:hover b{ color:var(--j2a-ouro-esc) !important; }

/* .btn genérico da Inteligência Comercial: o primário era verde e o
   secundário quase preto. Aqui não dá para usar o seletor .btn
   sozinho, porque ele existe em meio sistema — daí o escopo. */
/* width:auto em todos: o style.css dá width:100% ao .btn-primary
   por causa do formulário de login, e isso vaza para toda barra de
   ações onde o botão convive com outros elementos. */
.page-header .btn,
.head-actions .btn,
.ic-toolbar .btn,
.ic-layout .btn,
.client-actions .btn{
  width:auto !important;
  /* flex-shrink padrão comprimia o botão abaixo do próprio texto,
     que vazava para fora da caixa */
  flex:0 0 auto !important;
  white-space:nowrap !important;
  padding:11px 18px !important;
  height:auto !important;
  min-height:40px !important;
}

.page-header .btn.btn-primary,
.head-actions .btn.btn-primary,
.ic-toolbar .btn.btn-primary,
.ic-layout .btn.btn-primary{
  border-radius:11px !important;
  background:var(--j2a-navy) !important;
  border:1px solid var(--j2a-navy) !important;
  color:#fff !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), box-shadow var(--j2a-t) !important;
}
.page-header .btn.btn-primary:hover,
.head-actions .btn.btn-primary:hover,
.ic-toolbar .btn.btn-primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
}
.page-header .btn.btn-secondary,
.head-actions .btn.btn-secondary,
.ic-layout .btn.btn-secondary{
  border-radius:11px !important;
  background:#fff !important;
  border:1px solid var(--j2a-borda-2) !important;
  color:var(--j2a-texto) !important;
  font-weight:700 !important;
}
.page-header .btn.btn-secondary:hover,
.head-actions .btn.btn-secondary:hover{
  background:#f4f8fc !important;
  border-color:var(--j2a-navy-cl) !important;
}

/* O campo de busca ficava com 24px: o CSS original dá width:100% ao
   input E ao select, e com flex:1 os dois disputam o mesmo espaço
   enquanto o botão cresce. Definindo base mínima em cada um, os três
   voltam a dividir a barra. */
.ic-toolbar form{ align-items:stretch !important; }
.ic-toolbar input{ flex:2 1 260px !important; width:auto !important; min-width:200px !important; }
.ic-toolbar select{ flex:1 1 190px !important; width:auto !important; min-width:160px !important; }
.ic-toolbar .btn{ flex:0 0 auto !important; padding:10px 24px !important;
  /* O style.css define .btn-primary{width:100%} para o formulário de
     login. Dentro de uma barra flex isso engole a linha inteira. */
  width:auto !important; }

.eyebrow,
.page-header .eyebrow{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 6 — PRODUTOS
   Catálogo de produtos financeiros. Cartões em grade, badges de
   categoria e situação, filtros no topo.
   ═══════════════════════════════════════════════════════════════════ */

.produtos-hero h1,
.form-shell > header h1,
.product-detail > header h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.produtos-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

/* O eyebrow era verde-azulado e grande demais para um rótulo */
.produtos-page .eyebrow{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}

/* ── Indicadores do topo ───────────────────────────────────────── */

.product-stats{ gap:12px !important; }

.product-stats article{
  padding:17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  background:#fff !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.product-stats article:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.product-stats strong{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.product-stats span,
.product-stats small{ color:var(--j2a-mudo) !important; }

/* ── Filtros ───────────────────────────────────────────────────── */

.product-filters{
  padding:14px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  background:#fff !important;
}
.product-filters input,
.product-filters select{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
}
/* O botão de filtrar era quase preto (#0f1a2d) */
.product-filters button{
  border-radius:11px !important;
  background:var(--j2a-navy) !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), box-shadow var(--j2a-t) !important;
}
.product-filters button:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
}

/* ── Cartões de produto ────────────────────────────────────────── */

.product-grid{ gap:14px !important; }

.product-card{
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.product-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 24px rgba(16,40,61,.08) !important;
  transform:translateY(-2px);
}
/* produto inativo continua apagado — é informação, não estilo */
.product-card.is-inactive{ opacity:.6 !important; }
.product-card.is-inactive:hover{ transform:none !important; }

.product-card h2,
.product-card h3{
  color:var(--j2a-navy) !important;
  font-size:16px !important;
  font-weight:750 !important;
  letter-spacing:-.02em;
}
.product-card p{ color:var(--j2a-mudo) !important; font-size:13px !important; }

.product-info{ gap:12px !important; }
.product-info strong{
  color:var(--j2a-navy-esc) !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.product-info span,
.product-info small{ color:var(--j2a-mudo) !important; font-size:11.5px !important; }

.target{
  padding:12px 13px !important;
  background:#f6f9fc !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:12px !important;
  font-size:12.5px !important;
  color:var(--j2a-texto) !important;
}

/* ── Badges ────────────────────────────────────────────────────── */

.category-badge{
  padding:5px 11px !important;
  border-radius:8px !important;
  color:var(--j2a-navy) !important;
  background:#e9f0f7 !important;
  font-size:10.5px !important;
  font-weight:750 !important;
  letter-spacing:.02em;
}
.status-badge{
  padding:5px 11px !important;
  border-radius:8px !important;
  color:var(--j2a-ok) !important;
  background:#e4f3ec !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}
/* inativo precisa se distinguir do ativo */
.status-badge.is-inactive,
.status-badge.inativo{
  color:var(--j2a-mudo) !important;
  background:#eef3f8 !important;
}

.empty-products{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  background:#fff !important;
  color:var(--j2a-mudo) !important;
}

/* botão principal da tela, mesmo tratamento das demais */
.produtos-page .btn-primary{
  width:auto !important;
  height:auto !important;
  min-height:40px !important;
  padding:11px 18px !important;
  border-radius:11px !important;
  background:var(--j2a-navy) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  transition:background var(--j2a-t), box-shadow var(--j2a-t) !important;
}
.produtos-page .btn-primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
}

@media (prefers-reduced-motion: reduce){
  .product-card,.product-stats article,.product-filters button{ transition:none !important; }
  .product-card:hover,.product-stats article:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 7 — VENCIMENTOS
   Os quatro indicadores do topo são um SEMÁFORO com significado
   explícito: vermelho urgente/vencido, laranja atenção, amarelo se
   aproximando, verde tranquilo. Os quatro níveis foram preservados
   e apenas harmonizados — achatar isso apagaria o alerta.

   Nesta etapa também entram .hub-btn e .hub-table, que vêm do
   hub-j2a.css e são compartilhados com o módulo Hub.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Indicadores: semáforo de quatro níveis ────────────────────── */

.pv-kpis{ gap:12px !important; }

.pv-kpi{
  padding:16px 17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-top:3px solid var(--j2a-borda-2) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.pv-kpi:hover{
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.pv-kpi span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.pv-kpi strong{
  margin-top:8px !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}

/* a faixa superior repete a cor do número: o nível fica legível
   mesmo de relance, sem precisar ler o rótulo */
.pv-kpi.vermelho{ border-top-color:#b4302a !important; }
.pv-kpi.vermelho strong{ color:#b4302a !important; }
.pv-kpi.laranja{ border-top-color:#c2601f !important; }
.pv-kpi.laranja strong{ color:#c2601f !important; }
.pv-kpi.amarelo{ border-top-color:var(--j2a-ouro) !important; }
.pv-kpi.amarelo strong{ color:var(--j2a-ouro-esc) !important; }
.pv-kpi.verde{ border-top-color:var(--j2a-ok) !important; }
.pv-kpi.verde strong{ color:var(--j2a-ok) !important; }

/* ── Badge da linha ────────────────────────────────────────────── */

.pv-badge{
  padding:5px 11px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}

/* ── Componentes compartilhados com o Hub ──────────────────────── */

.hub-btn{
  min-height:40px !important;
  padding:10px 16px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  color:var(--j2a-texto) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.hub-btn:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }

.hub-btn.primary{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
}
.hub-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}

.hub-table-wrap{
  padding:0 !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.hub-table th{
  padding:11px 16px !important;
  color:var(--j2a-fraco) !important;
  background:#fbfcfe !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.hub-table td{
  padding:13px 16px !important;
  border-bottom:1px solid #f2f6fa !important;
  font-size:13px !important;
}
.hub-table tbody tr{ transition:background var(--j2a-t); }
.hub-table tbody tr:hover{ background:#fbfcfe !important; }
.hub-table small{ color:var(--j2a-mudo) !important; }

.hub-table-action{
  color:var(--j2a-navy) !important;
  font-weight:750 !important;
  transition:color var(--j2a-t);
}
.hub-table-action:hover{ color:var(--j2a-ouro-esc) !important; }

.hub-alert{
  border-radius:13px !important;
  border:1px solid #cfe8db !important;
  background:#eff8f3 !important;
  color:var(--j2a-ok) !important;
  font-weight:650 !important;
}

/* ── Bloco "quer vender a carta" ───────────────────────────────── */

.venc-quer-vender{
  border:1px solid var(--j2a-borda) !important;
  border-left:3px solid var(--j2a-ouro) !important;
  border-radius:0 14px 14px 0 !important;
  background:#fdf7e9 !important;
}

@media (prefers-reduced-motion: reduce){
  .pv-kpi,.hub-btn,.hub-table tbody tr,.hub-table-action{ transition:none !important; }
  .pv-kpi:hover,.hub-btn.primary:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 7 — VENCIMENTOS
   Também alcança as classes hub-* (hub-j2a.css), usadas por 29
   arquivos: Vencimentos, Hub J2A, Admin Hub e Admin LGPD.

   Os indicadores pv-kpi têm QUATRO cores de urgência — vermelho,
   laranja, amarelo, verde — definidas dentro da própria página.
   São faixas de prazo. Foram harmonizadas, jamais unificadas.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Indicadores por urgência ──────────────────────────────────── */

.pv-kpis{ gap:11px !important; }

.pv-kpi{
  padding:16px 17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.pv-kpi:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.pv-kpi span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.pv-kpi strong{
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
  color:var(--j2a-navy-esc) !important;
}

/* Classe duplicada para vencer a regra genérica acima: cada faixa de
   prazo mantém sua cor, que é a informação principal da tela. */
.pv-kpi.pv-kpi.vermelho strong{ color:#b4302a !important; }
.pv-kpi.pv-kpi.laranja  strong{ color:#c05621 !important; }
.pv-kpi.pv-kpi.amarelo  strong{ color:var(--j2a-ouro-esc) !important; }
.pv-kpi.pv-kpi.verde    strong{ color:var(--j2a-ok) !important; }

.pv-badge{
  padding:5px 11px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}
.pv-badge.pv-vermelho{ background:#fbeae9 !important; color:#b4302a !important; }
.pv-badge.pv-laranja { background:#fdf1e8 !important; color:#c05621 !important; }
.pv-badge.pv-amarelo { background:#fdf7e9 !important; color:var(--j2a-ouro-esc) !important; }
.pv-badge.pv-verde   { background:#e4f3ec !important; color:var(--j2a-ok) !important; }

.venc-quer-vender{
  border:1px solid var(--j2a-borda) !important;
  border-radius:14px !important;
}

/* ── Classes hub-* (compartilhadas por 29 arquivos) ────────────── */

.hub-btn{
  min-height:40px !important;
  padding:10px 16px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  color:var(--j2a-texto) !important;
  background:#fff !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.hub-btn:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }

.hub-btn.primary{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
}
.hub-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}

.hub-table-wrap{
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.hub-table th{
  padding:11px 12px !important;
  color:var(--j2a-fraco) !important;
  background:#fbfcfe !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.hub-table td{
  padding:13px 12px !important;
  border-bottom:1px solid #f2f6fa !important;
  font-size:13px !important;
}
.hub-table tbody tr{ transition:background var(--j2a-t); }
.hub-table tbody tr:hover{ background:#fbfcfe !important; }

/* aviso de sucesso e de erro precisam continuar distintos */
.hub-alert{
  padding:13px 16px !important;
  border-radius:12px !important;
  border:1px solid #cfe8db !important;
  background:#eff8f3 !important;
  color:var(--j2a-ok) !important;
  font-weight:650 !important;
}
.hub-alert.hub-alert.error{
  border-color:#f0cfcd !important;
  background:#fbeae9 !important;
  color:var(--j2a-erro) !important;
}

@media (prefers-reduced-motion: reduce){
  .pv-kpi,.hub-btn,.hub-table tbody tr{ transition:none !important; }
  .pv-kpi:hover,.hub-btn.primary:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 8 — HUB J2A
   Seis páginas com o mesmo CSS: index, minhas recomendações,
   comissões, materiais, campanhas e gerar link.
   Os botões e a tabela já vieram na etapa anterior.
   ═══════════════════════════════════════════════════════════════════ */

.hub-hero{
  padding:26px 28px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.hub-hero span{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}
.hub-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.hub-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

/* ── Abas ──────────────────────────────────────────────────────── */

.hub-tabs{ gap:7px !important; }
.hub-tabs a{
  padding:9px 15px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:10px !important;
  color:var(--j2a-mudo) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), color var(--j2a-t), border-color var(--j2a-t) !important;
}
.hub-tabs a:hover{
  background:#f4f8fc !important;
  color:var(--j2a-navy) !important;
  border-color:var(--j2a-navy-cl) !important;
}
.hub-tabs a.hub-tabs a.ativo,
.hub-tabs a.ativo,
.hub-tabs a.is-active{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(18,56,95,.2) !important;
}

/* ── Indicadores ───────────────────────────────────────────────── */

.hub-stats{ gap:12px !important; }
.hub-stat{
  padding:17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.hub-stat:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.hub-stat strong{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.hub-stat span,
.hub-stat small{ color:var(--j2a-mudo) !important; }

/* ── Cartões ───────────────────────────────────────────────────── */

.hub-grid{ gap:14px !important; }

.hub-card{
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.hub-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 24px rgba(16,40,61,.08) !important;
  transform:translateY(-2px);
}
/* o rótulo do cartão era verde-azulado */
.hub-card small{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  letter-spacing:.16em !important;
}
.hub-card h2,.hub-card h3{
  color:var(--j2a-navy) !important;
  font-size:16px !important;
  font-weight:750 !important;
  letter-spacing:-.02em;
}
.hub-card p{ color:var(--j2a-mudo) !important; font-size:13px !important; }

.hub-meta{
  padding-top:13px !important;
  border-top:1px solid var(--j2a-borda) !important;
  color:var(--j2a-mudo) !important;
}
.hub-mini-label{ color:var(--j2a-mudo) !important; font-size:11px !important; }

/* ── Badge ─────────────────────────────────────────────────────── */

/* era roxo-lavanda (#eef2ff / #3730a3), fora da paleta */
.hub-badge{
  padding:5px 11px !important;
  border-radius:8px !important;
  background:#e9f0f7 !important;
  color:var(--j2a-navy) !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}

/* ── Diagnóstico: preço e comissão ─────────────────────────────── */

.hub-diag-header h2{
  color:var(--j2a-navy-esc) !important;
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:-.03em;
}
.hub-diag-preco{
  color:var(--j2a-navy-esc) !important;
  font-size:30px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.hub-diag-preco-label{ color:var(--j2a-mudo) !important; }

/* A comissão é o argumento comercial da tela: fica em dourado */
.hub-diag-comissao{ color:var(--j2a-mudo) !important; }
.hub-diag-comissao strong{ color:var(--j2a-ouro-esc) !important; font-weight:800 !important; }

.hub-diag-tag{
  border-radius:8px !important;
  background:var(--j2a-ouro) !important;
  color:var(--j2a-navy-esc) !important;
  font-weight:800 !important;
  letter-spacing:.04em;
}

.hub-diag-lista li{ color:var(--j2a-texto) !important; }

/* ── Formulários ───────────────────────────────────────────────── */

.hub-form-grid{ gap:14px !important; }
.hub-field label{
  color:var(--j2a-navy) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.hub-field input,
.hub-field select,
.hub-field textarea{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
}
.hub-search input{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
}

/* ── Ações na tabela ───────────────────────────────────────────── */

.hub-table-action{
  color:var(--j2a-navy) !important;
  font-weight:700 !important;
  font-size:12.5px !important;
  transition:color var(--j2a-t) !important;
}
.hub-table-action:hover{ color:var(--j2a-ouro-esc) !important; }
/* excluir precisa continuar vermelho */
.hub-table-action.hub-danger-link,
.hub-danger-link{ color:var(--j2a-erro) !important; }

.hub-empty{
  padding:34px !important;
  border:1px dashed var(--j2a-borda-2) !important;
  border-radius:18px !important;
  color:var(--j2a-mudo) !important;
}

@media (prefers-reduced-motion: reduce){
  .hub-card,.hub-stat,.hub-tabs a,.hub-table-action{ transition:none !important; }
  .hub-card:hover,.hub-stat:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 9 — HUB FINANCEIRO
   Oito páginas: index, produtos, comparador, oportunidades,
   oportunidade, nova oportunidade, parceiros e comissões.

   Este módulo tem tokens próprios (--hf-*). Aqui eles são
   redefinidos, o que já resolve boa parte das cores de uma vez.
   O --hf-teal era o verde institucional; passa a marinho.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --hf-navy:#12385f;
  --hf-blue:#1f5a91;
  --hf-teal:#12385f;
  --hf-gold:#f2a900;
  --hf-bg:#f6f9fc;
  --hf-border:#e9eff6;
  --hf-text:#16283d;
  --hf-muted:#7c8da0;
}

/* ── Cabeçalho ─────────────────────────────────────────────────── */

.hf-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.hf-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

.hf-kicker{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}

.hf-back{
  color:var(--j2a-mudo) !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  transition:color var(--j2a-t) !important;
}
.hf-back:hover{ color:var(--j2a-navy) !important; }

/* ── Botões ────────────────────────────────────────────────────── */

.hf-btn{
  min-height:40px !important;
  padding:10px 16px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--j2a-texto) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.hf-btn:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }
.hf-btn.primary{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
}
.hf-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}
.hf-btn.small{ min-height:34px !important; padding:7px 13px !important; font-size:11.5px !important; }

/* ── Abas ──────────────────────────────────────────────────────── */

.hf-tabs{
  padding:4px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:13px !important;
  gap:3px !important;
}
.hf-tabs a{
  border-radius:10px !important;
  color:var(--j2a-mudo) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), color var(--j2a-t) !important;
}
.hf-tabs a:hover{ background:#f4f8fc !important; color:var(--j2a-navy) !important; }
.hf-tabs a.hf-tabs a.active,
.hf-tabs a.active{
  background:var(--j2a-navy) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(18,56,95,.2) !important;
}

/* ── Indicadores e cartões ─────────────────────────────────────── */

.hf-kpis{ gap:11px !important; }

.hf-card{
  padding:18px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.hf-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.hf-card strong{ color:var(--j2a-navy-esc) !important; letter-spacing:-.03em; }
.hf-card span,.hf-card small{ color:var(--j2a-mudo) !important; }

.hf-card-grid{ gap:13px !important; }

.hf-summary{
  border:1px solid var(--j2a-borda) !important;
  border-radius:14px !important;
  overflow:hidden;
  background:var(--j2a-borda) !important;
}
.hf-summary strong{ color:var(--j2a-navy-esc) !important; letter-spacing:-.02em; }
.hf-summary span{ color:var(--j2a-mudo) !important; }

/* ── Listas e ranking ──────────────────────────────────────────── */

.hf-list.commissions > div,
.hf-ranking > div{ border-top:1px solid #f2f6fa !important; }
.hf-ranking strong{ color:var(--j2a-navy) !important; }
.hf-ranking small{ color:var(--j2a-mudo) !important; }

/* nome do parceiro era verde-azulado */
.partner{ color:var(--j2a-navy) !important; font-weight:700 !important; }

/* ── Tabelas ───────────────────────────────────────────────────── */

.hf-table-wrap{
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.hf-table th{
  color:var(--j2a-fraco) !important;
  background:#fbfcfe !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--j2a-borda) !important;
}
.hf-table td{ border-bottom:1px solid #f2f6fa !important; }
.hf-table tbody tr{ transition:background var(--j2a-t); }
.hf-table tbody tr:hover{ background:#fbfcfe !important; }

/* No comparador, a linha de resultado precisa se destacar */
.hf-compare-table .result td,
.result td{
  background:#f2f7fc !important;
  color:var(--j2a-navy-esc) !important;
  font-weight:750 !important;
}
.result.strong td{
  background:#fdf7e9 !important;
  color:var(--j2a-ouro-esc) !important;
  font-weight:800 !important;
}

/* As três taxas do comparador precisam continuar distintas:
   crédito, débito e parcelado são leituras diferentes. */
.rate.cred{ color:var(--j2a-navy) !important; font-weight:700 !important; }
.rate.deb { color:var(--j2a-ok) !important;   font-weight:700 !important; }
.rate.parc{ color:var(--j2a-ouro-esc) !important; font-weight:700 !important; }

/* ── Etiquetas e situação ──────────────────────────────────────── */

.hf-tag{
  padding:4px 10px !important;
  border-radius:8px !important;
  background:#e9f0f7 !important;
  color:var(--j2a-navy) !important;
  font-size:10px !important;
  font-weight:750 !important;
}
.hf-status{
  padding:5px 11px !important;
  border-radius:8px !important;
  background:#eef3f8 !important;
  color:var(--j2a-text-2, #45566c) !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}
.hf-flags span{
  padding:5px 9px !important;
  border-radius:8px !important;
  background:#f6f9fc !important;
  color:var(--j2a-mudo) !important;
  font-size:10px !important;
}

/* ── Avisos, formulários e vazio ───────────────────────────────── */

.hf-alert{
  padding:12px 15px !important;
  border-radius:12px !important;
  font-size:12.5px !important;
  font-weight:650 !important;
}
.hf-alert.hf-alert.ok{
  background:#eff8f3 !important;
  border:1px solid #cfe8db !important;
  color:var(--j2a-ok) !important;
}
.hf-alert.hf-alert.erro,
.hf-alert.hf-alert.error{
  background:#fbeae9 !important;
  border:1px solid #f0cfcd !important;
  color:var(--j2a-erro) !important;
}

.hf-form-grid{ gap:14px !important; }
.hf-form label{
  color:var(--j2a-navy) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em;
}
.hf-form input,.hf-form select,.hf-form textarea,
.hf-filter select,.hf-compare-controls select,.hf-compare-controls input{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
}

.hf-empty,
.hf-empty-text{ color:var(--j2a-mudo) !important; }
.hf-note{ color:var(--j2a-fraco) !important; }

@media (prefers-reduced-motion: reduce){
  .hf-card,.hf-btn,.hf-tabs a,.hf-table tbody tr,.hf-back{ transition:none !important; }
  .hf-card:hover,.hf-btn.primary:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 10 — ADMINISTRAÇÃO
   Quatro frentes: administracao/, admin-hub/, admin-lgpd/ e
   admin-saas/.

   administracao/ e admin-hub/ já herdaram quase tudo: usam ra-* do
   Comercial e hub-* de Vencimentos. Aqui entram só as classes
   próprias de LGPD e SaaS, ambas com CSS embutido na página — ou
   seja, carregado DEPOIS do tema.
   ═══════════════════════════════════════════════════════════════════ */

/* ── LGPD ──────────────────────────────────────────────────────── */

.lgpd-kpis{ gap:11px !important; }

.lgpd-kpi{
  padding:16px 17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.lgpd-kpi:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.lgpd-kpi span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.lgpd-kpi strong{
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
  color:var(--j2a-navy-esc) !important;
}

/* Conformidade: regular, pendente e sem registro. Classe duplicada
   para vencer a regra genérica acima — aqui a cor é o diagnóstico. */
.lgpd-kpi.lgpd-kpi.verde    strong{ color:var(--j2a-ok) !important; }
.lgpd-kpi.lgpd-kpi.amarelo  strong{ color:var(--j2a-ouro-esc) !important; }
.lgpd-kpi.lgpd-kpi.vermelho strong{ color:var(--j2a-erro) !important; }

.lgpd-item{
  border:1px solid var(--j2a-borda) !important;
  border-radius:13px !important;
}
.lgpd-item .quem,
.lgpd-trilha .quem{ color:var(--j2a-navy) !important; font-weight:700 !important; }
.lgpd-item .detalhe,
.lgpd-trilha .detalhe{ color:var(--j2a-mudo) !important; font-size:12px !important; }
.lgpd-item .acao,
.lgpd-trilha .acao{ color:var(--j2a-texto) !important; }

/* ── Admin SaaS ────────────────────────────────────────────────── */

.receita-grid{ gap:12px !important; }

.receita-stat{
  padding:17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.receita-stat:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.receita-stat span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.receita-stat strong{
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
  color:var(--j2a-navy-esc) !important;
}
.receita-stat small{ color:var(--j2a-mudo) !important; font-size:11.5px !important; }

/* MRR em risco: é o número que exige ação, não pode virar azul */
.receita-stat.receita-stat.risco strong{ color:#c05621 !important; }

.plano-row{ border-bottom:1px solid #f2f6fa !important; }
.plano-row .nome{ color:var(--j2a-navy) !important; font-weight:700 !important; }
.plano-row .qtd{ color:var(--j2a-mudo) !important; }

/* O .badge e o .card aqui são genéricos e só existem nesta tela;
   por isso o escopo em .admin-saas-page evita vazar para o resto. */
.admin-saas-page .badge,
.wrap .badge{
  padding:5px 11px !important;
  border-radius:8px !important;
  background:#e9f0f7 !important;
  color:var(--j2a-navy) !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}

.wrap .card{
  padding:22px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}

/* O link de convite é para copiar: fonte monoespaçada ajuda a
   conferir caractere por caractere. */
.invite{
  padding:12px 13px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:11px !important;
  background:#f6f9fc !important;
  color:var(--j2a-texto) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:11.5px !important;
}

/* Sucesso e erro precisam continuar distintos */
.wrap .alert{
  padding:13px 16px !important;
  border-radius:12px !important;
  border:1px solid #cfe8db !important;
  background:#eff8f3 !important;
  color:var(--j2a-ok) !important;
  font-weight:650 !important;
}
.wrap .alert.alert.err{
  border-color:#f0cfcd !important;
  background:#fbeae9 !important;
  color:var(--j2a-erro) !important;
}

@media (prefers-reduced-motion: reduce){
  .lgpd-kpi,.receita-stat{ transition:none !important; }
  .lgpd-kpi:hover,.receita-stat:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 10 — ADMINISTRAÇÃO
   Três módulos, 28 arquivos: administracao/, admin-hub/ (23) e
   admin-lgpd/ (4). Compartilham o admin-standard.css.

   O admin-standard.css já usa !important com o escopo
   .admin-standard-page. Para vencê-lo, as regras aqui repetem o
   mesmo escopo — especificidade igual, e a minha vem depois.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cabeçalhos ────────────────────────────────────────────────── */

/* o rótulo era verde-azulado (#0f766e) em todas as telas admin */
.admin-standard-page .ra-hero span,
.admin-standard-page .hub-hero > div span,
.admin-standard-page .page-header span,
.admin-standard-page .admin-card-header span{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}

.admin-standard-page .ra-hero h1,
.admin-standard-page .hub-hero h1,
.admin-standard-page .page-header h1{
  color:var(--j2a-navy-esc) !important;
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
}
.admin-standard-page .ra-hero p,
.admin-standard-page .hub-hero p,
.admin-standard-page .page-header p{
  color:var(--j2a-mudo) !important;
  font-size:13.5px !important;
}

.admin-standard-page .admin-card-header h2{
  color:var(--j2a-navy-esc) !important;
  font-size:18px !important;
  font-weight:750 !important;
  letter-spacing:-.025em;
}
.admin-standard-page .admin-card-header > strong{ color:var(--j2a-mudo) !important; }

/* ── Cartões de atalho ─────────────────────────────────────────── */

.admin-standard-page .ra-card{
  padding:22px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.admin-standard-page .ra-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 24px rgba(16,40,61,.08) !important;
  transform:translateY(-2px);
}

/* ── Tabelas e formulários ─────────────────────────────────────── */

.admin-standard-page .hub-table-wrap,
.admin-standard-page .usuarios-panel{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.admin-standard-page .hub-form,
.admin-standard-page .usuarios-card{
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
}

/* ── Navegação administrativa ──────────────────────────────────── */

.admin-standard-page .hub-tabs,
.admin-standard-page .admin-nav{
  padding:4px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:13px !important;
}

/* ── Nota lateral ──────────────────────────────────────────────── */

.admin-standard-page .ra-note,
.admin-standard-page .admin-note{
  border-left:3px solid var(--j2a-ouro) !important;
  border-radius:0 12px 12px 0 !important;
  background:#fdf7e9 !important;
  color:var(--j2a-texto) !important;
}

/* ── Diagnóstico: ok e falha precisam continuar distintos ──────── */

.admin-standard-page .admin-check-list .ok span{ color:var(--j2a-ok) !important; }
.admin-standard-page .admin-check-list .bad span{ color:var(--j2a-erro) !important; }
.admin-standard-page .admin-check-list > div{ border-bottom:1px solid #f2f6fa !important; }

/* ── LGPD: indicadores com cor de conformidade ─────────────────── */

.lgpd-kpis{ gap:11px !important; }

.lgpd-kpi{
  padding:16px 17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.lgpd-kpi:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.lgpd-kpi span{
  color:var(--j2a-mudo) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.11em !important;
}
.lgpd-kpi strong{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
/* classe duplicada: o CSS da LGPD é embutido e vem depois */
.lgpd-kpi.lgpd-kpi.verde    strong{ color:var(--j2a-ok) !important; }
.lgpd-kpi.lgpd-kpi.amarelo  strong{ color:var(--j2a-ouro-esc) !important; }
.lgpd-kpi.lgpd-kpi.vermelho strong{ color:var(--j2a-erro) !important; }

.lgpd-badge{
  padding:4px 10px !important;
  border-radius:8px !important;
  font-size:10.5px !important;
  font-weight:750 !important;
}
.lgpd-badge.lgpd-verde   { background:#e4f3ec !important; color:var(--j2a-ok) !important; }
.lgpd-badge.lgpd-amarelo { background:#fdf7e9 !important; color:var(--j2a-ouro-esc) !important; }
.lgpd-badge.lgpd-vermelho{ background:#fbeae9 !important; color:var(--j2a-erro) !important; }

.lgpd-item{ border-bottom:1px solid #f2f6fa !important; }
.lgpd-item .quem strong{ color:var(--j2a-navy) !important; }
.lgpd-item .detalhe,
.lgpd-item .acao{ color:var(--j2a-mudo) !important; }

@media (prefers-reduced-motion: reduce){
  .admin-standard-page .ra-card,.lgpd-kpi{ transition:none !important; }
  .admin-standard-page .ra-card:hover,.lgpd-kpi:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 11 — MINHA CONTA
   Quatro telas: meus dados, minha loja, configurar loja e planos.

   Inclui a correção do texto que escapava do card, relatada em
   Configurações. Causa: nenhum elemento do módulo tratava quebra de
   palavra longa, e filhos de grid/flex têm min-width:auto por
   padrão — o que os impede de encolher abaixo do conteúdo. Uma URL
   sem espaços, um e-mail longo ou um texto colado no campo "Sobre"
   empurram a caixa para fora.
   ═══════════════════════════════════════════════════════════════════ */

/* ── A correção do transbordamento ─────────────────────────────── */

.conta-shell,
.conta-grid,
.conta-loja-preview,
.conta-stats-grid,
.conta-plano-info-grid,
.conta-form-grid{
  min-width:0 !important;
}
.conta-grid > *,
.conta-loja-preview > *,
.conta-stats-grid > *,
.conta-plano-info-grid > *,
.conta-extra-item > *,
.conta-field{
  min-width:0 !important;
}
.conta-card,
.conta-card p,
.conta-card li,
.conta-stat-card,
.conta-extra-item,
.conta-mini-label,
.conta-loja-preview,
.conta-plano-info-grid strong,
.conta-plano-info-grid span{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
.conta-card pre,
.conta-card textarea{
  max-width:100% !important;
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
}

/* ── Cabeçalho ─────────────────────────────────────────────────── */

.conta-hero{
  padding:26px 28px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.conta-eyebrow{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}
.conta-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.conta-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

/* ── Navegação interna ─────────────────────────────────────────── */

.conta-nav{ gap:7px !important; }
.conta-nav a{
  padding:9px 15px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:10px !important;
  color:var(--j2a-mudo) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), color var(--j2a-t), border-color var(--j2a-t) !important;
}
.conta-nav a:hover{
  background:#f4f8fc !important;
  color:var(--j2a-navy) !important;
  border-color:var(--j2a-navy-cl) !important;
}
.conta-nav a.conta-nav a.ativo,
.conta-nav a.ativo,
.conta-nav a.active{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(18,56,95,.2) !important;
}

/* ── Botões ────────────────────────────────────────────────────── */

.conta-btn{
  min-height:40px !important;
  padding:10px 16px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--j2a-texto) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.conta-btn:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }
.conta-btn.primary{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
}
.conta-btn.primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 6px 16px rgba(18,56,95,.25) !important;
  transform:translateY(-1px);
}
.conta-btn.small{ min-height:34px !important; padding:7px 13px !important; font-size:11.5px !important; }
/* excluir precisa continuar vermelho */
.conta-btn.danger{ color:var(--j2a-erro) !important; border-color:#f0cfcd !important; }
.conta-btn.danger:hover{ background:#fdf3f2 !important; border-color:var(--j2a-erro) !important; }

/* ── Cartões e indicadores ─────────────────────────────────────── */

.conta-card{
  padding:22px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.conta-card h2{
  color:var(--j2a-navy-esc) !important;
  font-size:17px !important;
  font-weight:750 !important;
  letter-spacing:-.025em;
}
.conta-card-hint,
.conta-mini-label{ color:var(--j2a-mudo) !important; font-size:12px !important; }

.conta-stats-grid{ gap:12px !important; }
.conta-stat-card{
  padding:17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.conta-stat-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.conta-stat-card span{ color:var(--j2a-mudo) !important; font-size:11px !important; }
.conta-stat-card strong{
  color:var(--j2a-navy-esc) !important;
  font-size:24px !important;
  font-weight:850 !important;
  letter-spacing:-.04em;
}

/* ── Plano e assinatura ────────────────────────────────────────── */

.conta-plano-valor{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:850 !important;
  letter-spacing:-.04em !important;
}
.conta-plano-valor small{ color:var(--j2a-mudo) !important; font-weight:600 !important; }
.conta-plano-info-grid strong{ color:var(--j2a-navy-esc) !important; }
.conta-plano-info-grid span{ color:var(--j2a-mudo) !important; }

/* ── Link da loja ──────────────────────────────────────────────── */

/* era tracejado em turquesa; vira dourado, que já é a cor de
   "isto merece atenção" no sistema */
.conta-link-box{
  padding:14px 16px !important;
  border:1px dashed var(--j2a-ouro) !important;
  border-radius:12px !important;
  background:#fdf7e9 !important;
  color:var(--j2a-texto) !important;
  word-break:break-all !important;
  font-size:12.5px !important;
}

/* ── Formulários ───────────────────────────────────────────────── */

.conta-form-grid{ gap:14px !important; }
.conta-field label{
  color:var(--j2a-navy) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.conta-field input,
.conta-field select,
.conta-field textarea,
.conta-extra-form input,
.conta-extra-form textarea{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  max-width:100% !important;
}

.conta-extra-item{
  padding:12px 0 !important;
  border-bottom:1px solid #f2f6fa !important;
}
.conta-extra-ativo{ color:var(--j2a-ok) !important; font-weight:700 !important; }

/* ── Avisos ────────────────────────────────────────────────────── */

.conta-alert{
  padding:13px 16px !important;
  border-radius:12px !important;
  border:1px solid #cfe8db !important;
  background:#eff8f3 !important;
  color:var(--j2a-ok) !important;
  font-weight:650 !important;
}
.conta-alert.conta-alert-info{
  border-color:#cfdcea !important;
  background:#eef4fa !important;
  color:var(--j2a-navy) !important;
}
.conta-alert.conta-alert-error{
  border-color:#f0cfcd !important;
  background:#fbeae9 !important;
  color:var(--j2a-erro) !important;
}

@media (prefers-reduced-motion: reduce){
  .conta-btn,.conta-nav a,.conta-stat-card{ transition:none !important; }
  .conta-btn.primary:hover,.conta-stat-card:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 12 — WHATSAPP
   Cinco telas: inbox, conversa, templates, métricas e configurar.

   DECISÃO SOBRE O VERDE
   Este é o único módulo onde o verde NÃO foi trocado por marinho.
   Verde é a cor do canal, e aqui ela carrega leitura: a bolha de
   mensagem enviada, o selo "conectado", o contador de não lidas.
   Trocar por marinho tornaria a conversa irreconhecível.

   O que passou a marinho foi o que é estrutura do CRM e não do
   canal: cabeçalho, abas, cartões e botões de navegação.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho ─────────────────────────────────────────────────── */

.wa-hero{
  padding:26px 28px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.wa-hero h1{
  font-size:27px !important;
  font-weight:800 !important;
  letter-spacing:-.038em !important;
  color:var(--j2a-navy-esc) !important;
}
.wa-hero p{ color:var(--j2a-mudo) !important; font-size:13.5px !important; }

.wa-eyebrow{
  color:var(--j2a-fraco) !important;
  font-size:9.5px !important;
  font-weight:800 !important;
  letter-spacing:.17em !important;
}

.wa-voltar{
  color:var(--j2a-mudo) !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  transition:color var(--j2a-t) !important;
}
.wa-voltar:hover{ color:var(--j2a-navy) !important; }

/* ── Botões ────────────────────────────────────────────────────── */

.wa-btn,
.ws-btn{
  min-height:40px !important;
  padding:10px 16px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--j2a-texto) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  transition:background var(--j2a-t), border-color var(--j2a-t),
             box-shadow var(--j2a-t), transform var(--j2a-t) !important;
}
.wa-btn:hover,.ws-btn:hover{ background:#f4f8fc !important; border-color:var(--j2a-navy-cl) !important; }

/* O botão de enviar mensagem continua verde: é a ação do canal.
   Tom mais sóbrio, alinhado ao resto do sistema. */
.wa-btn.primary,
.ws-btn.primary{
  background:#0f7a43 !important;
  border-color:#0f7a43 !important;
  color:#fff !important;
}
.wa-btn.primary:hover,
.ws-btn.primary:hover{
  background:#0b6337 !important;
  box-shadow:0 6px 16px rgba(15,122,67,.26) !important;
  transform:translateY(-1px);
}
.wa-btn.small{ min-height:34px !important; padding:7px 13px !important; font-size:11.5px !important; }
.wa-btn.danger{ color:var(--j2a-erro) !important; border-color:#f0cfcd !important; background:#fff !important; }
.wa-btn.danger:hover{ background:#fdf3f2 !important; border-color:var(--j2a-erro) !important; }

/* ── Abas ──────────────────────────────────────────────────────── */

.wa-tabs{ gap:7px !important; }
.wa-tabs a{
  padding:9px 15px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:10px !important;
  color:var(--j2a-mudo) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  transition:background var(--j2a-t), color var(--j2a-t), border-color var(--j2a-t) !important;
}
.wa-tabs a:hover{ background:#f4f8fc !important; color:var(--j2a-navy) !important; }
.wa-tabs a.wa-tabs a.ativo,
.wa-tabs a.ativo,
.wa-tabs a.active{
  background:var(--j2a-navy) !important;
  border-color:var(--j2a-navy) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(18,56,95,.2) !important;
}

/* ── Cartões e indicadores ─────────────────────────────────────── */

.wa-card,
.ws-panel,
.wa-template-item{
  padding:20px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(16,40,61,.03) !important;
}
.wa-card h2{
  color:var(--j2a-navy-esc) !important;
  font-size:16.5px !important;
  font-weight:750 !important;
  letter-spacing:-.025em;
}
.wa-card-hint,
.wa-mini-label{ color:var(--j2a-mudo) !important; font-size:12px !important; }

.wa-stats-grid{ gap:12px !important; }
.wa-stat-card{
  padding:17px !important;
  border:1px solid var(--j2a-borda) !important;
  border-radius:16px !important;
  transition:box-shadow var(--j2a-t), border-color var(--j2a-t), transform var(--j2a-t) !important;
}
.wa-stat-card:hover{
  border-color:var(--j2a-borda-2) !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-1px);
}
.wa-stat-card span{ color:var(--j2a-mudo) !important; font-size:11px !important; }
.wa-stat-card strong{
  color:var(--j2a-navy-esc) !important;
  font-size:24px !important;
  font-weight:850 !important;
  letter-spacing:-.04em;
}

/* ── Caixa de entrada ──────────────────────────────────────────── */

.wa-inbox-row{
  padding:13px 12px !important;
  border-radius:12px !important;
  transition:background var(--j2a-t) !important;
}
.wa-inbox-row:hover{ background:#f6f9fc !important; }
.wa-inbox-meta{ color:var(--j2a-mudo) !important; }
.wa-numero{ color:var(--j2a-mudo) !important; font-variant-numeric:tabular-nums; }

/* contador de não lidas: verde, é sinal do canal */
.wa-badge{
  border-radius:8px !important;
  background:#0f7a43 !important;
  font-weight:800 !important;
}

/* ── Etiquetas ─────────────────────────────────────────────────── */

.wa-tag{
  padding:3px 9px !important;
  border-radius:7px !important;
  font-size:10px !important;
  font-weight:750 !important;
}
/* "cliente" era roxo-lavanda, fora da paleta */
.wa-tag.wa-tag-cliente { background:#e9f0f7 !important; color:var(--j2a-navy) !important; }
.wa-tag.wa-tag-prospect{ background:#fdf7e9 !important; color:var(--j2a-ouro-esc) !important; }
.wa-tag.wa-tag-aberta  { background:#e4f3ec !important; color:#0f7a43 !important; }

/* ── Conversa ──────────────────────────────────────────────────── */

.wa-thread{ border-radius:14px !important; }

/* As bolhas ficam como estão: branco para recebida, verde-claro
   para enviada. É a convenção que todo mundo já lê sem pensar. */
.wa-bubble{ border-radius:12px !important; }
.wa-bubble-entrada{ border-top-left-radius:3px !important; }
.wa-bubble-saida  { border-top-right-radius:3px !important; }

.wa-compositor textarea,
.wa-form input,.wa-form select,.wa-form textarea,
.wa-field input,.wa-field select,.wa-field textarea{
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
}
.wa-field label{
  color:var(--j2a-navy) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* janela de 24h fechada é aviso operacional: continua âmbar */
.wa-janela-fechada{
  padding:13px 16px !important;
  border:1px solid #f2ddbc !important;
  border-radius:12px !important;
  background:#fdf7e9 !important;
  color:var(--j2a-ouro-esc) !important;
  font-weight:650 !important;
}

/* ── Situação da conexão ───────────────────────────────────────── */

.wa-status-badge{
  padding:6px 13px !important;
  border-radius:8px !important;
  font-size:11px !important;
  font-weight:750 !important;
}
.wa-status-badge.wa-status-conectado{ background:#e4f3ec !important; color:#0f7a43 !important; }
.wa-status-badge.wa-status-desconectado{ background:#fbeae9 !important; color:var(--j2a-erro) !important; }

/* ── Avisos, cópia e vazio ─────────────────────────────────────── */

.wa-alert{
  padding:13px 16px !important;
  border-radius:12px !important;
  border:1px solid #cfe8db !important;
  background:#eff8f3 !important;
  color:#0f7a43 !important;
  font-weight:650 !important;
}
.wa-alert.wa-alert-error{
  border-color:#f0cfcd !important;
  background:#fbeae9 !important;
  color:var(--j2a-erro) !important;
}

.wa-copy-box{
  padding:13px 15px !important;
  border:1px dashed var(--j2a-ouro) !important;
  border-radius:12px !important;
  background:#fdf7e9 !important;
  color:var(--j2a-texto) !important;
  word-break:break-all !important;
  font-size:12.5px !important;
}
.wa-copy-grid{ gap:12px !important; }

.wa-panel-vazio,
.ws-empty{ color:var(--j2a-mudo) !important; }

@media (prefers-reduced-motion: reduce){
  .wa-btn,.ws-btn,.wa-tabs a,.wa-stat-card,.wa-inbox-row{ transition:none !important; }
  .wa-btn.primary:hover,.wa-stat-card:hover{ transform:none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 13 — LOGIN
   A primeira tela que qualquer assinante vê. Recebe o mesmo
   tratamento do resto: fundo marinho com brilho dourado e o cartão
   flutuando sobre ele.
   ═══════════════════════════════════════════════════════════════════ */

body.login-page,
.login-page{
  background:#0d2540 !important;
  background-image:
    radial-gradient(900px 520px at 78% -10%, rgba(242,169,0,.13), transparent 62%),
    radial-gradient(760px 500px at 4% 110%, rgba(31,90,145,.45), transparent 62%) !important;
}

.login-card{
  padding:38px 34px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 30px 70px rgba(5,20,38,.45) !important;
}

.login-brand{ margin-bottom:26px !important; }
.login-brand h1{
  color:var(--j2a-navy-esc) !important;
  font-size:26px !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
}
.login-brand p,
.login-brand span{
  color:var(--j2a-mudo) !important;
  font-size:13px !important;
}

.login-page .form-group label{
  color:var(--j2a-navy) !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.login-page .form-group input{
  padding:13px 15px !important;
  border:1px solid var(--j2a-borda-2) !important;
  border-radius:11px !important;
  font-size:14.5px !important;
}
.login-page .form-group input:focus{
  border-color:var(--j2a-navy-cl) !important;
  box-shadow:0 0 0 3px rgba(31,90,145,.14) !important;
}

/* Aqui o width:100% do .btn-primary é o comportamento certo:
   é o botão que ele foi feito para servir. */
.login-page .btn-primary{
  height:48px !important;
  border-radius:12px !important;
  background:var(--j2a-navy) !important;
  font-size:15px !important;
  font-weight:750 !important;
  letter-spacing:-.01em;
  transition:background var(--j2a-t), box-shadow var(--j2a-t) !important;
}
.login-page .btn-primary:hover{
  background:var(--j2a-navy-esc) !important;
  box-shadow:0 8px 20px rgba(18,56,95,.32) !important;
}

.login-page .alert{
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:650 !important;
}
.login-page .alert.alert-error{
  border:1px solid #f0cfcd !important;
  background:#fbeae9 !important;
  color:var(--j2a-erro) !important;
}

.login-footer{
  margin-top:22px !important;
  color:rgba(255,255,255,.5) !important;
  font-size:12.5px !important;
}
.login-footer a{ color:rgba(255,255,255,.8) !important; }


/* ═══════════════════════════════════════════════════════════════════
   ETAPA 14 — LOJA PÚBLICA
   Página vista pelo CLIENTE FINAL do banker, não pelo banker.

   REGRA QUE ME IMPUS AQUI: não mexer em cor.
   O banker escolhe --loja-primaria e --loja-secundaria em
   Configurar Loja. Impor o marinho da J2A apagaria essa escolha —
   a loja é a vitrine dele, não a nossa.

   Então aqui só melhorei o que é neutro: respiro, cantos, sombra,
   tipografia e os campos do formulário.
   ═══════════════════════════════════════════════════════════════════ */

.loja-section{
  padding:26px !important;
  border:1px solid #e9eff6 !important;
  border-radius:20px !important;
  box-shadow:0 1px 2px rgba(16,40,61,.04), 0 8px 24px rgba(16,40,61,.05) !important;
}
.loja-section h2{
  font-size:16.5px !important;
  font-weight:750 !important;
  letter-spacing:-.025em;
}

.loja-hero-inner h1{
  font-size:clamp(26px, 5vw, 34px) !important;
  font-weight:800 !important;
  letter-spacing:-.035em !important;
}
.loja-cargo{ font-size:14.5px !important; }

.loja-avatar{
  border-width:3px !important;
  box-shadow:0 10px 30px rgba(0,0,0,.2) !important;
}

.loja-badge{
  padding:7px 15px !important;
  border-radius:999px !important;
  font-size:12.5px !important;
  font-weight:650 !important;
}

.loja-btn{
  min-height:46px !important;
  border-radius:13px !important;
  font-size:14px !important;
  font-weight:700 !important;
  transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1) !important;
}
.loja-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(16,40,61,.16) !important; }

.loja-produtos-grid{ gap:12px !important; }
.loja-produto-card{
  padding:16px !important;
  border:1px solid #e9eff6 !important;
  border-radius:14px !important;
  background:#fff !important;
  transition:border-color .18s, box-shadow .18s, transform .18s !important;
}
.loja-produto-card:hover{
  border-color:#dbe5ef !important;
  box-shadow:0 8px 22px rgba(16,40,61,.08) !important;
  transform:translateY(-2px);
}
.loja-produto-card strong{ font-size:14.5px !important; letter-spacing:-.015em; }
.loja-produto-categoria{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
}
.loja-produto-desc{ font-size:13px !important; line-height:1.6 !important; }

/* Formulário: é por aqui que o lead entra. Campos maiores e com
   foco visível reduzem erro de digitação no celular. */
.loja-form-grid{ gap:11px !important; }
.loja-form-grid input,
.loja-form-grid select,
.loja-section input,
.loja-section select,
.loja-section textarea{
  padding:13px 14px !important;
  border:1px solid #cfdcea !important;
  border-radius:11px !important;
  font-size:14.5px !important;
  max-width:100% !important;
}
.loja-section input:focus,
.loja-section select:focus,
.loja-section textarea:focus{
  outline:none !important;
  border-color:var(--loja-secundaria, #12385f) !important;
  box-shadow:0 0 0 3px rgba(18,56,95,.12) !important;
}
.loja-consentimento{ font-size:12.5px !important; line-height:1.6 !important; }

.loja-alert-sucesso{
  padding:16px 18px !important;
  border-radius:14px !important;
  font-weight:650 !important;
}
.loja-form-erro{ font-size:12.5px !important; font-weight:650 !important; }

/* Texto longo colado pelo banker no campo "Sobre" não pode
   escapar do cartão — mesmo problema já visto em Minha Conta. */
.loja-section,
.loja-section p,
.loja-produto-desc,
.loja-mini{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.loja-links{ gap:16px !important; margin-top:18px !important; }
.loja-links a{ transition:transform .18s, opacity .18s !important; }
.loja-links a:hover{ transform:translateY(-2px); opacity:.85; }

.loja-footer{ padding:26px !important; font-size:12px !important; }
.loja-horario,
.loja-mini{ font-size:12.5px !important; }

@media (prefers-reduced-motion: reduce){
  .loja-btn,.loja-produto-card,.loja-links a,.login-page .btn-primary{ transition:none !important; }
  .loja-btn:hover,.loja-produto-card:hover,.loja-links a:hover{ transform:none !important; }
}