/* Identidade WebFerragens — manual: #C42D30 (vermelho), #4A4A4A (grafite), #D6D6D6 (cinza claro), #FFFFFF.
   Tipografia do manual: Basique Pro / Klavika. Se não estiverem instaladas, cai em Montserrat/Segoe UI. */
:root{
  --wf-red:#C42D30; --wf-red-dark:#A32326; --wf-red-soft:#FBEAEA;
  --wf-gray:#4A4A4A; --wf-gray-dark:#363636; --wf-gray-2:#D6D6D6; --wf-gray-3:#EEEEEF; --wf-gray-4:#F6F6F7;
  --wf-white:#FFFFFF; --wf-ink:#2B2B2B; --wf-mut:#6E6E73;
  --wf-ok:#1b7f3b; --wf-ok-bg:#E3F4E9; --wf-warn:#8a5a00; --wf-warn-bg:#FFF2CC;
  --wf-font:"Basique Pro","Klavika","Montserrat","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --wf-radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:var(--wf-font);font-size:15px;line-height:1.45;color:var(--wf-ink);background:var(--wf-gray-4)}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.2px;color:var(--wf-gray)}
h2{font-size:17px;margin:0;color:var(--wf-gray)}
a{color:var(--wf-red)}
.sub{color:var(--wf-mut);margin:2px 0 14px;font-size:14px}
td .sub,.barra-acoes .sub{margin:0}

/* botões */
button,.btn{font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:8px;border:1px solid var(--wf-gray-2);background:#fff;color:var(--wf-gray);cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{border-color:var(--wf-gray);background:var(--wf-gray-4)}
button.primario,.btn.primario{background:var(--wf-red);border-color:var(--wf-red);color:#fff}
button.primario:hover,.btn.primario:hover{background:var(--wf-red-dark);border-color:var(--wf-red-dark)}
button.grande{width:100%;padding:12px;font-size:16px;margin-top:8px}
button.ghost{background:#fff}
button.peq{padding:4px 10px;font-size:12.5px}
button.perigo{color:var(--wf-red);border-color:#e9b9ba}
button.perigo:hover{background:var(--wf-red-soft);border-color:var(--wf-red)}
button.link{border:0;background:none;color:inherit;text-decoration:underline;padding:0 6px;font-weight:600}
button.ghost-claro{background:transparent;border-color:#ffffff55;color:#fff;padding:6px 14px}
button.ghost-claro:hover{background:#ffffff1f;border-color:#fff}

/* formulários */
label{display:block;font-size:13px;font-weight:600;color:var(--wf-gray);margin:0 0 12px}
label input:not([type=checkbox]){display:block;width:100%;margin-top:5px;padding:10px 12px;font:inherit;font-size:15px;border:1px solid var(--wf-gray-2);border-radius:8px;background:#fff;color:var(--wf-ink)}
input:focus,button:focus-visible,a:focus-visible{outline:3px solid #C42D3033;border-color:var(--wf-red)}
label.chk{display:flex;gap:8px;align-items:center;font-weight:500;font-size:14px;margin:6px 0}
fieldset{border:1px solid var(--wf-gray-2);border-radius:8px;margin:10px 0}
fieldset:disabled{opacity:.45}
legend{font-size:13px;font-weight:600;color:var(--wf-gray);padding:0 6px}
.alerta{background:var(--wf-red-soft);color:#7d1518;border:1px solid #efc3c4;border-radius:8px;padding:9px 12px;margin:10px 0;font-size:14px}
pre.log{background:#2b2b2b;color:#ddd;padding:12px;border-radius:8px;overflow:auto;max-height:320px;font-size:12px}

/* login */
.tela-login{background:var(--wf-gray)}
.login{min-height:100vh;display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,1fr)}
.login-marca{background:var(--wf-gray);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8vw;position:relative;overflow:hidden}
.login-marca .wm{position:absolute;right:-12%;bottom:-8%;width:78%;opacity:.07;pointer-events:none}
.login-marca .logo{width:min(420px,90%);height:auto;position:relative}
.login-marca p{font-size:22px;margin:28px 0 4px;position:relative;font-weight:600}
.login-marca small{color:var(--wf-gray-2);position:relative;font-size:14px;letter-spacing:.4px}
.login-form{background:#fff;display:flex;align-items:center;justify-content:center;padding:32px}
.login-form form{width:100%;max-width:370px}
.login-form h1{font-size:30px}
.login-form .sub{margin-bottom:22px}
@media(max-width:760px){.login{grid-template-columns:1fr}.login-marca{padding:28px;min-height:190px}.login-marca .wm{display:none}.login-marca p{margin-top:14px;font-size:17px}}

/* topo do hub */
.imp{background:var(--wf-warn-bg);color:var(--wf-warn);padding:7px 24px;font-size:14px;display:flex;gap:6px;align-items:center;border-bottom:1px solid #ecd58a}
.imp form{margin:0}
.topo{background:var(--wf-gray);color:#fff;display:flex;align-items:center;gap:22px;padding:10px 24px;border-bottom:4px solid var(--wf-red)}
.topo .marca img{height:32px;width:auto;display:block}
.topo nav{display:flex;gap:4px}
.topo nav a{color:#ffffffcc;text-decoration:none;padding:7px 14px;border-radius:8px;font-weight:600;font-size:14px}
.topo nav a:hover{background:#ffffff14;color:#fff}
.topo nav a.on{background:#ffffff1f;color:#fff}
.topo .sp{flex:1}
.topo form{margin:0}
.quem{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.quem em{font-style:normal;background:var(--wf-red);border-radius:5px;padding:1px 7px;font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--wf-red);display:grid;place-items:center;font-weight:700}

/* páginas */
.pagina{max-width:1180px;margin:0 auto;padding:30px 24px 60px}
.pagina.estreita{max-width:520px}
.painel{background:#fff;border:1px solid var(--wf-gray-2);border-radius:var(--wf-radius);padding:20px}
.painel h2{margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:8px}
.card-mod{background:#fff;border:1px solid var(--wf-gray-2);border-top:4px solid var(--wf-gray);border-radius:var(--wf-radius);padding:22px;text-decoration:none;color:var(--wf-ink);display:flex;flex-direction:column;gap:8px;transition:.15s}
.card-mod:hover{border-top-color:var(--wf-red);box-shadow:0 8px 22px #0000001a;transform:translateY(-2px)}
.card-mod .ic{width:52px;height:52px;border-radius:12px;background:var(--wf-gray-3);color:var(--wf-red);display:grid;place-items:center}
.card-mod h2{font-size:18px;margin-top:6px}
.card-mod p{margin:0;color:var(--wf-mut);font-size:14px;flex:1}
.card-mod .rodape{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--wf-mut);margin-top:8px}
.card-mod .rodape b{color:var(--wf-red)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wf-gray-2);margin-right:6px}
.dot.on{background:var(--wf-ok)}

/* admin */
.abas{display:flex;gap:4px;border-bottom:2px solid var(--wf-gray-2);margin:18px 0}
.abas button{border:0;background:none;border-radius:8px 8px 0 0;padding:10px 18px;color:var(--wf-mut);margin-bottom:-2px;border-bottom:3px solid transparent}
.abas button.on{color:var(--wf-red);border-bottom-color:var(--wf-red)}
.barra-acoes{display:flex;align-items:center;gap:14px;justify-content:space-between;margin:22px 0 10px}
.tabela-wrap{padding:0;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--wf-mut);padding:11px 14px;background:var(--wf-gray-4);border-bottom:1px solid var(--wf-gray-2)}
td{padding:11px 14px;border-bottom:1px solid var(--wf-gray-3);vertical-align:middle}
tr.inativo td{opacity:.55}
.acoes-l{white-space:nowrap;text-align:right}
.acoes-l button{margin-left:4px}
.tag{display:inline-block;background:var(--wf-gray-3);color:var(--wf-gray);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600;margin:1px 0}
.tag.red{background:var(--wf-red);color:#fff}.tag.ok{background:var(--wf-ok-bg);color:var(--wf-ok)}.tag.warn{background:var(--wf-warn-bg);color:var(--wf-warn)}
.busca{padding:8px 12px;border:1px solid var(--wf-gray-2);border-radius:8px;font:inherit;width:260px}
dialog{border:0;border-radius:14px;padding:26px;width:min(480px,92vw);box-shadow:0 20px 60px #0005}
dialog::backdrop{background:#2b2b2b99}
dialog h2{margin-bottom:12px}
dialog .acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

/* saúde */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpis div{border:1px solid var(--wf-gray-2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpis span{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--wf-mut)}
.kpis b{font-size:22px;color:var(--wf-gray)}.kpis b.ruim{color:var(--wf-red)}.kpis small{color:var(--wf-mut);font-size:12px}
select{font:inherit;padding:9px 10px;border:1px solid var(--wf-gray-2);border-radius:8px;background:#fff;width:100%;margin-top:5px}
#sessao-aviso{position:fixed;right:18px;bottom:18px;z-index:9999;background:#363636;color:#fff;border-left:5px solid var(--wf-red);border-radius:10px;padding:12px 16px;box-shadow:0 10px 30px #0006;font:600 14px var(--wf-font);display:flex;gap:14px;align-items:center}
#sessao-aviso button{background:var(--wf-red);border:0;color:#fff;border-radius:7px;padding:6px 14px;font:600 13px var(--wf-font);cursor:pointer}

/* rodapé fixo em todas as telas */
#wfhub-rodape{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#363636;color:#D6D6D6;text-align:center;
  font:500 12px var(--wf-font,"Segoe UI",sans-serif);padding:5px 12px;border-top:2px solid #C42D30}
body:has(#wfhub-rodape){padding-bottom:30px}