/* ==========================================================================
   WL MAQUETES — INTRANET
   Base e componentes. Depende de tokens.css, carregado antes.

   O ritmo do site institucional (faixa creme → faixa escura → faixa marrom)
   é mantido de propósito: quem entra na intranet reconhece a casa. O que
   muda é a densidade — cada faixa aqui carrega trabalho, não discurso.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Casa com a altura do cabeçalho fixo, senão as âncoras param atrás dele. */
  scroll-padding-top: clamp(84px, 9vw, 116px);
}

body {
  margin: 0;
  background: var(--surface-default);
  color: var(--c-navy);
  font-family: var(--ff-body);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

/* Contêiner do layout: 1726px com margem de 97px em 1920 — o mesmo do site.
   O gutter fica FORA da medida, senão a margem é contada duas vezes. */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-navy);
  color: var(--c-cream);
  font-family: var(--ff-display);
  text-decoration: none;
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Logotipo embutido: monocromático, herda a cor por currentColor. */
.marca { display: inline-flex; }
.marca > svg { display: block; height: var(--marca-altura, 32px); width: auto; }

/* Cabeçalho de seção: rótulo em serifada itálica + título claro. */
.secao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.secao__titulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(26px, 1.8vw, 38px);
  line-height: var(--lh-heading);
}
.secao__titulo em { font-style: italic; color: var(--c-bronze-aa); }
.secao--escura .secao__titulo em { color: var(--c-sand); }
.secao--escura .t-rotulo { color: var(--c-sand); }

/* Duas faixas escuras, dois fundos: a de implantação é navy (areia dá 7.29) e
   a de documentos é marrom (areia dá 4.30 e reprova em texto pequeno). Sobre
   o marrom, todo texto de apoio usa a areia clareada. */
.documentos .t-rotulo,
.documentos .link-mais--estatico,
.indicadores .t-rotulo { color: var(--c-sand-aa); }

.link-mais {
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

/* ==========================================================================
   CABEÇALHO

   No site o menu é transparente sobre a fotografia do hero e vira navy ao
   rolar. A intranet não tem hero fotográfico, então nasce sólido — é o
   mesmo estado final do menu do site, sem o degradê que ficaria boiando.
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--c-navy);
  color: var(--c-cream);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  min-height: clamp(64px, 5vw, 84px);
}

.header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-cream);
  text-decoration: none;
  flex-shrink: 0;
}
.header__brand:focus-visible { outline-offset: 6px; }

/* "Intranet" ao lado da marca, separado por um filete: diz onde a pessoa
   está sem transformar o logotipo em outra coisa. */
.header__sufixo {
  padding-left: var(--sp-2);
  border-left: 1px solid var(--linha-clara);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-ui-sm);
  color: var(--c-sand);
  white-space: nowrap;
}

.header__nav { margin-left: auto; }
.header__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 32px);
}
.header__link {
  display: inline-block;
  padding-block: 4px;
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--c-cream);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
  white-space: nowrap;
}
.header__link:hover { border-bottom-color: var(--c-cream); }
.header__link[aria-current="page"] { border-bottom-color: var(--c-sand); color: var(--c-sand); }

.header__acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Busca. Campo vazado sobre navy; o creme só entra no foco, para a barra
   não virar uma faixa clara atravessando o cabeçalho. */
.busca {
  position: relative;
  display: flex;
  align-items: center;
}
.busca__campo {
  width: clamp(140px, 16vw, 260px);
  height: 40px;
  padding: 0 var(--sp-2) 0 38px;
  background: transparent;
  color: var(--c-cream);
  border: 1px solid var(--linha-clara);
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-ui-sm);
}
.busca__campo::placeholder { color: color-mix(in srgb, var(--c-cream) 55%, transparent); }
.busca__campo:focus {
  outline: none;
  border-color: var(--c-sand);
  background: rgba(255, 255, 255, 0.06);
}
.busca__icone {
  position: absolute;
  left: 12px;
  width: 16px; height: 16px;
  color: var(--c-sand);
  pointer-events: none;
}

/* Sino de notificações com contador. */
.sino {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  color: var(--c-cream);
  cursor: pointer;
}
.sino svg { width: 20px; height: 20px; }
.sino__contador {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 18px;
  padding: 0 4px;
  background: var(--c-bronze);
  color: var(--c-cream);
  border-radius: 9px;
  font-family: var(--ff-body);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.usuario {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 4px 4px 0;
  background: none;
  border: 0;
  color: var(--c-cream);
  cursor: pointer;
  text-align: left;
}
.usuario__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: var(--c-bronze-aa);
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  letter-spacing: 0.02em;
  color: var(--c-cream);
}
.usuario__dados { display: grid; line-height: 1.25; }
.usuario__nome { font-family: var(--ff-display); font-size: var(--fs-ui-sm); }
.usuario__cargo { font-size: var(--fs-ui-xs); color: var(--c-sand); }

.header__toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.header__bars,
.header__bars::before,
.header__bars::after {
  position: absolute;
  left: 10px;
  width: 24px; height: 1.5px;
  background: var(--c-cream);
  transition: transform var(--transition), opacity var(--transition);
}
.header__bars { top: 21px; }
.header__bars::before { content: ""; top: -7px; left: 0; }
.header__bars::after  { content: ""; top: 7px; left: 0; }

/* ==========================================================================
   PAINEL DE ABERTURA
   ========================================================================== */

.painel {
  padding-top: calc(clamp(64px, 5vw, 84px) + var(--section-y-app));
  padding-bottom: var(--section-y-app);
}
.painel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-6);
}
/* A saudação usa a escala de display do site — é o único momento da página
   em que a tipografia institucional aparece em tamanho grande. */
.painel__saudacao {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(34px, 3.3vw, 62px);
  line-height: var(--lh-heading);
}
.painel__saudacao em { font-style: italic; color: var(--c-bronze-aa); }
.painel__data {
  margin-top: var(--sp-2);
  font-size: var(--fs-ui);
  color: color-mix(in srgb, var(--c-navy) 72%, transparent);
}
.painel__data span::before { content: "·"; margin: 0 8px; }
.painel__data span:first-child::before { content: none; margin: 0; }

.painel__intro {
  max-width: 58ch;
  margin-top: var(--sp-2);
  font-size: var(--fs-ui-lg);
  color: color-mix(in srgb, var(--c-navy) 86%, transparent);
}

.painel__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Estado da sessão no cabeçalho. Sem login, o lugar do usuário não finge uma
   sessão — mostra o que de fato existe, com o ponto em cor de risco. */
.sessao {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-ui-sm);
  color: var(--c-sand);
  white-space: nowrap;
}
.sessao__ponto {
  width: 8px; height: 8px;
  flex-shrink: 0;
  background: #E39C90;
  border-radius: 50%;
}

/* O cabeçalho carrega marca, seis links, busca e estado da sessão. Entre
   900 e 1280px isso não cabe, e como ele é `fixed` o estouro não aparece no
   scroll da página — some em silêncio para fora da tela. O texto da sessão
   cede em dois degraus, e o ponto colorido, que é o sinal, permanece. */
@media (max-width: 1280px) {
  .sessao__nota { display: none; }
}
@media (max-width: 1120px) {
  .sessao__texto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Nota ao pé de uma seção: explica uma ausência sem virar aviso de erro. */
.nota-rodape {
  margin-top: var(--sp-3);
  padding-left: var(--sp-2);
  border-left: 2px solid var(--linha-forte);
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}

/* Variante do "ver mais" que não é link — só a procedência do dado.

   Medido em 02/09 sobre creme: 62% do navy dava 4.00:1 e reprovava em AA. É a
   mesma armadilha que o DESIGN-SYSTEM.md já tinha registrado nas ferramentas
   ("nenhum texto de apoio abaixo de 72% do navy"), e que aqui tinha escapado.
   Em 72% dá 4.83:1. */
.link-mais--estatico {
  border-bottom-color: transparent;
  color: color-mix(in srgb, var(--c-navy) 72%, transparent);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: none;
  letter-spacing: 0;
}
/* Areia clareada nas duas faixas escuras: sobre o marrom é obrigatório
   (4.30 reprova), e sobre o navy só melhora. Uma regra em vez de duas. */
.secao--escura .link-mais--estatico { color: var(--c-sand-aa); }

/* ==========================================================================
   ATALHOS
   ========================================================================== */

.atalhos { padding-bottom: var(--section-y-app); }

/* Cinco sistemas. No auto-fit puro eles caem em 4 + 1 numa tela larga, e a
   segunda fila fica com um cartão solto; acima de 900px a grade é fixada em
   três colunas para fechar 3 + 2. */
.atalhos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-2);
}
@media (min-width: 901px) {
  .atalhos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cartão de sistema. O acento de 3px na borda superior substitui a sombra:
   o site não usa sombra em lugar nenhum. A cor desse acento carrega o estado
   — só ele muda entre um sistema no ar e um que ainda não existe. */
.atalho {
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--superficie-card);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--c-bronze);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
a.atalho:hover {
  background: var(--c-cream);
  border-top-color: var(--c-navy);
  transform: translateY(-2px);
}

.atalho--ativo { border-top-color: var(--st-ok); }
.atalho--espera { border-top-color: var(--c-bronze); }

/* Sistema que ainda não existe: não é link, e o cartão diz isso sem precisar
   de texto — fundo rebaixado, borda tracejada, sem hover. */
.atalho--vazio {
  background: transparent;
  border-style: dashed;
  border-top: 3px dashed var(--linha-forte);
}
.atalho--vazio .atalho__icone,
.atalho--vazio .atalho__nome { opacity: 0.75; }

.atalho__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 2px;
}
.atalho__icone { width: 26px; height: 26px; color: var(--c-bronze-aa); }

/* Seta de link externo. Os sistemas abrem em aba nova — a seta avisa antes do
   clique, para a pessoa não achar que perdeu a intranet de vista. */
.atalho__externo {
  margin-left: 6px;
  font-family: var(--ff-body);
  opacity: 0.75;
}

/* Endereço ou rota prevista: fecha o cartão com a informação operacional. */
.atalho__rota {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--linha);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-ui-xs);
  color: var(--c-bronze-aa);
  word-break: break-word;
}

/* Selo de estado. Mesma lógica das etiquetas da tabela: a cor entra em área
   mínima, só o suficiente para ler o estado de relance. */
.selo {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-cream);
}
.selo--ok { background: var(--st-ok); }
.selo--atencao { background: var(--st-atencao-fundo); }
.selo--risco { background: var(--st-risco); }
.selo--neutro { background: var(--c-navy); }
.atalho__nome {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  line-height: 1.25;
}
.atalho__desc {
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}
/* Marca do filtro de busca: some quando não casa com o termo digitado. */
.atalho[hidden] { display: none; }

.atalhos__vazio {
  padding: var(--sp-3);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--radius);
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}

/* ==========================================================================
   FERRAMENTAS

   Mesmo cartão dos sistemas da casa, em dois blocos separados por origem:
   as da WL e as de 00-COMPARTILHADO. O que distingue um cartão de ferramenta
   é o acento superior em areia, não a forma — ferramenta não tem rota nem
   endereço, e o cartão diz isso pelo rodapé (stack no lugar da rota).
   ========================================================================== */

.ferramentas { margin-top: var(--section-y-app); }
/* Dois blocos seguidos (WL e grupo) não precisam do respiro de seção entre
   eles: são a mesma família, separada por origem. */
.ferramentas + .ferramentas { margin-top: var(--sp-8); }

/* Some junto com todos os seus cartões quando a busca não casa com nenhum. */
.ferramentas[hidden] { display: none; }

.secao__titulo--menor { font-size: clamp(22px, 1.4vw, 30px); }

.atalho--ferramenta { border-top-color: var(--c-sand); }

/* Cartão com dois destinos (site publicado + cópia de teste). Como não pode
   haver link dentro de link, o cartão é um div e o link principal ganha um
   ::after que cobre o cartão inteiro — clicar em qualquer ponto abre o site.
   O link de teste fica acima dessa camada (z-index) e vale só na sua área. */
.atalho--duplo { position: relative; }
.atalho--duplo:hover {
  background: var(--c-cream);
  border-top-color: var(--c-navy);
  transform: translateY(-2px);
}
.atalho__rota--dupla {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px var(--sp-2);
}
.atalho__link {
  color: inherit;
  text-decoration: none;
}
.atalho__link--principal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
/* O foco do link esticado é mostrado no cartão, não no texto pequeno. */
.atalho--duplo:has(.atalho__link--principal:focus-visible) {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
}
.atalho__link--principal:focus-visible { outline: none; }
.atalho__link--teste {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  background: var(--superficie-card);
  transition: border-color var(--transition), color var(--transition);
}
.atalho__link--teste:hover {
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.atalho__link-rotulo {
  font-family: var(--ff-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

/* ==========================================================================
   INDICADORES — faixa marrom, herdada da faixa de números do site
   ========================================================================== */

.indicadores {
  background: var(--surface-stats);
  color: var(--c-cream);
  padding-block: clamp(32px, 3.4vw, 60px);
}
.indicadores__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.indicador { display: grid; gap: 4px; }
.indicador__valor {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(40px, 3.6vw, 68px);
  line-height: 1;
}
.indicador__rotulo {
  font-size: var(--fs-ui-sm);
  color: var(--c-sand-aa);
}
.indicador__delta { font-family: var(--ff-display); font-size: var(--fs-ui-xs); font-style: italic; }

/* ==========================================================================
   PRODUÇÃO — faixa navy, o miolo operacional da página
   ========================================================================== */

.producao {
  background: var(--surface-dark);
  color: var(--c-cream);
  padding-block: var(--section-y-app);
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.filtro {
  padding: 7px 16px;
  background: transparent;
  color: var(--c-cream);
  border: 1px solid var(--linha-clara);
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtro:hover { border-color: var(--c-sand); }
.filtro[aria-pressed="true"] {
  background: var(--c-cream);
  color: var(--c-brown);
  border-color: var(--c-cream);
}

/* A tabela rola sozinha no horizontal em telas estreitas; a página nunca.
   O `position: relative` não é decorativo: sem ele, o rótulo .visually-hidden
   do cabeçalho da coluna de ações (position: absolute, sem âncora) se ancora
   no viewport, para além da borda direita, e é a PÁGINA que passa a rolar. */
.tabela-wrap { position: relative; overflow-x: auto; }

.tabela {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: var(--fs-ui-sm);
}
.tabela th {
  padding: 0 var(--sp-2) var(--sp-1);
  text-align: left;
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-sand);
  border-bottom: 1px solid var(--linha-clara);
  white-space: nowrap;
}
.tabela td {
  padding: var(--sp-2);
  border-bottom: 1px solid color-mix(in srgb, var(--c-cream) 12%, transparent);
  vertical-align: middle;
}
.tabela tbody tr { transition: background var(--transition); }
.tabela tbody tr:hover { background: rgba(255, 255, 255, 0.045); }
/* A coluna do projeto carrega duas informações empilhadas; sem largura mínima
   o nome quebra em três linhas e desalinha a leitura vertical da tabela. */
.tabela th:first-child,
.tabela td:first-child { min-width: 208px; }

.tabela__projeto {
  display: block;
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  line-height: 1.2;
}
.tabela__cliente { display: block; font-size: var(--fs-ui-xs); color: var(--c-sand); }
.tabela__num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Etiqueta de status: filete colorido à esquerda e texto em creme. A cor de
   estado nunca vira área grande — ver a nota em tokens.css. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 3px;
  height: 15px;
  background: currentColor;
}
.tag--ok { color: #8FC79E; }
.tag--atencao { color: #E2B872; }
.tag--risco { color: #E39C90; }
.tag--neutro { color: var(--c-sand); }

/* Barra de progresso: retângulo puro, sem cantos, como as faixas do site. */
.progresso {
  display: grid;
  gap: 6px;
  min-width: 132px;
}
.progresso__trilho {
  height: 6px;
  background: rgba(255, 255, 255, 0.16);
}
.progresso__preenchido { height: 100%; background: var(--c-sand); }
.progresso__valor { font-size: var(--fs-ui-xs); color: var(--c-sand); font-variant-numeric: tabular-nums; }

.tabela .btn--ghost { color: var(--c-cream); box-shadow: inset 0 0 0 1px var(--linha-clara); }
.tabela .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

.producao__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-ui-sm);
  color: var(--c-sand);
}

/* ==========================================================================
   MURAL — avisos + agenda, duas colunas sobre creme
   ========================================================================== */

.mural { padding-block: var(--section-y-app); }
.mural__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 3.5vw, 72px);
}

.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--linha);
}
.aviso:first-child { border-top: 0; padding-top: 0; }

/* Data em bloco, no lugar de ícone: a informação já é a etiqueta. */
.aviso__data {
  display: grid;
  place-content: center;
  justify-items: center;
  width: 62px; height: 62px;
  background: var(--c-navy);
  color: var(--c-cream);
  border-radius: var(--radius);
  line-height: 1;
}
.aviso__dia { font-family: var(--ff-display); font-size: 24px; }
.aviso__mes {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sand);
}
/* Sobre o bronze, o mês em areia cai para 2.78:1. O creme resolve (4.53) sem
   mexer no bloco de data. */
.aviso--destaque .aviso__data { background: var(--c-bronze-aa); }
.aviso--destaque .aviso__mes { color: var(--c-cream); }
/* Pendência não é aviso: o bloco de data vira contorno, para as decisões já
   travadas pesarem mais na página do que o que ainda falta decidir. */
.aviso--pendencia .aviso__data {
  background: transparent;
  color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.aviso--pendencia .aviso__mes { color: var(--c-bronze-aa); }

.aviso__titulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  line-height: 1.25;
}
.aviso__texto {
  margin-top: 4px;
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 76%, transparent);
}
.aviso__meta {
  margin-top: 8px;
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-bronze-aa);
}

/* Agenda da semana */
.agenda { display: grid; gap: 2px; }
.agenda__item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--superficie-card);
  border-left: 3px solid var(--c-sand);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.agenda__item--hoje { border-left-color: var(--c-bronze); background: var(--c-cream); }
.agenda__hora {
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-bronze-aa);
}
.agenda__titulo { font-size: var(--fs-ui-sm); }
/* 65% dava 4.35:1 em 11px — mesma correção do .link-mais--estatico. */
.agenda__local { font-size: var(--fs-ui-xs); color: color-mix(in srgb, var(--c-navy) 72%, transparent); }

/* Aniversariantes: faixa lateral compacta, fecha a coluna da direita. */
.aniversarios {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-navy);
  color: var(--c-cream);
  border-radius: var(--radius);
}
.aniversarios h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  color: var(--c-sand);
  margin-bottom: var(--sp-2);
}
.aniversarios li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 14%, transparent);
  font-size: var(--fs-ui-sm);
}
.aniversarios li:first-of-type { border-top: 0; }
.aniversarios .dia { color: var(--c-sand); font-variant-numeric: tabular-nums; }
.aniversarios__nota {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 14%, transparent);
  font-size: var(--fs-ui-xs);
  color: var(--c-sand);
}

/* Trechos de código no corpo do texto: nome de rede, arquivo, container. */
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}

/* ==========================================================================
   DOCUMENTOS — faixa marrom
   ========================================================================== */

.documentos {
  background: var(--surface-stats);
  color: var(--c-cream);
  padding-block: var(--section-y-app);
}
/* Seis documentos, pelo mesmo motivo dos atalhos: 3 + 3 em vez de 5 + 1. */
.documentos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-2);
}
@media (min-width: 901px) {
  .documentos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* O card não tem véu branco: um clareado de 6% sobre o marrom derrubava o
   areia dos títulos de 5.26 para 4.48:1, abaixo do mínimo AA para texto
   normal. O card é só contorno — como os blocos de texto do site sobre a
   faixa marrom — e o hover ESCURECE, então o contraste só melhora. */
.doc {
  display: grid;
  gap: 6px;
  padding: var(--sp-3);
  background: transparent;
  border: 1px solid rgba(240, 237, 232, 0.28);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.doc:hover { background: rgba(0, 0, 0, 0.12); border-color: var(--c-cream); }
.doc__nome {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  color: var(--c-sand-aa);
}
.doc__meta {
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-sand-aa);
}
.doc__desc { font-size: var(--fs-ui-sm); }

/* O caminho no HD é a informação útil enquanto não há servidor de arquivos:
   é por ele que a pessoa acha o documento. */
.doc__caminho {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid rgba(240, 237, 232, 0.22);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-ui-xs);
  color: var(--c-sand-aa);
  word-break: break-all;
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.rodape {
  background: var(--surface-footer);
  color: var(--c-cream);
  padding-block: clamp(40px, 4vw, 72px) var(--sp-4);
}
.rodape__grid {
  display: grid;
  grid-template-columns: 450fr 470fr 404fr 345fr;  /* mesma proporção do site */
  gap: var(--sp-6);
  align-items: start;
}
.rodape__marca { display: grid; justify-items: start; gap: var(--sp-2); }
.rodape__marca .marca > svg { height: clamp(72px, 6vw, 116px); }
.rodape__assinatura-marca { font-size: var(--fs-ui-xs); color: var(--c-sand); }

.rodape__h {
  margin-bottom: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  color: var(--c-sand);
}
.rodape__col li { padding: 5px 0; font-size: var(--fs-ui-sm); }
.rodape__col a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.rodape__col a:hover { border-bottom-color: var(--c-cream); }
.rodape__ramal { color: var(--c-sand); font-variant-numeric: tabular-nums; }

.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 16%, transparent);
  font-size: var(--fs-ui-xs);
  color: var(--c-sand);
}
.rodape__legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rodape__legal a { text-decoration: none; border-bottom: 1px solid transparent; }
.rodape__legal a:hover { border-bottom-color: var(--c-sand); }

/* ==========================================================================
   PONTOS DE QUEBRA

   Sem layout de mobile aprovado — mesma condição do site (DESIGN-SYSTEM §6).
   Os limites abaixo são decisão de implementação: 1180px onde a tabela e as
   duas colunas do mural começam a apertar, 900px onde o menu vira gaveta,
   o mesmo valor usado no site.
   ========================================================================== */

@media (max-width: 1180px) {
  .mural__grid { grid-template-columns: minmax(0, 1fr); }
  .painel__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rodape__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .header__toggle { display: block; margin-left: auto; }
  .header__acoes .busca { display: none; }

  .header__nav {
    position: fixed;
    inset: clamp(64px, 5vw, 84px) 0 auto 0;
    margin-left: 0;
    background: var(--c-navy);
    border-top: 1px solid var(--linha-clara);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
  }
  .header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--gutter) var(--sp-4);
  }
  .header__nav li { border-bottom: 1px solid color-mix(in srgb, var(--c-cream) 12%, transparent); }
  .header__link {
    display: block;
    padding-block: var(--sp-2);
    font-size: var(--fs-ui);
    border-bottom: 0;
  }

  body.menu-aberto .header__nav { opacity: 1; visibility: visible; }
  body.menu-aberto .header__bars { background: transparent; }
  body.menu-aberto .header__bars::before { transform: translateY(7px) rotate(45deg); }
  body.menu-aberto .header__bars::after  { transform: translateY(-7px) rotate(-45deg); }

  .usuario__dados { display: none; }
}

@media (max-width: 620px) {
  .painel__acoes .btn { flex: 1 1 100%; }
  .rodape__grid { grid-template-columns: minmax(0, 1fr); }
  .aviso { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .agenda__item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media print {
  .header, .painel__acoes, .filtros, .sino, .busca, .link-mais { display: none; }
  body { background: #fff; }
  .producao, .indicadores, .documentos, .rodape { background: #fff; color: #000; }
}