/* Pórtico OS — caderno de obra contemporâneo.
   Verde profundo da construção como cor principal, bronze com moderação,
   azul reservado ao Assistente. Linhas de medição como identidade.
   Acessibilidade: corpo 19px, controles 48px, contraste AA, zoom até 200%. */

:root {
  --verde: #1b4332;
  --verde-claro: #2d6a4f;
  --verde-lavado: #edf3ef;
  --papel: #f7f6f2;
  --superficie: #ffffff;
  --bronze: #8a5f22;
  --bronze-fundo: #fbf3e4;
  --azul: #1d5a80;
  --azul-fundo: #eef4f8;
  --tinta: #14201c;
  --grafite: #46554f;
  --linha: #d7d3c8;
  --alerta: #8c3312;
  --alerta-fundo: #fcefe9;
  --ok: #1f6b45;

  --titulo: "Bricolage Grotesque", "Archivo", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --texto: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "Consolas", "Courier New", monospace;

  --raio: 6px;
  --sombra: 0 1px 2px rgba(20, 32, 28, .06);
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 19px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--titulo); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 2rem; margin: 0 0 .35rem; }
h2 { font-size: 1.4rem; margin: 0 0 .7rem; }
h3 { font-size: 1.12rem; margin: 1.4rem 0 .4rem; }
p { margin: 0 0 .9rem; }
a { color: var(--verde); }

.explica { color: var(--grafite); font-size: 1rem; margin: -.2rem 0 1.1rem; }
.mono, .valor { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ topo */
.topo {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: .8rem 1.4rem; background: var(--verde); color: #fff;
}
.marca { font-family: var(--titulo); font-size: 1.3rem; color: #fff; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.marca svg { flex: none; }
.marca b { font-weight: 600; }
.marca span { color: #e8c98a; font-weight: 400; }
.topo .obra { display: flex; flex-direction: column; line-height: 1.3; }
.topo .obra strong { font-size: 1rem; }
.topo .obra span { font-size: .85rem; opacity: .92; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.salvo { font-size: .9rem; background: rgba(255,255,255,.16); padding: .3rem .7rem; border-radius: 999px; }

/* ------------------------------------------------------------------ faixa demo */
.faixa-demo {
  background: var(--bronze-fundo); color: #5c3f16;
  border-bottom: 2px solid var(--bronze);
  padding: .7rem 1.4rem; font-size: .95rem; text-align: center;
}
.faixa-demo strong { font-weight: 600; }

/* ------------------------------------------------------------------ estrutura */
.quadro {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 1.6rem; max-width: 1440px; margin: 0 auto; padding: 1.6rem 1.4rem 5rem;
  align-items: start;
}
.centro { min-width: 0; }

/* ------------------------------------------------------------------ casco: lateral da obra (direção do Protótipo 2) */
.pular { position: absolute; left: .8rem; top: -4rem; z-index: 50; background: #fff; color: var(--verde); padding: .6rem 1rem; border-radius: var(--raio); }
.pular:focus { top: .8rem; }

.trilha { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1rem; line-height: 1.35; }
.trilha a { color: #fff; }
.trilha span[aria-hidden] { opacity: .7; }
.trilha strong { font-weight: 600; }

.lateral {
  position: sticky; top: 1rem;
  background: var(--verde); color: #fff; border-radius: var(--raio);
  padding: 1.1rem .9rem 1rem;
}
.obra-atual { display: flex; flex-direction: column; gap: .15rem; padding: 0 .4rem .9rem; margin-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.22); line-height: 1.35; }
.obra-atual .chapeu { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #e8c98a; }
.obra-atual strong { font-family: var(--titulo); font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.obra-atual span:last-child { font-size: .95rem; color: #dbe7e0; overflow-wrap: anywhere; }

.etapas ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.etapas a {
  display: flex; align-items: flex-start; gap: .7rem; min-height: 52px;
  padding: .55rem .6rem; border-radius: var(--raio); text-decoration: none;
  color: #e4ede8; font-size: 1rem; line-height: 1.3;
}
.etapas a:hover { background: rgba(255,255,255,.1); color: #fff; }
.etapas .num {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: .9rem;
  border: 2px solid rgba(255,255,255,.55);
}
.etapas .rotulo { flex: 1; display: flex; flex-direction: column; }
.etapas small { font-size: .82rem; color: #bcd0c5; }
.etapas li.feito .num { background: #cfe3d6; color: var(--verde); border-color: #cfe3d6; }
.etapas li.atual a { background: var(--papel); color: var(--verde); font-weight: 600; box-shadow: inset 5px 0 0 var(--bronze); }
.etapas li.atual .num { background: var(--bronze); color: #fff; border-color: var(--bronze); }
.etapas li.atual small { color: var(--bronze); font-weight: 600; }
.etapas a:focus-visible { outline: 3px solid #e8c98a; outline-offset: 1px; }
.voltar-obras { display: flex; align-items: center; min-height: 48px; margin-top: .6rem; padding: .4rem .6rem; color: #fff; font-size: .98rem; border-top: 1px solid rgba(255,255,255,.22); }
.voltar-obras:focus-visible { outline: 3px solid #e8c98a; }

.opcional { font-weight: 400; color: var(--grafite); }
.aviso-prazo { margin-top: .6rem !important; padding: .5rem .6rem; background: var(--bronze-fundo); border-left: 4px solid var(--bronze); border-radius: 3px; color: #5c3f16; }

/* ------------------------------------------------------------------ cartões */
.cartao {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.4rem; margin: 0 0 1.3rem; box-shadow: var(--sombra);
}
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.cartao.destaque { border-left: 5px solid var(--verde); }

/* ------------------------------------------------------------------ resumo lateral */
.resumo { position: sticky; top: 1rem; }
.resumo .cartao { padding: 1.1rem; }
.resumo h2 { font-size: 1.05rem; }
.resumo dl { margin: 0; }
.resumo .linha-resumo {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .4rem 0; border-bottom: 1px dotted var(--linha); font-size: .95rem;
}
.resumo .linha-resumo:last-of-type { border-bottom: 0; }
.resumo .linha-resumo dt { color: var(--grafite); margin: 0; }
.resumo .linha-resumo dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.resumo .total {
  margin-top: .8rem; padding-top: .8rem; border-top: 2px solid var(--verde);
}
.resumo .total dt { font-size: .9rem; color: var(--grafite); }
.resumo .total dd { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; color: var(--verde); margin: .1rem 0 0; }

/* ------------------------------------------------------------------ formulários */
label { display: block; font-size: .95rem; color: var(--grafite); margin: 1rem 0 .3rem; font-weight: 600; }
label.solta { font-weight: 400; }
input[type=text], input[type=number], input[type=date], input[type=file], select, textarea {
  width: 100%; min-height: 48px; padding: .6rem .75rem;
  font-size: 1.05rem; font-family: var(--texto); color: var(--tinta);
  border: 2px solid var(--linha); border-radius: var(--raio); background: #fffefb;
}
input[type=number], input.num { font-family: var(--mono); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--azul); outline-offset: 2px;
}
input[readonly] { background: var(--verde-lavado); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: .9rem 1rem 1.1rem; margin: 1rem 0; }
legend { font-weight: 600; font-size: .95rem; color: var(--verde); padding: 0 .4rem; }

/* ------------------------------------------------------------------ botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.4rem; font-size: 1.05rem; font-family: var(--texto);
  border-radius: var(--raio); border: 2px solid transparent; cursor: pointer; text-decoration: none;
}
.botao.principal { background: var(--verde); color: #fff; }
.botao.principal:hover { background: var(--verde-claro); }
.botao.secundario { background: var(--superficie); color: var(--verde); border-color: var(--verde); }
.botao.secundario:hover { background: var(--verde-lavado); }
.botao.discreto { background: transparent; color: var(--grafite); border-color: var(--linha); }
.botao.perigo { background: transparent; color: var(--alerta); border-color: var(--alerta); }
.botao.pequeno { min-height: 40px; padding: .35rem .9rem; font-size: .95rem; }
.acoes { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: 1.3rem; }

/* ------------------------------------------------------------------ etiquetas */
.et {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .87rem; padding: .25rem .65rem; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--papel); color: var(--grafite);
  white-space: nowrap;
}
.et.verde { border-color: var(--verde-claro); color: var(--verde); background: var(--verde-lavado); }
.et.bronze { border-color: var(--bronze); color: var(--bronze); background: var(--bronze-fundo); }
.et.azul { border-color: var(--azul); color: var(--azul); background: var(--azul-fundo); }
.et.alerta { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-fundo); }
.et::before { content: attr(data-marca); font-weight: 700; }
.etiquetas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pendente { color: var(--alerta); font-weight: 600; }

/* ------------------------------------------------------------------ tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabela th, .tabela td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { font-size: .85rem; color: var(--grafite); text-transform: uppercase; letter-spacing: .03em; }
.tabela td.num, .tabela th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabela tr.total td { border-top: 2px solid var(--verde); border-bottom: 0; font-weight: 600; }
.rolagem { overflow-x: auto; }

/* ------------------------------------------------------------------ memória de cálculo */
.memoria { border-left: 4px solid var(--bronze); padding-left: 1rem; margin: .6rem 0; }
.memo { margin-bottom: 1rem; }
.memo b { display: block; font-size: 1rem; }
.memo i { display: block; font-style: normal; font-size: .9rem; color: var(--grafite); }
.memo pre {
  font-family: var(--mono); font-size: .92rem; background: var(--verde-lavado);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: .6rem .7rem; margin: .35rem 0 .2rem; white-space: pre-wrap; overflow-x: auto;
}
.memo small { color: var(--grafite); font-size: .88rem; }

details { border-top: 1px solid var(--linha); margin-top: 1rem; padding-top: .6rem; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--verde); font-weight: 600; font-size: 1rem; }
details > div { padding-top: .8rem; }

/* ------------------------------------------------------------------ assistente */
.assistente {
  border: 2px solid var(--azul); border-left-width: 6px; border-radius: var(--raio);
  background: var(--azul-fundo); padding: 1.1rem 1.2rem; margin: 0 0 1.3rem;
}
.assistente h2 { color: var(--azul); font-size: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.assistente .nota { font-size: .92rem; color: #2b4a5c; }

/* ------------------------------------------------------------------ croqui */
.croqui { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: .8rem; }
.croqui svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------------ listas de cartão */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.card-demo {
  background: var(--superficie); border: 2px solid var(--linha); border-radius: var(--raio);
  padding: 1.3rem; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: var(--tinta);
}
.card-demo:hover { border-color: var(--verde); }
.card-demo .porte { font-family: var(--mono); font-size: .87rem; color: var(--bronze); text-transform: uppercase; letter-spacing: .06em; }
.card-demo h3 { margin: 0; font-size: 1.2rem; }
.card-demo .total { font-family: var(--mono); font-size: 1.35rem; color: var(--verde); font-weight: 600; }

.lista { list-style: none; padding: 0; margin: 0; }
.lista > li {
  border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
  padding: 1rem 1.1rem; margin-bottom: .8rem;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
}
.lista .titulo { font-size: 1.1rem; font-weight: 600; color: var(--tinta); text-decoration: none; }
.lista .sub { color: var(--grafite); font-size: .93rem; }

/* ------------------------------------------------------------------ barra de gantt */
.gantt { display: grid; gap: .35rem; }
.gantt-linha { display: grid; grid-template-columns: 220px 1fr 110px; gap: .7rem; align-items: center; font-size: .95rem; }
.gantt-trilho { position: relative; height: 26px; background: var(--verde-lavado); border-radius: 3px; }
.gantt-barra { position: absolute; top: 0; bottom: 0; background: var(--verde-claro); border-radius: 3px; }
.gantt-barra.paralela { background: var(--bronze); }
.gantt-legenda { display: flex; gap: 1.2rem; font-size: .9rem; color: var(--grafite); margin-top: .8rem; flex-wrap: wrap; }
.gantt-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.amostra { width: 16px; height: 12px; border-radius: 2px; display: inline-block; }

/* ------------------------------------------------------------------ abas */
.abas { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 2px solid var(--linha); margin-bottom: 1.3rem; }
.abas a {
  min-height: 48px; display: inline-flex; align-items: center; padding: .5rem 1rem;
  text-decoration: none; color: var(--grafite); border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: 1rem;
}
.abas a.atual { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }
.abas a:hover { color: var(--verde); }

/* ------------------------------------------------------------------ rodapé */
.rodape { border-top: 1px solid var(--linha); padding: 1.2rem 1.4rem; text-align: center; color: var(--grafite); font-size: .9rem; }

/* ------------------------------------------------------------------ proposta imprimível */
.proposta { background: #fff; border: 1px solid var(--linha); padding: 2.5rem; }
.proposta h1 { font-size: 1.8rem; }
.proposta .cabecalho { border-bottom: 3px solid var(--verde); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.proposta .assinatura { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.proposta .assinatura div { border-top: 1px solid var(--tinta); padding-top: .5rem; font-size: .9rem; text-align: center; }

/* Impressão por opt-in: some tudo, e só o que está dentro de .proposta volta.
   Regra invertida de propósito. Com lista de exclusão, um bloco novo entra no
   papel por esquecimento, e foi assim que a margem quase foi parar no PDF do cliente. */
@media print {
  body * { visibility: hidden !important; }
  .proposta, .proposta * { visibility: visible !important; }
  .proposta { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; }
  .nao-imprime, .nao-imprime * { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------------ responsivo */
@media (max-width: 1180px) {
  .quadro { grid-template-columns: 250px minmax(0, 1fr); }
  .resumo { grid-column: 1 / -1; position: static; }
  .resumo .cartao { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
}
/* Até 200% de zoom num notebook a janela "vira" 700 a 960 px: a lateral sobe e as etapas quebram em grade,
   sem rolagem horizontal escondendo etapa. */
@media (max-width: 960px) {
  .quadro { grid-template-columns: 1fr; gap: 1.1rem; padding: 1rem .9rem 4rem; }
  .lateral { position: static; }
  .etapas ol { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
}
@media (max-width: 820px) {
  .botao { width: 100%; }
  .acoes { flex-direction: column; align-items: stretch; }
  .gantt-linha { grid-template-columns: 1fr; }
  .proposta { padding: 1.2rem; }
}

/* Páginas sem obra aberta (início, erro, painel). Classe, não style="": a CSP bloqueia atributo de estilo. */
.quadro.unico { grid-template-columns: 1fr !important; max-width: 1100px; }
/* Abre e fecha tem de parecer clicável: seta antes do texto, que gira quando abre. */
details > summary::before { content: "▸"; display: inline-block; width: 1.2em; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }

/* ================================================================== Etapa 2 · medição por ambiente
   Tudo por classe: a CSP bloqueia style="" (DEC-126). Pensado para zoom de 200%: nada de tabela larga,
   cada linha de medida empilha os campos quando falta espaço. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linha-acoes { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* sequência da medição: 1 como medir → 5 confirmar */
.passos-medicao { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.passos-medicao li { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); line-height: 1.3; }
.passos-medicao .num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .88rem; border: 2px solid var(--linha); color: var(--grafite); }
.passos-medicao li.ok .num { background: var(--verde-claro); border-color: var(--verde-claro); color: #fff; }
.passos-medicao strong { display: block; font-size: .98rem; }
.passos-medicao small { display: block; font-size: .88rem; color: var(--grafite); overflow-wrap: anywhere; }

/* escolha grande: como medir */
.escolhas { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.escolha-grande { display: flex; gap: .9rem; align-items: flex-start; margin: 0; padding: 1.1rem 1.1rem;
  border: 2px solid var(--linha); border-radius: var(--raio); background: #fffefb; cursor: pointer; font-weight: 400; color: var(--tinta); }
.escolha-grande:hover { border-color: var(--verde-claro); }
.escolha-grande.marcada { border-color: var(--verde); border-width: 3px; background: var(--verde-lavado); }
.escolha-grande input { width: 1.5rem; height: 1.5rem; margin: .2rem 0 0; flex: none; accent-color: var(--verde); }
.escolha-grande strong { display: block; font-family: var(--titulo); font-size: 1.15rem; color: var(--verde); }
.escolha-grande small { display: block; font-size: .98rem; color: var(--grafite); line-height: 1.45; margin-top: .25rem; }
.escolha-grande:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }

/* sim ou não */
.sim-nao { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; }
.sim-nao legend { font-weight: 600; color: var(--grafite); font-size: .95rem; }
.sim-nao label { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; margin: 0; font-weight: 400; color: var(--tinta); font-size: 1.05rem; }
.sim-nao input { width: 1.4rem; height: 1.4rem; accent-color: var(--verde); }
.sim-nao .explica { flex-basis: 100%; margin: .2rem 0 0; }

/* linhas de parede e de vão */
.linha-medida { border: 1px solid var(--linha); border-left: 4px solid var(--bronze); border-radius: var(--raio);
  padding: .4rem 1rem 1rem; margin: 0 0 .9rem; background: #fffefb; }
.linha-medida.nova { border-left-color: var(--verde); }
.grade-linha { display: grid; gap: 0 .9rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); align-items: end; }
.grade-linha .largo { grid-column: span 2; }
.grade-linha label, .rotulo-campo { display: block; font-size: .92rem; color: var(--grafite); margin: .8rem 0 .3rem; font-weight: 600; }
.valor-linha { display: flex; align-items: center; min-height: 48px; font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--verde); }
.acoes-linha { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }

/* avisos em bloco (substituem os antigos style="display:block") */
.aviso-bloco { display: block; margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--raio);
  background: var(--bronze-fundo); border: 1px solid var(--bronze); border-left-width: 5px; color: #5c3f16; font-size: 1rem; }
.aviso-bloco.alerta { background: var(--alerta-fundo); border-color: var(--alerta); color: var(--alerta); font-weight: 600; }

/* três superfícies, lado a lado quando cabe, sem total geral */
.tres-superficies { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 1rem; }
.superficie { border: 2px solid var(--verde-claro); border-radius: var(--raio); padding: .8rem 1rem; background: #fffefb; }
.superficie h3 { margin: 0 0 .5rem; color: var(--verde); }
.superficie dl { margin: 0; }
.superficie dl > div { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem 0; border-bottom: 1px dotted var(--linha); font-size: .98rem; }
.superficie dt { color: var(--grafite); }
.superficie dd { margin: 0; font-family: var(--mono); white-space: nowrap; }
.superficie .liquida { border-bottom: 0; font-weight: 600; }
.superficie .liquida dd { color: var(--verde); font-size: 1.1rem; }
.superficie.ausente { border-style: dashed; border-color: var(--linha); background: var(--papel); }
.superficie.ausente h3 { color: var(--grafite); }
.superficie.ausente p { margin: 0; color: var(--grafite); }
.superficie .aviso-bloco { margin: .6rem 0 0; font-size: .92rem; }

.croqui { margin: 0 0 1rem; }
.legenda-croqui { font-size: .92rem; color: var(--grafite); margin-top: .5rem; }
.amostra-porta { color: var(--bronze); font-weight: 600; }
.amostra-janela { color: var(--azul); font-weight: 600; }
.lista-simples { margin: 0 0 1rem; padding-left: 1.2rem; }
.lista-simples li { margin-bottom: .3rem; }

/* serviço: a área adotada e a origem, logo abaixo do nome */
.origem-area { margin: .5rem 0 0; font-size: .98rem; color: var(--verde); overflow-wrap: anywhere; }
.origem-area.pendente { color: var(--alerta); }

@media (max-width: 560px) {
  .grade-linha .largo { grid-column: auto; }
}

/* ================================================================== Etapa 3 · serviços dentro do ambiente
   O ambiente atual é marcado por texto ("você está aqui"), borda grossa e fundo: nunca só por cor. */

.barra-ambientes { position: sticky; top: 0; z-index: 5; background: var(--papel); padding: .5rem 0 .7rem; margin: 0 0 1rem; border-bottom: 2px solid var(--linha); }
.chapeu-barra { margin: 0 0 .4rem; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite); }
.barra-ambientes ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.barra-ambientes a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: .45rem .9rem;
  border: 2px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); text-decoration: none; line-height: 1.25; }
.barra-ambientes a:hover { border-color: var(--verde-claro); }
.barra-ambientes strong { font-size: 1rem; }
.barra-ambientes small { font-size: .82rem; color: var(--grafite); }
.barra-ambientes li.atual a { background: var(--verde); border-color: var(--verde); border-width: 3px; color: #fff; box-shadow: inset 0 -5px 0 var(--bronze); }
.barra-ambientes li.atual small { color: #e8c98a; font-weight: 600; }
.barra-ambientes li.gerais a { border-style: dashed; }
.barra-ambientes li.todos a { background: var(--papel); }
.barra-ambientes li.atual.gerais a, .barra-ambientes li.atual.todos a { border-style: solid; background: var(--verde); }

.vista-ambiente > h2 { font-size: 1.7rem; margin: 0 0 .2rem; }
.chapeu-editor { margin: 0; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
.forma-obra { margin: 0 0 .9rem; padding: .5rem .8rem; background: var(--verde-lavado); border-radius: var(--raio); font-size: 1rem; }

/* resumo do ambiente */
.resumo-ambiente { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: .8rem 1rem; margin: 0 0 1rem; }
.contagens { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: 1rem; }
.contagens strong { font-family: var(--mono); font-size: 1.1rem; }
.contagens .tem-pendencia { color: var(--alerta); font-weight: 600; }
.subtotais details { border-top: 1px dotted var(--linha); margin-top: 0; padding-top: .2rem; }
.subtotais summary { display: flex; justify-content: space-between; gap: 1rem; font-weight: 400; color: var(--tinta); }
.subtotais summary .valor { font-family: var(--mono); }
.subtotal-conhecido { margin: .6rem 0 0; padding-top: .5rem; border-top: 2px solid var(--verde); }

/* acrescentar serviço */
.acrescentar { border: 2px solid var(--verde); border-radius: var(--raio); background: var(--superficie); margin: 0 0 1.2rem; padding: 0 1rem; }
.acrescentar > summary.botao-resumo { min-height: 52px; font-size: 1.08rem; color: var(--verde); }
.acrescentar[open] { padding-bottom: 1rem; }
.largura-toda { width: 100%; }
.cresce { flex: 1 1 12rem; }
.fixo { flex: 0 0 10rem; }

/* cartão fechado do serviço */
.lista-servicos { display: grid; gap: .9rem; }
.cartao.servico { padding: 1rem 1.1rem; margin: 0; }
.cartao.servico.opcional { border-left: 5px dashed var(--bronze); }
.cartao.servico.excluido { border-left: 5px solid var(--alerta); background: #fbfaf7; }
.servico-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.servico-topo h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.servico-valor { text-align: right; font-family: var(--mono); font-size: 1.1rem; }
.servico-valor small { display: block; font-family: var(--texto); font-size: .82rem; color: var(--bronze); }
.linha-situacao { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.rastro { margin: 0 0 .6rem; display: grid; gap: .2rem; }
.rastro > div { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .6rem; font-size: .98rem; }
.rastro dt { color: var(--grafite); }
.rastro dd { margin: 0; overflow-wrap: anywhere; }
.rastro small { color: var(--grafite); }
.pendencias-cartao { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.pendencias-cartao .et { white-space: normal; }

/* editor aberto */
.servico-aberto { margin: 0; border-width: 2px; border-color: var(--verde); }
.editor-servico > label:first-of-type { margin-top: .6rem; }
.pergunta { border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem 1rem 1rem; margin: 1.1rem 0; }
.pergunta > legend { font-family: var(--titulo); font-size: 1.12rem; font-weight: 600; color: var(--verde); padding: 0 .4rem; }
.opcao { display: flex; gap: .8rem; align-items: flex-start; margin: .5rem 0 0; padding: .7rem .8rem; border: 2px solid var(--linha);
  border-radius: var(--raio); background: #fffefb; cursor: pointer; font-weight: 400; color: var(--tinta); }
.opcao:hover { border-color: var(--verde-claro); }
.opcao.marcada { border-color: var(--verde); border-width: 3px; background: var(--verde-lavado); }
.opcao.desligada { opacity: .75; cursor: not-allowed; border-style: dashed; }
.opcao input { width: 1.4rem; height: 1.4rem; min-height: 0; margin: .15rem 0 0; flex: none; accent-color: var(--verde); }
.opcao strong { display: block; font-size: 1.02rem; }
.opcao small { display: block; font-size: .92rem; color: var(--grafite); line-height: 1.4; }
.opcao:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }

/* dados do prestador */
.ficha-prestador { border: 2px dashed var(--bronze); border-radius: var(--raio); padding: .6rem 1rem 1rem; margin: 1rem 0; background: var(--bronze-fundo); }
.ficha-prestador h4 { margin: .3rem 0 .6rem; font-family: var(--titulo); font-size: 1.08rem; }
.ficha-prestador h4 small { display: block; font-family: var(--texto); font-weight: 400; font-size: .88rem; color: #5c3f16; }
.caixa { display: flex; gap: .6rem; align-items: center; min-height: 48px; margin: .5rem 0 0; font-weight: 400; color: var(--tinta); }
.caixa input { width: 1.4rem; height: 1.4rem; min-height: 0; accent-color: var(--verde); }
.estimativa-materiais [hidden] { display: none; }
.estimativa-materiais .explica { margin: .2rem 0 .6rem; }

.procurar { align-items: end; margin-bottom: 1rem; }

@media (max-width: 960px) {
  /* Em tela estreita e em 200%, a barra não gruda: ocuparia a tela. Ela vem antes dos serviços. */
  .barra-ambientes { position: static; }
  .barra-ambientes ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}
@media (max-width: 560px) {
  .rastro > div { grid-template-columns: 1fr; gap: 0; }
  .servico-valor { text-align: left; }
}
/* O resumo abre e fecha; a seta do details não pode empurrar o rótulo para o meio. */
.subtotais summary > span:first-of-type { flex: 1; }

/* ================================================================== Correção 03A · serviço, componentes e as duas visões
   Uso interno e visão do cliente se distinguem por título escrito, borda e fundo, não só por cor. */

.modelo-obra { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 0 1rem; margin: 0 0 1rem; }
.modelo-obra > summary { min-height: 48px; font-weight: 400; color: var(--tinta); }
.modelo-obra[open] { padding-bottom: 1rem; }

/* material de um serviço, logo embaixo dele */
.grupo-servico { display: grid; gap: .5rem; }
.componentes { display: grid; gap: .5rem; margin-left: 1.6rem; padding-left: 1rem; border-left: 3px solid var(--verde-claro); }
.cartao.servico.componente { background: #fcfbf7; }
.chapeu-componente { display: block; font-family: var(--texto); font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--verde-claro); }
.rastro .cliente-ve { margin-top: .2rem; padding-top: .3rem; border-top: 1px dotted var(--linha); }
.rastro .cliente-ve dd { font-weight: 600; color: var(--verde); }

/* uso interno da Pórtico */
.uso-interno { border: 2px dashed var(--bronze); border-radius: var(--raio); padding: .5rem 1rem .8rem; margin: 1rem 0; background: var(--bronze-fundo); }
.uso-interno > h4 { margin: .3rem 0 .4rem; font-family: var(--titulo); font-size: 1.05rem; color: #5c3f16; }
.uso-interno > h4 small { display: block; font-family: var(--texto); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.uso-interno details { border-top-color: rgba(138, 95, 34, .35); }

/* como o cliente verá */
.como-cliente-ve { border: 2px solid var(--azul); border-left-width: 6px; border-radius: var(--raio); background: var(--azul-fundo); padding: .6rem 1rem 1rem; margin: 1rem 0; }
.como-cliente-ve > h4 { margin: .2rem 0 .5rem; font-family: var(--titulo); font-size: 1.08rem; color: var(--azul); }
.previa-linha { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem .8rem; margin: 0 0 .6rem; }
.como-cliente-ve label { margin: .4rem 0 .2rem; flex-basis: 100%; }

@media (max-width: 560px) {
  .componentes { margin-left: .4rem; padding-left: .6rem; }
}

/* Valor que não é preço (pago pelo cliente, incluído em outro item): texto curto, não número. */
.nota-valor { display: inline-block; font-family: var(--texto); font-size: .95rem; color: var(--grafite); text-align: right; }

/* ================================================================== Etapa 4 · materiais, cotações e fretes
   Linhas empilhadas no lugar de tabela larga: em 200% de zoom, nada rola para o lado. */

.abas.sub { margin-top: -.6rem; }
.abas.sub a { font-size: .98rem; }

.grupo-materiais > h3, .grupo-compra > h3, .sem-servico > h3 { margin: 1.4rem 0 .4rem; }
.grupo-compra > h3 small { font-family: var(--texto); font-weight: 400; font-size: .9rem; color: var(--grafite); }
.grupo-compra.indefinido > h3, .sem-servico > h3 { color: var(--alerta); }
.cartao.servico-materiais, .cartao.compra, .cartao.pedido { padding: 1rem 1.1rem; margin: 0 0 .9rem; }
.servico-materiais h4, .compra h4, .pedido h4 { margin: 0 0 .4rem; font-family: var(--titulo); font-size: 1.1rem; }
.compra h4 small.bloco { display: block; font-family: var(--texto); font-weight: 400; font-size: .92rem; color: var(--grafite); }
.material-origem { border-top: 1px dotted var(--linha); padding-top: .6rem; margin-top: .6rem; }
.lista-origens { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.linha-origem { border-left: 3px solid var(--verde-claro); padding: .3rem 0 .3rem .8rem; }
.linha-origem small { color: var(--grafite); }
.rastro.compacto > div { grid-template-columns: minmax(8rem, 12rem) 1fr; font-size: .94rem; }

.lista-cotacoes { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.lista-cotacoes > li { border: 1px solid var(--linha); border-left-width: 4px; border-radius: var(--raio); padding: .5rem .8rem; background: #fffefb; }
.lista-cotacoes > li.dentro { border-left-color: var(--verde-claro); }
.lista-cotacoes > li.fora { border-left-color: var(--alerta); border-left-style: dashed; }
.lista-cotacoes .explica { margin: .2rem 0 .4rem; font-size: .92rem; }
.compra h5, .pedido h5 { margin: 1rem 0 .4rem; font-family: var(--titulo); font-size: 1rem; }

.fecha { color: var(--ok); font-weight: 600; }

/* conferência dos totais: a conta de cima a baixo, cada linha abre até as origens */
.conta-conciliacao { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: .6rem 1rem 1rem; margin: 0 0 1rem; }
.linha-conta { border-top: 1px dotted var(--linha); margin-top: 0; padding-top: .1rem; }
.linha-conta > summary { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .6rem; align-items: center; font-weight: 400; color: var(--tinta); }
.linha-conta > summary::before { display: none; }
.linha-conta .sinal { font-family: var(--mono); font-weight: 700; color: var(--grafite); text-align: center; }
.linha-conta .valor { font-family: var(--mono); white-space: nowrap; }
.resultado-conta { display: flex; justify-content: space-between; gap: 1rem; margin: .8rem 0 .4rem; padding-top: .6rem; border-top: 2px solid var(--verde); font-size: 1.05rem; }
.resultado-conta strong { font-family: var(--mono); color: var(--verde); }

@media (max-width: 560px) {
  .rastro.compacto > div { grid-template-columns: 1fr; }
  .linha-conta > summary { grid-template-columns: 1.2rem 1fr; }
  .linha-conta .valor { grid-column: 2; }
}

/* Etapa 5: formação do preço, imposto, rateio e ajustes do material */
.linha-conta.forte > summary { font-weight: 700; }
.linha-conta.forte .valor { color: var(--verde); }
.linha-conta .rotulo-conta small { display: block; font-weight: 400; font-size: .85rem; color: var(--grafite); }
.lista-rateio { list-style: none; margin: .6rem 0; padding: 0; }
.lista-rateio li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .5rem 0; border-top: 1px dotted var(--linha); }
.lista-rateio .valor { font-family: var(--mono); white-space: nowrap; }
.lista-rateio .bloco { grid-column: 1 / -1; }
/* 06E: memória do rateio por linha, só na área interna */
.lista-rateio .calculo-rateio { grid-column: 1 / -1; }
.lista-rateio .calculo-rateio > summary { cursor: pointer; color: var(--grafite); font-size: .94rem; }
.lista-rateio .calculo-rateio .rastro { margin-top: .4rem; }
.opcao.estrategia > span { flex: 1; min-width: 0; }
.opcao.estrategia .rastro { margin-top: .5rem; }
.opcao.estrategia .rastro > div { grid-template-columns: 1fr auto; gap: .8rem; }
.opcao.estrategia .rastro dd { font-family: var(--mono); white-space: nowrap; overflow-wrap: normal; text-align: right; }
.ajustes-material { margin: .5rem 0; padding: .5rem .8rem; border-left: 3px solid var(--bronze); background: var(--bronze-fundo); border-radius: 0 var(--raio) var(--raio) 0; }
.ajustes-material .ajuste { margin: .3rem 0; }
.ajustes-material .ajuste + .ajuste { border-top: 1px dotted var(--linha); padding-top: .4rem; }
.acoes-material { margin-top: .4rem; }
small.bloco { display: block; }

@media (max-width: 560px) {
  .lista-rateio li { grid-template-columns: 1fr; }
}

/* ================================================================== Etapa 6 · Linha da obra, cobranças, proposta e painel
   A linha é vertical: número, trilho e cartão da etapa. Estado dito em texto, nunca só por cor. */
.quadro.unico { grid-template-columns: minmax(0, 1fr); max-width: 1180px; }
.quadro.unico > * , .centro > * { min-width: 0; }
.linha-obra { list-style: none; margin: 1rem 0; padding: 0; position: relative; }
.linha-obra::before { content: ""; position: absolute; left: 1.15rem; top: .4rem; bottom: .4rem; width: 3px; background: var(--linha); }
.etapa-linha { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; padding: .6rem 0; }
.etapa-num { position: relative; z-index: 1; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--superficie); border: 3px solid var(--verde); color: var(--verde); font-weight: 700; font-family: var(--mono); }
.etapa-linha.estado-concluido .etapa-num { background: var(--verde); color: #fff; }
.etapa-linha.estado-parado .etapa-num { border-color: var(--alerta); color: var(--alerta); }
.etapa-linha.estado-andamento .etapa-num { border-style: double; border-width: 5px; }
.etapa-linha.paralela .etapa-num { border-style: dashed; }
.etapa-corpo { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: .8rem 1rem; min-width: 0; }
.etapa-corpo h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.etapa-acoes { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: .4rem 0; }
.etapa-acoes label { margin: 0; }
.linha-obra.resumida .etapa-corpo { padding: .5rem .8rem; }
.opcao-linha { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; font-weight: 400; }
.opcao-linha input { width: 1.2rem; height: 1.2rem; min-height: 0; margin-top: .2rem; flex: none; }
.escolhas-compactas { border: 1px solid var(--linha); border-radius: var(--raio); padding: .5rem .8rem; margin: .8rem 0; }
.cobranca-edicao { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .5rem .8rem; align-items: end;
  border-top: 1px dotted var(--linha); padding: .6rem 0; }
.cobranca-edicao .rotulo-fixo { margin: 0; align-self: center; }
.bloco-linha { display: block; }
form.confirmar { border-top: 2px solid var(--linha); margin-top: 1rem; padding-top: .6rem; }
.aviso-bloco.alerta { border-color: var(--alerta); background: var(--alerta-fundo); }
.cartao.alerta { border-left-color: var(--alerta); }
.pendencias { margin: .4rem 0; padding-left: 1.4rem; }
.pendencias li { margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; }
.croqui-escolha { border-top: 1px dotted var(--linha); padding: .6rem 0; }
.croqui-escolha p { margin: 0 0 .2rem; }

/* painel: linha do tempo em lista, barra em SVG (atributo, não style) */
.tempo { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .6rem; }
.tempo-linha { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.tempo-nome .explica { display: block; margin: 0; font-size: .9rem; }
.tempo-valor { font-family: var(--mono); white-space: nowrap; }
.barra-tempo { width: 100%; height: 22px; display: block; }
.barra-tempo .trilho { fill: var(--verde-lavado); }
.barra-tempo .sozinha { fill: var(--verde-claro); }
.barra-tempo .paralela { fill: var(--bronze); }
.tempo-legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .92rem; color: var(--grafite); }
.amostra { display: inline-block; width: 1.4rem; height: .8rem; border-radius: 2px; }
.amostra.sozinha { background: var(--verde-claro); }
.amostra.paralela { background: var(--bronze); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255,255,255,.5) 3px 5px); }
.rastro.recuperacao { margin-top: 1rem; }
.rastro.recuperacao .total { border-top: 2px solid var(--verde); padding-top: .3rem; font-weight: 600; }

/* tabela que vira cartão em tela estreita e em 200%: cada valor com o seu rótulo, sem rolagem lateral */
@media (max-width: 760px) {
  .tabela.empilha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela.empilha, .tabela.empilha tbody, .tabela.empilha tr, .tabela.empilha td { display: block; width: 100%; }
  .tabela.empilha tr { border: 1px solid var(--linha); border-radius: var(--raio); margin: 0 0 .6rem; padding: .3rem .6rem; background: var(--superficie); }
  .tabela.empilha td { border: 0; padding: .25rem 0; text-align: left; }
  .tabela.empilha td.num { text-align: left; }
  .tabela.empilha td[data-rotulo]:not([data-rotulo=""])::before { content: attr(data-rotulo) ": "; font-weight: 600; font-family: var(--texto); color: var(--grafite); }
  .tabela.empilha td:empty { display: none; }
  .tempo-linha { grid-template-columns: 1fr; gap: .3rem; }
  .etapa-linha { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
  .etapa-num { width: 2rem; height: 2rem; }
  .linha-obra::before { left: .95rem; }
}

/* Correção 06A: botão indisponível parece indisponível, não só se comporta assim. */
.botao:disabled, .botao[disabled] { background: #e7e5de; color: #5b635f; border-color: #c9c5b9; cursor: not-allowed; box-shadow: none; }
.botao:disabled:hover { background: #e7e5de; }

/* Correção 06B: resumo curto do custo no editor; o custo interno fica marcado como interno, sem virar pergunta. */
.resumo-custo { margin: .6rem 0; padding: .5rem .8rem; background: var(--verde-lavado); border-radius: var(--raio); }
fieldset.pergunta.uso-interno > legend small { font-weight: 400; color: #5c3f16; }

/* ------------------------------------------------------------------ Etapa 6F-A: obra contratada */
.faixa-contrato {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem;
  background: var(--verde-lavado); color: var(--verde);
  border-bottom: 2px solid var(--verde-claro);
  padding: .7rem 1.4rem; font-size: 1rem; text-align: center;
}
.faixa-contrato p { margin: 0; }
fieldset.base-aprovada { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.base-aprovada:disabled input, fieldset.base-aprovada:disabled select,
fieldset.base-aprovada:disabled textarea { background: var(--papel, #f4f1ea); color: #555; }
.lista-versoes { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .6rem; }
.lista-versoes > li { border-top: 1px dotted var(--linha); padding-top: .5rem; }
.lista-versoes p { margin: .2rem 0; }
.pergunta-unica .pergunta-grande, .pergunta .pergunta-grande { display: block; font-size: 1.25rem; font-weight: 600; margin: .2rem 0 .6rem; }
.pergunta-unica input[type="date"], .pergunta-unica input[type="text"] { font-size: 1.1rem; max-width: 24rem; }

/* ------------------------------------------------------------------ Etapa 6F-B: recebimentos */
.cobranca-receb { border-top: 1px dotted var(--linha); padding: .8rem 0 .4rem; }
.cobranca-receb h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.valores-receb { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .4rem 1rem; margin: .5rem 0; }
.valores-receb > div { display: grid; gap: .1rem; }
.valores-receb dt { color: var(--grafite); font-size: .95rem; }
.valores-receb dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.valores-receb .a-mais dd { color: var(--bronze); }
.total-receb { padding-bottom: .6rem; border-bottom: 2px solid var(--linha); }

/* ------------------------------------------------------------------ Etapa 6F-C: adendos */
.passo-adendo h2 { display: flex; align-items: center; gap: .6rem; }
.num-passo { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 50%; background: var(--verde); color: #fff; font-size: 1rem; }
.item-adendo { border-top: 1px dotted var(--linha); padding: .6rem 0; }
.grade-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .4rem .8rem; align-items: end; }
.grade-itens .cresce { grid-column: 1 / -1; }
.memoria-simples { font-family: var(--mono); font-size: .95rem; line-height: 1.6; background: var(--verde-lavado); padding: .6rem .8rem; border-radius: var(--raio); overflow-wrap: anywhere; }
.grupo-receb { margin: 1.2rem 0 .2rem; padding-top: .6rem; border-top: 2px solid var(--linha); font-size: 1.2rem; }
.junto-receb { margin: .2rem 0; padding: .3rem .6rem; background: var(--bronze-fundo); border-radius: var(--raio); }
.doc-aceite .linha-assinatura { margin: 1.2rem 0 0; }

/* Correção 7C: serviço primeiro, ambientes depois. Campos grandes, uma decisão por bloco, nada rola para o lado em 200%. */
.novo-servico .passo-curto { margin: 1.2rem 0 .3rem; font-family: var(--titulo); font-size: 1.15rem; color: var(--verde); }
.lista-aplicacoes { list-style: none; margin: .4rem 0; padding: 0; }
.lista-aplicacoes .aplicacao-nova { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: .6rem .8rem; margin: 0 0 .6rem; }
.lista-aplicacoes .aplicacao-nova .caixa { font-size: 1.1rem; }
.servico-grupo { border-left: 5px solid var(--verde-claro); }
.servico-grupo.solto { border-left-color: var(--alerta); }
.servico-grupo h3 { font-size: 1.3rem; margin: 0 0 .2rem; }
.tabela.aplicacoes td, .tabela.origens-material td { vertical-align: top; }
.tabela.aplicacoes .botao { margin-top: .3rem; }
.materiais-da-aplicacao td { color: var(--grafite); padding-top: 0; border-top: 0; }
.editor-da-aplicacao > td { padding: .6rem 0; background: var(--papel); }
.ajuste-origem td { border-top: 0; padding-top: 0; }
.compra-etapa { margin: 1.4rem 0; }
.compra-etapa h3 { font-size: 1.25rem; }
.compra-da-etapa { margin: .6rem 0; }
.resumo-caixa { background: var(--verde-lavado); border-radius: var(--raio); padding: .6rem .8rem; }
.memoria-caixa td small { color: var(--grafite); }
.texto-copiar { width: 100%; max-width: 100%; font-family: var(--texto); font-size: 1.05rem; line-height: 1.5; padding: .6rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.documento-cronograma h2 { margin-top: 1rem; }

/* Gate do ensaio (9): estes estilos estavam no HTML e a CSP os bloqueava. */
.form-transparente { display: contents; }
.botao-cartao { text-align: left; font: inherit; cursor: pointer; }
.explica.sem-margem { margin: 0; }
.explica.espaco-acima { margin-top: 1rem; }
.explica.resumo-dias { margin: .8rem 0 0; }
.acoes.resumo-acoes { margin-top: .8rem; }
.explica.espaco-acima-curto { margin-top: .5rem; }

/* Fase 8A-1A: cartão do material em quatro partes (material e quantidade, especificação, ofertas de lojas, preço adotado). */
.cartao.compra .parte-material { border-top: 1px solid var(--linha); padding-top: .8rem; margin-top: .9rem; }
.cartao.compra .parte-material h5 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 1.05rem; margin: 0 0 .6rem; }
.cartao.compra .parte-material h5 small { font-weight: 400; color: var(--grafite); }
.cartao.compra .parte-material .num-passo { min-width: 1.6rem; height: 1.6rem; font-size: .9rem; }
.busca-lojas .linha-acoes { flex-wrap: wrap; gap: .5rem; }
.busca-lojas a.botao { text-decoration: none; }
.adotar-oferta { display: grid; gap: .3rem; margin: .3rem 0 .5rem; max-width: 34rem; }
.preco-oferta { border: 1px dashed var(--linha); border-radius: var(--raio); padding: .5rem .8rem; margin: .6rem 0; }
.preco-adotado .valor-adotado { font-size: 1.1rem; margin: 0 0 .3rem; }

/* Fase 8A-2: consulta SINAPI, só referência interna. Separada das ofertas por borda própria, nunca dentro da lista. */
.topo .link-config { color: #fff; font-size: .9rem; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.topo .link-config:hover, .topo .link-config:focus { opacity: 1; }
.trilha-config { font-size: .92rem; color: var(--grafite); margin: 0 0 .6rem; }
.referencia-sinapi { border-left: 3px solid var(--azul); padding-left: .9rem; }
.referencia-sinapi summary { font-weight: 600; color: var(--azul); }
.consulta-sinapi .grade { align-items: end; }
.resultados-sinapi { list-style: none; margin: .4rem 0; padding: 0; }
.resultados-sinapi > li { border-bottom: 1px solid var(--linha); padding: .6rem 0; }
.resultados-sinapi > li.unidade-diferente { opacity: .85; }
.resultados-sinapi p { margin: .15rem 0; }
.codigo-sinapi { font-family: var(--mono); font-size: .92rem; background: var(--azul-fundo); color: var(--azul); padding: 0 .35rem; border-radius: 4px; }
.modalidades-sinapi { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .3rem 0; }
.modalidades-sinapi > div { min-width: 11rem; }
.modalidades-sinapi dt { font-size: .85rem; color: var(--grafite); }
.modalidades-sinapi dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.valor-sinapi strong { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sem-coleta { color: var(--grafite); font-style: italic; }
.estados-sinapi { display: flex; flex-wrap: wrap; gap: .3rem .9rem; border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem .9rem; }

/* ---------------------------------------------------------------- 8B-1: acesso */
.topo .form-sair { margin: 0; }
.topo .link-sair { background: none; border: 0; padding: .25rem 0; color: #fff; font: inherit; font-size: .9rem; opacity: .85; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }
.topo .link-sair:hover, .topo .link-sair:focus { opacity: 1; }
.entrar { max-width: 26rem; margin: 2rem auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.5rem 1.5rem 1.75rem; box-shadow: var(--sombra); }
.entrar h1 { margin-top: 0; }
.form-entrar { display: flex; flex-direction: column; gap: 1rem; }
.form-entrar label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.form-entrar input { font: inherit; padding: .6rem .7rem; border: 1px solid var(--linha); border-radius: var(--raio); min-height: 48px; }
.erro-entrar { color: var(--alerta); background: var(--alerta-fundo); border-left: 4px solid var(--alerta); padding: .6rem .8rem; border-radius: var(--raio); }
.aviso-entrar { color: var(--verde); background: var(--verde-lavado); border-left: 4px solid var(--verde-claro); padding: .6rem .8rem; border-radius: var(--raio); }
.aviso-sessao { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; background: var(--alerta-fundo); color: var(--alerta); border-bottom: 2px solid var(--alerta); padding: .7rem 1rem; }
.aviso-sessao p { margin: 0; flex: 1 1 18rem; font-weight: 600; }
@media print { .topo .form-sair, .aviso-sessao { display: none; } }

/* ---------------------------------------------------------------- 8B-2A: ambiente (indicação interna) */
.topo .selo-ambiente { font-size: .78rem; font-weight: 600; color: var(--alerta); background: var(--alerta-fundo); border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
@media print { .topo .selo-ambiente { display: none; } }
/* 8B-2B: aviso interno do backup (só telas internas; some na impressão). */
.faixa-aviso-interno { background: var(--alerta-fundo); color: var(--alerta); border-bottom: 1px solid currentColor; padding: .55rem 1rem; font-size: .9rem; }
@media print { .faixa-aviso-interno { display: none; } }

/* Correção 8B-5.2: "Excluir" num anexo da visita abre a confirmação no próprio cartão (sem janela do navegador). */
.excluir-anexo { border-top: 0; margin-top: 0; padding-top: 0; }
.excluir-anexo > summary { display: inline-flex; min-height: 40px; color: var(--grafite); font-weight: 400; list-style: none; }
.excluir-anexo > summary::-webkit-details-marker { display: none; }
.excluir-anexo > summary::before { content: none; }
.excluir-anexo[open] { flex-basis: 100%; }
.excluir-anexo form { margin-top: .5rem; padding: .7rem .8rem; border: 1px solid var(--alerta); border-radius: var(--raio); }
.excluir-anexo form p { margin: 0 0 .6rem; }

/* Correção 8B-5.2: Memória do caixa inteira no cartão em 1366 px (antes, a coluna Situação passava por baixo do
   Resumo). Só na tela e só nesta tabela: letra um pouco menor, espaço menor entre colunas e valores com algarismos de
   largura igual (continuam alinhados à direita). Se ainda faltar espaço (valor muito grande, zoom), a rolagem fica
   dentro do próprio bloco; a página não rola de lado. Impressão e demais tabelas sem mudança. */
@media screen {
  .rolagem-caixa { overflow-x: auto; max-width: 100%; }
  .tabela.memoria-caixa { font-size: .88rem; }
  .tabela.memoria-caixa th, .tabela.memoria-caixa td { padding: .45rem .3rem; }
  .tabela.memoria-caixa th { font-size: .74rem; letter-spacing: .01em; }
  .tabela.memoria-caixa td.num { font-family: inherit; }
}