/* ==========================================================================
   WL MAQUETES — DESIGN SYSTEM (FERRAMENTAS)

   Cópia dos tokens da intranet (10-SISTEMAS/Intranet/assets/css/tokens.css),
   mais os primitivos de aplicação que as ferramentas usam de fato: cabeçalho,
   cartão, formulário, botão, selo, tabela e barra de progresso.

   O que NÃO entrou: os componentes que só existem na página inicial da
   intranet (mural, agenda, indicadores, rodapé de quatro colunas). Uma
   ferramenta não tem esse conteúdo — copiá-los deixaria o arquivo grande e
   nenhum deles seria usado.

   Regras herdadas do site: seis cores, sem gradiente, sem sombra, cantos de
   no máximo 4px, par tipográfico invertido (serifada no display e nos botões,
   Transat no corpo).
   ========================================================================== */

/* --- FONTES ---------------------------------------------------------------
   Source Serif 4 — SIL Open Font License, livre para uso web.
   Transat — tipografia comercial da Typetanic Fonts. O .woff2 não está aqui
   pelo mesmo motivo do site e da intranet: falta o kit web do licenciante.
   Sem ele o navegador cai para a próxima fonte da pilha, sem quebrar nada.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-light-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-semibold-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Transat";
  src: url("../fonts/transat-standard.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* --- COR ------------------------------------------------------------- */
  --c-cream:  #F0EDE8;
  --c-navy:   #082F4A;
  --c-brown:  #67492D;
  --c-bronze: #9B7854;
  --c-sand:   #CCB9A4;
  --c-ink:    #282625;

  /* Variantes de acessibilidade — ver DESIGN-SYSTEM.md, seção Contraste. */
  --c-bronze-aa: #846647;
  --c-sand-aa: #DCCDBC;

  /* --- SUPERFÍCIES ------------------------------------------------------ */
  --surface-default: var(--c-cream);
  --surface-stats:   var(--c-brown);
  --surface-dark:    var(--c-navy);

  /* --- TIPOGRAFIA ------------------------------------------------------- */
  --ff-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --ff-body: "Transat", "Source Serif 4", system-ui, sans-serif;
  --ff-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;

  --fs-heading: clamp(22px, 19.330px + 0.7120vw, 33px);
  --ls-button: 0.01em;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* Texto de interface — a escala da camada de aplicação da intranet. */
  --fs-ui-lg: clamp(17px, 15.8px + 0.32vw, 22px);
  --fs-ui:    clamp(15px, 14.3px + 0.19vw, 18px);
  --fs-ui-sm: clamp(13px, 12.5px + 0.13vw, 15px);
  --fs-ui-xs: clamp(11px, 10.8px + 0.06vw, 13px);

  /* --- LAYOUT ----------------------------------------------------------- */
  --container-max: 1726px;
  --gutter: clamp(20px, 5vw, 97px);

  /* --- ESPAÇAMENTO (base 8) --------------------------------------------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --section-y-app: clamp(40px, 4vw, 76px);

  /* --- OUTROS ------------------------------------------------------------ */
  --radius: 4px;
  --transition: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Traço de superfície: opacidade baixa do próprio navy/creme, nunca um
     cinza novo na paleta. */
  --linha: color-mix(in srgb, var(--c-navy) 14%, transparent);
  --linha-forte: color-mix(in srgb, var(--c-navy) 26%, transparent);
  --linha-clara: color-mix(in srgb, var(--c-cream) 22%, transparent);

  /* Cartão sobre creme: creme puro sobre creme sumiria e branco não está na
     paleta — o card é o creme clareado. */
  --superficie-card: #F7F5F2;

  /* Estados. Entram como filete, etiqueta e selo — nunca como área grande,
     para não disputar com a marca. */
  --st-ok:      #3F6B4B;
  --st-atencao: #A9762A;
  --st-risco:   #9B3B2F;
  --st-atencao-fundo: #8A5E1C;

  /* Os mesmos estados sobre fundo escuro, já clareados para passar em AA
     (é a régua das etiquetas da tabela da intranet). */
  --st-ok-claro:      #8FC79E;
  --st-atencao-claro: #E2B872;
  --st-risco-claro:   #E39C90;
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

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; }

code, pre, .mono { font-family: var(--ff-mono); }
code { font-size: 0.92em; }

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Contêiner estreito: formulário de trabalho não se lê bem em 1726px. */
.container--estreito { max-width: calc(1180px + 2 * 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;
}

.marca { display: inline-flex; }
.marca > svg { display: block; height: var(--marca-altura, 32px); width: auto; }

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

   Mesmo cabeçalho navy da intranet, sem o estado transparente do site (não há
   hero fotográfico atrás). Aqui ele NÃO é fixo: as ferramentas têm log e
   tabela que rolam, e uma barra fixa comeria altura útil da leitura.
   ========================================================================== */

.header {
  background: var(--c-navy);
  color: var(--c-cream);
}

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

.header__id {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-cream);
  text-decoration: none;
  flex-shrink: 0;
}

.header__titulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 1.5vw, 27px);
  line-height: var(--lh-heading);
}
.header__titulo em { font-style: italic; color: var(--c-sand); }

/* Filete + nome do lugar, como o "Intranet" ao lado da marca. */
.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__acoes {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.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); }

/* Linha de contexto da ferramenta: onde ela roda, o que ela é. */
.header__nota {
  font-size: var(--fs-ui-sm);
  color: var(--c-sand);
}
.header__nota code { color: var(--c-sand-aa); }

/* ==========================================================================
   ABERTURA DA PÁGINA
   ========================================================================== */

.abertura { padding-block: var(--section-y-app) var(--sp-4); }

.abertura__titulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-light);
  font-size: clamp(30px, 3vw, 56px);
  line-height: var(--lh-heading);
}
.abertura__titulo em { font-style: italic; color: var(--c-bronze-aa); }

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

/* Rótulo de seção — o "olho" acima do título. */
.t-rotulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui);
  color: var(--c-bronze-aa);
}

.secao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.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); }

/* ==========================================================================
   CARTÃO

   O acento de 3px na borda superior substitui a sombra — o site não usa
   sombra em lugar nenhum, e a intranet manteve a regra.
   ========================================================================== */

.painel {
  padding: var(--sp-3);
  background: var(--superficie-card);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--c-bronze);
  border-radius: var(--radius);
}
.painel + .painel { margin-top: var(--sp-2); }

.painel__titulo {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui-lg);
  line-height: 1.25;
}
.painel__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.painel__nota {
  margin-top: 2px;
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}

/* Numeral da etapa, no lugar do "1 ·" solto: bloco navy como a data do mural. */
.passo {
  display: inline-grid;
  place-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  background: var(--c-navy);
  color: var(--c-cream);
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-size: var(--fs-ui-sm);
  line-height: 1;
}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */

.campo { margin-bottom: var(--sp-2); }
.campo:last-child { margin-bottom: 0; }

.campo__rotulo,
.rotulo {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ff-display);
  font-size: var(--fs-ui-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-bronze-aa);
}

.campo__dica,
.dica {
  margin-top: 6px;
  font-size: var(--fs-ui-sm);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--c-cream);
  color: var(--c-navy);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius);
  font-family: var(--ff-body);
  font-size: var(--fs-ui-sm);
}
textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}
input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
}

.grade-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2);
}

/* Grupo de opções: contorno e legenda em serifada, sem o cinza do navegador. */
.grupo {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}
.grupo > legend {
  padding: 0 var(--sp-1);
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  font-style: italic;
  font-size: var(--fs-ui);
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-ui-sm);
  cursor: pointer;
}
.opcao input[type="checkbox"],
.opcao input[type="radio"] {
  width: 17px; height: 17px;
  min-height: 0;
  margin-top: 3px;
  flex: none;
  accent-color: var(--c-bronze-aa);
}
.opcao small {
  display: block;
  color: color-mix(in srgb, var(--c-navy) 72%, transparent);
  font-size: var(--fs-ui-xs);
}

.opcoes { display: grid; gap: 2px; }
.opcoes--colunas {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px var(--sp-2);
}

/* Alternador em linha (qualidade, modo de legenda): o mesmo botão de filtro
   da tabela da intranet, aqui sobre fundo claro. */
.segmento { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.segmento label { margin: 0; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento span {
  display: inline-block;
  min-height: 38px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--linha-forte);
  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;
  user-select: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.segmento span:hover { border-color: var(--c-bronze-aa); }
.segmento input:checked + span {
  background: var(--c-navy);
  color: var(--c-cream);
  border-color: var(--c-navy);
}
.segmento input:focus-visible + span { outline: 2px solid var(--c-navy); outline-offset: 3px; }

/* ==========================================================================
   BOTÃO
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 44px;
  padding: 0 1.6em;
  background: var(--c-bronze-aa);
  color: var(--c-cream);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--ff-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition);
}
.btn:hover { background: var(--c-brown); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:disabled:hover { background: var(--c-bronze-aa); }

.btn--secondary { background: var(--c-cream); color: var(--c-brown); }
.btn--secondary:hover { background: var(--c-sand); }

.btn--ghost {
  background: transparent;
  color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--c-navy) 6%, transparent); }
.btn--ghost:disabled:hover { background: transparent; }

.btn--sm { min-height: 34px; padding: 0 1.1em; font-size: var(--fs-ui-sm); }

.btn:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; }

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

/* ==========================================================================
   SELO E ETIQUETA DE ESTADO

   A cor de estado entra em área mínima — filete e selo pequeno —, nunca como
   fundo de bloco.
   ========================================================================== */

.selo {
  display: inline-block;
  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);
  background: var(--c-navy);
}
.selo--ok { background: var(--st-ok); }
.selo--atencao { background: var(--st-atencao-fundo); }
.selo--risco { background: var(--st-risco); }
/* Neutro não é estado, é ausência dele: fica vazado. Preenchido com navy a
   62%, o texto creme dá 3.85:1 e reprova nos 11px do selo; com navy cheio,
   uma coluna inteira de selos pesaria mais que os estados de verdade. */
.selo--neutro {
  background: transparent;
  color: var(--c-navy);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}

.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: var(--st-ok); }
/* O âmbar original é tom de filete: como TEXTO sobre o creme ele dá 3.63:1 e
   reprova. A variante escurecida — a mesma que a intranet usa no selo — sobe
   para 4.86:1. Os outros dois estados passam no tom original. */
.tag--atencao { color: var(--st-atencao-fundo); }
.tag--risco { color: var(--st-risco); }
.tag--neutro { color: color-mix(in srgb, var(--c-navy) 70%, transparent); }

/* Estado com ponto, para uma linha de situação viva (log rodando, provedor). */
.estado {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  font-size: var(--fs-ui-sm);
}
.estado__ponto {
  width: 8px; height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-navy) 45%, transparent);
}
.estado__ponto--ok { background: var(--st-ok); }
.estado__ponto--erro { background: var(--st-risco); }
.estado__ponto--atencao { background: var(--st-atencao); }
.estado__ponto--rodando { background: var(--c-bronze); animation: pulso 1.1s infinite; }

@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ==========================================================================
   BARRA DE PROGRESSO — retângulo puro, como as faixas do site
   ========================================================================== */

.progresso { display: grid; gap: 6px; }
.progresso__trilho {
  height: 6px;
  background: color-mix(in srgb, var(--c-navy) 14%, transparent);
}
.progresso__preenchido {
  height: 100%;
  width: 0;
  background: var(--c-bronze);
  transition: width var(--transition);
}
.progresso__valor {
  font-size: var(--fs-ui-xs);
  color: color-mix(in srgb, var(--c-navy) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TABELA — rola sozinha na horizontal; a página nunca rola de lado
   ========================================================================== */

.tabela-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  background: var(--superficie-card);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui-sm);
}
.tabela th {
  padding: var(--sp-2) 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-bronze-aa);
  background: var(--superficie-card);
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}
.tabela td {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.tabela tbody tr { transition: background var(--transition); }
.tabela tbody tr:hover { background: var(--c-cream); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   BLOCO DE SAÍDA (log, comando) — faixa navy dentro da página clara
   ========================================================================== */

.saida {
  margin: 0;
  padding: var(--sp-2);
  background: var(--c-navy);
  color: var(--c-cream);
  border-radius: var(--radius);
  font-family: var(--ff-mono);
  font-size: var(--fs-ui-xs);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.saida__linha-erro { color: var(--st-risco-claro); }

/* ==========================================================================
   NOTA E RODAPÉ
   ========================================================================== */

.nota {
  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);
}

.rodape {
  margin-top: var(--section-y-app);
  padding-block: var(--sp-3);
  background: var(--surface-dark);
  color: var(--c-sand);
  font-size: var(--fs-ui-xs);
}
.rodape__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.rodape code { color: var(--c-sand-aa); }

/* ==========================================================================
   PISO DE QUALIDADE
   ========================================================================== */

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ponto de quebra do menu no site e na intranet: 900px. */
@media (max-width: 900px) {
  .header__inner { gap: var(--sp-2); }
  .header__acoes { margin-left: 0; width: 100%; }
}