/* ==========================================================================
   André Alves Gestão e Engenharia — área de clientes: folha de estilos
   A mesma marca do site: azul-petróleo, ocre, areia, papel e grafite;
   Jost e JetBrains Mono; cantos retos, sem sombras nem degradês.
   Verde e vermelho só para a situação das linhas das planilhas.
   ========================================================================== */

/* Fontes hospedadas no próprio site, com licença aberta (/assets/fonts/OFL-*.txt).
   A Jost é variável: o mesmo arquivo traz os pesos 400 e 500. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

/* 1. Tokens --------------------------------------------------------------- */

:root {
  --petroleo: #14464F;
  --ocre: #C98B3C;
  --areia: #E8DFCF;
  --papel: #FDFCFA;
  --grafite: #1E2224;
  --branco: #FFFFFF;
  --texto: #4B5257;
  --rotulo: #6B7378;
  --texto-azul: #C6D3D6;
  --rotulo-azul: #9DB4B9;
  --linha: #DCD2C0;           /* fios das tabelas: areia um pouco mais escura */
  --campo: #C9BFAD;           /* borda dos campos de formulário */
  --ok: #2F7D3B;
  --ok-fundo: #DCEFD7;
  --atraso: #B3261E;
  --atraso-fundo: #F8DBD6;
  --hoje: #F6EEDF;            /* fundo claro: avisos e o dia em destaque na programação */

  --sans: "Jost", "Futura", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 3.5vw, 40px);
  --largura: 1480px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* 2. Base ----------------------------------------------------------------- */

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

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 500; }
code { font-family: var(--mono); font-size: .9em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--ocre); color: var(--grafite); }

a { color: var(--petroleo); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--grafite); }

:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }

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

.pular {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--petroleo);
  color: var(--branco);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

/* 3. Cabeçalho e rodapé --------------------------------------------------- */

.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--areia);
}

.topo__interno {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--largura);
  height: 64px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-right: auto;
  text-decoration: none;
}
.topo__marca img { width: auto; height: 32px; }

.topo__rotulo {
  padding-left: 14px;
  border-left: 1px solid var(--linha);
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.topo__conta { display: flex; align-items: center; gap: 2px; }
.topo__sair { display: contents; }

.topo__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--grafite);
  font-size: .9375rem;
  text-decoration: none;
  cursor: pointer;
}
.topo__link:hover { color: var(--petroleo); text-decoration: underline; }

.conteudo {
  flex: 1;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 28px var(--gutter) 64px;
}

.rodape {
  padding: 20px var(--gutter);
  border-top: 1px solid var(--areia);
  color: var(--rotulo);
  font-size: .8125rem;
  text-align: center;
}
.rodape a { color: inherit; }

@media (max-width: 640px) {
  .topo__usuario { display: none; }
  .topo__rotulo { padding-left: 10px; font-size: .625rem; letter-spacing: .14em; }
}

/* 4. Títulos e trilha ----------------------------------------------------- */

.rotulo {
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.rotulo--azul { color: var(--rotulo-azul); }

/* Rótulo do topo da página com o fio ocre, como no site */
.cabeca .rotulo,
.entrar__chamada .rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cabeca .rotulo::before,
.entrar__chamada .rotulo::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--ocre);
}

.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 18px;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
.trilha a { color: var(--rotulo); }
.trilha a:hover { color: var(--petroleo); }
.trilha [aria-current] { color: var(--grafite); }
.trilha__sep { color: var(--campo); }

.cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.cabeca__titulo {
  margin-top: 10px;
  color: var(--petroleo);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.cabeca__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.secao-titulo {
  margin-bottom: 16px;
  color: var(--grafite);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* 5. Botões --------------------------------------------------------------- */

.botao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--petroleo);
  border-radius: 0;
  background: var(--petroleo);
  color: var(--branco);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
}
/* Preenchimento ocre que varre o botão, como no site */
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ocre);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.botao:focus-visible { outline-offset: 3px; }
.botao:disabled { opacity: .55; cursor: progress; }

@media (hover: hover) {
  .botao:hover { border-color: var(--ocre); color: var(--grafite); }
  .botao:hover::before { transform: scaleX(1); transform-origin: left; }
}

.botao--linha { background: transparent; color: var(--petroleo); }
.botao--claro { border-color: var(--branco); background: var(--branco); color: var(--petroleo); }
.botao--perigo { border-color: var(--atraso); background: transparent; color: var(--atraso); }
.botao--perigo::before { background: var(--atraso); }
.botao--pequeno { min-height: 36px; padding: 7px 12px; font-size: .875rem; }
.botao--largo { width: 100%; }
/* Programação: gravar o planejamento (verde) e, só para a administração, cancelar a gravação (vermelho) */
.botao--gravar { border-color: var(--ok); background: var(--ok); }
.botao--vermelho { border-color: var(--atraso); background: var(--atraso); color: var(--branco); }
.botao--vermelho::before { background: #7F1B15; }

@media (hover: hover) {
  .botao--perigo:hover { border-color: var(--atraso); color: var(--branco); }
  .botao--vermelho:hover { border-color: #7F1B15; color: var(--branco); }
}

.botao-texto {
  min-height: 36px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--rotulo);
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.botao-texto:hover { color: var(--atraso); }
.botao-texto--neutro:hover { color: var(--petroleo); }
.botao-texto:disabled { color: var(--campo); text-decoration: none; cursor: not-allowed; }

/* 6. Mensagens, cartões e formulários ------------------------------------- */

.mensagem {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--petroleo);
  background: var(--branco);
  color: var(--grafite);
}
.mensagem p + p { margin-top: 6px; }
.mensagem--ok { border-left-color: var(--ok); background: var(--ok-fundo); }
.mensagem--erro { border-left-color: var(--atraso); background: var(--atraso-fundo); }
.mensagem--info { border-left-color: var(--ocre); background: var(--hoje); }

.mensagem__senha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px !important;
}
.mensagem__senha code {
  padding: 6px 14px;
  border: 1px solid var(--linha);
  background: var(--branco);
  font-size: 1.25rem;
  letter-spacing: .08em;
  user-select: all;
}
.mensagem__nota { color: var(--texto); font-size: .875rem; }

.cartao {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--areia);
  border-top: 2px solid var(--petroleo);
  background: var(--branco);
}
.cartao p + p { margin-top: 14px; }
.cartao--texto { max-width: 720px; }
.cartao--form { max-width: 560px; }
.cartao--perigo { border-top-color: var(--atraso); }
.cartao--perigo > p { margin-bottom: 16px; }
.cartao__intro { margin-bottom: 18px; }

.formulario { display: grid; gap: 16px; }
.formulario .botao { justify-self: start; }
.formulario .botao--largo { justify-self: stretch; }

.campo { display: grid; gap: 6px; }
.campo__rotulo { color: var(--grafite); font-size: .875rem; font-weight: 500; }
.campo__opcional { color: var(--rotulo); font-weight: 400; }
.campo__ajuda { color: var(--rotulo); font-size: .8125rem; }

/* Aceite dos termos: caixa de marcar ao lado do texto */
.aceite { display: flex; align-items: flex-start; gap: 12px; color: var(--grafite); font-size: .9375rem; cursor: pointer; }
.aceite .marcador { flex: none; margin: 0; }

.campo input,
.campo select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--campo);
  border-radius: 0;
  background: var(--branco);
  color: var(--grafite);
}
.campo input:focus,
.campo select:focus {
  border-color: var(--petroleo);
  outline: 2px solid var(--petroleo);
  outline-offset: -1px;
}
.campo input.is-invalida { border-color: var(--atraso); outline: 2px solid var(--atraso); outline-offset: -1px; }

.opcoes { display: grid; gap: 2px; }
.opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  color: var(--grafite);
  cursor: pointer;
}
.opcao input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--petroleo);
}
.opcao__nota { display: block; color: var(--rotulo); font-size: .8125rem; }

.etiqueta {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--linha);
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta--ok { border-color: rgba(47, 125, 59, .4); color: var(--ok); }
.etiqueta--forte { border-color: var(--petroleo); color: var(--petroleo); }
.etiqueta--alerta { border-color: rgba(179, 38, 30, .4); color: var(--atraso); }
.etiqueta--pendente { border-color: #D9B23A; background: #FFF4CC; color: #7A5A06; }

.vazio { margin: 16px 0; color: var(--rotulo); }

/* 7. Obras e módulos ------------------------------------------------------ */

.obras,
.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 16px;
}

.obra-cartao,
.modulo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--areia);
  background: var(--branco);
  color: var(--grafite);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .3s;
}
/* Fio no topo, que fica ocre ao passar o mouse */
.obra-cartao::before,
.modulo::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: var(--petroleo);
  transition: background-color .3s;
}

.obra-cartao__nome { color: var(--petroleo); font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.obra-cartao__info { color: var(--rotulo); font-size: .9375rem; }
.obra-cartao .etiqueta { align-self: flex-start; margin-top: 4px; }
.obra-cartao.is-arquivada { opacity: .7; }

.obra-cartao__ir {
  margin-top: auto;
  padding-top: 18px;
  font-size: .9375rem;
  font-weight: 500;
}
.obra-cartao__ir::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 2px;
  margin-left: 12px;
  background: var(--ocre);
  transition: width .4s var(--ease-out);
}

.modulo { min-height: 210px; }
.modulo__n {
  color: #B87A2E;     /* ocre escurecido: 3,6:1 sobre o branco */
  font-family: var(--mono);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -.04em;
}
.modulo__nome { margin-top: 12px; color: var(--petroleo); font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.modulo__texto { font-size: .9375rem; color: var(--texto); }
.modulo__dado {
  margin-top: auto;
  padding-top: 16px;
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .04em;
}
.modulo__dado.is-alerta { color: var(--atraso); }

.modulo--em-breve { border-style: dashed; background: transparent; }
.modulo--em-breve::before { background: var(--linha); }
.modulo--em-breve .modulo__n,
.modulo--em-breve .modulo__nome { color: var(--rotulo); }
.modulo--em-breve .etiqueta { align-self: flex-start; margin-top: auto; }

@media (hover: hover) {
  .obra-cartao:hover,
  .modulo:hover { border-color: var(--campo); }
  .obra-cartao:hover::before,
  .modulo:hover::before { background: var(--ocre); }
  .obra-cartao:hover .obra-cartao__ir::after { width: 36px; }
}

/* Aviso "Em breve" */
.aviso {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: var(--petroleo);
  color: var(--texto-azul);
}
.aviso::backdrop { background: rgba(30, 34, 36, .55); }
.aviso[open] { animation: aviso-entra .45s var(--ease-out); }
.aviso__caixa { padding: 32px; }
.aviso__titulo {
  color: var(--ocre);
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.aviso__titulo--menor { font-size: 1rem; letter-spacing: .18em; }
.aviso__texto { margin: 14px 0 26px; color: var(--papel); font-size: 1.0625rem; }
.aviso__texto strong { color: var(--branco); }
.aviso__texto a { color: var(--branco); font-weight: 500; overflow-wrap: anywhere; }
.aviso__texto a:hover { color: var(--ocre); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateY(14px); }
}

/* Janela clara e mais larga (importação do orçamento) */
.janela {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-top: 4px solid var(--ocre);
  background: var(--branco);
  color: var(--grafite);
  overflow: auto;
}
.janela::backdrop { background: rgba(30, 34, 36, .55); }
.janela[open] { animation: aviso-entra .45s var(--ease-out); }
.janela__caixa { padding: 28px 32px 32px; }
.janela__titulo { margin-bottom: 14px; color: var(--petroleo); font-size: 1.375rem; font-weight: 500; line-height: 1.25; }
.janela__caixa > p { margin-bottom: 12px; line-height: 1.5; }
.janela__lista { margin: 0 0 12px; padding-left: 24px; line-height: 1.6; list-style: decimal; }
.janela .rolagem { margin-bottom: 12px; }
.janela__dica { color: var(--rotulo); font-size: .875rem; }
.janela__arquivo { margin: 4px 0 16px; cursor: pointer; }
.janela__arquivo:focus-within { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.janela .mensagem { margin-bottom: 16px; }
.janela__erros { margin-top: 6px; padding-left: 18px; font-size: .875rem; line-height: 1.5; }
.janela__modo { margin: 0 0 18px; padding: 0; border: 0; }
.janela__modo legend { margin-bottom: 6px; font-weight: 500; }
.janela__modo label { display: flex; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer; }
.janela__modo label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.janela__nota { margin-top: 6px; color: var(--rotulo); font-size: .875rem; }
.janela__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.tabela--exemplo { font-size: .8125rem; }
.janela .tabela--exemplo th,
.janela .tabela--exemplo td { padding: 5px 10px; white-space: nowrap; }
.tabela--exemplo td:first-child,
.tabela--exemplo td:nth-child(n+3) { font-family: var(--mono); }

@media (max-width: 640px) {
  .janela__caixa { padding: 22px 18px 24px; }
}

/* 8. Planilhas ------------------------------------------------------------ */

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 12px;
}
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.barra__filtro { display: flex; align-items: center; gap: 10px; }
.barra__filtro select {
  max-width: 320px;          /* nome comprido de responsável não alarga o menu */
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--campo);
  border-radius: 0;
  background: var(--branco);
  color: var(--grafite);
  text-overflow: ellipsis;
}
.barra__contagem { color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }

.salvamento {
  margin-left: auto;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .75rem;
  text-align: right;
}
.salvamento.is-salvando { color: var(--petroleo); }
.salvamento.is-erro { color: var(--atraso); }
.salvamento a { color: inherit; font-weight: 500; }

.rolagem {
  position: relative;        /* prende os rótulos invisíveis da tabela dentro da rolagem */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linha);
  background: var(--branco);
}

.grade {
  width: 100%;
  border-collapse: collapse;
  border-style: hidden;      /* a borda de fora fica com a .rolagem */
  font-size: .9375rem;
}

.grade th {
  padding: 8px 10px;
  border: 1px solid var(--linha);
  background: var(--areia);
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.grade td {
  padding: 0;
  border: 1px solid var(--linha);
  background: var(--branco);
  vertical-align: top;
}

.grade__campo {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--grafite);
  line-height: 1.35;
}
textarea.grade__campo { resize: none; overflow: hidden; }
select.grade__campo { cursor: pointer; }
.grade__campo::placeholder { color: #6F6A60; }
.grade__campo:focus {
  outline: 2px solid var(--petroleo);
  outline-offset: -2px;
  background: var(--branco);
}
.grade__campo.is-invalida { outline: 2px solid var(--atraso); outline-offset: -2px; }

.grade__data {
  font-family: var(--mono);
  font-size: .875rem;
  text-align: center;
}
/* Valor que a pessoa não edita (ex.: data de registro, posta pelo sistema) */
.grade__fixo {
  display: block;
  min-height: 42px;
  padding: 10px;
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .875rem;
  text-align: center;
}

.grade td.col-ok,
.grade td.col-acao { vertical-align: middle; text-align: center; }

.grade__excluir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--texto);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.grade__excluir:hover { background: var(--atraso-fundo); color: var(--atraso); }

/* Quadradinho do OK: reto, verde quando marcado */
.marcador {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 10px auto;
  border: 2px solid var(--grafite);
  border-radius: 0;
  background: var(--branco) center / 14px no-repeat;
  vertical-align: middle;
  cursor: pointer;
}
.marcador:checked {
  border-color: var(--ok);
  background-color: var(--ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
}

/* Situação das linhas da planilha de restrições */
.grade tr.is-ok > td { background: var(--ok-fundo); }
.grade tr.is-atrasada > td { background: var(--atraso-fundo); }
.grade tr.is-ok > td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
.grade tr.is-atrasada > td:first-child { box-shadow: inset 4px 0 0 var(--atraso); }
/* Restrição incompleta (falta coluna até a Data original): amarela, acima das outras cores */
.grade tr.is-incompleta > td { background: #FFF4CC; }
.grade tr.is-incompleta > td:first-child { box-shadow: inset 4px 0 0 #E0B000; }
.legenda__cor--incompleta { border-color: #E0B000; background: #FFF4CC; }

/* Aviso de restrições incompletas, ao lado da contagem */
.alerta-incompletas { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--grafite); font-family: var(--mono); font-size: .75rem; }
.alerta-incompletas__icone { flex: none; }

/* Botão de salvar da linha nova */
.grade__salvar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ok);
  background: var(--branco);
  color: var(--ok);
  cursor: pointer;
}
.grade__salvar:hover:not(:disabled) { background: var(--ok); color: var(--branco); }
.grade__salvar:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 1px; }
.grade__salvar:disabled { opacity: .5; cursor: progress; }

.grade--restricoes { min-width: 1320px; table-layout: fixed; }
.grade--restricoes .col-servico { width: 14%; }
.grade--restricoes .col-restricao { width: 19%; }
.grade--restricoes .col-tipo { width: 14%; }
.grade--restricoes .col-responsavel { width: 11%; }
.grade--restricoes .col-data { width: 7.5%; }
.grade--restricoes .col-ok { width: 4%; }
.grade--restricoes .col-dias { width: 5%; }
.grade--restricoes .col-acao { width: 3%; }
.grade--restricoes th.col-ok,
.grade--restricoes th.col-data,
.grade--restricoes th.col-dias { text-align: center; }
.grade--restricoes td.col-dias { color: var(--grafite); font-family: var(--mono); font-size: .875rem; text-align: center; vertical-align: middle; }
.tempo-decorrido.is-negativo { color: var(--atraso); font-weight: 500; cursor: help; }

.pe-planilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 16px;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--rotulo);
  font-size: .8125rem;
}
.legenda li { display: flex; align-items: center; gap: 8px; }
.legenda__cor { flex: none; width: 16px; height: 14px; border-left: 4px solid; }
.legenda__cor--ok { border-color: var(--ok); background: var(--ok-fundo); }
.legenda__cor--atrasada { border-color: var(--atraso); background: var(--atraso-fundo); }
.legenda__cor--plan { border: 0; background: var(--petroleo); }
.legenda__cor--real { border: 0; background: var(--ocre); }
.legenda__cor--feriado { border: 1px solid var(--campo); background: repeating-linear-gradient(135deg, rgba(30, 34, 36, .35) 0 1px, transparent 1px 5px); }

/* Restrições: o aviso de salvamento fica embaixo da legenda */
.pe-planilha__info { display: flex; flex-direction: column; gap: 8px; }
.salvamento.salvamento--legenda { min-height: 1.2em; margin: 0; text-align: left; }

/* 9. Programação semanal -------------------------------------------------- */

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--linha);
}

.abas__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.abas__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ocre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.abas__item:hover,
.abas__item[aria-selected="true"],
.abas__item[aria-current="page"],
.abas__item[aria-current="true"] { color: var(--grafite); }
.abas__item[aria-selected="true"]::after,
.abas__item[aria-current="page"]::after,
.abas__item[aria-current="true"]::after { transform: scaleX(1); }

.semana {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 18px;
}
.semana__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--campo);
  background: var(--branco);
  color: var(--petroleo);
  font-size: 1.125rem;
  text-decoration: none;
}
.semana__seta:hover { border-color: var(--petroleo); color: var(--petroleo); }
.semana__titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 180px;
}
.semana__datas { color: var(--grafite); font-size: 1.125rem; font-weight: 500; }
.semana__hoje { font-size: .875rem; }

/* Sábado e domingo da semana e feriados */
.dias-semana { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; margin: -4px 0 16px; }
.dias-semana__grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.marcar { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; cursor: pointer; }
.marcar input { width: 18px; height: 18px; margin: 0; accent-color: var(--petroleo); cursor: pointer; }
.marcar input:disabled { cursor: progress; }
.feriados { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.feriado {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--campo);
  background: var(--branco);
  color: var(--grafite);
  font: inherit;
  font-family: var(--mono);
  font-size: .75rem;
  cursor: pointer;
}
.feriado[aria-pressed="true"] {
  border-color: var(--grafite);
  background-image: repeating-linear-gradient(135deg, rgba(30, 34, 36, .22) 0 1px, transparent 1px 6px);
  font-weight: 500;
}
.feriado:disabled { cursor: progress; }

.grade--prog { min-width: 1200px; table-layout: fixed; }
.grade--prog .c-id { width: 44px; }
.grade--prog .c-eq { width: 64px; }
.grade--prog .c-tipo { width: 140px; }
.grade--prog .c-local { width: 120px; }
.grade--prog .c-pr { width: 54px; }
.grade--prog .c-meio { width: 28px; }
.grade--prog .c-perc { width: 76px; }
.grade--prog .c-causa { width: 190px; }
.grade--prog .c-acao { width: 40px; }

.grade--prog th { text-align: center; vertical-align: middle; }
.grade--prog th.prog__dia { padding: 6px 2px; cursor: pointer; }
.grade--prog th.is-destaque { background: #EAD9BC; }
/* O dia no cabeçalho é um botão: um clique destaca a coluna, outro tira */
.prog__destacar {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.prog__destacar:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
@media (hover: hover) {
  .grade--prog th.prog__dia:not(.is-destaque):hover { background-color: #F1E6D2; }
}
/* Dia não trabalhado: hachura diagonal na coluna do dia (some onde o pacote tem serviço) */
.grade--prog th.is-feriado,
.grade--prog td.prog__meio.is-feriado { background-image: repeating-linear-gradient(135deg, rgba(30, 34, 36, .2) 0 1px, transparent 1px 7px); }
.prog__feriado { display: block; color: var(--texto); font-size: .5625rem; letter-spacing: .04em; text-transform: none; }

/* Subir, descer e excluir o pacote */
.prog__acoes { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.grade__ordem {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--rotulo);
  font-size: .875rem;
  line-height: 1;
  cursor: pointer;
}
.grade__ordem:hover:not(:disabled) { border-color: var(--campo); color: var(--petroleo); }
.grade__ordem:focus-visible { outline: 2px solid var(--petroleo); outline-offset: -2px; }
.grade__ordem:disabled { opacity: .3; cursor: default; }

.grade--prog td[rowspan] { vertical-align: middle; }
.grade--prog td.prog__id { color: var(--grafite); font-family: var(--mono); font-size: .875rem; text-align: center; }
.grade__eq { padding-left: 6px; padding-right: 2px; font-family: var(--mono); text-align: center; }

.grade--prog td.prog__rotulo {
  padding: 0 4px;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-align: center;
  vertical-align: middle;
}

/* Meios períodos: borda mais forte entre os dias, pontilhada entre manhã e tarde */
.grade--prog td.prog__meio { padding: 0; vertical-align: middle; }
.grade--prog td.is-manha { border-left: 2px solid var(--linha); }
.grade--prog td.is-tarde { border-left: 1px dotted var(--campo); }
.grade--prog td.is-destaque { background: var(--hoje); }
.grade--prog tr.prog__plan td:not([rowspan]) { border-bottom: 1px dotted var(--campo); }
.grade--prog tr.prog__real td,
.grade--prog td[rowspan] { border-bottom: 2px solid var(--campo); }

.meio {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.meio:focus-visible { outline: 2px solid var(--grafite); outline-offset: -2px; }
.meio--planejado[aria-pressed="true"] { background: var(--petroleo); }
.meio--realizado[aria-pressed="true"] { background: var(--ocre); }
.meio:disabled { cursor: not-allowed; }
.meio--planejado:disabled { cursor: default; }

@media (hover: hover) {
  .meio[aria-pressed="false"]:not(:disabled):hover { background: rgba(20, 70, 79, .1); }
}

/* Planejamento ainda não gravado: o PLAN marcado fica cinza e o REAL, o % e a
   causa ficam bloqueados, em fundo cinza claro. Depois de gravado, o PLAN volta
   às cores de sempre e a equipe, o pacote, o tipo e o local ficam fixos. */
.grade--prog.is-planejando .meio--planejado[aria-pressed="true"] { background: #868D92; }
.grade--prog.is-planejando tr.prog__real td.prog__meio:not(.is-destaque),
.grade--prog.is-planejando td.prog__perc,
.grade--prog.is-planejando td.prog__causa { background-color: #F1F1EF; }
.grade--prog .grade__campo:disabled { color: var(--rotulo); cursor: not-allowed; }
.grade--prog .grade__campo[readonly] { cursor: default; }
.grade--prog select.grade__campo:disabled { -webkit-appearance: none; appearance: none; color: var(--grafite); opacity: 1; cursor: default; }

.planejamento {
  margin: -2px 0 14px;
  padding: 10px 14px;
  border-left: 4px solid #9AA0A4;
  background: #F1F1EF;
  color: var(--grafite);
  font-size: .875rem;
  line-height: 1.45;
}
.planejamento.is-gravado { border-left-color: var(--ok); background: var(--ok-fundo); }
.planejamento:empty { display: none; }
.legenda__cor--rascunho { border: 0; background: #868D92; }

.perc { display: flex; align-items: center; }
.perc .grade__campo {
  padding-right: 2px;
  font-family: var(--mono);
  font-size: .875rem;
  text-align: right;
  -moz-appearance: textfield;
}
.perc .grade__campo::-webkit-outer-spin-button,
.perc .grade__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.perc span { padding-right: 10px; color: var(--rotulo); font-family: var(--mono); font-size: .875rem; }

/* Equipes */
.equipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  align-items: start;
}

.equipe {
  position: relative;
  border: 1px solid var(--areia);
  background: var(--branco);
}
.equipe::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  background: var(--petroleo);
}
.equipe--terceirizada::before { background: var(--ocre); }

.equipe__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 18px 16px 14px;
}
.equipe__nome {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
  color: var(--grafite);
  font-size: 1rem;
  font-weight: 500;
}
.equipe__numero {
  color: var(--ocre);
  font-family: var(--mono);
  font-size: 1.625rem;
  line-height: 1;
}
.equipe__vinculo {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--campo);
  border-radius: 0;
  background: var(--branco);
  color: var(--grafite);
}

.grade--membros { border-top: 1px solid var(--linha); border-style: solid hidden hidden; }
.grade--membros .col-acao { width: 44px; }
.equipe__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
}
.equipe__total { color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }

.resumo { max-width: 640px; margin-top: 40px; }
.grade--resumo th[scope="row"],
.grade--resumo td { padding: 10px 12px; vertical-align: middle; }
.grade--resumo tbody th[scope="row"] {
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--sans);
  font-size: .9375rem;
  letter-spacing: 0;
  text-transform: none;
}
.grade--resumo td { color: var(--grafite); font-family: var(--mono); font-size: .875rem; text-align: right; }
.grade--resumo thead th:not(:first-child) { text-align: right; }
.grade--resumo tfoot th,
.grade--resumo tfoot td { background: var(--areia); font-weight: 500; }
.grade--resumo .resumo__total { font-weight: 500; }
.grade--resumo .resumo__vazio { color: var(--rotulo); font-family: var(--sans); text-align: left; }

/* 10. Administração -------------------------------------------------------- */

.admin-grade { display: grid; gap: 28px; align-items: start; }
.relatorio__texto { max-width: 760px; margin: -6px 0 18px; }

/* Relatórios gerenciais: filtros numa linha e gráficos em SVG (montados no servidor) */
.relatorio-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin-bottom: 10px; }
.relatorio-filtros .campo { min-width: 220px; }
.relatorio__titulo { margin: 30px 0 8px; }
.relatorio__resumo { margin-bottom: 4px; color: var(--grafite); }
.grafico { display: block; width: 100%; height: auto; margin: 6px 0 16px; border: 1px solid var(--linha); background: var(--branco); font-family: var(--mono); }
.grafico__grade { stroke: var(--linha); stroke-width: 1; }
.grafico__eixo { stroke: var(--grafite); stroke-width: 1; }
.grafico__ref { stroke: var(--rotulo); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico__rotulo { fill: var(--rotulo); font-size: 12px; }
.grafico__valor { fill: var(--petroleo); font-size: 12px; font-weight: 600; }
.grafico__barra { fill: var(--petroleo); }
.grafico__barra--causa { fill: var(--ocre); }
.grafico__media { stroke: var(--ocre); stroke-width: 2; stroke-dasharray: 6 4; }
.grafico__media-rotulo {
  fill: #8A5A1C;     /* ocre escuro, com contorno branco para ler sobre as barras */
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--branco);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.grafico__linha { fill: none; stroke: var(--petroleo); stroke-width: 2; }
.grafico__ponto { fill: var(--petroleo); }
.grafico__valor--vazio { fill: var(--rotulo); font-weight: 400; }
/* Análise de restrições: concluídas (verde) embaixo e em aberto (ocre) em cima */
.grafico__barra--concluida { fill: var(--ok); }
.grafico__barra--aberta { fill: var(--ocre); }
.grafico__numero { fill: var(--branco); font-size: 11px; font-weight: 600; pointer-events: none; }
.grafico__numero--escuro { fill: var(--grafite); }
.legenda--grafico { margin: -6px 0 6px; }
.legenda__cor--concluida { border: 0; background: var(--ok); }
.legenda__cor--aberta { border: 0; background: var(--ocre); }
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}
.indicador { padding: 12px 14px 14px; border: 1px solid var(--linha); border-left: 4px solid var(--grafite); background: var(--branco); }
.indicador dt { color: var(--rotulo); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.indicador dd { margin: 6px 0 0; color: var(--grafite); font-family: var(--mono); font-size: 1.625rem; line-height: 1; }
.indicador--ok { border-left-color: var(--ok); }
.indicador--ok dd { color: var(--ok); }
.indicador--aberta { border-left-color: var(--ocre); }
.indicador--aberta dd { color: #8A5A1C; }
.indicador--irr { border-left-color: var(--petroleo); }
.indicador--irr dd { color: var(--petroleo); }
.tabela tfoot th,
.tabela tfoot td { border-top: 1px solid var(--linha); border-bottom: 0; background: var(--areia); font-weight: 500; }
.tabela__mono { font-family: var(--mono); white-space: nowrap; }
.filtro-links,
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
}
.filtro-links { margin-bottom: 14px; text-transform: uppercase; }
.paginacao { margin-top: 14px; }
.filtro-links a,
.paginacao a { color: var(--petroleo); text-underline-offset: .3em; }
.filtro-links a:not([aria-current]) { text-decoration: none; }
.filtro-links a[aria-current="page"] { color: var(--grafite); font-weight: 500; }
.admin-secoes { display: grid; gap: 20px; max-width: 760px; }
.admin-secoes .cartao--form { max-width: none; }

@media (min-width: 1040px) {
  .admin-grade { grid-template-columns: minmax(0, 1fr) 400px; }
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--branco);
  font-size: .9375rem;
}
.tabela th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linha);
  background: var(--areia);
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.tabela td { padding: 12px; border-bottom: 1px solid var(--areia); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td a { font-weight: 500; }
.tabela__sub { display: block; color: var(--rotulo); font-size: .8125rem; }
.tabela__num { font-family: var(--mono); }
.tabela .etiqueta { margin: 0 6px 4px 0; }
.tabela tr.is-inativo td { color: var(--rotulo); }

/* 11. Entrar --------------------------------------------------------------- */

.entrar { display: grid; flex: 1; }

@media (min-width: 900px) {
  .entrar { grid-template-columns: minmax(0, 1.1fr) minmax(420px, 1fr); }
}

.entrar__marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(28px, 5vw, 64px);
  background: var(--petroleo);
  color: var(--texto-azul);
}

/* Malha de prancheta: linhas finas a cada 56 px, mais marcadas a cada 224 px */
.entrar__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='224'%3E%3Cpath d='M224 .5H.5V224' fill='none' stroke='%23E8DFCF' stroke-opacity='.09'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 .5H.5V56' fill='none' stroke='%23E8DFCF' stroke-opacity='.045'/%3E%3C/svg%3E");
  background-size: 224px 224px, 56px 56px;
  background-position: -1px -1px;
}

.entrar__logo,
.entrar__chamada { position: relative; }
.entrar__logo { align-self: flex-start; }
.entrar__logo img { width: auto; height: 40px; }

.entrar__titulo {
  max-width: 13em;
  margin-top: 18px;
  color: var(--branco);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.destaque { color: var(--ocre); }

.entrar__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter);
}
.entrar__h1 {
  margin-bottom: 24px;
  color: var(--petroleo);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.entrar__ajuda { margin-top: 20px; font-size: .9375rem; }
.entrar__legal { margin-top: 20px; color: var(--rotulo); font-size: .8125rem; }
.entrar__legal a { color: inherit; }

/* "Esqueci a senha": texto com cara de link que abre o aviso */
.link-botao {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--petroleo);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  cursor: pointer;
}
.link-botao:hover { color: var(--grafite); }
.entrar__voltar {
  align-self: flex-start;
  margin-top: 28px;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}
.entrar__voltar::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 2px;
  margin-right: 10px;
  background: var(--ocre);
}
.entrar__voltar:hover { color: var(--petroleo); }

@media (max-width: 899px) {
  .entrar__marca { gap: 28px; }
  .entrar__logo img { height: 32px; }
}

/* 12. Página de aviso (erro, sem acesso) ----------------------------------- */

.pagina-aviso { justify-content: center; }
.aviso-pagina {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 64px var(--gutter);
}
.aviso-pagina__titulo {
  margin: 14px 0 12px;
  color: var(--petroleo);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.aviso-pagina p + p { margin-top: 24px; }

/* 13. Acompanhamento de serviços ------------------------------------------- */

/* As quatro situações (cores de sinalização, fora da paleta da marca) */
.situacao--feito { border-color: #2F7D3B; background: #3E9B50; color: var(--branco); }
.situacao--fazendo { border-color: #C9A227; background: #F2CB4C; color: var(--grafite); }
.situacao--afazer { border-color: var(--campo); background: var(--branco); color: var(--grafite); }
.situacao--impedido { border-color: #9E2A21; background: #C93A2E; color: var(--branco); }

.abas--sub { margin-bottom: 18px; }
.abas--sub .abas__item { min-height: 38px; padding: 8px 14px; font-size: .75rem; }

.contadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.contador { padding: 14px 16px 16px; border: 1px solid var(--areia); background: var(--branco); }
.contador__titulo {
  margin-bottom: 10px;
  color: var(--rotulo);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.contador__numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; }
.contador__item dt { display: flex; align-items: center; gap: 6px; color: var(--texto); font-size: .8125rem; line-height: 1.2; }
.contador__item dd { margin: 4px 0 0; color: var(--grafite); font-family: var(--mono); font-size: 1.375rem; line-height: 1; }
.contador__cor { flex: none; width: 10px; height: 10px; border: 1px solid; }

.servicos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.servico-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--areia);
  background: var(--branco);
  color: var(--grafite);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s;
}
.servico-cartao::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 2px;
  background: var(--petroleo);
  transition: background-color .3s;
}
.servico-cartao__nome { color: var(--petroleo); font-size: 1.125rem; font-weight: 500; line-height: 1.25; }
.servico-cartao__tipo { color: var(--rotulo); font-size: .875rem; }
.servico-cartao__dado { margin-top: auto; color: var(--grafite); font-family: var(--mono); font-size: .75rem; }

@media (hover: hover) {
  .servico-cartao:hover { border-color: var(--campo); }
  .servico-cartao:hover::before { background: var(--ocre); }
}

.progresso { display: flex; height: 8px; margin: 12px 0 8px; overflow: hidden; background: var(--areia); }
.progresso__parte { height: 100%; border: 0; }
.progresso .situacao--afazer { background: transparent; }

.mapa-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.mapa-topo__titulo .secao-titulo { margin: 4px 0 0; }
.mapa-dica { margin: -2px 0 12px; color: var(--rotulo); font-size: .875rem; }

.paleta { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.paleta__botao {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}
.paleta__botao--feito { border-color: #2F7D3B; background: #3E9B50; color: var(--branco); }
.paleta__botao--fazendo { border-color: #C9A227; background: #F2CB4C; color: var(--grafite); }
.paleta__botao--afazer { border-color: var(--campo); background: var(--branco); color: var(--grafite); }
.paleta__botao--impedido { border-color: #9E2A21; background: #C93A2E; color: var(--branco); }
.paleta__botao:disabled { opacity: .4; cursor: not-allowed; }

.rolagem--mapa { padding: 6px; border: 0; background: transparent; }
.mapa { border-collapse: separate; border-spacing: 4px; }
.mapa th { padding: 0; font-weight: 400; }
.mapa__titulo {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  background: var(--areia);
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
}
.mapa__titulo:hover { background: #DDD0B8; }
.mapa__canto .mapa__titulo { background: transparent; color: var(--rotulo); }
.mapa td { padding: 0; }
.bloco {
  display: block;
  min-width: 64px;
  width: 100%;
  min-height: calc(42px * var(--linhas, 1) + 4px * (var(--linhas, 1) - 1));   /* bloco mesclado: altura de várias linhas */
  padding: 6px 8px;
  border: 1px solid;
  font: inherit;
  font-size: .8125rem;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bloco.is-selecionado { outline: 3px solid var(--petroleo); outline-offset: 1px; }
.mapa__aviso { padding: 18px 4px; color: var(--rotulo); }

.legenda--mapa { margin-top: 12px; }
.legenda--mapa .legenda__cor { border: 1px solid; border-left-width: 1px; }

/* Configurações */
.rolagem--estreita { max-width: 980px; }
.grade--servicos .col-acao { width: 44px; }
.grade--servicos th:first-child { width: 58%; }
.grade--servicos .linha-nova .grade__campo::placeholder { color: var(--rotulo); }

.nova-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nova-linha input {
  width: min(360px, 100%);
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--campo);
  border-radius: 0;
  background: var(--branco);
  color: var(--grafite);
}
.tabela__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; white-space: nowrap; }
.tabela td.tabela__acoes { vertical-align: middle; }

/* Editor da malha da tipologia */
.editor__topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 12px; }
.editor__info { color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }
.editor__ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.editor__selecao { color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }
.campo--inline input { min-height: 40px; width: min(320px, 100%); }

.chave { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave__trilho { position: relative; flex: none; width: 40px; height: 22px; border: 1px solid var(--campo); background: var(--branco); transition: background-color .25s; }
.chave__trilho::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  background: var(--rotulo);
  transition: transform .25s var(--ease-out), background-color .25s;
}
.chave input:checked + .chave__trilho { border-color: var(--petroleo); background: var(--petroleo); }
.chave input:checked + .chave__trilho::after { background: var(--branco); transform: translateX(18px); }
.chave input:focus-visible + .chave__trilho { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.chave__texto { font-size: .875rem; }

.rolagem--malha { max-height: 70vh; overflow: auto; }
.malha { border-collapse: collapse; }
.malha td { padding: 0; border: 1px solid var(--linha); background: var(--branco); }
.malha__campo {
  display: block;
  width: calc(88px * var(--colunas, 1) + 1px * (var(--colunas, 1) - 1));     /* área mesclada: várias colunas */
  height: calc(32px * var(--linhas, 1) + 1px * (var(--linhas, 1) - 1));
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--grafite);
  font-size: .8125rem;
}
.malha__campo:focus { outline: 2px solid var(--ocre); outline-offset: -2px; background: var(--branco); }
.malha td.malha__titulo { background: var(--areia); }
.malha td.malha__titulo .malha__campo { font-weight: 500; }
.malha td.is-bloco { background: #EEF4F5; outline: 2px solid var(--petroleo); outline-offset: -2px; }
.malha td.is-mesclada .malha__campo { text-align: center; }
.malha td.is-excluida { background: repeating-linear-gradient(135deg, #EFE8DC 0 5px, var(--branco) 5px 10px); }
.malha td.is-selecionada { background: #D5E6EE; }
.malha td.malha__titulo.is-selecionada { background: #DACCB0; }
.malha__campo::placeholder { color: #4F6369; }
.malha__campo[readonly] { cursor: default; }
/* Títulos parados ao rolar a malha */
.malha tr:first-child td { position: sticky; top: 0; z-index: 2; }
.malha td:first-child { position: sticky; left: 0; z-index: 1; }
.malha tr:first-child td:first-child { z-index: 3; }

/* 14. Medição de obra -------------------------------------------------------- */

.ferramentas { display: flex; flex-wrap: wrap; gap: 8px; }

.grade--orcamento { min-width: 980px; table-layout: fixed; }
.grade--orcamento .o-num { width: 72px; }
.grade--orcamento .o-qtd { width: 110px; }
.grade--orcamento .o-un { width: 76px; }
.grade--orcamento .o-vu { width: 130px; }
.grade--orcamento .o-vt { width: 140px; }
.grade--orcamento .o-pct { width: 84px; }
.grade--orcamento .o-med { width: 150px; }
.grade--orcamento th { text-align: center; vertical-align: middle; }

.orc__numero { color: var(--texto); font-family: var(--mono); font-size: .8125rem; }
.grade td.orc__numero { padding: 10px 8px 10px 14px; vertical-align: middle; }
.orc--topico > td { background: #F6F0E4; }
.orc--topico .orc__descricao,
.orc--topico .orc__texto { font-weight: 500; }
.grade__numero { font-family: var(--mono); font-size: .875rem; text-align: right; }
.orc__unidade { text-align: center; }
.grade td.orc__total,
.grade td.orc__pct,
.grade td.orc__valor,
.grade td.orc__medido {
  padding: 10px;
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .875rem;
  text-align: right;
  vertical-align: middle;
}
.grade td.orc__valor--texto { text-align: center; }
.grade td.orc__medido { font-weight: 500; }
.orc__texto { display: block; padding: 10px; color: var(--grafite); line-height: 1.35; }
.grade tr.is-selecionada > td { background: #E3EEF0; }
.grade tr.is-selecionada > td:first-child { box-shadow: inset 4px 0 0 var(--petroleo); }

.grade--orcamento tfoot th,
.grade--orcamento tfoot td {
  padding: 10px;
  border: 1px solid var(--linha);
  background: var(--areia);
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  text-align: right;
}
.grade--orcamento tfoot th { letter-spacing: .06em; text-transform: uppercase; }
.grade--orcamento tfoot .orc__resumo th,
.grade--orcamento tfoot .orc__resumo td { background: var(--branco); font-weight: 400; }

.medicao-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 12px; }
.medicao-topo .secao-titulo { margin: 0 auto 0 0; }
.medicao-topo .salvamento { margin-left: 0; width: 100%; text-align: left; }
.grade--medicao td { vertical-align: middle; }
.orc__anterior { display: block; padding: 0 10px 6px; color: var(--texto); font-family: var(--mono); font-size: .6875rem; text-align: right; white-space: nowrap; }
.grade--medicao th.col-medicao { background: var(--petroleo); color: var(--branco); }
.grade--medicao td.orc__medicao { background: #F3F7F7; }
/* Medição aberta só para ver: o % vira texto e a data perde a cara de campo */
.orc__lido { display: block; padding: 10px 10px 2px; color: var(--grafite); font-family: var(--mono); font-size: .875rem; font-weight: 500; text-align: right; }
.medicao-topo .campo--inline input[readonly] { padding-left: 0; padding-right: 0; border-color: transparent; background: transparent; font-family: var(--mono); cursor: default; }
.medicao-topo .campo--inline select { min-height: 40px; width: min(320px, 100%); }
.campo__fixo { display: block; min-height: 40px; padding: 9px 0; color: var(--grafite); font-family: var(--mono); font-size: .9375rem; }
/* Medição física aberta só para ver: o R$ acumulado de cada item */
.grade--orcamento .o-rs { width: 150px; }
.grade td.orc__rs { background: #F3F7F7; font-weight: 500; }

/* Data base do orçamento: em destaque enquanto não for informada */
.orc-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; margin-bottom: 14px; }
.orc-topo .campo--inline input { width: 150px; font-family: var(--mono); }
.orc-topo .campo--inline input.is-pendente { border-color: #E0B000; background: #FFF8DB; }
.orc-topo__aviso { margin: 0 0 11px; color: #7A5C00; font-size: .875rem; }

/* Medição financeira: os estoques logo no início, com a conta do custo real */
.estoque {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 28px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--ocre);
  background: var(--branco);
}
.estoque .campo--inline input { width: 200px; font-family: var(--mono); text-align: right; }
.estoque .campo--inline input[readonly] { padding-left: 0; padding-right: 0; border-color: transparent; background: transparent; text-align: left; cursor: default; }
.estoque__resumo { margin: 0 0 11px; color: var(--grafite); font-family: var(--mono); font-size: .8125rem; }

/* Pergunta curta com dois botões (estoques em R$ 0,00) */
.janela--pergunta { width: min(520px, calc(100vw - 32px)); }
.janela--pergunta .janela__titulo { margin-bottom: 22px; }

.tabela--medicoes td,
.tabela--medicoes th { vertical-align: middle; }
.tabela th.tabela__num,
.tabela td.tabela__num { text-align: right; }

/* Cronograma físico-financeiro: cadastro (nível, prévia dos itens, datas e
   periodicidade) e planilha com o item e o cabeçalho fixos na rolagem. Bloco
   preenchido fica pintado: previsto em azul, linha base em ocre, em cima */
.crono-form { max-width: 980px; }
.crono-form__nivel select { width: min(320px, 100%); }
.crono-form__previa { margin: 20px 0 6px; color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }
.crono-previa {
  max-height: 300px;
  overflow: auto;
  padding: 8px 12px;
  border: 1px solid var(--linha);
  background: var(--branco);
  font-size: .875rem;
}
.crono-previa__item { padding: 3px 0; color: var(--grafite); }
.crono-previa__item--topico { font-weight: 500; }
.crono-previa__numero { color: var(--rotulo); font-family: var(--mono); font-size: .75rem; font-weight: 400; }
.crono-form__linha { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 16px; margin-top: 20px; }
.crono-form .campo .is-invalida { border-color: var(--atraso); outline: 2px solid var(--atraso); outline-offset: -1px; }
.crono-form__erro { margin-top: 12px; color: var(--atraso); }
.crono-form__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.crono-topo { margin-right: auto; }
.medicao-topo .crono-topo .secao-titulo { margin: 0; }
.crono-topo__info { margin-top: 2px; color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }

.rolagem--crono { max-height: 72vh; overflow: auto; }
.grade--crono { width: auto; min-width: 100%; }
.grade--crono thead th { position: sticky; top: 0; z-index: 2; }
.grade--crono .crono__item { position: sticky; left: 0; z-index: 1; min-width: 260px; max-width: 340px; box-shadow: 1px 0 0 var(--linha); }
.grade--crono thead .crono__item { z-index: 3; }
.grade--crono tbody th.crono__item {
  padding: 0;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.crono__nome { display: block; padding: 8px 10px; line-height: 1.3; }
.crono__numero { color: var(--rotulo); font-family: var(--mono); font-size: .75rem; }
.grade--crono td.crono__valor,
.grade--crono td.crono__peso {
  padding: 8px;
  color: var(--grafite);
  font-family: var(--mono);
  font-size: .8125rem;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
.grade--crono th.crono__bloco { min-width: 78px; padding: 6px 4px; text-align: center; }
.crono__titulo,
.crono__periodo { display: block; }
.crono__periodo { margin-top: 2px; color: var(--rotulo); font-size: .5625rem; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.grade--crono td.crono__celula,
.grade--crono td.crono__total { padding: 0; vertical-align: middle; }
.grade--crono td.crono__total { min-width: 76px; }
.crono__base,
.crono__previsto { display: block; color: var(--grafite); font-family: var(--mono); font-size: .8125rem; text-align: right; white-space: nowrap; }
.crono__base { min-height: 20px; padding: 2px 6px; border-bottom: 1px dashed var(--campo); color: var(--rotulo); font-size: .6875rem; }
.crono__base.is-preenchido { background: #F1DDBE; color: var(--grafite); }
.crono__previsto { padding: 8px 6px; }
.crono__previsto.is-preenchido { background: #C9DCDF; }
.crono__soma { font-weight: 500; }
.crono__soma.is-preenchido { background: #DCE8EA; }
.crono__previsto--campo { padding: 0; }
.crono__campo { min-height: 36px; padding: 8px 6px; font-family: var(--mono); font-size: .8125rem; text-align: right; }
.grade--crono .crono--topico > th,
.grade--crono .crono--topico > td { background: #F6F0E4; }
.grade--crono .crono--topico .crono__nome { font-weight: 500; }
.grade--crono td.crono__total.is-completo .crono__previsto { color: var(--ok); font-weight: 500; }
.grade--crono td.crono__total.is-acima .crono__previsto { color: var(--atraso); font-weight: 500; }
.grade--crono tfoot th,
.grade--crono tfoot td { padding: 0; border: 1px solid var(--linha); background: var(--areia); vertical-align: middle; }
.grade--crono tfoot th.crono__item { padding: 8px 10px; color: var(--grafite); font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.legenda--crono { margin-top: 12px; }
.legenda__cor--previsto { border: 0; background: #C9DCDF; }
.legenda__cor--base { border: 0; background: #F1DDBE; }
.crono-impressao { display: none; }

/* 15. Celular -------------------------------------------------------------- */

@media (max-width: 640px) {
  .salvamento { width: 100%; margin-left: 0; text-align: left; }
  .cabeca__acoes { width: 100%; }
  .cabeca__acoes .botao { flex: 1; }
  .modulo { min-height: 0; }

  /* Filtros um embaixo do outro, cada menu ocupando a largura que sobra */
  .filtros { width: 100%; }
  .barra__filtro { width: 100%; }
  .barra__filtro .rotulo { flex: none; width: 104px; }
  .barra__filtro select { flex: 1; width: 100%; min-width: 0; }

  .contador__numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .paleta { width: 100%; }
  .paleta__botao { flex: 1; padding: 7px 8px; }
  .nova-linha input { width: 100%; }

  .crono-form__linha { grid-template-columns: minmax(0, 1fr); }
  .grade--crono .crono__item { min-width: 170px; max-width: 200px; }
}

/* 16. Movimento reduzido e impressão --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Impressão: folha A4 deitada. Saem botões, menus e filtros; ficam a obra, o
   título, a data e os filtros em uso, e cada campo vira texto corrido (o
   app.js escreve esse texto em .impresso na hora de imprimir) */
.impressao-info,
.impresso { display: none; }

@page {
  size: A4 landscape;
  margin: 10mm;
}

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  html, body { background: #fff; }
  body { display: block; min-height: 0; color: var(--grafite); font-size: 9pt; }

  .pular, .topo, .rodape, .trilha, .mensagem, .cabeca__acoes, .barra, .abas,
  .semana__seta, .semana__hoje, .pe-planilha .botao, .grade__excluir, .col-acao,
  .botao-texto, .equipe__pe .botao, .equipe__vinculo,
  .grade__campo { display: none !important; }

  .conteudo { max-width: none; margin: 0; padding: 0; }
  .cabeca { display: block; margin-bottom: 8px; }
  .cabeca .rotulo { font-size: 7pt; }
  .cabeca .rotulo::before { width: 18px; }
  .cabeca__titulo { margin-top: 2px; font-size: 16pt; }
  .impressao-info { display: block; margin-top: 3px; color: var(--rotulo); font-family: var(--mono); font-size: 7pt; }

  .rolagem { overflow: visible; border: 1px solid var(--linha); }
  .grade { min-width: 0 !important; width: 100%; font-size: 8pt; }
  .grade th { padding: 3px 4px; font-size: 6.5pt; letter-spacing: .04em; }
  .grade tr { break-inside: avoid; page-break-inside: avoid; }

  .impresso {
    display: block;
    padding: 3px 4px;
    color: var(--grafite);
    line-height: 1.25;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .grade td.col-data .impresso,
  .grade__eq + .impresso { font-family: var(--mono); text-align: center; }
  .grade__fixo { min-height: 0; padding: 3px 4px; font-size: inherit; }
  .relatorio-filtros { display: none !important; }
  .grafico { break-inside: avoid; page-break-inside: avoid; }
  /* Relatórios: o título não fica sozinho no pé da folha, a tabela curta não
     se divide e o total sai uma vez só, no fim da tabela */
  .relatorio__titulo { margin: 10px 0 4px; font-size: 11pt; break-after: avoid; page-break-after: avoid; }
  .relatorio__tabela { break-inside: avoid; page-break-inside: avoid; }
  .tabela tfoot { display: table-row-group; }
  .indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
  .indicador { padding: 5px 8px 6px; break-inside: avoid; }
  .indicador dt { font-size: 6pt; }
  .indicador dd { margin-top: 3px; font-size: 13pt; }
  .pagina-admin .tabela { font-size: 8pt; }
  .pagina-admin .tabela th,
  .pagina-admin .tabela td { padding: 3px 6px; }

  .marcador { width: 13px; height: 13px; margin: 3px auto; border-width: 1.5px; background-size: 9px; }
  .grade tr.is-ok > td:first-child,
  .grade tr.is-atrasada > td:first-child { box-shadow: inset 3px 0 0 currentColor; }
  .grade tr.is-ok > td:first-child { color: var(--ok); }
  .grade tr.is-atrasada > td:first-child { color: var(--atraso); }
  .grade tr.is-incompleta > td:first-child { box-shadow: inset 3px 0 0 #E0B000; color: var(--grafite); }

  .legenda { margin-top: 6px; font-size: 7pt; }
  .pe-planilha { margin-top: 6px; }

  /* Programação: colunas na medida da folha (277 mm de largura útil) */
  .semana { margin-bottom: 6px; }
  .semana__titulo { align-items: flex-start; min-width: 0; }
  .semana__datas { font-size: 11pt; }
  .grade--prog .c-id { width: 26px; }
  .grade--prog .c-eq { width: 34px; }
  .grade--prog .c-tipo { width: 100px; }
  .grade--prog .c-local { width: 90px; }
  .grade--prog .c-pr { width: 34px; }
  .grade--prog .c-meio { width: 18px; }
  .grade--prog .c-perc { width: 44px; }
  .grade--prog .c-causa { width: 150px; }
  .grade--prog .c-acao { width: 0; }
  .grade--prog th.prog__dia { padding: 2px 0; }
  .grade--prog td.prog__id { font-size: 8pt; }
  .grade--prog td.prog__rotulo { font-size: 6pt; }
  .grade--prog tr.prog__plan { break-after: avoid; page-break-after: avoid; }
  .meio { height: 15px; }
  .planejamento { margin: 0 0 6px; padding: 3px 6px; border-left-width: 3px; font-size: 7pt; }
  .perc { justify-content: flex-end; }
  .perc .impresso { display: inline; padding-right: 1px; }
  .perc span { padding-right: 4px; font-size: 8pt; }

  /* Equipe: três equipes por linha e o total por função logo abaixo */
  .equipes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .equipe { break-inside: avoid; page-break-inside: avoid; }
  .equipe__topo { padding: 6px 8px; }
  .equipe__nome { font-size: 9pt; }
  .equipe__numero { font-size: 13pt; }
  .equipe__vinculo + .impresso { display: inline; padding: 0; color: var(--rotulo); font-family: var(--mono); font-size: 7pt; text-transform: uppercase; letter-spacing: .1em; }
  .equipe__pe { padding: 4px 8px; }
  .resumo { max-width: 60%; margin-top: 12px; break-inside: avoid; page-break-inside: avoid; }
  .resumo .secao-titulo { margin-bottom: 6px; font-size: 10pt; }
  .grade--resumo tbody th[scope="row"],
  .grade--resumo tfoot th[scope="row"],
  .grade--resumo td { padding: 3px 6px; font-size: 8pt; }

  /* Acompanhamento: contadores, cartões e mapa, sem paleta nem botões */
  .mapa-dica, .mapa-topo .botao, .tabela__acoes, .editor__topo .botao, .chave, .medicao-topo .botao,
  .editor__ferramentas, .dias-semana { display: none !important; }
  .contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .contador { padding: 6px 8px 8px; }
  .contador__titulo { margin-bottom: 4px; font-size: 6.5pt; }
  .contador__item dt { font-size: 7pt; }
  .contador__item dd { font-size: 12pt; }
  .servicos-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .servico-cartao { padding: 10px; break-inside: avoid; page-break-inside: avoid; }
  .rolagem--mapa { overflow: visible; padding: 0; }
  .mapa { border-spacing: 2px; }
  .mapa__titulo { min-height: 0; padding: 2px 4px; font-size: 6.5pt; }
  .bloco { min-width: 0; min-height: calc(22px * var(--linhas, 1) + 2px * (var(--linhas, 1) - 1)); padding: 3px 4px; font-size: 7pt; }
  .bloco.is-selecionado { outline: 0; }
  .rolagem--malha { max-height: none; overflow: visible; }
  .malha .malha__sobra { display: none; }
  .malha__campo {
    width: calc(var(--malha-largura, 32px) * var(--colunas, 1) + 1px * (var(--colunas, 1) - 1));
    height: calc(var(--malha-altura, 16px) * var(--linhas, 1) + 1px * (var(--linhas, 1) - 1));
    padding: 1px 3px;
    font-size: min(7pt, calc(var(--malha-altura, 16px) * .6));
  }
  .malha td.is-selecionada { background: var(--branco); }
  .malha td.is-selecionada.is-bloco { background: #EEF4F5; }
  .malha td.malha__titulo.is-selecionada { background: var(--areia); }
  .malha__campo::placeholder { color: transparent; }
  .malha tr:first-child td,
  .malha td:first-child { position: static; }

  /* Medição: orçamento e formulário na largura da folha */
  .grade--orcamento { min-width: 0 !important; }
  .grade--orcamento .o-num { width: 44px; }
  .grade--orcamento .o-qtd { width: 72px; }
  .grade--orcamento .o-un { width: 46px; }
  .grade--orcamento .o-vu { width: 86px; }
  .grade--orcamento .o-vt { width: 96px; }
  .grade--orcamento .o-pct { width: 52px; }
  .grade--orcamento .o-med { width: 96px; }
  .grade--orcamento .o-rs { width: 96px; }
  .orc-topo { margin-bottom: 4px; }
  .orc-topo__aviso, .estoque__resumo { display: none; }
  .orc-topo .campo--inline input.is-pendente { background: none; }
  .estoque { margin-bottom: 6px; padding: 4px 8px; border-left-width: 3px; }
  .campo--inline select { -webkit-appearance: none; appearance: none; min-height: 0; width: auto; padding: 0; border: 0; background: none; font-family: var(--mono); font-size: 10pt; }
  .campo__fixo { min-height: 0; padding: 0; font-size: 10pt; }
  .grade td.orc__total,
  .grade td.orc__pct,
  .grade td.orc__valor,
  .grade td.orc__medido,
  .grade td.orc__numero { padding: 3px 4px; font-size: 7.5pt; }
  .orc__texto { padding: 3px 4px; }
  .orc--topico .impresso { font-weight: 500; }
  .grade__numero + .impresso { font-family: var(--mono); text-align: right; }
  .orc__unidade + .impresso { text-align: center; }
  .orc__anterior { padding: 0 4px 2px; font-size: 6pt; }
  .orc__lido { padding: 3px 4px 0; font-size: 7.5pt; }

  /* Cronograma: sai pelas faixas que o medicao.js monta na hora de imprimir,
     cada uma com 13 blocos e as colunas do item, na largura da folha */
  .rolagem--crono { display: none; }
  .crono-impressao { display: block; }
  .crono-impressao__faixa { margin: 8px 0 3px; color: var(--rotulo); font-family: var(--mono); font-size: 7pt; }
  .crono-impressao .grade--crono { width: auto; min-width: 0; margin-bottom: 4px; border: 1px solid var(--linha); }
  .grade--crono .crono__item,
  .grade--crono thead th { position: static; box-shadow: none; }
  .grade--crono .crono__item { width: 170px; min-width: 0; max-width: none; }
  .grade--crono .crono__valor { width: 70px; }
  .grade--crono .crono__peso { width: 44px; }
  .grade--crono th.crono__bloco { width: 50px; min-width: 0; padding: 2px; }
  .grade--crono .crono__total { width: 54px; min-width: 0; }
  .crono__nome { padding: 2px 4px; font-size: 7pt; }
  .crono__numero { font-size: 6.5pt; }
  .grade--crono td.crono__valor,
  .grade--crono td.crono__peso,
  .crono__previsto { padding: 2px 3px; font-size: 6.5pt; }
  .crono__base { min-height: 0; padding: 1px 3px; font-size: 6pt; }
  .crono__periodo { font-size: 5.5pt; white-space: normal; }
  .grade--crono tfoot th.crono__item { padding: 2px 4px; font-size: 6pt; }
  .legenda--crono { margin-top: 6px; }
  .grade--orcamento tfoot th,
  .grade--orcamento tfoot td { padding: 3px 4px; font-size: 7pt; }
  .grade tr.is-selecionada > td { background: transparent; box-shadow: none; }
  .orc--topico > td { background: #F6F0E4; }
  .medicao-topo,
  .editor__topo { align-items: baseline; gap: 6px 18px; margin-bottom: 6px; }
  .campo--inline { display: flex; align-items: baseline; gap: 6px; }
  .campo--inline input { min-height: 0; width: auto; padding: 0; border: 0; background: none; font-family: var(--mono); font-size: 10pt; }
  .salvamento { display: none; }
}