:root {
  --tinta: #1a1a1a;
  --tinta-suave: #5c5c5c;
  --linha: #e0ddd8;
  --papel: #fbfaf8;
  --cartao: #ffffff;
  --destaque: #1f5c3d;
  --alerta: #8c2f2f;
}
* { box-sizing: border-box; }
/* Desvio do brief da Task 8 (documentado no relatorio): sem esta regra,
   qualquer classe abaixo que declare display (.cartao, .acoes, .linha, .topo)
   apaga o "display: none" do atributo hidden nativo -- author style de
   prioridade normal sempre vence sobre o user-agent style, mesmo com
   especificidade igual. O !important e necessario porque, sem ele, uma regra
   [hidden] normal empata em especificidade com .cartao e perde por ordem no
   arquivo (.cartao vem depois). Efeito real observado antes do fix: o
   formulario de motivo da rejeicao (#form-motivo, class="cartao" hidden) em
   rdo.mjs aparecia visivel assim que um RDO pendente era aberto, antes mesmo
   do fiscal clicar em "Rejeitar". */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.raiz { max-width: 56rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 .25rem; }
h2 { font-size: .8rem; font-weight: 600; text-transform: uppercase;
     letter-spacing: .08em; color: var(--tinta-suave);
     margin: 2.5rem 0 .75rem; }
.marca { text-align: center; margin-bottom: 2rem; }
.marca img { height: 44px; margin-bottom: 1rem; }
.marca-sub { color: var(--tinta-suave); font-size: .875rem; margin: 0; }
.topo { display: flex; justify-content: space-between; align-items: flex-start;
        gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linha); }
/* So os cadastros trazem a marca no topo -- a lista do fiscal nao tem img aqui. */
.topo img { height: 32px; display: block; margin-bottom: .5rem; }

/* Abas dos catalogos. Sem estas regras os tres botoes saem com o verde
   primario e ficam identicos: depois do clique nada diz em qual catalogo voce
   esta, e gravar um cargo dentro de equipamentos vira erro silencioso. A ativa
   e' a unica com tinta e sublinhado; o estado real esta no aria-current, a
   classe so pinta. */
.abas { display: flex; gap: .25rem; margin: 1.5rem 0;
        border-bottom: 1px solid var(--linha); }
.abas button { background: transparent; color: var(--tinta-suave); border: 0;
               border-bottom: 2px solid transparent; border-radius: 0;
               padding: .55rem .9rem; margin-bottom: -1px; }
.abas button:hover { color: var(--tinta); }
.abas button.ativa { color: var(--destaque); font-weight: 600;
                     border-bottom-color: var(--destaque); }

.cartao { background: var(--cartao); border: 1px solid var(--linha);
          border-radius: 6px; padding: 1.5rem; display: grid; gap: 1rem;
          max-width: 24rem; margin: 0 auto; }
label { display: grid; gap: .35rem; font-size: .875rem; color: var(--tinta-suave); }
input, textarea { font: inherit; color: var(--tinta); padding: .6rem .7rem;
                  border: 1px solid var(--linha); border-radius: 4px;
                  background: var(--cartao); width: 100%; }
input:focus, textarea:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }

button { font: inherit; font-weight: 500; padding: .65rem 1.1rem; border-radius: 4px;
         border: 1px solid var(--destaque); background: var(--destaque);
         color: #fff; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button.secundario { background: transparent; color: var(--tinta-suave);
                    border-color: var(--linha); }
button.perigo { background: transparent; color: var(--alerta); border-color: var(--alerta); }
.acoes { display: flex; gap: .75rem; margin: 1.5rem 0; }

.linha { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
         background: var(--cartao); color: var(--tinta); border: 1px solid var(--linha);
         border-radius: 4px; padding: .9rem 1rem; margin-bottom: .5rem; font-weight: 400; }
.linha:hover { border-color: var(--tinta-suave); }
.linha-num { font-weight: 600; min-width: 6rem; }
.linha-data { color: var(--tinta-suave); }
.linha-obra { color: var(--tinta-suave); flex: 1; }
.selo { margin-left: auto; font-size: .75rem; text-transform: uppercase;
        letter-spacing: .06em; padding: .2rem .5rem; border-radius: 3px; }
.selo-aprovado { color: var(--destaque); background: #edf5f0; }
.selo-rejeitado { color: var(--alerta); background: #f8eded; }

/* Lista dos catalogos. Sem list-style o item deixa de nascer com marcador e
   recuo do navegador. A moldura fica so na linha de item de verdade
   (li[data-id]): "Carregando…" e a linha de vazio sao texto solto, e uma
   moldura em volta deles pareceria um item cadastrado. */
.lista { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.lista li[data-id] { display: flex; align-items: center; gap: .75rem;
                     background: var(--cartao); border: 1px solid var(--linha);
                     border-radius: 4px; padding: .7rem 1rem; margin-bottom: .5rem; }
.lista li[data-id] span { flex: 1; }
.lista li[data-id] button { background: transparent; color: var(--tinta-suave);
                            border-color: var(--linha); padding: .35rem .7rem;
                            font-size: .875rem; }
.lista li[data-id] button:hover { color: var(--tinta); border-color: var(--tinta-suave); }

.visor { margin: 1.5rem 0; border: 1px solid var(--linha); border-radius: 4px;
         overflow: hidden; background: var(--cartao); }
.pdf { width: 100%; height: 70vh; border: 0; display: block; }
.nota { background: #f3f1ec; border-left: 3px solid var(--tinta-suave);
        padding: .8rem 1rem; margin: 1.25rem 0; font-size: .9rem; }
.vazio { color: var(--tinta-suave); font-size: .9rem; padding: .75rem 0; }
.erro { color: var(--alerta); font-size: .875rem; margin: .75rem 0 0; }