/* =====================================================================
   TRIM TECH · tema.css — tokens e componentes do console
   Identidade: brand book v4. Não inventar cor fora daqui.
   ===================================================================== */

:root{
  --petroleo:      #0D2635;
  --petroleo-alto: #143546;   /* hover / superfícies sobre o petróleo */
  --turquesa:      #16ABAE;
  --turquesa-suave:#E2F3F3;
  --verde:         #22C55E;   /* só evento importante: salvo, concluído, go-live */
  --verde-suave:   #E6F7EC;
  --fundo:         #F2F3F1;
  --papel:         #FFFFFF;
  --linha:         #DEE3E1;
  --texto:         #16333F;
  --texto-suave:   #5D7480;
  --alerta:        #E2703A;
  --alerta-suave:  #FCEEE6;
  --erro:          #C2410C;

  --fonte-titulo: "Manrope", sans-serif;
  --fonte-corpo:  "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --raio: 8px;
  --sombra: 0 1px 3px rgba(13,38,53,.08), 0 4px 14px rgba(13,38,53,.06);
}

*{ box-sizing:border-box }
html,body{ margin:0; height:100% }
body{
  background:var(--fundo); color:var(--texto);
  font-family:var(--fonte-corpo); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--fonte-titulo); font-weight:800; letter-spacing:-.02em; margin:0 }
h1{ font-size:22px } h2{ font-size:17px } h3{ font-size:14px }
p{ margin:0 0 .8em }
a{ color:var(--turquesa) }

/* ---------- formulário ---------- */
label{ display:block; font-size:12.5px; font-weight:600; color:var(--texto); margin:0 0 5px }
label .dica{ font-weight:400; color:var(--texto-suave) }
input[type=text], input[type=date], input[type=number], input[type=url],
input[type=email], input[type=password], select, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--linha); border-radius:var(--raio);
  background:var(--papel); font:inherit; color:var(--texto);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
  outline:2px solid var(--turquesa); outline-offset:1px;
}
input[readonly]{ background:var(--fundo); color:var(--texto-suave) }
.campo{ margin-bottom:16px }
.campo .erro-campo{ color:var(--erro); font-size:12px; margin-top:4px; display:none }
.campo.invalido input, .campo.invalido select{ border-color:var(--erro) }
.campo.invalido .erro-campo{ display:block }
.linha-campos{ display:grid; gap:14px }
@media(min-width:720px){
  .linha-campos.c2{ grid-template-columns:1fr 1fr }
  .linha-campos.c3{ grid-template-columns:2fr 1fr 1fr }
}

/* ---------- botões ---------- */
button{ font:inherit; cursor:pointer; border:0; border-radius:var(--raio) }
.btn{ padding:9px 16px; font-weight:600; display:inline-flex; align-items:center; gap:7px }
.btn-primario{ background:var(--petroleo); color:#fff }
.btn-primario:hover{ background:var(--petroleo-alto) }
.btn-primario:disabled{ background:var(--linha); color:var(--texto-suave); cursor:not-allowed }
.btn-secundario{ background:var(--papel); color:var(--texto); border:1px solid var(--linha) }
.btn-secundario:hover{ border-color:var(--texto-suave) }
.btn-fantasma{ background:transparent; color:var(--texto-suave); padding:9px 10px }
.btn-fantasma:hover{ color:var(--texto) }

/* ---------- cartão e tabela ---------- */
.cartao{ background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:var(--sombra); padding:20px }
.cartao + .cartao{ margin-top:16px }
.cartao > h2{ margin-bottom:14px }

table.lista{ width:100%; border-collapse:collapse; font-size:14px }
table.lista th{ text-align:left; font-family:var(--fonte-titulo); font-weight:700;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-suave);
  padding:0 12px 8px 0; border-bottom:2px solid var(--petroleo) }
table.lista td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--linha); vertical-align:middle }
table.lista tr:hover td{ background:var(--fundo) }
table.lista td:first-child{ font-weight:600 }

/* ---------- selos ---------- */
.selo{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:3px 9px; border-radius:99px }
.selo-turquesa{ background:var(--turquesa-suave); color:#0B7A7C }
.selo-verde{ background:var(--verde-suave); color:#15803D }
.selo-neutro{ background:var(--fundo); color:var(--texto-suave); border:1px solid var(--linha) }
.selo-alerta{ background:var(--alerta-suave); color:#B04F1E }

/* ---------- estado vazio ---------- */
.vazio{ text-align:center; padding:52px 20px; color:var(--texto-suave) }
.vazio h2{ color:var(--texto); margin-bottom:6px }
.vazio p{ max-width:44ch; margin:0 auto 18px }

/* ---------- toast ---------- */
#toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--petroleo); color:#fff; padding:11px 18px; border-radius:var(--raio);
  box-shadow:var(--sombra); opacity:0; pointer-events:none; transition:.25s; font-weight:500;
  display:flex; align-items:center; gap:9px; max-width:90vw }
#toast.visivel{ opacity:1; transform:translateX(-50%) translateY(0) }
#toast .quadrado-verde{ width:10px; height:10px; border-radius:2px; background:var(--verde); flex:none }

/* ---------- régua de pesos (assinatura da tela de etapas) ---------- */
.regua-pesos{ margin-top:14px }
.regua-pesos .trilho{ height:12px; border-radius:99px; background:var(--fundo);
  border:1px solid var(--linha); overflow:hidden; display:flex }
.regua-pesos .preenchido{ background:var(--turquesa); transition:width .25s }
.regua-pesos .excesso{ background:var(--alerta); transition:width .25s }
.regua-pesos.completa .preenchido{ background:var(--verde) }
.regua-pesos .rotulo{ display:flex; justify-content:space-between; font-size:12.5px;
  margin-top:6px; color:var(--texto-suave) }
.regua-pesos .rotulo b{ font-family:var(--fonte-titulo); font-size:14px; color:var(--texto) }
.regua-pesos.completa .rotulo b{ color:#15803D }
.regua-pesos.estourada .rotulo b{ color:var(--erro) }

/* ---------- etapas ---------- */
.etapa-linha{ display:grid; grid-template-columns:34px 1fr 110px 130px 34px; gap:10px;
  align-items:center; padding:7px 0; border-bottom:1px solid var(--linha) }
.etapa-linha .ordem{ font-family:var(--mono); font-size:12px; color:var(--texto-suave); text-align:center }
.etapa-cab{ display:grid; grid-template-columns:34px 1fr 110px 130px 34px; gap:10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--texto-suave); padding-bottom:6px; border-bottom:2px solid var(--petroleo) }
@media(max-width:640px){
  .etapa-linha, .etapa-cab{ grid-template-columns:26px 1fr 80px 34px }
  .etapa-linha input[type=date], .etapa-cab .col-data{ display:none }
}

/* ---------- utilitários ---------- */
.mudo{ color:var(--texto-suave) }
.mono{ font-family:var(--mono); font-size:.92em }
.entre{ display:flex; justify-content:space-between; align-items:center; gap:12px }
.direita{ display:flex; justify-content:flex-end; gap:10px }
.oculto{ display:none !important }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}