/* Sistema HSE em Movimento — sistema visual institucional.
   Paleta amostrada da marca HSE oficial (ver 01-BASE/nucleo/projeto.json). */
:root{
  --teal:#1E545B; --teal-medio:#288881; --teal-vivo:#2EA098; --teal-claro:#55B3AD;
  --vermelho:#EB301D; --azul:#0F4697; --grafite:#131116; --cinza:#5A7176;
  --borda:#D6E2E4; --claro:#F4F8F9; --papel:#fff;
  --verde:#188A5E; --ambar:#C8811A;
  --raio:4px; --sombra:0 1px 3px rgba(30,84,91,.09);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,Arial,sans-serif;font-size:15px;line-height:1.5;
  color:var(--grafite);background:#EEF3F4;-webkit-font-smoothing:antialiased}
a{color:var(--teal-vivo);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--teal);margin:0 0 .4em;font-weight:600;line-height:1.2}
h1{font-size:23px} h2{font-size:17px} h3{font-size:15px}
p{margin:0 0 .7em}

/* ---------------------------------------------------------------- topo */
.faixa-ambiente{background:var(--ambar);color:#fff;text-align:center;font-size:12px;
  font-weight:600;padding:5px;letter-spacing:.04em}
.topo{background:var(--teal);color:#fff}
.topo-in{max-width:1280px;margin:0 auto;padding:14px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none}
.marca img{height:30px;display:block}
.marca span{font-size:16px;font-weight:600;letter-spacing:-.01em}
.usuario{display:flex;align-items:center;gap:16px}
.ident{text-align:right;line-height:1.25}
.ident b{display:block;font-size:13.5px;font-weight:600}
.ident span{display:block;font-size:11.5px;color:var(--teal-claro)}
.sair{border:1px solid rgba(255,255,255,.35);color:#fff;padding:5px 13px;
  border-radius:var(--raio);font-size:12.5px}
.sair:hover{background:rgba(255,255,255,.12);text-decoration:none}

.nav{background:#164046;border-top:1px solid rgba(255,255,255,.09)}
.nav-in{max-width:1280px;margin:0 auto;padding:0 22px;display:flex;gap:2px;overflow-x:auto}
.nav a{color:#BFDEDB;padding:11px 15px;font-size:13.5px;white-space:nowrap;
  border-bottom:3px solid transparent}
.nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.05)}
.nav a.on{color:#fff;border-bottom-color:var(--teal-claro);font-weight:600}

/* ---------------------------------------------------------------- conteudo */
.conteudo{max-width:1280px;margin:0 auto;padding:26px 22px 50px}
.cab-pagina{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:20px;flex-wrap:wrap}
.cab-pagina p{color:var(--cinza);font-size:13.5px;margin:0}
.cab-acoes{display:flex;gap:8px;flex-wrap:wrap}

.cartao{background:var(--papel);border:1px solid var(--borda);border-radius:var(--raio);
  box-shadow:var(--sombra);margin-bottom:18px}
.cartao-cab{padding:13px 18px;border-bottom:1px solid var(--borda);display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cartao-cab h2{margin:0;font-size:15px}
.cartao-corpo{padding:18px}
.cartao-corpo.sem-pad{padding:0}

/* ---------------------------------------------------------------- indicadores */
.grade{display:grid;gap:14px;margin-bottom:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:620px){.grade{grid-template-columns:1fr!important}}

.kpi{background:var(--papel);border:1px solid var(--borda);border-top:3px solid var(--teal-vivo);
  border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra)}
.kpi b{display:block;font-size:27px;color:var(--teal);font-weight:600;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:12px;color:var(--cinza);margin-top:4px;line-height:1.3}
.kpi small{display:block;font-size:11.5px;color:var(--cinza);margin-top:6px}
.kpi.verde{border-top-color:var(--verde)} .kpi.verde b{color:var(--verde)}
.kpi.ambar{border-top-color:var(--ambar)} .kpi.ambar b{color:var(--ambar)}
.kpi.vermelho{border-top-color:var(--vermelho)} .kpi.vermelho b{color:var(--vermelho)}
.kpi.neutro{border-top-color:#C3D2D5}

/* ---------------------------------------------------------------- tabela */
table.tb{width:100%;border-collapse:collapse;font-size:13.5px}
.tb th{background:var(--teal);color:#fff;text-align:left;padding:9px 12px;font-weight:600;
  font-size:12.5px;white-space:nowrap}
.tb td{padding:9px 12px;border-bottom:1px solid var(--borda);vertical-align:middle}
.tb tbody tr:hover td{background:var(--claro)}
.tb .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb .cen{text-align:center}
.vazio{padding:34px 18px;text-align:center;color:var(--cinza);font-size:13.5px}
.rolar{overflow-x:auto}

/* ---------------------------------------------------------------- formulario */
.form-grade{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}
.c5{grid-column:span 5}.c6{grid-column:span 6}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c12{grid-column:span 12}
@media(max-width:820px){.form-grade>*{grid-column:span 12!important}}
label{display:block;font-size:11.5px;font-weight:600;color:var(--cinza);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=tel],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--borda);border-radius:var(--raio);
  font-family:inherit;font-size:14px;color:var(--grafite);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal-claro);outline-offset:-1px;border-color:var(--teal-claro)}
textarea{min-height:74px;resize:vertical}
input:disabled,input[readonly]{background:var(--claro);color:var(--cinza)}
.ajuda{font-size:11.5px;color:var(--cinza);margin-top:4px;text-transform:none;letter-spacing:0;font-weight:400}

.btn{display:inline-block;border:0;border-radius:var(--raio);padding:9px 17px;font-size:13.5px;
  font-weight:600;font-family:inherit;cursor:pointer;background:var(--teal);color:#fff}
.btn:hover{background:#164046;text-decoration:none;color:#fff}
.btn.sec{background:#fff;color:var(--teal);border:1px solid var(--borda)}
.btn.sec:hover{background:var(--claro);color:var(--teal)}
.btn.perigo{background:var(--vermelho)}
.btn.perigo:hover{background:#C6260F}
.btn.mini{padding:5px 11px;font-size:12px}

/* ---------------------------------------------------------------- avisos */
.alerta{padding:12px 16px;border-radius:var(--raio);margin-bottom:18px;font-size:13.5px;
  border-left:3px solid}
.alerta.ok{background:#EDF7F2;border-color:var(--verde);color:#12603F}
.alerta.erro{background:#FDF3F1;border-color:var(--vermelho);color:#A8210F}
.alerta.aviso{background:#FDF0DA;border-color:var(--ambar);color:#7A4F0E}
.caixa-nota{background:#F2F8F8;border-left:3px solid var(--teal-vivo);padding:12px 15px;
  font-size:13px;color:var(--cinza);border-radius:0 var(--raio) var(--raio) 0}

.etq{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;
  background:#EDF4F5;color:var(--teal);white-space:nowrap}
.etq.verde{background:#E4F3EC;color:var(--verde)}
.etq.ambar{background:#FCF1DE;color:#8A5A10}
.etq.vermelho{background:#FDE7E3;color:#A8210F}
.etq.cinza{background:#ECF1F2;color:var(--cinza)}
.pend{background:#FDF0DA;color:#8A5A10;border:1px solid #E8C68A;border-radius:3px;
  padding:1px 6px;font-size:11px;font-weight:600;white-space:nowrap}

/* barra de progresso simples */
.barra{height:7px;background:#E7EEEF;border-radius:99px;overflow:hidden;min-width:60px}
.barra i{display:block;height:100%;background:var(--teal-vivo)}
.barra.verde i{background:var(--verde)} .barra.ambar i{background:var(--ambar)}
.barra.vermelho i{background:var(--vermelho)}

/* ---------------------------------------------------------------- login */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:linear-gradient(158deg,var(--teal) 0%,#164046 58%,#123539 100%)}
.painel-login{width:100%;max-width:400px;background:#fff;border-radius:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);overflow:hidden}
.painel-login .cab{background:var(--teal);padding:26px 30px;text-align:center}
.painel-login .cab img{height:36px;margin-bottom:14px}
.painel-login .cab b{display:block;color:#fff;font-size:18px;font-weight:600}
.painel-login .cab span{display:block;color:var(--teal-claro);font-size:12px;margin-top:3px}
.painel-login form{padding:26px 30px 22px}
.painel-login .btn{width:100%;padding:11px;font-size:14px;margin-top:6px}
.painel-login .rod{padding:0 30px 26px;text-align:center}
.painel-login .rod img{height:26px;opacity:.85}
.painel-login .rod p{font-size:10.5px;color:#8FA4A8;margin-top:10px;line-height:1.4}

/* ---------------------------------------------------------------- rodape */
.rodape{background:#fff;border-top:1px solid var(--borda);margin-top:20px}
.rodape-in{max-width:1280px;margin:0 auto;padding:22px;text-align:center}
.rodape-in img{height:30px;margin-bottom:10px}
.rodape-in p{font-size:11px;color:#8FA4A8;line-height:1.5;margin:0}

@media print{
  .topo,.nav,.rodape,.cab-acoes,.btn{display:none!important}
  body{background:#fff}
  .cartao{box-shadow:none;break-inside:avoid}
}