/* Orla: dark brand navigation and light operational screens.
   Official typography/tokens are in sg/; this layer adapts the Django components. */
:root {
  color-scheme: light;
  --orla-paper: oklch(98.2% 0.004 85);
  --orla-card: oklch(99.5% 0.002 85);
  --orla-ink: oklch(17% 0.006 85);
  --orla-muted: oklch(46% 0.006 85);
  --orla-line: oklch(89% 0.005 85);
}
html body {
  background: var(--orla-paper);
  color: var(--orla-ink);
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #d8d5cb; color: #242320; }
body button, body input, body select, body textarea { font-family: inherit; }
body button, body a, body input, body select, body textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #79766d; outline-offset: 3px; }
body .orla-serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
body .orla-eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
body .titulo-pagina { font-weight: 600; letter-spacing: -.035em; }
body .secao-titulo { font-weight: 600; letter-spacing: -.02em; }
body .cartao, body .painel, body .tabela-wrapper {
  background: var(--orla-card);
  border-color: var(--orla-line);
  border-radius: 24px;
  box-shadow: 0 2px 8px rgb(36 35 32 / .025);
}
body .cartao-corpo { padding: 1.25rem; }
body .cartao-valor, body .celula-num { font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
body .btn, body .acao, body .acao-primaria, body .cabecalho-pagina-acoes .btn {
  border-radius: 999px;
  font-weight: 500;
  min-height: 36px;
  transition: transform 150ms var(--e-out), opacity 150ms var(--e-out);
}
body .btn:active, body .acao:active, body .acao-primaria:active { transform: translateY(1px); }
body .btn:disabled, body .acao:disabled { cursor: not-allowed; opacity: .45; transform: none; }
body .btn-primario, body .acao-primaria, body .cabecalho-pagina-acoes .btn-primario {
  background: #242320;
  color: #f3f1eb;
  box-shadow: none;
}
body .btn-primario:hover, body .acao-primaria:hover { background: #45433d; }
body .btn-secundario, body .acao { border-color: #cfcdc4; box-shadow: none; }
body .btn-perigo { background: #3d3c38; color: #f3f1eb; border: 1px solid #242320; }
body .campo { border-radius: 12px; min-height: 42px; border-color: #bebbaf; background: #fdfcf9; }
body .campo:focus { border-color: #45433d; --tw-ring-color: #45433d; }
body .campo::placeholder { color: #79766d; }
body .tabela thead, body .tabela-dados thead { background: #f2f1eb; }
body .tabela :where(th) { letter-spacing: .06em; }
body .tabela tbody tr, body .linha-tabela { border-color: #e4e2db; }
body .tabela tbody tr:hover, body .linha-tabela:hover { background: #f7f6f1; }
body .grafico-svg { font-family: var(--font-sans); }
/* Status use fill, outline, dashes and explicit text, including in monochrome. */
body .emblema, body .selo { border: 1px solid #cfcdc4; border-radius: 999px; }
body .emblema-ok, body .selo-pago { background: #e4e2db; color: #242320; border-color: #a5a298; }
body .emblema-ok::before { content: "✓"; font-weight: 600; }
body .emblema-alerta, body .selo-pendente { background: transparent; color: #5e5b53; border-style: dashed; }
body .emblema-erro, body .selo-atrasado { background: #f2f1eb; color: #242320; border: 1.5px solid #45433d; }
body .emblema-erro::before { content: "!"; font-weight: 600; }
body .selo-atrasado::before { content: "!"; width: auto; height: auto; background: none; font-weight: 600; }
body .emblema-neutro, body .selo-previsto { background: transparent; color: #5e5b53; }
body .alerta { border-radius: 16px; }
body .alerta-erro { border: 1.5px solid #45433d; }
body .alerta-aviso { border-style: dashed; }
body .item-lista-debito { box-shadow: inset 3px 0 #45433d; }
body .item-lista-credito { box-shadow: inset 1px 0 #a5a298; }
/* Brand surfaces consume the dark tokens from the supplied guide. */
body #menu-lateral, body #barra-topo {
  color-scheme: dark;
  background: var(--night);
  color: var(--fg);
  border-color: var(--hair);
  box-shadow: none;
}
body #menu-lateral {
  --tinta: 243 241 235;
  --tinta-2: 207 205 196;
  --tinta-3: 165 162 152;
  --linha: 61 59 53;
  --linha-forte: 94 91 83;
  --afundado: 61 59 53;
  --superficie: 36 35 32;
  --acento: 243 241 235;
  --entra: 207 205 196;
  --sai: 243 241 235;
  --aviso: 207 205 196;
  --aviso-fundo: 61 59 53;
  border-right: 1px solid #3d3c38;
}
body .lateral-marca { min-height: 88px; border-color: #3d3c38; }
body .lateral-logo { color: #f3f1eb; gap: .75rem; }
body .lateral-grupo { color: #a5a298; font-size: .625rem; letter-spacing: .13em; }
body .lateral-item { border-radius: 999px; }
body .lateral-item-ativo { background: #f3f1eb; color: #242320; box-shadow: none; }
body .lateral-item-ativo .lateral-icone { color: #242320; }
body .lateral-item-ativo:hover { background: #e4e2db; color: #242320; }
body .lateral-item:not(.lateral-item-ativo):hover { background: #33312d; color: #f3f1eb; }
body .lateral-contador { border: 1px solid currentColor; background: transparent; color: inherit; }
body .lateral-novidades { background: #e4e2db; color: #242320; }
body .lateral-avatar { background: #45433d; color: #f3f1eb; }
body .lateral-assinatura { padding: .5rem .75rem 1rem; color: #a5a298; font-size: .6875rem; }
body .lateral-usuario { border-top: 1px solid #3d3c38; border-radius: 0; padding-top: .875rem; }
body .barra-inferior { background: #fdfcf9; border-color: #e4e2db; }
body .barra-inferior-item-ativo { color: #242320; }
body .barra-inferior-item-ativo::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 999px; }
/* The login is a full-height brand surface. The stripe texture stays behind its title. */
html body:has(.orla-auth) { background: var(--night); color: var(--fg); }
body .orla-auth { position: relative; isolation: isolate; }
body .orla-auth > div { position: relative; }
body .orla-auth::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: min(44vh, 380px);
  background: url("../sg/textures/stripes-calm.439ddd1444c4.svg") center top / cover;
  opacity: .1;
  mask-image: linear-gradient(#191815, transparent);
  pointer-events: none;
}
body .orla-auth .titulo-pagina { color: #f3f1eb; font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1.08; }
body .orla-auth .subtitulo-pagina { margin-top: .875rem; color: #bebbaf; font-size: .9375rem; }
body .orla-auth .orla-eyebrow { color: #bebbaf; }
body .orla-auth .cartao { background: #242320; border-color: #45433d; color: #f3f1eb; }
body .orla-auth .cartao-corpo { padding: 1.75rem; }
body .orla-auth .rotulo { color: #e4e2db; }
body .orla-auth .campo { background: #191815; border-color: #79766d; color: #f3f1eb; }
body .orla-auth .campo:focus { --tw-ring-color: #f3f1eb; border-color: #f3f1eb; }
body .orla-auth .btn-primario { min-height: 44px; background: var(--grad-brand); color: #242320; }
body .orla-auth .btn-primario:hover { opacity: .9; }
body .orla-auth .campo-icone-svg { color: #a5a298; }
body .orla-auth .alerta { background: #33312d; color: #f3f1eb; border-color: #a5a298; }
body .orla-auth .acao { background: transparent; color: #e4e2db; }
@media (min-width: 768px) {
  body .titulo-pagina { font-size: 1.75rem; line-height: 1.2; }
  body .cabecalho-pagina { margin-bottom: 1.75rem; }
}
@media (max-width: 767px) {
  body .cartao, body .painel, body .tabela-wrapper { border-radius: 18px; }
  body .orla-auth .cartao-corpo { padding: 1.25rem; }
  body .campo { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}