/* ============================================================
   VEM NO VISU — estilos compartilhados da área de cliente e do admin
   Mesmos tokens do index.html. Mude aqui e muda nas duas telas.
   ============================================================ */
:root{
  --amarelo:#F2E016; --amarelo-esc:#d4c40e;
  --preto:#0A0A0A; --grafite:#141416; --grafite-2:#1e1e22; --grafite-3:#26262c;
  --texto:#F5F5F3; --apagado:#92929C; --linha:rgba(255,255,255,.10);
  --ok:#3FBF68; --alerta:#F2994A; --erro:#EB5757;
  --display:'Anton','Arial Narrow',Impact,sans-serif;
  --corpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(18px,4vw,48px);
  --raio:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--preto);color:var(--texto);
  font-family:var(--corpo);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1;text-transform:uppercase;letter-spacing:.01em}
::selection{background:var(--amarelo);color:#000}
[hidden]{display:none!important}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.marca{display:flex;align-items:center;gap:10px}
.marca img{height:34px;width:34px;flex:none}
.marca b{font-family:var(--display);font-weight:400;font-size:17px;text-transform:uppercase;line-height:1}
.marca b i{font-style:normal;color:var(--amarelo)}
.topo-dir{display:flex;align-items:center;gap:14px;font-size:13.5px}
.topo-dir .quem{color:var(--apagado);display:none}
@media(min-width:640px){.topo-dir .quem{display:block}}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;
  font-family:var(--corpo);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-1{background:var(--amarelo);color:#0A0A0A}
.btn-1:hover:not(:disabled){background:#fff}
.btn-2{border-color:var(--linha);color:var(--texto);background:none}
.btn-2:hover{border-color:var(--amarelo);color:var(--amarelo)}
.btn-3{background:var(--grafite-2);color:var(--texto);border-color:var(--grafite-2)}
.btn-3:hover{background:var(--grafite-3)}
.btn-sm{padding:8px 14px;font-size:11.5px}
.btn-perigo{border-color:rgba(235,87,87,.4);color:#ff8f8f;background:none}
.btn-perigo:hover{border-color:var(--erro);background:rgba(235,87,87,.1)}

/* ---------- Campos ---------- */
.campo{display:block}
.campo label,.rot{display:block;font-size:11px;color:var(--apagado);margin-bottom:7px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--preto);border:1px solid var(--linha);
  padding:13px 15px;color:var(--texto);font-family:inherit;font-size:15px;transition:border-color .2s;
}
.campo textarea{min-height:90px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--amarelo)}
.campo .dica{font-size:12.5px;color:var(--apagado);margin-top:7px;text-transform:none;letter-spacing:0;font-weight:400}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

/* ---------- Avisos ---------- */
.aviso{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border:1px solid var(--linha);font-size:13.5px;line-height:1.5}
.aviso.erro{border-color:rgba(235,87,87,.45);background:rgba(235,87,87,.08);color:#ffb4b4}
.aviso.ok{border-color:rgba(63,191,104,.45);background:rgba(63,191,104,.08);color:#a8e8bd}
.aviso.info{border-color:var(--linha);background:var(--grafite);color:var(--apagado)}

/* ---------- Etiquetas ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--linha);white-space:nowrap}
.tag-ok{border-color:rgba(63,191,104,.5);color:var(--ok)}
.tag-off{color:var(--apagado)}
.tag-am{border-color:var(--amarelo);color:var(--amarelo)}

/* ---------- Painel / cartão ---------- */
.painel{background:var(--grafite);border:1px solid var(--linha);padding:clamp(24px,4vw,38px)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(5,5,5,.88);display:grid;place-items:center;padding:20px;overflow-y:auto}
.modal-cx{background:var(--grafite);border:1px solid var(--linha);width:min(540px,100%);padding:30px 28px 28px;position:relative;max-height:90vh;overflow-y:auto}
.modal-cx h3{font-size:24px;margin-bottom:6px}
.modal-x{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--linha);color:var(--texto);width:36px;height:36px;font-size:18px;cursor:pointer}
.modal-x:hover{border-color:var(--amarelo);color:var(--amarelo)}
.modal-rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:26px;flex-wrap:wrap}

/* ---------- Escudo ---------- */
.escudo{display:grid;place-items:center;background:var(--grafite-2);border:1px solid var(--linha);flex:none;overflow:hidden}
.escudo img{width:100%;height:100%;object-fit:contain}