/* ============================================================
   GESTÃO DE SST — Design System (identidade própria)
   Base visual: clean, premium, alto contraste, tipografia Inter.
   Tudo é controlado pelas variáveis abaixo (tokens).
   ============================================================ */

:root{
  /* Cores de marca */
  --brand-900:#0b3b3c; --brand-700:#0e7490; --brand-600:#0891b2; --brand-500:#06b6d4;
  --brand-50:#ecfeff;  --brand-100:#cffafe;

  /* Neutros */
  --slate-950:#020617; --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155;
  --slate-500:#64748b; --slate-400:#94a3b8; --slate-300:#cbd5e1; --slate-200:#e2e8f0;
  --slate-100:#f1f5f9; --slate-50:#f8fafc; --white:#ffffff;

  /* Semânticas */
  --sucesso:#059669; --sucesso-bg:#ecfdf5;
  --alerta:#d97706;  --alerta-bg:#fffbeb;
  --perigo:#dc2626;  --perigo-bg:#fef2f2;
  --info:#2563eb;    --info-bg:#eff6ff;

  /* Papéis (tema claro) */
  --bg:var(--slate-100); --superficie:var(--white); --superficie-2:var(--slate-50);
  --texto:var(--slate-900); --texto-suave:var(--slate-500); --borda:var(--slate-200);
  --primaria:var(--brand-700); --primaria-hover:var(--brand-900); --primaria-texto:#fff;
  --anel:rgba(14,116,144,.35);

  --raio:12px; --raio-sm:8px; --raio-lg:18px;
  --sombra-sm:0 1px 2px rgba(15,23,42,.06);
  --sombra:0 4px 16px rgba(15,23,42,.08);
  --sombra-lg:0 20px 50px rgba(15,23,42,.18);
  --fonte:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --espaco:16px;
}

[data-tema="escuro"]{
  --bg:var(--slate-950); --superficie:var(--slate-900); --superficie-2:#0b1220;
  --texto:var(--slate-100); --texto-suave:var(--slate-400); --borda:#22304a;
  --primaria:var(--brand-500); --primaria-hover:var(--brand-600);
  --sombra:0 4px 16px rgba(0,0,0,.4); --sombra-lg:0 20px 50px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--fonte); background:var(--bg); color:var(--texto);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .4em; font-weight:650; letter-spacing:-.01em; line-height:1.25}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
a{color:var(--primaria); text-decoration:none}
small,.suave{color:var(--texto-suave)}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.6rem 1rem; border-radius:var(--raio-sm); border:1px solid transparent;
  font:inherit; font-weight:600; cursor:pointer; transition:.15s ease;
  background:var(--superficie-2); color:var(--texto); border-color:var(--borda);
}
.btn:hover{background:var(--slate-100)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 4px var(--anel)}
.btn-primario{background:var(--primaria); color:var(--primaria-texto); border-color:transparent}
.btn-primario:hover{background:var(--primaria-hover)}
.btn-perigo{background:var(--perigo); color:#fff}
.btn-fantasma{background:transparent; border-color:transparent}
.btn-fantasma:hover{background:var(--slate-100)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-bloco{width:100%}

/* ---------- Formulários ---------- */
.campo{margin-bottom:var(--espaco)}
.campo label{display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:var(--texto-suave)}
.input,select,textarea{
  width:100%; padding:.62rem .8rem; border-radius:var(--raio-sm);
  border:1px solid var(--borda); background:var(--superficie); color:var(--texto);
  font:inherit; transition:.15s;
}
.input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primaria); box-shadow:0 0 0 4px var(--anel)}
.campo .ajuda{font-size:.78rem; color:var(--texto-suave); margin-top:.3rem}

/* ---------- Cartões ---------- */
.card{background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-sm)}
.card-corpo{padding:20px}
.card-cabecalho{padding:16px 20px; border-bottom:1px solid var(--borda); display:flex; align-items:center; justify-content:space-between; gap:12px}

/* ---------- Selos / badges ---------- */
.selo{display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600}
.selo-sucesso{background:var(--sucesso-bg); color:var(--sucesso)}
.selo-alerta{background:var(--alerta-bg); color:var(--alerta)}
.selo-perigo{background:var(--perigo-bg); color:var(--perigo)}
.selo-neutro{background:var(--slate-100); color:var(--slate-500)}

/* ---------- Tabela ---------- */
.tabela-wrap{overflow-x:auto; border:1px solid var(--borda); border-radius:var(--raio)}
table.tabela{width:100%; border-collapse:collapse; font-size:.9rem}
.tabela th,.tabela td{padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--borda); white-space:nowrap}
.tabela th{background:var(--superficie-2); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-suave)}
.tabela tbody tr:hover{background:var(--superficie-2)}
.tabela tbody tr:last-child td{border-bottom:0}

/* ---------- Layout aplicação (shell) ---------- */
.app{display:grid; grid-template-columns:264px 1fr; min-height:100vh}
.barra-lateral{background:var(--superficie); border-right:1px solid var(--borda); display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh}
.marca{display:flex; align-items:center; gap:.6rem; padding:.4rem .5rem 1.2rem; font-weight:700; font-size:1.05rem}
.marca .logo{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--brand-600),var(--brand-900)); display:grid; place-items:center; color:#fff; font-size:1rem}
.nav{display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.nav a{display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:var(--raio-sm); color:var(--texto-suave); font-weight:550; font-size:.92rem}
.nav a:hover{background:var(--superficie-2); color:var(--texto)}
.nav a.ativo{background:var(--brand-50); color:var(--brand-700)}
[data-tema="escuro"] .nav a.ativo{background:rgba(6,182,212,.12); color:var(--brand-100)}
.nav .grupo{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-400); padding:1rem .7rem .3rem}

.conteudo{display:flex; flex-direction:column; min-width:0}
.topo{height:64px; background:var(--superficie); border-bottom:1px solid var(--borda); display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:20}
.topo .acoes{display:flex; align-items:center; gap:10px}
.pagina{padding:28px 24px; max-width:1200px; width:100%; margin:0 auto}
.pagina-cabecalho{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}

.chip-usuario{display:flex; align-items:center; gap:.6rem; padding:.35rem .5rem; border-radius:999px; border:1px solid var(--borda); background:var(--superficie)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-700);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700}

/* ---------- Grid de KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
.kpi{background:var(--superficie); border:1px solid var(--borda); border-radius:var(--raio); padding:18px}
.kpi .rotulo{font-size:.8rem; color:var(--texto-suave)}
.kpi .valor{font-size:1.7rem; font-weight:700; letter-spacing:-.02em; margin-top:.2rem}

/* ---------- Tela de login ---------- */
.auth{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
.auth-visual{background:linear-gradient(150deg,var(--brand-900),var(--slate-950)); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between}
.auth-visual h2{font-size:1.9rem; max-width:22ch}
.auth-visual p{color:var(--slate-300); max-width:40ch}
.auth-form{display:flex; align-items:center; justify-content:center; padding:40px; background:var(--bg)}
.auth-form .caixa{width:100%; max-width:380px}

/* ---------- Modal ---------- */
.modal-fundo{position:fixed; inset:0; background:rgba(2,6,23,.55); display:grid; place-items:center; padding:20px; z-index:100}
.modal{background:var(--superficie); border-radius:var(--raio-lg); box-shadow:var(--sombra-lg); width:100%; max-width:520px; max-height:90vh; overflow:auto}
.modal .modal-cabecalho{padding:18px 22px; border-bottom:1px solid var(--borda); display:flex; justify-content:space-between; align-items:center}
.modal .modal-corpo{padding:22px}
.modal .modal-rodape{padding:16px 22px; border-top:1px solid var(--borda); display:flex; justify-content:flex-end; gap:10px}

/* ---------- Avisos (toasts) ---------- */
.avisos{position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:200}
.aviso{background:var(--superficie); border:1px solid var(--borda); border-left:4px solid var(--primaria); border-radius:var(--raio-sm); padding:12px 16px; box-shadow:var(--sombra); min-width:260px; animation:entra .2s ease}
.aviso.sucesso{border-left-color:var(--sucesso)} .aviso.erro{border-left-color:var(--perigo)}
@keyframes entra{from{opacity:0; transform:translateY(8px)}to{opacity:1}}

/* ---------- Utilidades ---------- */
.linha{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.entre{display:flex; justify-content:space-between; align-items:center; gap:12px}
.col{display:flex; flex-direction:column; gap:12px}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.vazio{text-align:center; padding:48px 20px; color:var(--texto-suave)}
.carregando{display:inline-block; width:18px; height:18px; border:2px solid var(--borda); border-top-color:var(--primaria); border-radius:50%; animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .barra-lateral{position:fixed; z-index:60; width:264px; transform:translateX(-100%); transition:.25s; height:100vh}
  .barra-lateral.aberta{transform:none; box-shadow:var(--sombra-lg)}
  .auth{grid-template-columns:1fr}
  .auth-visual{display:none}
}
@media (max-width:560px){
  .pagina{padding:18px 14px}
  .topo{padding:0 14px}
  .chip-usuario .nome-usuario{display:none}
}

/* ---------- Impressão / PDF ---------- */
@media print{
  .barra-lateral,.topo,.avisos,.btn{display:none !important}
  body{background:#fff}
  .pagina{max-width:none; padding:0}
  .card{box-shadow:none; border-color:#ddd}
}