/* Marca aprovada sobre a interface do PE (DESIGN.md e contrato de paridade 38).
   Muda só o que é marca: cores, fonte (Archivo) e logo. Tamanhos, posições, ordem e densidade continuam
   os do CSS do PE (estilos/pe.css), que vem antes deste arquivo. A fonte troca em vendor/fontes.css:
   'Fraunces' e 'Inter' apontam para a Archivo. */

:root{
  --marca-verde:#1E4536;    /* verde de marca */
  --marca-amarelo:#F2C230;  /* amarelo de marca */

  /* As mesmas variáveis do PE, com os tokens da marca */
  --ink:#17261d;            /* tinta */
  --paper:#e4d8b5;          /* creme de fundo */
  --card:#faf3dd;           /* creme de painel */
  --green:var(--marca-verde);
  --green-light:#32594a;    /* o verde de marca um pouco mais claro: passar o mouse na lateral e nos botões */
  --brass:var(--marca-amarelo);       /* traços e destaques */
  --brass-light:var(--marca-amarelo); /* destaques sobre o verde */
  --line:#cbbd92;           /* divisória */
  --muted:#55533e;          /* texto auxiliar */
  --burgundy:#9e3030;       /* perigo */
  --warn:#825300;           /* atenção */
}

/* Amarelo não serve de texto sobre o creme (contraste baixo): os números e rótulos que o PE pintava de
   dourado ficam no verde de marca. Sobre o verde, o amarelo continua. */
.stat-num,
.dash-card-destino,
.dash-hero-data,
.dash-pilar-num strong,
.dash-mini-poco > strong,
.dash-footer-2col .valor,
.dash-legenda-linha .num,
.dash-moeda-saldo strong,
.perm-grupo-label,
.report-tipo-titulo,
.ped-box-link:hover,
.perfil-subsection,
.stat-list-row strong,
#btnTrocarConta,
.drc-nav:hover{color:var(--marca-verde);}
/* o mesmo para os textos com a cor escrita direto no elemento pelo app.js */
[style*="color:var(--brass)"]{color:var(--marca-verde) !important;}

/* Destino atual na lateral: amarelo com texto escuro (DESIGN.md, "nav-current"). */
.nav-item.active{background:var(--marca-amarelo);color:var(--ink);box-shadow:none;}
.nav-item.active .dot{background:var(--marca-verde);}

/* Logo: o cavalo amarelo sobre verde ao lado do nome, na lateral. */
.brand{display:grid;grid-template-columns:40px 1fr;column-gap:11px;align-items:center;}
.brand::before{content:'';grid-row:1 / span 2;width:40px;height:40px;border-radius:8px;
  background:url(/img/marca/simbolo-96.png) center / cover no-repeat;box-shadow:0 0 0 1px rgba(242,194,48,.25);}
.brand-mark{font-weight:800;font-stretch:118%;letter-spacing:-0.02em;line-height:1.08;}

/* Tela de entrada: o símbolo no lugar do emoji do cavalo. */
.login-simbolo{width:34px;height:34px;border-radius:7px;vertical-align:-8px;margin-right:6px;}