/* =============================================================================
   PIMEX · sistema visual JCB
   Tokens e regras de Design.md §3. Raio 2px em tudo, sem sombra, sem gradiente.
   ========================================================================== */

:root {
  /* 3.1 — cores de marca */
  --jcb-amarelo: #FCAF26;
  --jcb-amarelo-hover: #FFC04D;
  --jcb-amarelo-borda: #E09E1E;
  --jcb-preto: #000000;
  --jcb-cinza-escuro: #575D5E;
  --jcb-cinza-medio: #9B9B9B;
  --jcb-cinza-claro: #B0B0A9;
  --jcb-verde-militar: #717539;

  /* 3.2 — neutros de interface */
  --sup-app: #F2F2EF;
  --sup-card: #FFFFFF;
  --sup-sutil: #FAFAF7;
  --sup-chrome: #25282A;
  --sup-chrome-2: #33373A;
  --sup-chrome-linha: #3A3E40;
  --sup-trilho: #E8E8E4;
  --sup-input: #FCFCFA;
  --sup-destaque: #FFFDF6;

  --linha: #D5D5CE;
  --linha-media: #E2E2DC;
  --linha-suave: #EFEFEA;

  --texto: #1A1C1C;
  --texto-2: #6E7375;
  --texto-3: #8A8F90;
  --texto-chrome: #3A3E40;

  /* 3.3 — tokens semânticos de status
     ATENÇÃO: --status-atrasada-* e --vermelho são ADIÇÕES SINALIZADAS.
     A identidade JCB não define cor de erro. Validar com o time de marca. */
  --vermelho: #A83232;

  --st-completed-bg: #EAEFDF;  --st-completed-fg: #4C6420;  --st-completed-dot: #717539;
  --st-released-bg: #FDF3DC;   --st-released-fg: #8A6A12;   --st-released-dot: #FCAF26;
  --st-in-progress-bg: #FDF3DC; --st-in-progress-fg: #8A6A12; --st-in-progress-dot: #FCAF26;
  --st-blocked-bg: #F2F2EF;    --st-blocked-fg: #8A8F90;    --st-blocked-dot: #B0B0A9;
  --st-late-bg: #F7E4E0;       --st-late-fg: #8E2A1E;       --st-late-dot: #A83232;
  --st-na-bg: #F2F2EF;         --st-na-fg: #8A8F90;         --st-na-dot: #D5D5CE;
  --st-rejected-bg: #F7E4E0;   --st-rejected-fg: #8E2A1E;   --st-rejected-dot: #A83232;
  --st-system-dot: #575D5E;

  /* 3.5 — forma e movimento */
  --raio: 2px;
  --sidebar-w: 236px;
  --topbar-h: 56px;
  --conteudo-max: 1180px;
  --transicao: 120ms ease-out;

  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
}

/* ---------- base ---------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--sup-app);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--st-released-fg); text-decoration: none; }
a:hover { color: var(--jcb-preto); text-decoration: underline; }

h1, h2, h3, p, figure { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }
.u-right { text-align: right; }
.u-grow { flex: 1; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-hidden { display: none !important; }

:focus-visible {
  outline: 2px solid var(--jcb-amarelo);
  outline-offset: 1px;
}

/* ---------- estrutura ----------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--sup-chrome);
  border-right: 1px solid var(--jcb-preto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand {
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--sup-chrome-linha);
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar__logo { height: 22px; width: auto; display: block; }
/* substituto provisório enquanto o PNG oficial não está no repositório */
.sidebar__logo-fallback {
  font-size: 19px; font-weight: 800; letter-spacing: .04em; line-height: 22px;
  color: #FFFFFF; display: block;
}
.sidebar__divisor { width: 1px; height: 20px; background: #4A4E50; }
.sidebar__sigla {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--jcb-cinza-claro); text-transform: uppercase;
}

.sidebar__grupo { padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidebar__rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-2); padding: 6px 8px 8px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--raio);
  font-size: 13.5px; font-weight: 500; color: var(--jcb-cinza-claro);
  transition: background var(--transicao), color var(--transicao);
}
.nav-item:hover { background: var(--sup-chrome-2); color: var(--jcb-cinza-claro); text-decoration: none; }
.nav-item__barra { width: 3px; height: 16px; border-radius: 1px; background: transparent; flex: none; }
.nav-item__label { flex: 1; }
.nav-item__contador {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--raio);
  background: var(--sup-chrome-linha); color: #D8D8D2;
}
.nav-item.is-ativo { color: #FFFFFF; }
.nav-item.is-ativo .nav-item__barra { background: var(--jcb-amarelo); }

.sidebar__rodape {
  margin-top: auto; padding: 14px 18px;
  border-top: 1px solid var(--sup-chrome-linha);
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar__rodape-titulo {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-2); font-weight: 700;
}
.sidebar__rodape-texto { font-size: 12px; color: var(--jcb-cinza-medio); line-height: 1.5; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h); flex: none;
  background: var(--sup-card); border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.migalha { font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.migalha__sep { color: var(--jcb-cinza-claro); }
.migalha__atual { color: var(--texto); font-weight: 600; }
.migalha a { color: var(--texto-2); }

.busca {
  display: flex; align-items: center; gap: 8px;
  background: var(--sup-app); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 6px 10px; width: 280px;
}
.busca input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; }
.busca input::placeholder { color: var(--jcb-cinza-medio); }
.busca__icone { width: 12px; height: 12px; border: 1.5px solid var(--jcb-cinza-medio); border-radius: 50%; flex: none; }

.usuario {
  display: flex; align-items: center; gap: 10px;
  padding-left: 8px; border-left: 1px solid var(--linha-media);
}
.usuario__nome { font-size: 12.5px; font-weight: 600; }
.usuario__area { font-size: 11px; color: var(--texto-2); }

.conteudo { flex: 1; padding: 24px; }
.pagina { max-width: var(--conteudo-max); display: flex; flex-direction: column; gap: 20px; }

/* ---------- tipografia de página ------------------------------------------ */

.titulo-tela { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.titulo-objeto { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.titulo-epi { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.subtitulo { font-size: 13.5px; color: var(--texto-2); margin-top: 4px; }
.rotulo-secao {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-2);
}
.auxiliar { font-size: 11.5px; color: var(--texto-3); }

.cabecalho-tela { display: flex; align-items: flex-end; gap: 16px; }

/* ---------- superfícies --------------------------------------------------- */

.card {
  background: var(--sup-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.card--pad { padding: 16px 18px; }
.card--pad-g { padding: 18px 20px; }
.card--pad-gg { padding: 20px; }

.card__cabecalho {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--linha-media);
}
.card__cabecalho--sutil { background: var(--sup-sutil); }
.card__titulo { font-size: 13px; font-weight: 700; }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* ---------- botões -------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: var(--raio);
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--linha); background: var(--sup-card); color: var(--texto);
  cursor: pointer; text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao);
}
.btn:hover { border-color: var(--jcb-cinza-medio); text-decoration: none; color: var(--texto); }
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--jcb-amarelo); border-color: var(--jcb-amarelo-borda);
  color: var(--texto); /* preto sobre amarelo — branco reprova AA (Design.md §11) */
  font-weight: 700; padding: 10px 18px;
}
.btn--primario:hover { background: var(--jcb-amarelo-hover); border-color: var(--jcb-amarelo-borda); }

.btn--escuro { background: var(--sup-chrome); border-color: var(--jcb-preto); color: #fff; font-weight: 700; }
.btn--escuro:hover { background: var(--texto-chrome); color: #fff; }

.btn--perigo { color: var(--vermelho); border-color: #E3BDB6; font-weight: 700; }
.btn--perigo:hover { border-color: var(--vermelho); }

.btn[disabled], .btn.is-desabilitado {
  background: var(--sup-app); border-color: var(--linha-media); color: var(--jcb-cinza-claro);
  cursor: not-allowed; pointer-events: none;
}

.btn--link {
  border: 0; background: transparent; padding: 0;
  font-size: 12px; font-weight: 700; color: var(--st-released-fg);
}
.btn--link:hover { text-decoration: underline; border: 0; }

/* ---------- chips e etiquetas --------------------------------------------- */

.chip {
  display: inline-block; padding: 3px 8px; border-radius: var(--raio);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--sup-app); color: var(--texto-chrome); white-space: nowrap;
}
.chip--completed { background: var(--st-completed-bg); color: var(--st-completed-fg); }
.chip--released,
.chip--in-progress { background: var(--st-released-bg); color: var(--st-released-fg); }
.chip--blocked,
.chip--na { background: var(--st-blocked-bg); color: var(--st-blocked-fg); }
.chip--late,
.chip--rejected { background: var(--st-late-bg); color: var(--st-late-fg); }

.chip-mono {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: var(--raio);
  background: var(--st-released-bg); color: var(--st-released-fg);
}
.chip-mono--escuro { background: var(--sup-chrome); color: var(--jcb-amarelo); font-size: 13px; }

.tag-meta {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 3px 8px; background: var(--sup-sutil);
}
.tag-meta__k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-3);
}
.tag-meta__v { font-family: var(--mono); font-size: 12px; font-weight: 600; }

.ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--st-blocked-dot); }
.ponto--completed { background: var(--st-completed-dot); }
.ponto--released, .ponto--in-progress { background: var(--st-released-dot); }
.ponto--blocked { background: var(--st-blocked-dot); }
.ponto--na { background: var(--st-na-dot); }
.ponto--late, .ponto--rejected { background: var(--st-late-dot); }
.ponto--system { background: var(--st-system-dot); }

.obrigatorio { font-size: 12px; color: var(--vermelho); font-weight: 700; }

/* ---------- tabelas densas ------------------------------------------------ */

.tabela { width: 100%; }
.tabela__head, .tabela__linha { display: grid; align-items: center; padding: 0 16px; }
.tabela__head {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-2); border-bottom: 1px solid var(--linha-media);
}
.tabela__head > * { padding: 9px 8px; }
.tabela__head > *:first-child { padding-left: 0; }
.tabela__head > *:last-child { padding-right: 0; }

.tabela__linha {
  border-bottom: 1px solid var(--linha-suave);
  color: inherit; text-decoration: none;
  transition: background var(--transicao);
}
.tabela__linha:last-child { border-bottom: 0; }
.tabela__linha:hover { background: var(--sup-sutil); text-decoration: none; color: inherit; }
.tabela__linha > * { padding: 11px 8px; }
.tabela__linha > *:first-child { padding-left: 0; }
.tabela__linha > *:last-child { padding-right: 0; }
.tabela__linha.is-esmaecida { opacity: .62; }

.tabela__vazio { padding: 28px 16px; text-align: center; color: var(--texto-3); font-size: 13px; }

/* colunas — Painel */
.grid-fluxos { grid-template-columns: 110px minmax(220px, 1fr) 92px 150px 132px 150px 96px; }
/* colunas — atividades da fase */
.grid-atividades { grid-template-columns: 78px minmax(240px, 1fr) 128px 138px 128px 118px; }
/* colunas — componentes do GA */
.grid-componentes { grid-template-columns: 150px 150px 190px minmax(200px, 1fr) 80px; }

/* ---------- KPI ----------------------------------------------------------- */

.kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.kpi__label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-2);
}
.kpi__valor {
  font-family: var(--mono); font-size: 30px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1;
}
.kpi__valor--alerta { color: var(--vermelho); }
.kpi__valor--acao { color: var(--st-released-fg); }
.kpi__valor--ok { color: var(--st-completed-fg); }
.kpi__hint { font-size: 12px; color: var(--texto-3); }

/* ---------- progresso ----------------------------------------------------- */

.barra { height: 5px; background: var(--sup-trilho); border-radius: 1px; overflow: hidden; flex: 1; }
.barra--fina { height: 4px; }
.barra--grossa { height: 14px; }
.barra__preenchimento { height: 100%; background: var(--jcb-amarelo); }
.barra__preenchimento--ok { background: var(--jcb-verde-militar); }
.barra__preenchimento--alerta { background: var(--vermelho); }
.barra__preenchimento--neutro { background: var(--jcb-cinza-escuro); }
.barra__preenchimento--vazio { background: var(--sup-trilho); }

.progresso { display: flex; align-items: center; gap: 8px; }
.progresso__pct {
  font-family: var(--mono); font-size: 11.5px; color: var(--jcb-cinza-escuro);
  width: 34px; text-align: right;
}

.progresso-geral { text-align: right; flex: none; }
.progresso-geral__valor {
  font-family: var(--mono); font-size: 34px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1;
}

/* ---------- trilha de fases ----------------------------------------------- */

.trilha { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.trilha__fase {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; background: var(--sup-card);
  color: inherit; text-decoration: none; display: block;
  transition: border-color var(--transicao);
}
.trilha__fase:hover { border-color: var(--jcb-cinza-medio); text-decoration: none; color: inherit; }
.trilha__fase.is-atual { background: var(--sup-destaque); border-color: var(--jcb-amarelo); }
.trilha__fase.is-selecionada { border-color: var(--jcb-amarelo); border-width: 1px; box-shadow: inset 0 0 0 1px var(--jcb-amarelo); }
.trilha__num {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3);
}
.trilha__fase.is-concluida .trilha__num { color: var(--st-completed-fg); }
.trilha__fase.is-atual .trilha__num { color: var(--st-released-fg); }
.trilha__nome { font-size: 13px; font-weight: 700; margin-top: 3px; }
.trilha__nome.is-inativa { color: var(--texto-3); }
.trilha__rodape {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--texto-2);
}

/* ---------- formulário de atividade --------------------------------------- */

.atividade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.atividade__coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.atividade__trilho { display: flex; flex-direction: column; gap: 12px; }

.consolidado { display: grid; grid-template-columns: repeat(4, 1fr); }
.consolidado__item { padding: 14px 20px; border-right: 1px solid var(--linha-suave); }
.consolidado__item:last-child { border-right: 0; }
.consolidado__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-2);
}
.consolidado__valor {
  font-family: var(--mono); font-size: 18px; font-weight: 600;
  margin-top: 5px; white-space: nowrap;
}
.consolidado__valor--saving { color: var(--st-completed-fg); }
.consolidado__valor--na { color: var(--texto-3); }
.consolidado__origem { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo__rotulo { display: flex; align-items: baseline; gap: 5px; }
.campo__nome { font-size: 12px; font-weight: 700; }
.campo__tipo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-3);
}
.campo__tipo--lista { color: var(--st-released-fg); }
.campo__hint { font-size: 11px; color: var(--texto-3); }
.campo__nota {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-size: 11.5px; color: var(--texto-3);
}

.entrada, .textarea {
  width: 100%; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 9px 11px; background: var(--sup-input); color: var(--texto);
  outline: none; transition: border-color var(--transicao), background var(--transicao);
}
.entrada:focus, .textarea:focus { border-color: var(--jcb-amarelo); border-width: 2px; padding: 8px 10px; background: #fff; }
.entrada--mono { font-family: var(--mono); font-size: 13px; }
.entrada--numero { font-family: var(--mono); text-align: right; }
.textarea { min-height: 96px; resize: vertical; font-size: 13.5px; line-height: 1.55; }
.entrada[readonly], .textarea[readonly] { background: var(--sup-app); color: var(--texto-2); }

/* radios em cartões — a escolha é decisão, não seleção (Design.md §6) */
.cartoes-radio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cartoes-radio--2 { grid-template-columns: repeat(2, 1fr); }
.cartao-radio {
  border: 1.5px solid var(--linha); border-radius: var(--raio);
  padding: 13px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  background: var(--sup-card); transition: border-color var(--transicao), background var(--transicao);
}
.cartao-radio:hover { border-color: var(--jcb-cinza-medio); }
.cartao-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cartao-radio__anel {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--jcb-cinza-claro);
  display: grid; place-items: center; flex: none;
}
.cartao-radio__ponto { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.cartao-radio__label { font-size: 13.5px; font-weight: 600; }
.cartao-radio:has(input:checked) { border-color: var(--jcb-amarelo); background: var(--sup-destaque); }
.cartao-radio:has(input:checked) .cartao-radio__anel { border-color: var(--jcb-amarelo); }
.cartao-radio:has(input:checked) .cartao-radio__ponto { background: var(--jcb-amarelo); }
.cartao-radio:has(input:focus-visible) { outline: 2px solid var(--jcb-amarelo); outline-offset: 1px; }

.confirmacao { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: var(--raio); }
.confirmacao:has(input:checked) { border-color: var(--jcb-amarelo); background: var(--sup-destaque); }
.confirmacao input { margin-top: 2px; accent-color: var(--jcb-amarelo); width: 16px; height: 16px; }

.dropzone {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed var(--linha); border-radius: var(--raio);
  padding: 14px 16px; background: var(--sup-sutil);
}
.dropzone__icone {
  width: 30px; height: 30px; border-radius: var(--raio); background: var(--sup-trilho);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--jcb-cinza-escuro);
  flex: none;
}
.dropzone__nome { font-size: 13px; font-weight: 600; }
.dropzone__meta { font-size: 11.5px; color: var(--texto-3); }

.divisor-tracejado { margin-top: 18px; border-top: 1px dashed var(--linha); padding-top: 16px; }

.barra-acao {
  display: flex; align-items: center; gap: 10px;
  background: var(--sup-card); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 20px; position: sticky; bottom: 0; z-index: 10;
}
.barra-acao__frase { font-size: 12.5px; color: var(--texto-2); }
.barra-acao__frase .mono { font-weight: 600; color: var(--texto); }

/* ---------- trilho de contexto -------------------------------------------- */

.pessoa { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 28px; height: 28px; border-radius: var(--raio);
  background: var(--jcb-cinza-escuro); color: #fff;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; flex: none;
}
.avatar--suplente { background: var(--jcb-cinza-medio); }
.avatar--gestor { background: var(--sup-chrome); }
.pessoa__nome { font-size: 12.5px; font-weight: 600; }
.pessoa__papel { font-size: 11px; color: var(--texto-3); }

.dep-titulo { font-size: 11px; font-weight: 700; color: var(--texto-3); margin-bottom: 7px; }
.dep-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--linha-media); border-radius: var(--raio);
  background: var(--sup-sutil);
}
.dep-item__ti { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.dep-item__nome { font-size: 11.5px; color: var(--jcb-cinza-escuro); }
.dep-item .ponto { width: 5px; height: 5px; }

.linha-tempo__item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.linha-tempo__eixo { display: flex; flex-direction: column; align-items: center; }
.linha-tempo__eixo .ponto { width: 7px; height: 7px; margin-top: 5px; }
.linha-tempo__fio { flex: 1; width: 1px; background: var(--linha-media); }
.linha-tempo__corpo { padding-bottom: 14px; }
.linha-tempo__texto { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.linha-tempo__quando { font-family: var(--mono); font-size: 11px; color: var(--texto-3); margin-top: 2px; }

/* ---------- dados técnicos ------------------------------------------------ */

.ga { border-bottom: 1px solid var(--linha-media); }
.ga:last-child { border-bottom: 0; }
.ga__cabecalho {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; background: #F7F7F3;
}
.ga__rotulo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-2);
}
.ga__codigo { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.ga__revisao { font-size: 12px; color: var(--texto-2); }
.ga__head, .ga__linha { display: grid; padding: 0 20px; border-top: 1px solid var(--linha-suave); align-items: center; }
.ga__head {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-2);
}
.ga__head > * { padding: 8px; }
.ga__head > *:first-child { padding-left: 0; }
.ga__head > *:last-child { padding-right: 0; }
.ga__linha > * { padding: 10px 8px; }
.ga__linha > *:first-child { padding-left: 0; }
.ga__linha > *:last-child { padding-right: 0; }

.pn-removido { font-family: var(--mono); font-size: 12.5px; color: var(--vermelho); }
.pn-adicionado { font-family: var(--mono); font-size: 12.5px; color: var(--st-completed-fg); font-weight: 600; }
.tipo-material {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 2px 7px; background: var(--sup-sutil);
  font-family: var(--mono); font-size: 11.5px;
}

/* ---------- carga por área ------------------------------------------------ */

.carga { display: flex; align-items: center; gap: 10px; }
.carga__nome { width: 104px; font-size: 12.5px; color: var(--texto-chrome); }
.carga__n { width: 26px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--jcb-cinza-escuro); }

.atalho {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--linha-media); border-radius: var(--raio);
  color: inherit; text-decoration: none;
  transition: border-color var(--transicao), background var(--transicao);
}
.atalho:hover { border-color: var(--jcb-amarelo); background: var(--sup-destaque); text-decoration: none; color: inherit; }
.atalho__nivel {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--st-released-fg); background: var(--st-released-bg);
  padding: 2px 6px; border-radius: var(--raio); flex: none;
}

/* ---------- fundamentos visuais ------------------------------------------- */

.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.swatch { border: 1px solid var(--linha-media); border-radius: var(--raio); overflow: hidden; }
.swatch__cor { height: 74px; }
.swatch__corpo { padding: 9px 10px; }
.swatch__nome { font-size: 11.5px; font-weight: 700; }
.swatch__hex { font-family: var(--mono); font-size: 11px; color: var(--texto-2); margin-top: 2px; }
.swatch__ref { font-family: var(--mono); font-size: 10.5px; color: var(--jcb-cinza-medio); }

.token-linha { display: flex; align-items: center; gap: 12px; }
.token-linha .chip { min-width: 104px; text-align: center; }
.token-linha__uso { font-size: 12.5px; color: var(--jcb-cinza-escuro); }

/* ---------- avisos -------------------------------------------------------- */

.aviso {
  border: 1px solid var(--linha); border-left: 3px solid var(--jcb-cinza-claro);
  border-radius: var(--raio); background: var(--sup-sutil);
  padding: 12px 14px; font-size: 12.5px; color: var(--jcb-cinza-escuro); line-height: 1.5;
}
.aviso--bloqueio { border-left-color: var(--jcb-cinza-claro); }
.aviso--erro { border-left-color: var(--vermelho); background: var(--st-late-bg); color: var(--st-late-fg); }
.aviso--ok { border-left-color: var(--jcb-verde-militar); background: var(--st-completed-bg); color: var(--st-completed-fg); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

.flash { margin-bottom: 16px; }

/* ---------- responsividade (Design.md §11) -------------------------------- */

@media (max-width: 1439px) {
  .atividade { grid-template-columns: minmax(0, 1fr); }
  .atividade__trilho { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
}

@media (max-width: 1023px) {
  .sidebar { width: 64px; }
  .sidebar__sigla, .sidebar__divisor, .nav-item__label, .sidebar__rodape, .sidebar__rotulo { display: none; }
  .nav-item { justify-content: center; }
  .busca { display: none; }
  .trilha { grid-template-columns: repeat(2, 1fr); }
  .grade-4, .grade-3, .grade-2, .consolidado, .swatches { grid-template-columns: 1fr 1fr; }
  .atividade__trilho { grid-template-columns: 1fr; }

  /* tabelas viram lista de cartões: Nível, Título, Situação, Responsável */
  .tabela__head { display: none; }
  .tabela__linha {
    grid-template-columns: 1fr auto !important;
    gap: 4px 8px; padding: 12px 16px;
  }
  .tabela__linha > * { padding: 0; }
  .tabela__linha .col-oculta-mobile { display: none; }

  .btn, .nav-item, .tabela__linha, .trilha__fase, .cartao-radio { min-height: 44px; }
}