:root {
  --verde: #1b7a3d; --verde-escuro: #14582c; --verde-claro: #e8f5e8;
  --cinza: #5b6660; --fundo: #f4f6f4; --borda: #d8e0d8;
  --amarelo: #fff5cc; --vermelho: #b01818;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
       background: var(--fundo); color: #222; font-size: 16px; }
main { max-width: 760px; margin: 0 auto; padding: 12px 12px 80px; }

.topo { background: var(--verde); color: #fff; display: flex; justify-content: space-between;
        align-items: center; padding: 10px 16px; }
.marca { color: #fff; text-decoration: none; font-weight: 800; letter-spacing: 1px; }
.marca span { font-weight: 400; margin-left: 6px; opacity: .85; font-size: .85em; }
.topo nav { display: flex; gap: 14px; align-items: center; }
.topo nav a { color: #fff; text-decoration: none; font-size: .95em; }
.quem { opacity: .85; font-size: .9em; }

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px;
          padding: 16px; margin: 12px 0; }
.cartao.estreito { max-width: 380px; margin: 40px auto; }
h1 { font-size: 1.35em; margin: 0 0 12px; } h2 { font-size: 1.15em; margin: 0 0 12px; }
h3 { font-size: 1em; margin: 18px 0 8px; color: var(--verde-escuro);
     border-bottom: 1px solid var(--borda); padding-bottom: 4px; }

label { display: block; margin: 10px 0; font-size: .92em; color: var(--cinza); }
input, select { display: block; width: 100%; margin-top: 4px; padding: 10px;
  font-size: 1em; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
input:focus, select:focus { outline: 2px solid var(--verde); border-color: var(--verde); }
input:disabled { background: var(--verde-claro); font-weight: 700; color: #222; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .grade2 { grid-template-columns: 1fr; } }

.botao { display: inline-block; padding: 10px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--borda); background: #fff; color: #222; text-decoration: none;
  font-size: 1em; }
.botao.principal { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao.gerar { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.botao.perigo { color: var(--vermelho); border-color: var(--vermelho); background: #fff; }
.botao.largo { width: 100%; margin-top: 8px; text-align: center; }
.botao.pequeno { padding: 5px 10px; font-size: .85em; }

.alerta { background: #fdecec; border: 1px solid #f3c0c0; color: var(--vermelho);
          padding: 10px; border-radius: 8px; }
.aviso { background: var(--amarelo); border: 1px solid #ead9a0; padding: 10px; border-radius: 8px; }
.ok-box { background: var(--verde-claro); border: 1px solid #bcdcbc; padding: 10px; border-radius: 8px; }
.dica { color: var(--cinza); font-size: .88em; }
.oculto { display: none; }
.vazio { color: var(--cinza); }

.linha-novo { display: flex; gap: 8px; }
.linha-novo input { margin: 0; }
.item { display: block; text-decoration: none; color: inherit; }
a.item:hover { border-color: var(--verde); }
.item-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.item-meta { color: var(--cinza); font-size: .85em; margin-top: 4px; }
.fonte-item { border: 1px solid var(--borda); border-radius: 8px; padding: 10px; margin: 8px 0; }
.selo { font-size: .78em; padding: 3px 8px; border-radius: 20px; }
.selo.ok { background: var(--verde-claro); color: var(--verde-escuro); }
.selo.rascunho { background: var(--amarelo); color: #7a6410; }

.progresso .prog-topo { display: flex; justify-content: space-between; margin-bottom: 6px; }
.pct { color: var(--verde-escuro); font-weight: 700; }
.barra { background: var(--borda); border-radius: 6px; height: 8px; overflow: hidden; }
.barra > div { background: var(--verde); height: 100%; transition: width .3s; }
.barra.mini { height: 5px; margin: 8px 0 4px; }
.etapas { list-style: none; display: flex; padding: 0; margin: 12px 0 0; gap: 4px; }
.etapas li { flex: 1; text-align: center; }
.etapas .etapa-link { text-decoration: none; color: var(--cinza); font-size: .75em;
            display: flex; flex-direction: column; align-items: center; gap: 4px; }
.etapas li.travada .etapa-link { opacity: .45; cursor: not-allowed; }
.bolinha { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; border: 2px solid var(--borda); background: #fff; font-weight: 700; }
.etapas li.feita .bolinha { background: var(--verde); border-color: var(--verde); color: #fff; }
.etapas li.ativa .bolinha { border-color: var(--verde-escuro); color: var(--verde-escuro); }
.etapas li.ativa.feita .bolinha { color: #fff; }
.etapas li.ativa .etapa-link { color: var(--verde-escuro); font-weight: 700; }
@media (max-width: 520px) { .etapa-nome { display: none; }
  .etapas li.ativa .etapa-nome { display: block; } }

.salvo { font-size: .7em; color: var(--verde-escuro); font-weight: 400; margin-left: 8px; }
.nav-etapas { display: flex; justify-content: space-between; margin: 16px 0; }
.nav-frente { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* obrigatórios: asterisco no rótulo e borda vermelha em quem barrou o avanço */
.obr { color: var(--vermelho); font-weight: 700; }
.campo-invalido { color: var(--vermelho); }
.campo-invalido input, .campo-invalido select { border-color: var(--vermelho); background: #fff7f7; }
#bloqueio ul { margin: 6px 0 0; padding-left: 20px; }
.item-falta { color: var(--vermelho); font-size: .82em; margin-top: 4px; }

/* -------------------------------------------------- módulo comercial e avisos --- */
.sino { position: relative; text-decoration: none; }
.sino .contador { position: absolute; top: -8px; right: -10px; background: var(--vermelho);
  color: #fff; border-radius: 10px; font-size: .68em; padding: 1px 5px; font-weight: 700; }
.nao-lido { border-left: 4px solid var(--verde); }

.titulo-link { text-decoration: none; color: inherit; }
.titulo-link:hover { text-decoration: underline; }
.linha-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.linha-status select { margin: 0; width: auto; min-width: 150px; }
.alinha-direita { display: flex; justify-content: flex-end; margin: -6px 0 12px; }
.total-geral { color: var(--verde-escuro); font-size: 1.05em; }
label.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
label.inline input { width: auto; margin: 0; }

h4 { font-size: .92em; margin: 14px 0 4px; color: var(--cinza); }
h4 small { font-weight: 400; }
.item-custo { border-left: 4px solid var(--verde-claro); }
.cabecalho-item { cursor: pointer; gap: 10px; align-items: flex-start; }
.cabecalho-item h3 { margin: 0; font-size: 1em; border: none; padding: 0; }
.resumo-item { flex: 1; min-width: 0; }
.resumo-item .item-meta { margin-top: 2px; }
.cabecalho-item .seta { color: var(--cinza); transition: transform .15s; font-size: .9em; }
.recolhido .corpo-item { display: none; }
.recolhido .seta { transform: rotate(-90deg); display: inline-block; }
.item-custo.recolhido { border-left-color: var(--borda); }
.tabela.margem-proposta th { background: var(--fundo); }
.cabecalho-item:hover { background: var(--fundo); border-radius: 6px; }
/* espelho da tabela de investimento da proposta */
.tabela.proposta-resumo .num { text-align: right; white-space: nowrap; }
/* nome do serviço ocupa a maior parte; colunas de valor só o necessário */
.tabela.proposta-resumo th:first-child, .tabela.proposta-resumo td:first-child { width: 46%; }
.tabela.proposta-resumo th.num { width: 13.5%; }
.tabela.proposta-resumo .linha-total td { background: var(--verde-claro);
  font-weight: 700; color: var(--verde-escuro); }
.tabela.proposta-resumo .item-meta { font-size: .82em; }

.tabela.memoria { margin-top: 12px; font-size: .85em; }
.tabela.memoria th { background: var(--fundo); }

/* painel de acompanhamento das entregas */
.resumo { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.bloco-resumo { flex: 1; min-width: 92px; text-align: center; padding: 8px 6px;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff;
  text-decoration: none; color: var(--cinza); display: block; }
.bloco-resumo strong { display: block; font-size: 1.3em; color: var(--verde-escuro); }
.bloco-resumo span { font-size: .72em; }
a.bloco-resumo:hover { border-color: var(--verde); }
.bloco-resumo.ativo { border-color: var(--verde); background: var(--verde-claro); }
.bloco-resumo.alerta-bloco strong { color: var(--vermelho); }

.tabela.acompanhamento { font-size: .86em; }
.tabela.acompanhamento td { vertical-align: top; }
.tabela.acompanhamento .item-meta { font-size: .88em; margin-top: 2px; }
.acoes-linha { display: flex; gap: 6px; align-items: flex-start; }

/* seções dentro de uma mesma página (Operação: laudos, contrato, serviços aceitos) */
.titulo-secao { margin: 26px 0 6px; padding-bottom: 4px; color: var(--verde-escuro);
  border-bottom: 2px solid var(--verde-claro); font-size: 1.1em; }
.titulo-secao small { color: var(--cinza); font-weight: 400; font-size: .8em; }
.atalhos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* anexos enviados pelos técnicos */
.anexo-bloco { border: 1px solid var(--borda); border-radius: 8px; padding: 12px;
  margin: 12px 0; background: #fcfdfc; }
.anexo-bloco h4 { margin: 0; color: var(--verde-escuro); font-size: .95em; }
.lista-anexos { list-style: none; padding: 0; margin: 8px 0; }
.lista-anexos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--borda); }
.lista-anexos li:last-child { border-bottom: none; }
.lista-anexos a { color: var(--verde-escuro); }
.lista-anexos form { margin-left: auto; }
.anexo-bloco input[type=file] { border: none; padding: 6px 0; }
@media (max-width: 520px) { .anexo-bloco .linha-novo { flex-direction: column; align-items: stretch; } }
.nivel-ok { color: var(--verde-escuro); font-weight: 600; }
.nivel-atencao { color: #7a6410; font-weight: 600; }
.nivel-alerta { color: var(--vermelho); font-weight: 700; }
@media (max-width: 620px) { .tabela.acompanhamento { display: block; overflow-x: auto; } }

.selo.status-aprovada { background: var(--verde-claro); color: var(--verde-escuro); }
.selo.status-enviada { background: #e6eefc; color: #1c3f80; }
.selo.status-rascunho { background: var(--amarelo); color: #7a6410; }
.selo.status-recusada, .selo.status-perdida { background: #fdecec; color: var(--vermelho); }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; align-items: center; }

.tabela { width: 100%; border-collapse: collapse; font-size: .9em; }
.tabela th, .tabela td { border: 1px solid var(--borda); padding: 7px 9px; text-align: left; }
.tabela th { background: var(--verde-claro); }
.tabela.log { font-size: .82em; }
.veredito.conforme { color: var(--verde-escuro); font-weight: 700; }
.veredito.nao-conforme { color: var(--vermelho); font-weight: 700; }
.veredito.pendente { color: #7a6410; font-weight: 700; }