/* =============================================================================
   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; }

/*
  O atributo `hidden` só ganha `display: none` pela folha do navegador, que
  perde para qualquer regra de autor. Era o que fazia o "✕" das linhas de
  componente não remover nada: `.ga__linha` declara `display: grid`, então a
  linha marcada como hidden continuava na tela e o botão parecia quebrado.
  Aqui a regra vale para toda a aplicação, não só para aquele caso.
*/
[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; }

/* Criticidade recolhível (product owner, 14/09/2026).
   O <summary> é o próprio cabeçalho do card: recolhido, ele é tudo o que a tela
   mostra do bloco. Sem JavaScript — `details` abre e fecha sem recarregar e já
   responde a Enter e Espaço por conta própria. */
.criticidade__resumo {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 16px; background: var(--sup-sutil);
  list-style: none; /* Firefox */
}
.criticidade__resumo::-webkit-details-marker { display: none; }
.criticidade[open] .criticidade__resumo { border-bottom: 1px solid var(--linha-media); }
.criticidade__resumo:hover .criticidade__acao { color: var(--texto); }
.criticidade__resumo:focus-visible { outline: 2px solid var(--jcb-amarelo); outline-offset: -2px; }

/* O triângulo é desenhado aqui para poder girar com o estado; o marcador nativo
   não é estilizável nos dois navegadores. Aberto, some o rótulo e fica a seta. */
.criticidade__acao { font-size: 12px; margin-top: 2px; }
.criticidade__acao::before {
  content: "\25B8"; display: inline-block; margin-right: 5px;
  transition: transform var(--transicao);
}
.criticidade[open] .criticidade__acao { font-size: 0; }
.criticidade[open] .criticidade__acao::before { transform: rotate(90deg); font-size: 12px; }

.criticidade__formula { font-size: 12px; padding: 10px 16px 0; }

.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;
}
/* O rótulo de fase tem largura imprevisível: o nome da fase é cadastro.
   Sem isto ele escapa da célula e se desenha por cima da coluna seguinte. */
.chip--fase {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.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; }

/* Marca da carga histórica: é a única tag clicável, e leva ao lote. O fundo
   destacado existe para ela se distinguir dos atributos do próprio ePI. */
.tag-meta--carga {
  background: var(--sup-destaque); border-color: var(--jcb-amarelo-borda);
  text-decoration: none; color: inherit;
}
.tag-meta--carga:hover { border-color: var(--jcb-amarelo); text-decoration: none; }

.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 */
/* Última coluna mais larga: o prazo passou a carregar data, dias restantes e
   origem da data, empilhados. */
.grid-fluxos { grid-template-columns: 104px minmax(180px, 1fr) 78px 184px 112px 104px 152px; }
.grid-classificacoes { grid-template-columns: 72px minmax(160px, 1fr) 96px 82px 90px 168px; }
.grid-familias { grid-template-columns: 150px minmax(220px, 1fr) 90px 150px; }
.grid-modelos { grid-template-columns: minmax(140px, 1fr) 90px 90px 110px; }
/* Sete colunas num card que divide a largura com o trilho de contexto: some
   os pixels antes de mexer. O impacto é a coluna que não pode ser cortada —
   é o resultado que a atividade existe para produzir. */
.grid-custos { grid-template-columns: 74px minmax(140px, 1fr) 42px 94px 94px 88px 118px; }
.grid-consolidado-pn { grid-template-columns: minmax(150px, 1fr) 42px 96px 96px 88px 118px; }
/* colunas — classificação dos Part Numbers (3.3.1) */
/* colunas — histórico da parametrização de criticidade */
.grid-parcelas { grid-template-columns: 190px minmax(160px, 1fr) 80px; }
.grid-criticidade { grid-template-columns: 150px 72px 72px 72px 72px 72px minmax(140px, 1fr); }
.grid-classificacao { grid-template-columns: 132px minmax(140px, 1fr) 96px 132px 178px; }
.grid-classificacao-leitura { grid-template-columns: 132px minmax(140px, 1fr) 96px 108px 160px; }
.grid-importacao { grid-template-columns: 50px 56px 104px 46px 108px 108px 118px minmax(120px, 1fr) 52px; }
/* colunas — carga histórica em massa */
.grid-inconsistencias { grid-template-columns: 74px 92px 56px 168px 104px 130px minmax(200px, 1fr); }
.grid-importacoes { grid-template-columns: 116px minmax(160px, 1fr) 150px 64px 64px 64px 136px; }
/* 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); }

/* Link de vinculação do Telegram.
   `user-select: all` faz um toque selecionar a URL inteira — no celular a
   seleção manual de texto longo é sofrível, e é justamente lá que a pessoa vai
   abrir o link. Quebra em qualquer ponto para não estourar a largura. */
.link-vinculacao {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--sup-sutil);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--jcb-cinza-escuro);
  user-select: all;
  word-break: break-all;
}

/* ---------- 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) -------------------------------- */

/*
  O trilho de contexto (navegador do fluxo, responsáveis, dependências,
  histórico) empilhava abaixo do conteúdo em qualquer tela menor que 1440px —
  o que inclui o notebook de 1366px em zoom 100%. Quem trabalhava nele via o
  menu sumir e só o recuperava reduzindo o zoom, e como as telas de 1920
  mostravam o menu normalmente, parecia que ele existia em algumas atividades
  e não em outras. Em vez de empilhar, o trilho encolhe: continua ao lado até
  o ponto em que a coluna principal deixaria de comportar o formulário.
*/
@media (max-width: 1439px) {
  .atividade { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1199px) {
  .atividade { grid-template-columns: minmax(0, 1fr) 272px; gap: 12px; }
}

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

  /* Abaixo de tablet não há largura para as duas colunas: o trilho passa a
     ficar sob o formulário, em faixa única. */
  .atividade { grid-template-columns: minmax(0, 1fr); }
  .atividade__trilho { display: flex; flex-direction: column; }

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

/* ---------- painel gerencial --------------------------------------------- */

.pagina--larga { max-width: 1560px; }

.filtros-painel {
  display: grid; gap: 10px 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.filtros-painel__busca { grid-column: span 2; }
.filtros-painel__acoes { display: flex; gap: 8px; align-items: end; }

@media (max-width: 700px) {
  .filtros-painel__busca { grid-column: span 1; }
}

/* prazo e situação por fase, na trilha do ePI */
.trilha__prazo {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--linha-suave);
}
.trilha__datas { font-size: 10.5px; color: var(--texto-3); }
.trilha__dias { font-size: 11px; color: var(--texto-2); }

/* Gantt de cut-in do painel gerencial, com eixo em trimestres.
   Prefixo próprio: `.linha-tempo` já é a linha do tempo do histórico do ePI,
   e as duas não têm nada a ver uma com a outra. */
.gantt { min-width: 660px; }
.gantt__eixo,
.gantt__linha {
  display: grid; grid-template-columns: 132px 1fr; gap: 0 12px; align-items: center;
}
.gantt__eixo { padding-bottom: 5px; border-bottom: 1px solid var(--linha-media); }
.gantt__faixa { position: relative; height: 16px; }
.gantt__trimestre {
  position: absolute; top: 0; padding-left: 6px;
  border-left: 1px solid var(--linha-suave); font-size: 11px; color: var(--texto-3);
}
.gantt__corpo {
  position: relative; display: flex; flex-direction: column; gap: 5px; padding-top: 16px;
}
.gantt__hoje {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--vermelho); z-index: 2;
}
.gantt__hoje-marca {
  position: absolute; top: -2px; transform: translateX(-50%);
  background: var(--vermelho); color: #fff; font-size: 9.5px; font-weight: 600;
  padding: 1px 5px; border-radius: var(--raio); white-space: nowrap;
}
.gantt__linha {
  color: inherit; text-decoration: none; border-radius: var(--raio); padding: 1px 0;
}
.gantt__linha:hover { background: var(--sup-sutil); text-decoration: none; }
.gantt__rotulo {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 11.5px; font-weight: 600;
}
.gantt__faixa--barra { background: var(--sup-sutil); border-radius: 1px; }
.gantt__barra { position: absolute; top: 3px; height: 10px; min-width: 3px; border-radius: 1px; }
.gantt__data {
  position: absolute; top: 1px; font-size: 10.5px; font-weight: 600; color: var(--texto-2);
}

.grade-kpi {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kpi--clicavel { color: inherit; text-decoration: none; transition: border-color .12s ease; }
.kpi--clicavel:hover { border-color: var(--jcb-cinza-medio); text-decoration: none; }
.kpi--clicavel.is-ativo { border-color: var(--jcb-amarelo-borda); background: var(--sup-destaque); }
.kpi__valor { font-family: "IBM Plex Mono", monospace; font-size: 26px; font-weight: 700; line-height: 1.1; }
.kpi__valor--late { color: var(--st-late-fg); }
.kpi__valor--completed { color: var(--st-completed-fg); }
.kpi__valor--released { color: var(--st-released-fg); }

.grade-painel {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.legenda { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: inherit; text-decoration: none; }
.legenda:hover { text-decoration: underline; }
.legenda__marca { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* barras — fases, áreas e Pareto compartilham a mesma anatomia */
.barra-fase, .barra-area, .barra-pareto {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 6px; border-radius: var(--raio);
  color: inherit; text-decoration: none;
}
.barra-fase:hover, .barra-area:hover, .barra-pareto:hover { background: var(--sup-sutil); text-decoration: none; }
.barra-fase.is-ativa, .barra-area.is-ativa, .barra-pareto.is-ativa { background: var(--sup-destaque); }

.barra-fase__rotulo { width: 64px; font-size: 12px; color: var(--texto-2); flex: none; }
.barra-fase__trilho { flex: 1; height: 14px; background: var(--sup-trilho); border-radius: 2px; overflow: hidden; }
.barra-fase__preenchimento { display: block; height: 100%; background: var(--jcb-amarelo); }
.barra-fase__valor { width: 30px; text-align: right; font-size: 12.5px; font-weight: 600; }

.barra-area__rotulo { width: 108px; font-size: 12px; color: var(--texto-2); flex: none; }
.barra-area__trilho { display: flex; height: 14px; border-radius: 2px; overflow: hidden; background: var(--sup-trilho); }
.barra-area__fatia { display: block; height: 100%; }
.barra-area__valor { margin-left: auto; font-size: 12.5px; font-weight: 600; }

.barra-pareto__rotulo { width: 84px; font-size: 12px; flex: none; }
.barra-pareto__trilho { flex: 1; height: 14px; background: var(--sup-trilho); border-radius: 2px; overflow: hidden; }
.barra-pareto__preenchimento { display: block; height: 100%; background: var(--jcb-verde-militar); }
.barra-pareto__valor { width: 26px; text-align: right; font-size: 12.5px; font-weight: 600; }
.barra-pareto__pct { width: 52px; text-align: right; font-size: 11.5px; }

/* colunas das tabelas do painel */
.grid-prioridade { grid-template-columns: 110px minmax(160px, 1fr) 90px 62px 88px; }
.grid-atividades-painel { grid-template-columns: 110px minmax(200px, 1fr) 120px 130px 104px; }

/* painel lateral de detalhe */
.painel-lateral {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  background: var(--sup-card); border-left: 1px solid var(--linha);
  box-shadow: -8px 0 24px #0000001a; display: flex; flex-direction: column; z-index: 40;
}
.painel-lateral__topo {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--linha-media); background: var(--sup-sutil);
}
.painel-lateral__corpo { padding: 14px 16px; overflow-y: auto; flex: 1; }
.painel-lateral__rodape {
  display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linha-media);
}

@media (max-width: 900px) {
  .painel-lateral { width: 100vw; }
}