/* Identidade RioCert, compartilhada pelas telas do painel.
   Teal sobre papel claro, a mesma paleta da riocert.com.br/captura e da tela de
   entrada. Marca clara: não existe versão escura.

   As variantes "-tinta" existem porque o teal e o verde da marca são claros
   demais para texto pequeno sobre branco. O tom original fica em borda, faixa e
   detalhe; o escurecido carrega a leitura e passa no contraste AA.

   Aqui moram as variáveis e a barra do topo, que é a única peça que as duas
   telas dividem. O resto do CSS fica em cada página.
   A CSP do painel é default-src 'self', então nada de fonte ou folha de fora:
   Raleway e Inter só aparecem em quem já tem, e o resto cai no system-ui. */

:root {
  /* superfícies */
  --ground: #F4F8F8;   /* fundo da página */
  --panel:  #FFFFFF;   /* cartão, cabeçalho, campo */
  --line:   #DFE7E8;   /* borda visível */
  --hair:   #EBF1F1;   /* divisória interna, mais leve */
  --tint:   #F1F7F7;   /* realce de bloco, quase branco */

  /* texto */
  --ink:   #025159;    /* teal escuro da marca, títulos e corpo */
  --ink-2: #5A6B6E;    /* apoio */
  --ink-3: #8A9A9C;    /* legenda, placeholder */

  /* marca */
  --agua:       #03A6A6;  /* teal claro: borda, faixa, marcador */
  --agua-tinta: #027A7A;  /* o mesmo teal, legível como texto */
  --limao:      #EBF423;  /* amarelo da marca, só como fundo/realce */
  --zap:        #25D366;  /* verde do WhatsApp */

  /* estados */
  --atencao: #8F6A0A;  /* aviso, versão legível do limão */
  --ok:      #14804A;  /* bom, versão legível do verde */
  --bad:     #B3261E;  /* erro */

  /* apelidos que as páginas usam */
  --accent: var(--agua-tinta);
  --data:   var(--agua-tinta);
  --warn:   var(--atencao);
  --src-bg: rgba(3, 166, 166, 0.10);

  /* tipografia */
  --display: Raleway, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --body:    Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono:    SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* Largura da coluna. A barra do topo lê daqui pra logo alinhar com o
     conteúdo da página; cada tela pode sobrescrever se usa outra medida. */
  --largura: 1180px;

  /* Barra de rolagem. Teal lavado parado, teal da marca ao passar o mouse. */
  --rolagem: #B4D2D2;
  --rolagem-forte: var(--agua);
}

/* Preposição e artigo não podem ficar pendurados no fim da linha. */
p, li, span { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ------------------------------------------------------- barra de rolagem
   A barra cinza do sistema destoava do resto, e no kanban ela não é enfeite:
   é a única pista de que existe coluna fora da vista.

   Duas declarações porque nenhuma cobre todo mundo sozinha. A padrão
   (scrollbar-color) vale no Firefox e no Chrome recente; a de -webkit- cobre
   Safari e Chrome antigo, e é a única que aceita mudar de cor no hover. */

* { scrollbar-width: thin; scrollbar-color: var(--rolagem) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }

/* A borda transparente com background-clip afina o polegar e deixa respiro
   dos dois lados, em vez de ele encostar na parede. */
::-webkit-scrollbar-thumb {
  background: var(--rolagem);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rolagem-forte);
  background-clip: padding-box;
}

/* No quadro do kanban a barra horizontal carrega a navegação entre colunas,
   então ela é um pouco mais gorda e mais escura que as outras. */
.kanban { scrollbar-color: var(--agua) transparent; }
.kanban::-webkit-scrollbar { height: 14px; }
.kanban::-webkit-scrollbar-thumb {
  background: var(--agua);
  background-clip: padding-box;
  border-width: 4px;
}
.kanban::-webkit-scrollbar-thumb:hover { background: var(--ink); background-clip: padding-box; }

/* ---------------------------------------------------------------- topo
   A mesma barra nas duas telas: logo à esquerda, navegação à direita, e a
   página atual marcada com aria-current. A logo leva pro /inicio, que é o
   comportamento que todo mundo já espera de logo em canto de tela. */

.topo { background: var(--panel); border-bottom: 1px solid var(--line); }

.topo-wrap {
  max-width: var(--largura); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.topo .marca { display: flex; align-items: center; text-decoration: none; }
.topo .marca img { height: 30px; width: auto; display: block; }
.topo .marca:focus-visible { outline: 2px solid var(--agua-tinta); outline-offset: 3px; }

.topo-nav {
  margin-left: auto; display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap;
}
.topo-nav a, .topo-nav button {
  font: inherit; font-size: 14px; color: var(--ink-2);
  text-decoration: none; background: none; border: 0; padding: 0;
  cursor: pointer; white-space: nowrap;
}
.topo-nav a:hover, .topo-nav button:hover { color: var(--ink); }
.topo-nav a:focus-visible, .topo-nav button:focus-visible {
  outline: 2px solid var(--agua-tinta); outline-offset: 3px;
}
/* Página atual: peso e cor, mais um traço embaixo. Cor sozinha não serve pra
   quem não distingue teal de cinza. */
.topo-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--agua);
}
.topo-nav button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

@media (max-width: 560px) {
  .topo-wrap { padding: 10px 16px; gap: 10px; }
  .topo .marca img { height: 26px; }
  .topo-nav { gap: 14px; width: 100%; margin-left: 0; }
}