/* Captive Portal HBA — portal do participante. Assets 100% locais (sem CDN). */
:root{
  --laranja:#ea6a0a; --laranja-2:#c85806; --cinza:#374151; --cinza-2:#6b7280;
  --bg:#eef1f5; --card:#ffffff; --borda:#e5e7eb; --erro:#b91c1c; --ok:#15803d;
  --radius:16px; --sombra:0 10px 30px rgba(17,24,39,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:linear-gradient(160deg,#f7f8fa 0%,#e9edf3 100%);
  color:var(--cinza); min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px 14px;
}
.card{
  width:100%; max-width:430px; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--sombra); padding:26px 24px 18px; animation:fade .4s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.topbar{position:relative; display:flex; align-items:center; justify-content:center; min-height:36px; margin-bottom:10px}
.topbar .flags{position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; gap:8px}
.logo-promotor{max-height:36px; max-width:170px; height:auto; opacity:.95}
.flag{border:0;background:none;cursor:pointer;padding:2px;border-radius:6px;line-height:0;opacity:.55;transition:.15s}
.flag.active,.flag:hover{opacity:1;box-shadow:0 0 0 2px var(--laranja)}
.flag svg{display:block;border-radius:3px}
.logo-wrap{text-align:center;margin:10px 0 4px}
.logo-wrap img{max-width:300px;max-height:160px;height:auto}
.info{text-align:center;color:var(--cinza-2);font-size:15px;margin:10px 4px 18px}
h1.title{font-size:20px;text-align:center;margin:4px 0 2px;color:var(--cinza)}
form label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px;color:var(--cinza)}
input[type=text],input[type=email],input[type=tel]{
  width:100%;padding:12px 13px;border:1px solid var(--borda);border-radius:10px;font-size:15px;
  transition:border .15s,box-shadow .15s;
}
input:focus{outline:0;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(234,106,10,.15)}
.btn{
  width:100%;margin-top:18px;padding:13px;border:0;border-radius:10px;cursor:pointer;
  background:var(--laranja);color:#fff;font-size:16px;font-weight:700;letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(234,106,10,.35);transition:.15s;
}
.btn:hover{background:var(--laranja-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.secundario{background:#fff;color:var(--laranja);border:1px solid var(--laranja);box-shadow:none}
.termo{display:flex;align-items:flex-start;gap:9px;margin-top:16px;font-size:13px;color:var(--cinza-2)}
.termo input{margin-top:2px}
.termo a{color:var(--laranja);font-weight:600;text-decoration:none}
.captcha{display:flex;align-items:center;gap:10px;margin-top:12px}
.captcha img{border:1px solid var(--borda);border-radius:8px}
.captcha .refresh{font-size:12px;color:var(--laranja);background:none;border:0;cursor:pointer}
.alert{background:#fef2f2;border:1px solid #fecaca;color:var(--erro);padding:10px 12px;border-radius:10px;font-size:13px;margin:10px 0}
.alert ul{margin:0;padding-left:18px}
.ok-box{text-align:center;padding:14px 0}
.ok-box .check{font-size:46px;color:var(--ok)}
.mask{background:#f9fafb;border:1px dashed var(--borda);border-radius:10px;padding:10px 12px;color:var(--cinza);font-size:14px;margin:8px 0}
.footer{text-align:center;font-size:12px;color:var(--cinza-2);margin-top:18px;border-top:1px solid var(--borda);padding-top:12px}
.footer a{color:var(--laranja);text-decoration:none;font-weight:600}
.noevt{text-align:center}
.noevt .phone{font-size:20px;font-weight:700;color:var(--cinza);margin:8px 0}
.termo-texto{max-height:160px;overflow:auto;background:#f9fafb;border:1px solid var(--borda);border-radius:10px;padding:12px;font-size:12.5px;color:var(--cinza-2);margin-top:8px;white-space:pre-line}
.campo-erro{display:block;color:var(--erro);font-size:12px;margin-top:5px;min-height:1px}
input.invalid{border-color:var(--erro);box-shadow:0 0 0 3px rgba(185,28,28,.12)}
input.checking{background-image:linear-gradient(90deg,transparent,rgba(234,106,10,.08),transparent);background-size:200% 100%}
.flash-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px 12px;border-radius:10px;font-size:13px;margin:10px 0}