/*
  Logaroo Pay — fundações do redesenho B20 (fase F0, 28/09/2026).
  Fonte da verdade: quadro "Sistema visual" da maquete aprovada em 23/09 (plano/B20-REDESENHO.md
  e plano/B20-F0-PLANO.md).

  Os tokens têm NOMES NOVOS (--b20-*) de propósito: o estilo.css e o servidor.css continuam
  valendo para as telas ainda não convertidas, com as cores de hoje. Cada tela passa para a
  paleta nova junto com o desenho novo dela (F1 em diante). Na F0, só o rodapé usa estes tokens.

  Sem @import, sem url() externa: fontes servidas daqui, com a OFL ao lado em fontes/.
*/

/* =====================================================================
   Fontes — Fontsource 5.3.0, subconjunto latin (SHA-256 no plano da F0)
   ===================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fontes/BricolageGrotesque-variavel.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/IBMPlexSans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/IBMPlexSans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/IBMPlexSans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Base */
  --b20-fundo: #F6F4EF;
  --b20-superficie: #FFFFFF;
  --b20-tinta: #17170F;
  --b20-tinta-2: #57554C;
  --b20-tinta-3: #7E7B70;
  --b20-linha: #E4E1D9;
  --b20-linha-2: #F0EEE8;
  --b20-barra: #17170F;

  /* Laranja: #FF6602 com texto BRANCO e #D65400 no mouse — decisão do responsável (B20 §3.2).
     Dívida de contraste aceita e registrada: branco sobre #FF6602 mede 2,94:1.
     Texto laranja sobre fundo claro usa sempre --b20-destaque (#8A3600), que passa. */
  --b20-marca: #FF6602;
  --b20-marca-mouse: #D65400;
  --b20-destaque: #8A3600;
  --b20-destaque-fundo: #FFF3EA;
  --b20-destaque-borda: #F0C49C;

  /* Estados — diferem em claridade, não só em matiz */
  --b20-ok: #16674A;
  --b20-ok-fundo: #E4F1EA;
  --b20-atencao: #8A5A00;
  --b20-atencao-fundo: #FBF0DA;
  --b20-erro: #A8291F;
  --b20-erro-fundo: #FBE9E6;
  --b20-agendado: #1F4D6B;
  --b20-agendado-fundo: #EAF0F5;

  /* Tipografia */
  --b20-fonte-titulo: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --b20-fonte-texto: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --b20-fonte-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* =====================================================================
   Rodapé — componente único (paginas.rodape_pagina)
   ===================================================================== */

.rodape-pagina {
  margin-top: auto;               /* .pagina é coluna flex de altura mínima 100vh: o rodapé desce */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 32px;
  border-top: 1px solid var(--b20-linha);
  background: var(--b20-superficie);
  font-family: var(--b20-fonte-texto);
  font-size: 12px;
  line-height: 1.5;
  color: var(--b20-tinta-3);
}

.rodape-pagina__mono {
  font-family: var(--b20-fonte-mono);
  font-variant-numeric: tabular-nums;
}

.rodape-pagina__ambiente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--b20-tinta-2);
}

.rodape-pagina__ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--b20-ok);
  flex-shrink: 0;
}

.rodape-pagina__ambiente--local .rodape-pagina__ponto { background: var(--b20-atencao); }

.rodape-pagina__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-left: auto;              /* atalhos e sigilo vão para a direita, como na maquete */
}

.rodape-pagina__links a {
  color: var(--b20-tinta-3);
  text-decoration: none;
}

.rodape-pagina__links a:hover,
.rodape-pagina__links a:focus-visible {
  color: var(--b20-tinta);
  text-decoration: underline;
}

.rodape-pagina__sigilo { color: var(--b20-tinta-3); }

/* Sem atalhos (tela de login, sessão incompleta), o sigilo é quem vai para a direita. */
.rodape-pagina__ambiente + .rodape-pagina__sigilo { margin-left: auto; }

@media (max-width: 720px) {
  .rodape-pagina {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .rodape-pagina__links,
  .rodape-pagina__ambiente + .rodape-pagina__sigilo { margin-left: 0; }
}

/* =====================================================================
   Navegação (B20 · F1) — barra lateral por perfil e faixa do caminho
   ---------------------------------------------------------------------
   Só nas telas de sessão completa: o servidor troca `.pagina` por
   `.pagina.pagina--com-barra` e injeta `.barra`. Três faixas, só CSS
   (plano da F1, §4): ≥ 1180 px barra à esquerda; 701–1179 px a barra vira
   faixa no topo; ≤ 700 px empilha (a gaveta do celular é da F6).
   ===================================================================== */

/* Conteúdo principal: continua sendo a coluna flex que os miolos esperam. */
.pagina__conteudo {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--b20-superficie);
  color: var(--b20-tinta);
  font-family: var(--b20-fonte-texto);
  font-size: 14px;
  font-weight: 600;
}
.pular-para-conteudo:focus { left: 8px; }

.pagina--com-barra {
  max-width: none;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
}
.pagina--com-barra > .barra { grid-column: 1; grid-row: 1 / span 2; }
.pagina--com-barra > .pagina__conteudo { grid-column: 2; grid-row: 1; }
.pagina--com-barra > .rodape-pagina { grid-column: 2; grid-row: 2; margin-top: 0; }
/* Largura máxima própria da coluna (plano da F1, §2): sem ela, numa tela de 2560 px o miolo
   esticava até a borda — antes da F1 a página inteira parava em 1280 px. */
.pagina--com-barra > .pagina__conteudo,
.pagina--com-barra > .rodape-pagina { width: 100%; max-width: 1280px; box-sizing: border-box; }

/* A regra de ≥ 1281 px que estica a trilha de passos até a borda da janela
   (estilo.css) invadiria a barra: na variante, a trilha fica na coluna. */
.pagina--com-barra .trilha {
  margin-left: 0;
  margin-right: 0;
  padding-left: 32px;
  padding-right: 32px;
}

/* Cabeçalho de celular próprio (Aprovação, Acompanhamento): a marca já está
   na barra; o resto (passo, "banco: …") continua. */
.pagina--com-barra .bloco-mobile .cabecalho__marca { display: none; }

.barra {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px 16px;
  background: var(--b20-barra);
  font-family: var(--b20-fonte-texto);
}

.barra__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  text-decoration: none;
}
.barra__logo { height: 21px; width: auto; display: block; }
.barra__pay { font-size: 19px; color: #CFCBC0; letter-spacing: -0.2px; }

.barra__grupos { display: flex; flex-direction: column; gap: 20px; flex-grow: 1; }
.barra__grupo { display: flex; flex-direction: column; gap: 4px; }
.barra__titulo {
  padding: 0 8px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8F8B80;
}
.barra__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.barra__item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #DEDAD0;
  text-decoration: none;
}
.barra__item:hover,
.barra__item:focus-visible { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.barra__item--atual { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; font-weight: 600; }

.barra__usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.barra__iniciais {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--b20-marca);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
}
.barra__quem { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.barra__nome {
  font-size: 13px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra__perfil { font-size: 12px; color: #A8A498; }
.barra__sair { font-size: 13px; color: #DEDAD0; }
.barra__sair:hover,
.barra__sair:focus-visible { color: #FFFFFF; }

/* Faixa do caminho, no topo do conteúdo. */
.caminho-faixa {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 10px 32px;
  background: var(--b20-superficie);
  border-bottom: 1px solid var(--b20-linha);
  font-family: var(--b20-fonte-texto);
  font-size: 14px;
  color: var(--b20-tinta-2);
}
.caminho__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.caminho__elo + .caminho__elo::before { content: "/"; margin: 0 8px; color: var(--b20-tinta-3); }
.caminho__elo a { color: var(--b20-tinta-2); }
.caminho__elo[aria-current="page"] { color: var(--b20-tinta); font-weight: 600; }
.caminho-faixa__direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* O lado direito reaproveita as classes do cabeçalho escuro: aqui, sobre fundo claro. */
.caminho-faixa .cabecalho__direita { color: var(--b20-tinta-3); }

/* 701–1179 px: a barra vira faixa horizontal no topo. */
@media (max-width: 1179px) {
  .pagina--com-barra { display: flex; flex-direction: column; }
  .pagina--com-barra > .rodape-pagina { margin-top: auto; }
  .barra {
    position: static;
    height: auto;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 12px 24px;
  }
  .barra__grupos { flex-direction: row; flex-wrap: wrap; gap: 4px; flex-grow: 1; }
  .barra__grupo { flex-direction: row; }
  .barra__titulo { display: none; }
  .barra__lista { flex-direction: row; flex-wrap: wrap; }
  .barra__item { padding: 6px 10px; }
  .barra__usuario { border-top: 0; padding: 0; }
  .barra__iniciais { display: none; }
}

/* ≤ 700 px: empilha (como o cabeçalho de hoje); a gaveta é da F6. */
@media (max-width: 700px) {
  .barra { padding: 10px 16px; }
  .barra__marca { padding: 0; }
  .barra__logo { height: 18px; }
  .barra__pay { font-size: 16px; }
  .barra__usuario { width: 100%; }
  .caminho-faixa { padding: 10px 16px; }
  .pagina--com-barra .trilha { padding-left: 16px; padding-right: 16px; }
}

/* =====================================================================
   Painel (B20 · F2) — `/`
   ===================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.painel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 32px 32px;
  font-family: var(--b20-fonte-texto);
  color: var(--b20-tinta);
}
.painel__topo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.painel__titulo {
  flex-grow: 1;
  margin: 0;
  font-family: var(--b20-fonte-titulo);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.painel__faixa-link { font-weight: 600; white-space: nowrap; }

.painel__indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.painel__cartao {
  background: var(--b20-superficie);
  border: 1px solid var(--b20-linha);
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 0;
}
.painel__rotulo { font-size: 12px; font-weight: 500; color: var(--b20-tinta-2); }
.painel__numero {
  margin-top: 6px;
  font-family: var(--b20-fonte-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.painel__numero--ok { color: var(--b20-ok); }
.painel__numero--indisponivel { font-family: var(--b20-fonte-texto); font-size: 18px; color: var(--b20-tinta-2); }
.painel__indicadores--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.painel__indicadores--cinco .painel__numero { font-size: 20px; }
.painel__numero--atencao { color: var(--b20-atencao); }
.painel__nota { display: block; margin-top: 4px; font-size: 12px; color: var(--b20-tinta-3); }

.painel__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.painel--sem-lateral .painel__grade { grid-template-columns: minmax(0, 1fr); }

.painel__bloco {
  background: var(--b20-superficie);
  border: 1px solid var(--b20-linha);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}
.painel__bloco-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--b20-linha-2);
}
.painel__bloco-topo a { font-size: 13px; color: var(--b20-destaque); }
.painel__bloco-titulo {
  flex-grow: 1;
  margin: 0;
  font-family: var(--b20-fonte-titulo);
  font-size: 15px;
  font-weight: 600;
}
.painel__bloco-rodape { padding: 12px 18px; border-top: 1px solid var(--b20-linha-2); font-size: 13px; }
.painel__bloco-rodape a { color: var(--b20-destaque); }
.painel__vazio { margin: 0; padding: 16px 18px; color: var(--b20-tinta-3); font-size: 14px; }

.painel__lotes { list-style: none; margin: 0; padding: 0; }
.painel__lote {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--b20-linha-2);
}
.painel__lote:last-child { border-bottom: 0; }
.painel__selo {
  flex-shrink: 0;
  max-width: 40%;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--b20-fundo);
  border: 1px solid var(--b20-linha);
  font-size: 11px;
  font-weight: 600;
  color: var(--b20-tinta-2);
}
.painel__lote-meio { flex-grow: 1; min-width: 0; font-size: 13px; }
.painel__lote-meio a { color: var(--b20-tinta); font-weight: 500; }
.painel__lote-valor { flex-shrink: 0; text-align: right; font-size: 14px; font-weight: 600; white-space: nowrap; }

.painel__itens { list-style: none; margin: 0; padding: 6px 0; }
.painel__item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 13px; }
.painel__item--nao { color: var(--b20-tinta-2); }
.painel__item-nome { flex-grow: 1; }
.painel__item-valor { color: var(--b20-tinta-2); font-weight: 500; text-align: right; }
.painel__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--b20-ok); flex-shrink: 0; }
.painel__ponto--atencao { background: var(--b20-atencao); }
.painel__marca-perfil { width: 16px; text-align: center; font-weight: 700; color: var(--b20-ok); }
.painel__item--nao .painel__marca-perfil { color: var(--b20-tinta-3); }

@media (max-width: 1179px) {
  .painel__indicadores,
  .painel__indicadores--cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel__grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .painel { padding: 16px; }
  .painel__titulo { font-size: 22px; }
  .painel__indicadores,
  .painel__indicadores--cinco { grid-template-columns: minmax(0, 1fr); }
  .painel__lote { flex-wrap: wrap; }
  .painel__lote-valor { text-align: left; }
}