/* Estilo próprio do Sistema de Gestão. Só as variáveis do zenk-marca.css e as cores de situação do status.css: nenhuma cor
   escrita direto (#…, rgb(…)), nenhum gradiente, nenhuma sombra e nenhuma fonte de fora.
   Conceito: "papel de prancha", a mesma carinha do FVS e da Auditoria (decidido pela Hellen em 06/11/2026, versão 1.11; exceção
   registrada na ficha do CLAUDE.md): fundo com um toque quente de fendi, cartões de canto arredondado com fio fino, botões e
   campos arredondados, e cor só para dizer a situação. O que fazer agora vem primeiro.
   Os nomes abaixo (--fundo-app, --cartao, --borda-suave, --raio, --raio-m…) são os mesmos do FVS e da Auditoria. */

:root {
  --fundo-app:   color-mix(in srgb, var(--zenk-fendi) 6%, var(--zenk-offwhite));
  --fundo-menu:  color-mix(in srgb, var(--zenk-fendi) 11%, var(--zenk-offwhite));
  --fundo-hover: color-mix(in srgb, var(--zenk-fendi) 16%, var(--zenk-offwhite));
  --fundo-ativo: color-mix(in srgb, var(--zenk-fendi) 24%, var(--zenk-offwhite));
  --borda-suave: color-mix(in srgb, var(--zenk-fendi) 22%, var(--zenk-offwhite));
  --cartao:      var(--zenk-offwhite);
  --raio:        14px;
  --raio-m:      10px;
}
body { background:var(--fundo-app); }

/* Títulos: a Stara fica no título da página (h1); subtítulos em Manrope negrito, sem caixa alta, como no FVS. */
h2, h3 { font-family:var(--zenk-fonte-texto); font-weight:700; letter-spacing:0; text-transform:none; }
h3 { font-size:16px; }
@media (max-width:600px) { h1 { font-size:24px; } }

/* Botões, campos e avisos: cantos arredondados (o zenk-marca.css não se edita, por isso o arredondado entra aqui). */
.botao-principal, .botao-secundario { border-radius:var(--raio-m); }
input[type=text], input[type=search], input[type=date], input[type=number], select, textarea { border-radius:var(--raio-m); }
.aviso { border-radius:var(--raio-m); }

/* Cartão: o recipiente de tudo o que é um bloco na página (painéis, quadros, histórico, calendário…). Fundo claro sobre o
   fundo quente da página, fio fino e canto arredondado, sem sombra. */
.painel, .cal, .caixa, .historico, .email, .proximo-passo, .proxima, .bimestre, .inserir, .ind-historico, .gi-historico,
.ocorrencia, .secao, .passo, .carimbo, .modulo-guia, .fluxo li, .ind-bloco, .canteiro, .lanc-lista, .gi-obra, .gi-metas,
.cal-numero, .desenho, .agora-item {
  border:1px solid var(--borda-suave); border-radius:var(--raio); background:var(--cartao);
}
/* Letras pequenas um pouco maiores que as da marca (12 px em vez de 11 px) e texto de 16 px no celular. */
.rotulo, .tabela th { font-size:12px; }
@media (max-width:700px) { body { font-size:16px; } }

.oculto { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Barra do protótipo: tudo o que é só do protótipo fica nela e sai inteiro na publicação. */
.barra-prototipo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 24px; padding:6px clamp(16px,5vw,72px); background:var(--texto-suave); color:var(--sobre-escuro); }
.barra-prototipo .faixa-prototipo { padding:0; text-align:left; }
.barra-prototipo :focus-visible { outline-color:var(--sobre-escuro); }
.barra-ferramentas { display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; }
.barra-link { color:var(--sobre-escuro); font-size:12px; font-weight:600; }
.ver-como { display:flex; align-items:center; gap:10px; }
.ver-como label { margin:0; font-size:12px; }
.ver-como select { width:auto; max-width:100%; padding:5px 10px; color:var(--texto); font-size:13px; }

/* Cabeçalho: logo, menu dos módulos do cargo e quem está usando. O logo é a versão sem a tagline, do kit da marca: o mínimo
   de 300 px do manual vale para o logo com a tagline. O menu pesa mais que o logo, porque é o que a pessoa usa. */
.cabecalho { display:flex; flex-wrap:wrap; align-items:center; gap:14px 40px; padding:16px clamp(16px,5vw,72px); border-bottom:1px solid var(--borda-suave); background:var(--fundo-menu); }
.cabecalho-logo { display:block; }
.cabecalho .zenk-logo { width:132px; }
.menu { flex:1; }
.menu ul { display:flex; flex-wrap:wrap; gap:4px 6px; margin:0; padding:0; list-style:none; }
.menu a { display:block; padding:8px 16px; border-radius:var(--raio-m); font-size:15px; font-weight:600; text-decoration:none; }
.menu a:hover { background:var(--fundo-hover); }
.menu a[aria-current="page"] { background:var(--fundo-ativo); }
.pessoa-atual { font-size:14px; font-weight:600; line-height:1.3; text-align:right; }
.pessoa-atual .rotulo { display:block; margin-top:2px; }
/* No celular, o cabeçalho ocupa pouco: o FVS e a Auditoria precisam da tela na obra. Menu numa linha só, que rola de
   lado; o nome de quem está usando fica só no computador. */
@media (max-width:700px) {
  .ver-como { flex-direction:column; align-items:stretch; gap:4px; width:100%; }
  .ver-como select { width:100%; }
  .cabecalho { gap:10px; padding:14px clamp(16px,5vw,72px); }
  .cabecalho .zenk-logo { width:104px; }
  .menu { flex-basis:100%; min-width:0; }   /* min-width: sem isso o menu largo empurra a página para o lado em vez de rolar sozinho */
  .menu ul { flex-wrap:nowrap; gap:6px; overflow-x:auto; scrollbar-width:none; }
  .menu ul::-webkit-scrollbar { display:none; }
  .menu a { padding:8px 14px; white-space:nowrap; }
  .pessoa-atual { display:none; }
}

/* Área das telas */
.conteudo { max-width:1200px; margin:0 auto; padding:48px clamp(16px,5vw,72px) 80px; }
.conteudo > .aviso { margin-bottom:24px; }
.tela h1 { margin:8px 0 12px; }
.descricao { max-width:75ch; color:var(--texto-suave); }
.sem-acesso-voltar { margin-top:20px; }

/* Início: a coluna de leitura. O guia "Primeira vez aqui" (um bloco por módulo) está mais abaixo, junto do .fluxo. */
.inicio { position:relative; z-index:1; max-width:760px; }

/* Elemento 71 da marca, cortado no canto. Só no computador, atrás do conteúdo. */
.inicio-elemento { position:fixed; right:0; bottom:0; z-index:0; width:clamp(240px,22vw,340px); height:auto; transform:translate(18%,22%); pointer-events:none; }
@media (max-width:1100px) { .inicio-elemento { display:none; } }

/* Abas de um módulo (PAM: Planos de ação e Cronograma; Gestão): pílulas, como no FVS. A marcada fica preta. */
.abas { display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 28px; }
.abas a { padding:7px 16px; border:1px solid var(--borda-suave); border-radius:999px; background:var(--cartao); font-size:14px; font-weight:600; text-decoration:none; }
.abas a:hover { background:var(--fundo-hover); }
.abas a[aria-current="page"] { border-color:var(--texto); background:var(--texto); color:var(--sobre-escuro); }

.titulo-linha { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:24px; }
.voltar { margin-bottom:20px; font-size:14px; }
.vazio { padding:16px 0; color:var(--texto-suave); }
.mes { margin:36px 0 12px; }
.celula-titulo { display:block; font-weight:600; }
.celula-apoio { display:block; color:var(--texto-suave); font-size:13px; }
/* Mesmas colunas em todos os meses, para o olho seguir a lista de cima a baixo. */
.tabela-cronograma { table-layout:fixed; }
.tabela-cronograma th:nth-child(1) { width:150px; }
.tabela-cronograma th:nth-child(2) { width:36%; }
.tabela-cronograma th:nth-child(3) { width:28%; }

/* Filtros do cronograma: tipo (botões que ficam pressionados) e obra */
.filtros { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 32px; margin-bottom:8px; }
.descricao + .filtros { margin-top:24px; }
/* Filtros como as abas: pílulas, e a marcada fica preta. */
.filtro-tipo { display:flex; flex-wrap:wrap; gap:6px; }
.filtro { padding:6px 14px; border:1px solid var(--borda-suave); border-radius:999px; background:var(--cartao); color:var(--texto); font-size:14px; font-weight:600; }
.filtro:hover { background:var(--fundo-hover); }
.filtro[aria-pressed="true"] { border-color:var(--texto); background:var(--texto); color:var(--sobre-escuro); }
.filtro-obra { width:240px; max-width:100%; }
.filtro-visao { margin-left:auto; }
.tabela a { font-weight:600; white-space:nowrap; }

/* Calendário do cronograma: o mesmo modelo do calendário do sistema de Auditoria (grade dom a sáb, dias marcados, hoje com contorno,
   legenda e a lista do mês ao lado), na marca Zenk. A sigla é que diz o tipo: preenchida = organismo certificador, só contorno =
   consultoria, cinza com traço = interna. A cor nunca vai sozinha. */
.cal-area { display:grid; grid-template-columns:minmax(320px,540px) minmax(0,1fr); gap:32px 48px; align-items:start; margin-top:16px; }
.cal { padding:20px; }
.cal-topo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cal-topo h2 { margin:0; font-size:18px; text-align:center; }
.cal-seta { width:40px; height:40px; padding:0; border:1px solid var(--borda-suave); border-radius:var(--raio-m); background:var(--cartao); color:var(--texto); font-size:22px; line-height:1; }
.cal-seta:hover { background:var(--fundo-hover); }
.cal-grade { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:3px; }
.cal-grade th { padding:4px 0; color:var(--texto-suave); font-size:11px; font-weight:700; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
.cal-grade abbr { text-decoration:none; }
.cal-grade td { padding:0; }
.cal-dia { height:76px; padding:4px 3px; border:1px solid var(--borda-suave); border-radius:var(--raio-m); background:var(--fundo-app); vertical-align:top; }
.cal-marcada { border-color:var(--contorno); background:var(--cartao); }
.cal-hoje { outline:3px solid var(--texto); outline-offset:-1px; }
.cal-num { display:block; margin-bottom:3px; font-size:13px; font-weight:700; }
.cal-marca { display:block; margin-bottom:2px; padding:1px 3px; border:1px solid transparent; border-radius:6px; font-size:11px; font-weight:700; line-height:1.3; text-align:center; white-space:nowrap; overflow:hidden; }
.cal-marca-certificador { background:var(--texto); border-color:var(--texto); color:var(--sobre-escuro); }
.cal-marca-consultoria { background:var(--cartao); border:2px solid var(--texto); color:var(--texto); }
.cal-marca-interna { background:var(--superficie); border:1px dashed var(--texto-suave); color:var(--texto); }
.cal-mais { display:block; color:var(--texto-suave); font-size:11px; font-weight:700; text-align:center; }
.cal-legenda { display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 14px; padding:0; list-style:none; color:var(--texto-suave); font-size:12px; }
.cal-legenda .cal-marca { display:inline-block; min-width:44px; margin:0 4px 0 0; }
.cal-hoje-amostra { display:inline-block; width:16px; height:16px; margin-right:4px; border:3px solid var(--texto); border-radius:5px; background:var(--cartao); vertical-align:-3px; }
.cal-numeros { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.cal-numero { padding:12px 14px; border-top:5px solid var(--texto); }
.cal-numero-valor { display:block; font-family:var(--zenk-fonte-titulo); font-size:28px; font-weight:700; line-height:1.1; }
.cal-numero-rotulo { display:block; color:var(--texto-suave); font-size:13px; }
.cal-itens { margin:0; padding:0; list-style:none; }
.cal-item { display:grid; gap:2px; padding:14px 0; border-top:1px solid var(--fio); }
.cal-item:first-child { border-top:0; }
.cal-item-topo { display:flex; align-items:center; gap:10px; }
.cal-item-topo .cal-marca { display:inline-block; min-width:48px; margin:0; }
.cal-item-topo a { font-weight:700; }
@media (max-width:1000px) { .cal-area { grid-template-columns:minmax(0,1fr); } .cal { max-width:560px; } }
@media (max-width:600px) {
  .filtro-visao { margin-left:0; }
  .cal { padding:12px; }
  .cal-grade { border-spacing:2px; }
  .cal-dia { height:62px; padding:3px 1px; }
  .cal-marca { padding:1px 0; font-size:10px; }
  .cal-numeros { grid-template-columns:1fr; }
}
/* Tabelas: dentro de um cartão, com o cabeçalho num fundo quente e um fio fino entre as linhas. */
table.tabela { border-collapse:separate; border-spacing:0; border:1px solid var(--borda-suave); border-radius:var(--raio); background:var(--cartao); }
.tabela th { background:var(--fundo-menu); border-bottom:1px solid var(--borda-suave); }
.tabela td { border-top-color:var(--borda-suave); }
/* Os cantos das células de ponta acompanham o cartão (sem "overflow:hidden", que cortaria o conteúdo de colunas estreitas). */
.tabela thead th:first-child { border-top-left-radius:calc(var(--raio) - 1px); }
.tabela thead th:last-child { border-top-right-radius:calc(var(--raio) - 1px); }
.tabela tbody tr:last-child td:first-child { border-bottom-left-radius:calc(var(--raio) - 1px); }
.tabela tbody tr:last-child td:last-child { border-bottom-right-radius:calc(var(--raio) - 1px); }

/* Formulários */
.painel { margin-bottom:36px; padding:32px; }
.painel h2 { margin-bottom:20px; }
.campos { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.campos-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.campos-3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.campo-largo { grid-column:1 / -1; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { margin-bottom:6px; padding:0; font-size:13px; font-weight:600; }
.opcoes { display:flex; flex-wrap:wrap; gap:8px 28px; }
.opcao { display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:400; }
.opcao input { width:18px; height:18px; margin:0; accent-color:var(--texto); }
.ajuda { margin-top:6px; color:var(--texto-suave); font-size:13px; }
.acoes-form { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.erro { margin-top:16px; padding:10px 12px; border:1px solid var(--texto); border-radius:var(--raio-m); background:var(--cartao); font-size:13px; font-weight:600; }
.botao-pequeno { padding:8px 12px; font-size:13px; }
.botao-principal:disabled { opacity:.35; cursor:not-allowed; }
input[type=file] { max-width:100%; font-size:14px; }
input[type=file]::file-selector-button { margin-right:12px; padding:10px 14px; border:1px solid var(--contorno); border-radius:var(--raio-m); background:transparent; color:var(--texto); font:inherit; font-weight:600; cursor:pointer; }
input[type=file]::file-selector-button:hover { border-color:var(--texto); }
@media (max-width:800px) { .campos, .campos-2, .campos-3 { grid-template-columns:1fr; } }

/* Carimbo: os dados de identificação de um registro, em colunas, dentro de um cartão. */
.carimbo { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px 28px; margin:24px 0 36px; padding:20px 24px; }
.carimbo-campo { padding:0; }
.carimbo-campo dd { margin:2px 0 0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.carimbo-largo { grid-column:span 2; }
.carimbo-inteiro { grid-column:1 / -1; }
@media (max-width:700px) {
  .carimbo { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .carimbo-largo { grid-column:1 / -1; }
}

/* Passos de verdade (uma sequência), cada um num cartão e numerado numa bolinha preta. */
.passo { margin-bottom:20px; padding:24px 28px 28px; }
.passo:not(.feito):not(.futuro) { border:2px solid var(--texto); }   /* o passo de agora */
.passo h2 { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.passo-numero { display:inline-flex; flex:none; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--texto); color:var(--sobre-escuro); font-family:var(--zenk-fonte-texto); font-size:15px; font-weight:700; letter-spacing:0; }
.passo textarea { margin-bottom:4px; }
.passo .ajuda { max-width:75ch; margin-bottom:16px; }
.arquivo-situacao { margin-bottom:16px; }

/* Conferência das ocorrências */
.conferencia { margin:0; padding:0; list-style:none; }
.ocorrencia { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); margin-bottom:24px; overflow:hidden; }
.ocorrencia-original { padding:24px; background:var(--fundo-app); }
.original { margin-top:8px; font-size:13px; white-space:pre-wrap; }
.ocorrencia-campos { padding:24px; }
.ocorrencia-topo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ocorrencia-topo h3 { font-size:18px; font-weight:700; }
.prazo-linha { display:flex; gap:12px; }
.prazo-linha select { flex:1; }
.prazo-dias { flex:none; width:110px !important; }
.prazo-fixo { padding:10px 0; font-size:14px; }
.conferencia-rodape { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:20px 0; border-top:1px solid var(--fio); }
.conferencia-resumo { flex:1; color:var(--texto-suave); font-size:13px; text-align:right; }
@media (max-width:900px) { .ocorrencia { grid-template-columns:1fr; } }
@media (max-width:600px) { .conferencia-resumo { flex-basis:100%; order:3; text-align:left; } }

.pams-auditoria h2 { margin-bottom:16px; }

/* Tabela que vira lista no celular: cada célula traz o seu rótulo. */
@media (max-width:700px) {
  .tabela-empilhavel thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tabela-empilhavel tr { display:block; padding:12px 16px; border-top:1px solid var(--borda-suave); }
  .tabela-empilhavel tbody tr:first-child { border-top:0; }
  .tabela-empilhavel td { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:3px 0; border:0; }
  .tabela-empilhavel td::before { content:attr(data-rotulo); color:var(--texto-suave); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
}

/* Planos de ação: quadro por origem e situação, filtros e lista. */
.quadro-bloco { margin:32px 0 0; }
.quadro-bloco summary { width:max-content; max-width:100%; padding:6px 0; cursor:pointer; font-size:14px; font-weight:600; }
.quadro-bloco .ajuda { margin:6px 0 12px; }
.quadro-rolagem { overflow-x:auto; border:1px solid var(--borda-suave); border-radius:var(--raio); background:var(--cartao); }
.quadro { width:100%; min-width:720px; border-collapse:collapse; }
.quadro th, .quadro td { padding:10px 8px; border-bottom:1px solid var(--borda-suave); text-align:center; vertical-align:middle; }.quadro thead th { color:var(--texto-suave); font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; vertical-align:bottom; }
.quadro th[scope="row"], .quadro thead th:first-child { text-align:left; }
.quadro th[scope="row"] { font-size:14px; font-weight:600; }
.quadro tfoot th, .quadro tfoot td { border-top:1px solid var(--texto); border-bottom:0; }
.quadro-numero { min-width:40px; padding:2px 8px; border:0; border-bottom:2px solid transparent; background:transparent; font-size:24px; font-weight:700; line-height:1.2; }
.quadro-numero:hover { border-bottom-color:var(--texto); }
.quadro-vencidos .quadro-numero { border-radius:var(--raio-m); background:var(--situacao-vencido); color:var(--sobre-escuro); }
.quadro-zero { color:var(--texto-suave); }

.mais-filtros { margin:20px 0 8px; }
.mais-filtros summary { width:max-content; padding:6px 0; cursor:pointer; font-size:14px; font-weight:600; }
.campos-filtro { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-top:8px; }
.campo-busca { grid-column:span 2; }
@media (max-width:900px) { .campos-filtro { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .campos-filtro { grid-template-columns:1fr; } .campo-busca { grid-column:auto; } }
.resultado-linha { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 8px; }
.resultado-linha p { font-weight:600; }

.tabela-pams { table-layout:fixed; }
.tabela-pams th:nth-child(1) { width:150px; }
.tabela-pams th:nth-child(3) { width:15%; }
.tabela-pams th:nth-child(4) { width:14%; }
.tabela-pams th:nth-child(5) { width:150px; }
.tabela-pams th:nth-child(6) { width:20%; }
.prazo-item { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.marca-pequena { padding:1px 6px; font-size:11px; }
.situacao { display:flex; flex-direction:column; gap:6px; }
.mini-regua { display:flex; gap:3px; }
.mini-etapa { width:10px; height:10px; border:1px solid var(--contorno); border-radius:50%; }
.mini-etapa.feita { border-color:var(--texto); background:var(--texto); }
.mini-etapa.atual { border:3px solid var(--texto); }
.situacao-texto { font-size:13px; }
.situacao .etiqueta { align-self:flex-start; }

/* PAM: folha de registro. Número, marcas, carimbo, régua das etapas, seções do ciclo e histórico. */
.pam-topo { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px 32px; }
.tela .pam-numero { margin:6px 0 0; font-family:var(--zenk-fonte-texto); font-size:30px; font-weight:700; letter-spacing:.02em; }
.pam-botoes { display:flex; flex-wrap:wrap; gap:10px; }
.marcas { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.marca { padding:3px 12px; border:1px solid var(--contorno); border-radius:999px; background:var(--cartao); font-size:12px; font-weight:600; }
.marca-forte { background:var(--texto); border-color:var(--texto); color:var(--sobre-escuro); }
.painel-motivo { margin:24px 0 0; }
.painel-motivo textarea { margin-bottom:4px; }
.novos-prazos { margin:16px 0; }

.regua-bloco { margin:0 0 28px; }
.regua { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.regua-etapa { position:relative; display:flex; flex-direction:column; gap:10px; padding-right:8px; font-size:13px; }
.regua-etapa::before { content:""; position:absolute; top:9px; left:20px; right:0; height:2px; background:var(--contorno); }
.regua-etapa:last-child::before { display:none; }
.regua-etapa.feita::before { background:var(--texto); }
.regua-marca { position:relative; z-index:1; width:20px; height:20px; border:2px solid var(--contorno); border-radius:50%; background:var(--cartao); }
.feita .regua-marca { border-color:var(--texto); background:var(--texto); }
.atual .regua-marca { border:6px solid var(--texto); }
.regua-nome { color:var(--texto-suave); font-weight:600; line-height:1.3; }
.feita .regua-nome, .atual .regua-nome { color:var(--texto); }
/* "Sua vez" ou "Aguardando": o que fazer agora no PAM, logo abaixo do resumo. */
.proximo-passo { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin:0 0 28px; padding:18px 22px; border-top:6px solid var(--texto); }
.proximo-passo.aguardando { border-top-color:var(--contorno); }
.proximo-rotulo { flex:none; }
.proximo-texto { flex:1 1 280px; max-width:70ch; font-size:16px; font-weight:600; }
.pam-resumo { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin:16px 0 20px; }
.pam-resumo-prazo { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.resumo-folga { color:var(--texto-suave); font-size:14px; }
[data-vez] { scroll-margin-top:24px; }
@media (max-width:600px) { .proximo-passo .botao-principal { width:100%; } }

/* Detalhes que abrem e fecham (carimbo do PAM e da auditoria): recolhidos na tela, abertos no PDF. */
.detalhes-pam { margin:0 0 36px; }
.detalhes-linha { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; }
.detalhes-botao { display:inline-flex; align-items:center; gap:10px; padding:8px 0; border:0; background:transparent; font-size:14px; font-weight:700; }
.detalhes-botao::before { content:""; width:7px; height:7px; border-right:2px solid var(--texto); border-bottom:2px solid var(--texto); transform:rotate(-45deg); transition:transform .15s ease-out; }
.detalhes-botao[aria-expanded="true"]::before { transform:rotate(45deg); }
.detalhes-resumo { color:var(--texto-suave); font-size:14px; }
.detalhes-pam .carimbo { margin:8px 0 0; }
.recolhido { display:none !important; }
@media (max-width:700px) {
  .regua { grid-template-columns:1fr; gap:10px; }
  .regua-etapa { flex-direction:row; align-items:center; }
  .regua-etapa::before { display:none; }
}

.pam-corpo { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; }
@media (max-width:1000px) { .pam-corpo { grid-template-columns:minmax(0,1fr); } }
.secao { margin-bottom:20px; padding:24px 28px 28px; }
.secao-topo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.leitura { display:grid; grid-template-columns:200px minmax(0,1fr); gap:10px 24px; margin:0; }
.leitura dt { padding-top:3px; }
.leitura dd { max-width:75ch; margin:0; white-space:pre-wrap; }
@media (max-width:700px) {
  .leitura { grid-template-columns:1fr; gap:2px; }
  .leitura dd { margin-bottom:12px; }
}
.lista-simples { margin:0; padding-left:18px; white-space:normal; }
.caixa { margin-bottom:16px; padding:14px 16px; background:var(--fundo-app); font-size:14px; }
.caixa-forte { border-color:var(--texto); font-weight:600; }
.subtitulo { margin:28px 0 10px; }
.edicao { margin-top:20px; }
.edicao > .campo, .edicao > .campos-2 { margin-bottom:16px; }
.acoes-editor { margin:8px 0 16px; }
.acoes-lista { margin:0 0 12px; padding:0; border-top:1px solid var(--borda-suave); list-style:none; }
.acao-linha { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) 160px auto; gap:12px; align-items:end; padding:12px 0; border-bottom:1px solid var(--borda-suave); }
@media (max-width:800px) {
  .acao-linha { grid-template-columns:1fr; }
  .acao-linha .botao-pequeno { justify-self:start; }
}
.arquivos { margin:0 0 16px; padding:0; border-top:1px solid var(--fio); list-style:none; }
.arquivos li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:10px 0; border-bottom:1px solid var(--fio); }
.arquivo-meta { flex:1; color:var(--texto-suave); font-size:13px; }
@media (max-width:600px) { .arquivos li { flex-direction:column; align-items:flex-start; } }
.opcao-bloco { align-items:flex-start; margin-bottom:10px; }
.opcao-bloco input { flex:none; margin-top:3px; }

.historico { padding:24px; }
.historico h2 { margin-bottom:12px; font-size:16px; }
.historico-lista { margin:0; padding:0; list-style:none; }
.historico-lista li { padding:10px 0; border-top:1px solid var(--borda-suave); font-size:13px; }
.historico-quando { display:block; color:var(--texto-suave); font-size:12px; }

/* Leitura que fica escondida na tela enquanto o formulário está aberto, mas vai para o PDF. */
@media screen { .so-impressao { display:none !important; } }

/* Exportar PDF: o PAM sem menus, botões nem formulários, em A4. */
@page { size:A4; margin:14mm; }
@media print {
  .barra-prototipo, .menu, .pessoa-atual, .voltar, .abas, .pam-botoes, .painel-motivo, .edicao, .aviso,
  .secao-topo button, .arquivos button, .acoes-form, .proximo-passo { display:none !important; }
  body { background:var(--fundo); }
  .cabecalho { padding:0 0 16px; border-bottom:1px solid var(--fio); background:none; }
  .conteudo { max-width:none; padding:16px 0 0; }
  .pam-corpo { display:block; }
  /* No papel, os cartões voltam a ser blocos simples, separados por um fio. */
  .secao, .carimbo, .historico, .proximo-passo, .caixa, .ocorrencia { border:0; border-radius:0; background:none; }
  table.tabela { border-radius:0; }
  .historico { margin-top:24px; padding:20px 0 0; border-top:2px solid var(--texto); }
  .secao, .carimbo, .historico-lista li { break-inside:avoid; }
  .secao h2, .historico h2 { break-after:avoid; }
  .regua-marca, .marca-forte, .etiqueta { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .carimbo.recolhido { display:grid !important; }
  .detalhes-botao, .detalhes-resumo { display:none !important; }
  .pam-resumo { margin:12px 0 16px; }
  .regua-bloco { margin-bottom:12px; }
  .detalhes-pam { margin-bottom:20px; }
  .carimbo { margin:12px 0 20px; padding:14px 0 0; border-top:1px solid var(--fio); }
  .secao { margin-bottom:24px; padding:14px 0 0; border-top:1px solid var(--contorno); }
  a { text-decoration:none; }
}

/* E-mails simulados */
.emails { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:32px; margin-top:28px; }
.emails-lista { margin:0; padding:0; border-top:1px solid var(--borda-suave); list-style:none; }
.emails-lista button { display:block; width:100%; padding:14px 0; border:0; border-bottom:1px solid var(--borda-suave); background:transparent; text-align:left; }
.emails-lista button[aria-current="true"] .email-assunto { text-decoration:underline; text-underline-offset:3px; }
.email-assunto { display:block; font-size:14px; font-weight:600; }
.email-meta { display:block; margin-top:2px; color:var(--texto-suave); font-size:12px; }
.email { padding:32px; }
.email-assunto-titulo { font-family:var(--zenk-fonte-texto); font-size:18px; letter-spacing:0; text-transform:none; }
.email-dados { display:flex; flex-wrap:wrap; gap:8px 32px; margin:16px 0 0; }
.email-dados dd { margin:2px 0 0; font-size:14px; }
.email-corpo { max-width:75ch; margin-top:20px; padding-top:20px; border-top:1px solid var(--fio); white-space:pre-wrap; }
.email-link { margin-top:20px; }
@media (max-width:800px) { .emails { grid-template-columns:1fr; } }

/* Gestão: pessoas e origens. Usa as listas, as abas, os filtros e os painéis das outras telas; aqui só o que é próprio dela. */
#tela-gestao .caixa { max-width:75ch; margin:0 0 24px; }
.filtro-busca { width:320px; max-width:100%; }
#pesOid { margin:-10px 0 16px; }
.tabela-pessoas, .tabela-origens { table-layout:fixed; }
.tabela-pessoas th:nth-child(1) { width:24%; }
.tabela-pessoas th:nth-child(2) { width:16%; }
.tabela-pessoas th:nth-child(3) { width:14%; }
.tabela-pessoas th:nth-child(4) { width:20%; }
.tabela-pessoas th:nth-child(5) { width:9%; }
.tabela-pessoas th:nth-child(6) { width:150px; }
.tabela-origens th:nth-child(1) { width:22%; }
.tabela-origens th:nth-child(2) { width:16%; }
.tabela-origens th:nth-child(3) { width:9%; }
.tabela-origens th:nth-child(4) { width:17%; }
.tabela-origens th:nth-child(5) { width:14%; }
.tabela-pessoas td, .tabela-origens td { overflow-wrap:anywhere; }
.linha-inativa td { color:var(--texto-suave); }
/* Gestão › O que os sistemas leem: a tabela por pessoa e o arquivo em texto. */
.tabela-pessoas .etiqueta, .tabela-cargos .etiqueta, .tabela-leitura .etiqueta { max-width:100%; margin-top:4px; white-space:normal; }
.tabela-leitura { table-layout:fixed; }
.tabela-leitura th:nth-child(1) { width:26%; }
.tabela-leitura td { overflow-wrap:anywhere; }
.leitura-arquivo { max-height:420px; margin:12px 0 0; padding:16px; overflow:auto; border:1px solid var(--borda-suave); border-radius:var(--raio-m); background:var(--cartao); font-family:var(--zenk-fonte-texto); font-size:12px; line-height:1.5; white-space:pre; }
.acoes-linha { display:flex; flex-wrap:wrap; gap:8px; }
input:disabled, select:disabled { background:var(--superficie); color:var(--texto-suave); cursor:not-allowed; }
.opcao:has(input:disabled) { color:var(--texto-suave); }

/* Etiquetas de situação: texto e cor juntos. */
.etiqueta { display:inline-block; padding:2px 10px; border:1px solid transparent; border-radius:999px; font-family:var(--zenk-fonte-texto); font-size:12px; font-weight:700; letter-spacing:0; line-height:1.4; text-transform:none; white-space:nowrap; }
.etiqueta-vencido { background:var(--situacao-vencido-fundo); border-color:var(--situacao-vencido); color:var(--situacao-vencido); }
.etiqueta-atencao { background:var(--situacao-atencao-fundo); border-color:var(--situacao-atencao); color:var(--situacao-atencao); }
.etiqueta-ok { background:var(--situacao-ok-fundo); border-color:var(--situacao-ok); color:var(--situacao-ok); }
.etiqueta-vez { background:var(--texto); border-color:var(--texto); color:var(--sobre-escuro); }
.texto-ok { color:var(--situacao-ok); font-weight:600; }

/* Início: "Para você agora" e os atalhos, em cartões com uma faixa de cor em cima, como o painel do FVS. */
.inicio { max-width:860px; }
.agora { margin-top:44px; }
.agora h2 { margin-bottom:18px; font-size:18px; }
.agora-lista { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.agora-item { border-top:6px solid var(--texto); }
.agora-item:has(a:hover) { background:var(--fundo-menu); }
.agora-link, .atalho-link { display:flex; flex-direction:column; gap:4px; height:100%; padding:14px 20px 18px; text-decoration:none; }
.agora-link:hover .agora-texto, .atalho-link:hover .atalho-titulo { text-decoration:underline; text-underline-offset:3px; }
.agora-numero { font-size:40px; font-weight:700; line-height:1.1; }
.agora-numero-texto { font-size:22px; }
.agora-texto { font-size:14px; font-weight:600; }
.agora-apoio { color:var(--texto-suave); font-size:13px; }
.agora-zero { border-top-color:var(--contorno); }
.agora-zero .agora-numero { color:var(--texto-suave); }
.agora-alerta { border-top-color:var(--situacao-vencido); }
.agora-alerta .agora-numero { color:var(--situacao-vencido); }
.agora-link .etiqueta { align-self:flex-start; margin-top:4px; }
/* No celular, cada quadro é uma linha: o número à esquerda e o texto ao lado. */
@media (max-width:800px) {
  .agora-lista { grid-template-columns:1fr; gap:12px; }
  .agora-link { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 16px; padding:12px 16px; }
  .agora-numero { grid-row:1 / span 3; min-width:36px; }
  .agora-numero-texto { grid-column:1 / -1; grid-row:auto; }
  .agora-numero-texto ~ * { grid-column:1 / -1; }
  .agora-link .etiqueta { justify-self:start; }
}

/* Cronograma: a próxima auditoria em destaque e os meses que já passaram recolhidos. */
.proxima { display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin:0 0 32px; padding:18px 22px; border-top:6px solid var(--texto); }
.proxima-texto { flex:1 1 280px; }
.proxima-titulo { font-size:18px; font-weight:700; }
.proxima-apoio { color:var(--texto-suave); font-size:14px; }
/* Auditoria interna do bimestre, no cronograma: a situação de cada obra; em alerta (último mês do bimestre) a borda vira vermelha. */
/* De onde o PAM veio (interna, consultoria ou externa): texto numa marca neutra, só com variáveis da marca. */
.origem-marca { display:inline-block; padding:0 10px; border:1px solid var(--contorno); border-radius:999px; background:var(--cartao); font-size:12px; font-weight:600; color:var(--texto); }
.bimestre { margin:0 0 32px; padding:18px 22px; border-top:6px solid var(--texto); }
.bimestre-alerta { border-top-color:var(--situacao-vencido); }
.bimestre-titulo { margin:2px 0 4px; font-size:18px; }
.bimestre-apoio { margin:0 0 12px; color:var(--texto-suave); font-size:14px; }
.bimestre-obras { margin:0; padding:0; list-style:none; }
.bimestre-obra { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; padding:8px 0; border-top:1px solid var(--borda-suave); font-size:14px; }
.meses-anteriores { margin:8px 0 0; }
.meses-anteriores > summary { width:max-content; max-width:100%; padding:6px 0; cursor:pointer; font-size:14px; font-weight:600; }

/* Passos da auditoria: o passo de agora em preto cheio, os feitos com a etiqueta "Feito", os próximos mais claros. */
.passo.feito .passo-numero, .passo.futuro .passo-numero { border:2px solid var(--texto); background:transparent; color:var(--texto); }
.passo.futuro { border-color:var(--borda-suave); background:var(--fundo-app); }
.passo.futuro h2 { color:var(--texto-suave); }
.passo-aviso { margin-bottom:12px; color:var(--texto-suave); }

/* De onde nascem os PAMs: o caminho em 4 passos e a escolha da auditoria (só a Qualidade abre PAMs). */
.como-nasce { margin:0 0 12px; }
.como-nasce summary { width:max-content; max-width:100%; padding:6px 0; cursor:pointer; font-size:14px; font-weight:600; }
.fluxo { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin:14px 0 0; padding:0; list-style:none; }
.fluxo li { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 18px 18px; }
.fluxo strong { font-size:15px; }
.fluxo li > span:not(.passo-numero) { color:var(--texto-suave); font-size:14px; }
.fluxo a { font-size:14px; font-weight:600; }
.inicio .como-funciona { margin:32px 0 0; }
.como-funciona .ajuda { max-width:75ch; margin:4px 0 0; }
.como-funciona .fluxo + .ajuda { margin-top:16px; }
/* Primeira vez aqui: um bloco por módulo (o que é, o que a pessoa faz nele, abrir e o passo a passo recolhido). */
.modulos-guia { display:grid; gap:12px; margin:20px 0 0; padding:0; list-style:none; }
.modulo-guia { padding:20px 24px 22px; }
.modulo-guia-cabeca { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:8px; }
.modulo-guia-cabeca h3 { margin:0; font-size:18px; }
.modulo-guia-nivel { color:var(--texto-suave); font-size:13px; font-weight:600; }
.modulo-guia-serve, .modulo-guia-faz { max-width:75ch; margin:0 0 8px; }
.modulo-guia-faz { font-weight:600; }
.modulo-guia-acoes { margin:12px 0 0; }
.modulo-guia-passos { margin:14px 0 0; }
.modulo-guia-passos summary { width:max-content; max-width:100%; padding:6px 0; cursor:pointer; font-size:14px; font-weight:600; }
@media (max-width:900px) { .fluxo { grid-template-columns:1fr 1fr; gap:20px 24px; } }
@media (max-width:600px) { .fluxo { grid-template-columns:1fr; } }
.escolher-lista { margin:0 0 8px; padding:0; border-top:1px solid var(--borda-suave); list-style:none; }
.escolher-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; padding:14px 0; border-bottom:1px solid var(--borda-suave); }
.celula-link { display:block; margin-top:4px; }
.atalho-titulo { font-size:16px; font-weight:700; line-height:1.3; }
.atalho-apoio { color:var(--texto-suave); font-size:13px; }

/* Lista de PAMs: a linha inteira leva ao PAM. */
.linha-clicavel { cursor:pointer; }
.tabela-pams tbody tr:hover { background:var(--fundo-app); }

/* FVS e Auditoria dentro da plataforma: a área ocupa a largura toda e a altura que sobra abaixo do cabeçalho. */
.conteudo:has(> .tela-incorporada:not([hidden])) { max-width:none; padding:0; }
.incorporado { display:block; width:100%; height:calc(100vh - 150px); min-height:480px; border:0; }
.incorporado-nota { margin:8px clamp(16px,5vw,72px); }
.incorporado-nota + .incorporado { height:calc(100vh - 190px); }
.incorporado-exemplo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:calc(100vh - 230px); margin:24px clamp(16px,5vw,72px); padding:32px; border:1px dashed var(--contorno); border-radius:var(--raio); background:var(--fundo-menu); text-align:center; }
@media (max-width:700px) { .incorporado-exemplo { margin:16px; padding:24px 16px; } }

/* Indicadores: lançamento do mês. Uma linha por indicador: o que é à esquerda, o número à direita. */
.ind-situacao { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0; padding:10px 0; font-size:14px; }
.lanc-lista { margin:16px 0 0; padding:0 24px; list-style:none; }
.lanc-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,280px); gap:8px 40px; padding:20px 0; border-bottom:1px solid var(--borda-suave); }
.lanc-item:last-child { border-bottom:0; }
.lanc-nome { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0; font-size:16px; font-weight:700; }
.lanc-unidade { color:var(--texto-suave); font-size:13px; font-weight:400; }
.lanc-descricao { max-width:60ch; margin:4px 0 0; color:var(--texto-suave); font-size:13px; }
.lanc-apoio { margin:6px 0 0; font-size:12px; color:var(--texto-suave); }
.lanc-entrada { align-self:start; }
.lanc-entrada .opcao { margin-top:8px; }
.lanc-entrada input[type=text] { font-size:18px; font-weight:600; text-align:right; }
.lanc-valor { margin:0; font-size:18px; font-weight:700; text-align:right; }
.lanc-vazio { color:var(--texto-suave); font-size:15px; font-weight:400; }
.ind-historico { margin-top:48px; padding:24px; }
.ind-historico h2 { margin-bottom:12px; font-size:16px; }
.ind-historico .historico-lista li strong { display:block; font-size:12px; font-weight:600; color:var(--texto-suave); }
/* Indicadores: painel da obra. Um bloco por indicador: o número, o gráfico, a tendência e a tabela. */
.ind-resumo { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding-bottom:8px; font-size:14px; }
.ind-resumo-mes { margin-right:6px; font-weight:600; }
.ind-blocos { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,460px),1fr)); gap:20px; margin-top:28px; }
.ind-bloco { min-width:0; padding:20px 24px 22px; border-top:6px solid var(--texto); }
.ind-bloco-topo { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.ind-bloco h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0; font-size:18px; }
.ind-numero { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 10px; margin:10px 0 0; }
.ind-numero strong { font-size:40px; font-weight:700; line-height:1.1; }
.ind-numero span { color:var(--texto-suave); font-size:14px; }
.ind-detalhe { margin:2px 0 12px; color:var(--texto-suave); font-size:13px; }
.ind-tendencia { margin:4px 0 0; font-size:14px; }
.ind-tabela { margin-top:12px; overflow-x:auto; }
.ind-tabela th, .ind-tabela td { padding:8px 8px; }
.ind-tabela th { letter-spacing:.08em; }
.ind-tabela > summary { width:max-content; max-width:100%; padding:6px 0; cursor:pointer; font-size:13px; font-weight:600; }

/* Gestão · Indicadores: metas, dados das obras e índice de reajuste. */
.gi-secao { margin-top:44px; }
.gi-secao h2 { margin-bottom:8px; }
.gi-secao > .ajuda { max-width:75ch; margin:0 0 16px; }
.gi-metas { margin:16px 0 0; padding:0 24px; list-style:none; }
.gi-meta { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px); gap:12px 40px; align-items:start; padding:18px 0; border-bottom:1px solid var(--borda-suave); }
.gi-meta:last-child { border-bottom:0; }
.gi-meta-texto .celula-titulo { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:16px; }
.gi-meta-form { display:grid; gap:8px; }
.gi-meta-form .erro { margin:0; }
.gi-meta-form .botao-secundario { justify-self:start; }
.gi-meta-sem { margin:0; }
.gi-obra { margin-bottom:12px; padding:0 24px; }
.gi-obra > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px; padding:16px 0; cursor:pointer; }
.gi-obra > summary .celula-titulo { font-size:16px; }
.gi-obra-form { padding:8px 0 28px; }
.gi-previsto-grupo { margin-top:24px; }
.gi-motivo { margin-top:24px; }
.gi-historico { margin-top:28px; padding:16px 20px; background:var(--fundo-app); }
.gi-historico h3 { margin:0 0 6px; font-size:15px; }
.gi-historico .historico-lista li strong { display:block; font-size:13px; font-weight:600; }
.gi-previsto { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:12px 12px; }
.gi-previsto label { margin-bottom:2px; font-size:12px; font-weight:600; color:var(--texto-suave); }
.gi-previsto input[type=text] { padding:8px 10px; text-align:right; }
.gi-indice-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 20px; margin:16px 0 8px; }
.gi-indice-form select { width:220px; max-width:100%; }
.gi-indice-form input[type=text] { width:160px; max-width:100%; text-align:right; }
.tabela-indices { max-width:560px; margin-top:16px; }
@media (max-width:800px) { .gi-meta { grid-template-columns:1fr; } }

/* Consolidado: o semáforo de cada obra e de todas juntas numa tabela só. */
.tabela-rolavel { margin-top:16px; overflow-x:auto; }
.tabela-indicadores th { min-width:104px; }
.tabela-indicadores th:first-child { min-width:160px; }
.tabela-indicadores td { vertical-align:top; }
.tabela-indicadores td > div { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.tabela-indicadores .linha-total td { background:var(--fundo-menu); }
.ind-celula-pct { font-size:18px; line-height:1.2; }
@media (max-width:700px) {
  .tabela-indicadores td > div { flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 10px; }
  .tabela-indicadores .linha-total { background:var(--fundo-menu); }
  .tabela-indicadores .linha-total td { border-bottom:0; }
}

/* Quadro da obra: um desenho por indicador (SVG feito pelo script) e a linha do tempo. O nível é o realizado, o traço
   pontilhado é o esperado até hoje, e a cor é a da situação (sempre com o texto da situação ao lado). */
.canteiro { margin:28px 0 8px; padding:22px 24px 24px; }
.canteiro h2 { margin-bottom:6px; font-size:18px; }
.canteiro > .ajuda { max-width:75ch; margin:0 0 18px; }
.linha-tempo { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:26px; }
.linha-tempo-faixa { flex:1 1 260px; min-width:0; }
.linha-tempo input[type=range] { display:block; width:100%; margin:0; accent-color:var(--texto); }
.linha-tempo-extremos { display:flex; justify-content:space-between; color:var(--texto-suave); font-size:12px; }
.linha-tempo-mes { min-width:13ch; font-size:16px; font-weight:700; }
/* Os 7 desenhos na mesma linha; em tela estreita a linha rola para o lado em vez de quebrar. */
.canteiro-grade { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(100px,1fr); gap:10px; overflow-x:auto; padding-bottom:6px; }
.desenho { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px 12px; border-top:5px solid var(--texto); border-radius:var(--raio-m); background:var(--fundo-app); color:var(--texto); text-align:center; }
.desenho:hover { background:var(--fundo-hover); }
.desenho:focus-visible { outline:2px solid var(--texto); outline-offset:2px; }
.des-nome { font-size:14px; }
.des-pct { font-size:20px; font-weight:700; line-height:1.1; }
.des-situacao { min-height:22px; }
.des-situacao .etiqueta { font-size:11px; padding:2px 6px; }
.des-detalhe { color:var(--texto-suave); font-size:11px; line-height:1.3; }
.des-svg { display:block; width:100%; max-width:84px; height:auto; margin:0 auto 6px; }

/* Inserir dados do mês, no alto do painel (assistente, engenheiro e coordenador da obra). */
.inserir { margin:20px 0 8px; padding:24px; }
.inserir h2 { margin-bottom:8px; font-size:18px; }
.ins-grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:18px 20px; margin-top:12px; }
.ins-campo label { font-size:13px; }
.ins-campo input[type=text] { font-size:16px; font-weight:600; text-align:right; }
.ins-campo .opcao { margin-top:6px; font-size:13px; }
.ins-campo .ajuda { margin:4px 0 0; font-size:12px; }
.ins-historico { align-self:center; font-size:14px; font-weight:600; }

/* Cada indicador do painel ocupa uma linha: gráfico à esquerda, texto à direita. */
.ind-linhas { grid-template-columns:1fr; gap:48px; }
.ind-linha { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px 56px; align-items:start; }
.ind-esq, .ind-dir { min-width:0; }
.ind-acumulado { margin:2px 0 12px; font-size:15px; font-weight:600; }
.ind-dir { padding-top:34px; }
.ind-dir h4 { margin:18px 0 4px; font-size:12px; }
.ind-dir h4:first-child { margin-top:0; }
.ind-texto { margin:0; font-size:14px; }
@media (max-width:900px) {
  .ind-linha { grid-template-columns:1fr; }
  .ind-dir { padding-top:0; }
}
.des-ok { --cor-nivel:var(--situacao-ok); }
.des-atencao { --cor-nivel:var(--situacao-atencao); }
.des-fora { --cor-nivel:var(--situacao-vencido); }
.des-sem { --cor-nivel:var(--contorno); }
.des-nivel { fill:var(--cor-nivel); }
.des-arco { fill:none; stroke:var(--cor-nivel); stroke-width:5; }
.des-traco { fill:none; stroke:var(--texto); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.des-fino { fill:none; stroke:var(--texto); stroke-width:.75; }
.des-cheio { fill:var(--texto); stroke:none; }
.des-vazio { fill:none; }
.des-luz { stroke:var(--texto); stroke-width:.75; }
.des-nivel.des-traco { stroke:var(--texto); stroke-width:1.5; }
.des-esperado { fill:none; stroke:var(--texto); stroke-width:1.5; stroke-dasharray:4 3; }
.des-esperado-forte { stroke:var(--texto); stroke-width:3; }
.des-texto { fill:var(--texto-suave); font-family:var(--zenk-fonte-texto); font-size:11px; }
.des-oculto { display:none; }

/* Gráfico (SVG feito pelo script): traços e cores aqui, nunca no HTML. */
.grafico { min-width:0; }
.grafico svg { display:block; max-width:100%; overflow:visible; touch-action:pan-y; }
.grafico svg:focus-visible { outline:2px solid var(--texto); outline-offset:4px; }
.graf-grade { stroke:var(--fio); stroke-width:1; }
.graf-meta { stroke:var(--texto); stroke-width:1; }
.graf-linha { fill:none; stroke:var(--texto); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.graf-tendencia { fill:none; stroke:var(--texto-suave); stroke-width:3; stroke-linecap:round; stroke-dasharray:0.1 7; }
.graf-ponto { fill:var(--texto); stroke:var(--fundo); stroke-width:2; }
.graf-ponto-aberto { fill:var(--fundo); stroke:var(--texto); stroke-width:1.5; }
.graf-ponto-ok { fill:var(--situacao-ok); stroke:var(--fundo); }
.graf-ponto-atencao { fill:var(--situacao-atencao); stroke:var(--fundo); }
.graf-ponto-fora { fill:var(--situacao-vencido); }
.graf-texto { fill:var(--texto-suave); font-family:var(--zenk-fonte-texto); font-size:11px; }
.graf-texto-forte { fill:var(--texto); font-weight:700; }
.graf-mira { stroke:var(--contorno); stroke-width:1; }
.graf-selecao { fill:none; stroke:var(--texto); stroke-width:1.5; }
.graf-captura { fill:transparent; cursor:crosshair; }
.graf-oculto { display:none; }
.graf-leitura { min-height:6.5em; margin:6px 0 0; font-size:13px; line-height:1.55; }
.graf-leitura span { display:block; }
.graf-leitura span:first-child { margin-bottom:2px; font-weight:700; }

@media (max-width:700px) {
  .ind-numero strong { font-size:34px; }
  .filtros .filtro-obra { width:100%; }
  .lanc-item { grid-template-columns:1fr; gap:10px; }
  .lanc-valor, .lanc-entrada input[type=text] { text-align:left; }
}

/* Cartões no celular: menos recuo dos lados, para o conteúdo caber sem rolar para o lado. */
@media (max-width:600px) {
  .secao, .passo, .painel, .historico, .email, .inserir, .canteiro, .ind-bloco, .ind-historico, .modulo-guia, .carimbo { padding-left:16px; padding-right:16px; }
  .lanc-lista, .gi-metas, .gi-obra { padding-left:16px; padding-right:16px; }
  .secao .tabela th, .secao .tabela td { padding-left:8px; padding-right:8px; }
}

/* Ficha da obra (Gestão › Obras › Estrutura e equipe; cadastro único da obra, fase 2): a estrutura (torres, grupos de locais, serviços e a
   prévia do prédio) e a equipe (o organograma). Só variáveis da marca; a cor fica para dizer a situação. */
.ficha-cab { margin:0 0 24px; }
.ficha-cab h2 { margin-bottom:4px; font-size:22px; }
.ficha-secao { margin:0 0 40px; }
.ficha-secao > h3 { margin-bottom:6px; font-size:18px; }
.ficha-torres { margin:16px 0; padding:0; list-style:none; border:1px solid var(--borda-suave); border-radius:var(--raio); background:var(--cartao); }
.ficha-torre { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; padding:14px 20px; border-top:1px solid var(--borda-suave); }
.ficha-torre:first-child { border-top:0; }
.ficha-torre-texto { display:flex; flex-direction:column; gap:2px; }
.ficha-torre-texto small { color:var(--texto-suave); font-size:13px; }
.ficha-torre-texto .etiqueta { align-self:flex-start; margin-top:2px; }
.ficha-editor { margin-top:20px; }
.ficha-grupos { display:grid; gap:16px; margin:20px 0 12px; padding:0; list-style:none; }
.ficha-grupo { padding:16px; border:1px solid var(--borda-suave); border-radius:var(--raio-m); background:var(--fundo-app); }
.ficha-grupo-cab { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.ficha-grupo-acoes { display:flex; gap:14px; }
.ficha-grupo-acoes .botao-texto { padding:2px 0; border:0; background:none; color:var(--texto); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ficha-servicos { margin-top:16px; }
.ficha-etapa { margin-top:10px; }
.ficha-servicos-lista { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:4px 16px; }
.ficha-servico { display:flex; align-items:flex-start; gap:8px; margin:0; font-size:14px; font-weight:400; cursor:pointer; }
.ficha-servico input { flex:none; width:auto; margin-top:3px; }
.previa-predio { margin-top:24px; padding:16px; border:1px solid var(--borda-suave); border-radius:var(--raio-m); background:var(--fundo-app); }
.previa-lista { margin:8px 0 14px; padding:0; list-style:none; }
.previa-local { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:4px 0; border-top:1px solid var(--borda-suave); font-size:14px; }
.previa-local:first-child { border-top:0; }
.previa-local > span:first-child { margin-right:auto; }
.previa-local small { color:var(--texto-suave); }
/* Gestão › Fichas do FVS (etapa 3 da fase 2): a prévia da planilha antes de confirmar. */
.planilha-resultado { margin-top:16px; }
.planilha-titulo { margin:0; font-weight:700; }
.planilha-lista { margin:12px 0; padding:0; list-style:none; border:1px solid var(--borda-suave); border-radius:var(--raio); background:var(--cartao); }
.planilha-mudanca { padding:14px 20px; border-top:1px solid var(--borda-suave); }
.planilha-mudanca:first-child { border-top:0; }
.planilha-mudanca-cab { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:6px; }
.planilha-mudanca ul { margin:0; padding-left:20px; color:var(--texto-suave); font-size:14px; }
.organograma { display:grid; margin-top:8px; }
.org-nivel { position:relative; padding:20px 0 4px; }
.org-nivel + .org-nivel::before { content:""; position:absolute; top:0; left:24px; height:20px; border-left:2px solid var(--contorno); }
.org-cartoes { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 0; padding:0; list-style:none; }
.org-cartao { display:flex; flex-direction:column; min-width:200px; padding:12px 16px; border:1px solid var(--borda-suave); border-radius:var(--raio-m); background:var(--cartao); }
.org-cartao small { color:var(--texto-suave); font-size:13px; }
.org-vazio { margin:8px 0 0; color:var(--texto-suave); font-size:14px; }
@media (max-width:600px) {
  .ficha-grupo { padding:12px; }
  .ficha-servicos-lista { grid-template-columns:1fr; }
  .org-cartao { min-width:0; width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  .detalhes-botao::before { transition:none; }
}

/* Administração › Obras: as etiquetas dos blocos e o título de cada bloco da ficha da obra. */
.obra-blocos { display:flex; flex-wrap:wrap; gap:6px 8px; }
.ficha-bloco-titulo { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:6px; }
.ficha-bloco-titulo h3 { margin:0; font-size:18px; }
.ficha-secao > .caixa { margin:12px 0; }
.ficha-secao > .caixa ul { margin:0; }
.ficha-secao > .painel { margin-top:16px; }
#adminFichas > .descricao, #adminIndicadores > .descricao { margin-bottom:32px; }

/* Administração › Checklist: o corpo do painel de cada seção e os textos largos do item. */
.ficha-grupo textarea { min-height:90px; }
.gi-obra-form .ficha-grupos { margin-top:12px; }
.gi-obra-form .acoes-linha { margin-bottom:12px; }

/* Ajudas do dia do cadastro (Administração): colar vários cargos e ligar as pessoas às obras pela área. */
.botoes-linha { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.lote-texto { min-height:200px; border-radius:var(--raio-m); font-size:14px; line-height:1.5; resize:vertical; }
.painel h3 { margin:24px 0 8px; font-size:16px; }
.lista-obras { display:flex; flex-direction:column; gap:10px; }
.linha-erro td { background:var(--situacao-vencido-fundo); }
.detalhe-lote { margin-top:16px; }
.detalhe-lote summary { width:max-content; max-width:100%; padding:4px 0; cursor:pointer; font-size:14px; font-weight:600; }
.detalhe-lote ul { margin-top:8px; }
.tabela-ligacao, .tabela-importar { margin-top:16px; }