:root {
  --fundo: #f4f7f6;
  --papel: #ffffff;
  --papel2: #eef3f1;
  --tinta: #101d19;
  --tinta2: #40544d;
  --tinta3: #5d716b;
  --linha: #d8e2de;
  --marca: #0b4f44;
  --marca-fraca: #e4efeb;
  /* Semáforo. O sinal é a cor cheia da lâmpada; a tinta é a versão escurecida,
     usada em texto, porque o sinal puro não tem contraste sobre fundo claro. */
  --sinal-verde: #17994d;
  --sinal-amarelo: #eeb213;
  --sinal-vermelho: #d5342a;
  --ok: #0f6f38;
  --ok-fundo: #e6f5ea;
  --aviso: #7d5405;
  --aviso-fundo: #fdf3da;
  --critico: #8f2019;
  --critico-fundo: #fceae7;
  --neutro: #5a6b66;
  --neutro-fundo: #edf1ef;
  --lampada-apagada: #cfdad5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0a1211; --papel: #101b19; --papel2: #16241f;
    --tinta: #e6efeb; --tinta2: #b2c3bd; --tinta3: #85978f; --linha: #23352e;
    --marca: #4fb69d; --marca-fraca: #12302a;
    --sinal-verde: #2bbe66; --sinal-amarelo: #f2bd3a; --sinal-vermelho: #e8544a;
    --ok: #5cc48d; --ok-fundo: #0f2a1d;
    --aviso: #dca858; --aviso-fundo: #2b2213;
    --critico: #ef958d; --critico-fundo: #331917;
    --neutro: #90a29b; --neutro-fundo: #1a2724;
    --lampada-apagada: #26372f;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}
a { color: var(--marca); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* topo */
.topo {
  background: var(--marca); color: #fff; padding: 0 20px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.topo a { color: #fff; text-decoration: none; padding: 14px 0; display: inline-block; }
.topo a:hover { text-decoration: underline; }
/* A marca e' imagem, e a caixa dela nao tem o padding vertical dos links: o
   PNG ja vem recortado, entao a altura pedida e' a altura desenhada. */
.topo .marca { display: inline-flex; align-items: center; padding: 11px 0; }
.topo .marca img { display: block; height: 26px; width: auto; }
.topo a.marca:hover { text-decoration: none; }
.topo .direita { margin-left: auto; font-size: 13px; opacity: .92; }

.folha { max-width: 1180px; margin: 0 auto; padding: 22px 18px 70px; }

/* A tela de acesso. Largura propria, porque nao e' folha de trabalho: e' uma
   caixa centrada, e a marca manda no espacamento de cima. */
.entrada { max-width: 380px; margin: 56px auto; text-align: center; }
/* A marca da ferramenta abre a pagina, centrada. Sem fundo: o PNG e' transparente
   de verdade, e nada aqui desenha caixa atras dela.

   A medida e' FRACAO DA CAIXA, e nao altura fixa: pedido do dono do projeto em
   28/08/2026, "deixe o logotipo proporcional a caixa". Altura fixa de 48px dava
   164px de largura numa caixa de 380px — 43%, e a marca ficava perdida em cima de
   um cartao muito maior que ela. Em fracao, ela acompanha a caixa se a largura
   mudar; em pixel, alguem teria que lembrar de mexer nos dois lugares. */
.entrada .marca-entrada { display: block; width: 64%; max-width: 260px;
    height: auto; margin: 0 auto 26px; }
/* E a ALL fecha, pequena — nao e' um segundo titulo competindo com o primeiro, e'
   uma assinatura dizendo de quem e' a ferramenta. Tambem em fracao da caixa, pela
   mesma razao da marca de cima: um lugar so' manda no tamanho. */
.entrada .assinatura-all { margin: 30px 0 0; text-align: center; }
.entrada .assinatura-all img { display: block; width: 34%; max-width: 140px;
    height: auto; margin: 0 auto; }

/* O formulario e a caixa de demonstracao voltam a alinhar pela esquerda: rotulo
   de campo centrado e' dificil de varrer com o olho, e texto corrido centrado
   perde a margem de referencia a cada linha. O centrado e' so das marcas. */
.entrada form, .entrada .ressalva { text-align: left; }

/* Existe para leitor de tela e para o indice de cabecalhos, e nao para o olho.
   Nao usa display:none nem visibility:hidden porque as duas escondem tambem de
   quem usa leitor de tela — que e' justamente quem precisa. */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    border: 0; }

/* Assinatura da marca no espelho, que e' o documento do cliente. */
.assinatura-marca { display: block; height: 34px; width: auto; margin: 0 0 18px; }
.estreita { max-width: 900px; }

h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em;
     color: var(--marca); margin: 30px 0 10px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.sub { color: var(--tinta2); font-size: 14px; margin: 0 0 18px; }

/* cartões e caixas */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px; margin-bottom: 18px; }
.cartao { background: var(--papel); border: 1px solid var(--linha);
  border-left: 4px solid var(--neutro); border-radius: 8px; padding: 12px 14px; }
.cartao .r { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta3); }
.cartao .v { font-size: 20px; font-weight: 650; margin: 2px 0; }
.cartao .d { font-size: 12px; color: var(--tinta3); }
.cartao.ok { border-left-color: var(--ok); }
.cartao.aviso { border-left-color: var(--aviso); }
.cartao.critico { border-left-color: var(--critico); }

.caixa { background: var(--papel); border: 1px solid var(--linha);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; }
.caixa.destaque { border-left: 4px solid var(--marca); }
.aviso-caixa { border-left: 4px solid var(--aviso); background: var(--aviso-fundo); }
.critico-caixa { border-left: 4px solid var(--critico); background: var(--critico-fundo); }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 22px; }
.grade > div span { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta3); }
.grade > div b { font-weight: 600; }

/* selos */
/* Ressalva de confiabilidade do numero. Usa o par aviso/aviso-fundo que ja
   existe: e atencao, nao alarme, e nao inventa cor nova. */
.ressalva {
  background: var(--aviso-fundo); border: 1px solid var(--linha);
  border-left: 3px solid var(--sinal-amarelo);
  border-radius: 6px; padding: 10px 14px; margin: 0 0 16px;
  font-size: 13.5px; color: var(--aviso);
}
.ressalva b { color: var(--aviso); }
.ressalva a { color: var(--aviso); }

.selo { display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.selo.critico { background: var(--critico-fundo); color: var(--critico); }
.selo.neutro { background: var(--neutro-fundo); color: var(--neutro); }
.etiqueta { display: inline-block; font-size: 11.5px; background: var(--neutro-fundo);
  color: var(--tinta2); padding: 2px 9px; border-radius: 20px; }
.etiqueta.marca { background: var(--marca); color: #fff; font-weight: 600; }

/* semáforo — a POSIÇÃO da lâmpada acesa carrega o significado, não só a cor:
   vermelho em cima, amarelo no meio, verde embaixo. Legível sem distinguir cor. */
.semaforo { display: inline-flex; align-items: center; gap: 10px; }
.semaforo .caixa-luz {
  display: inline-flex; flex-direction: column; gap: 3px;
  padding: 4px 3px; border-radius: 7px;
  background: var(--neutro-fundo); border: 1px solid var(--linha);
}
.semaforo .luz {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lampada-apagada);
}
.semaforo .luz.acesa.vermelho { background: var(--sinal-vermelho);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sinal-vermelho) 26%, transparent); }
.semaforo .luz.acesa.amarelo { background: var(--sinal-amarelo);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sinal-amarelo) 26%, transparent); }
.semaforo .luz.acesa.verde { background: var(--sinal-verde);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sinal-verde) 26%, transparent); }
.semaforo .dizer { display: flex; flex-direction: column; gap: 1px; }
.semaforo .estado { font-size: 13.5px; font-weight: 700; }
.semaforo.vermelho .estado { color: var(--critico); }
.semaforo.amarelo .estado { color: var(--aviso); }
.semaforo.verde .estado { color: var(--ok); }
.semaforo .motivo { font-size: 11.5px; color: var(--tinta3); max-width: 46ch; }
.semaforo.deitado .caixa-luz { flex-direction: row; }
.semaforo.miudo .luz { width: 9px; height: 9px; }
.semaforo.miudo .estado { font-size: 12px; }

/* tabelas */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--papel);
  border: 1px solid var(--linha); border-radius: 8px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linha);
  vertical-align: top; font-size: 14px; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta3); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:hover { background: var(--papel2); }

/* formulários */
form.linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
label { display: block; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta3); margin-bottom: 3px; }
input, select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel); color: var(--tinta); width: 100%;
  min-height: 40px;  /* mesmo alvo de toque dos botoes */
}
textarea { min-height: 62px; resize: vertical; }
.campo { flex: 1 1 190px; margin-bottom: 10px; }
.campo.curto { flex: 0 1 130px; }
.campo.largo { flex: 1 1 100%; }
button, .botao {
  font: inherit; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 6px;
  background: var(--marca); color: #fff; cursor: pointer; text-decoration: none;
  /* 40px e o minimo de alvo de toque. Antes dava 38px, e quem usa no celular
     em campo erra o toque — o inline-flex centra o texto na altura nova. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
}
button.secundario, .botao.secundario {
  background: var(--papel); color: var(--marca); border: 1px solid var(--marca);
}
button.perigo { background: var(--critico); }
button:hover, .botao:hover { filter: brightness(1.08); }
.marcador { display: flex; align-items: center; gap: 7px; font-size: 14px;
  text-transform: none; letter-spacing: 0; color: var(--tinta); }
.marcador input { width: auto; }

/* avisos */
.recado { padding: 11px 15px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.recado.ok { background: var(--ok-fundo); color: var(--ok); }
.recado.erro { background: var(--critico-fundo); color: var(--critico); }

/* condicionantes */
.cond { background: var(--papel); border: 1px solid var(--linha); border-radius: 8px;
  padding: 13px 15px; margin-bottom: 10px; }
.cond.inaplicavel { opacity: .72; }
.cond-topo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
.cond-num { font-weight: 700; color: var(--marca); min-width: 42px; }
.cond-meta { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 240px; }
.cond-prazo { margin-left: auto; text-align: right; }
.cond-prazo .d { font-size: 11.5px; color: var(--tinta3); margin-top: 3px; }
.cond-texto { margin-top: 9px; font-size: 14px; color: var(--tinta2); text-align: justify; }
.como { margin-top: 9px; background: var(--ok-fundo); border-radius: 7px; padding: 9px 12px;
  font-size: 13.5px; }
.como .t { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--ok); margin-bottom: 2px; }
.nota { margin-top: 9px; background: var(--aviso-fundo); border-radius: 7px;
  padding: 9px 12px; font-size: 13px; }
.nota .t { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--aviso); margin-bottom: 2px; }
details.editar { margin-top: 10px; border-top: 1px solid var(--linha); padding-top: 9px; }
details.editar summary { cursor: pointer; font-size: 13px; color: var(--marca);
  font-weight: 600; }
details.editar .campos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.rodape { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--tinta3); }
.vazio { color: var(--tinta3); font-size: 14px; padding: 10px 0; }

@media print {
  .topo, .naoimprime { display: none; }
  body { background: #fff; }
  .cond, .caixa { page-break-inside: avoid; }
}