/* =====================================================================
   Camada ONLINE - estilos (login, admin, histórico, avisos)
   Reaproveita as variáveis de cor já definidas no app original.
   ===================================================================== */

/* ---- Barra de sessão (topo) ---- */
#barraSessao{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#0f2e1c; color:#eafaf0;
  padding:10px 16px; font-size:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
#barraSessao .usuario{font-weight:700}
#barraSessao .cargo{opacity:.8; font-size:12px}
#barraSessao .espaco{flex:1}
#barraSessao button{
  background:#1f6b3f; color:#fff; border:1px solid #2e7d4f;
  border-radius:9px; padding:8px 12px; font-size:13px; cursor:pointer; font-weight:600;
}
#barraSessao button:hover{background:#268149}
#barraSessao button.sair{background:#7a1d16; border-color:#8f2820}
#conexaoBadge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px; font-weight:700; font-size:12px;
}
#conexaoBadge.on{background:#123d24; color:#7ee2a3; border:1px solid #2e7d4f}
#conexaoBadge.off{background:#4a1410; color:#ffb4ab; border:1px solid #8f2820}
#conexaoBadge .pontinho{width:9px;height:9px;border-radius:50%}
#conexaoBadge.on .pontinho{background:#31d17a}
#conexaoBadge.off .pontinho{background:#ff6b5e}
#pendentesTag{background:#b54708;color:#fff;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;display:none}

/* ---- Overlays ---- */
.ov{
  position:fixed; inset:0; z-index:90;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; padding:18px;
}
.ov.aberto{display:flex}
.ov-card{
  background:#fff; border-radius:16px; width:100%; max-width:460px;
  box-shadow:0 24px 60px rgba(0,0,0,.35); padding:26px; max-height:92vh; overflow:auto;
}
.ov-card.largo{max-width:960px}
.ov-card h2{margin:0 0 4px; color:var(--accent); font-size:22px}
.ov-card p.sub{margin:0 0 18px; color:var(--muted); font-size:14px}
.ov-card label{display:block; font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.02em; margin:12px 0 6px}
.ov-card input, .ov-card select{
  width:100%; border:1px solid var(--border); border-radius:10px;
  padding:11px 12px; font-size:15px;
}
.ov-actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.btn-cheio{background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:12px 16px; font-size:15px; font-weight:700; cursor:pointer; flex:1}
.btn-cheio:hover{filter:brightness(1.05)}
.btn-sec{background:#eef2f7; color:var(--dark); border:1px solid var(--border);
  border-radius:10px; padding:12px 16px; font-weight:600; cursor:pointer}
.aviso-erro{background:#fdeceb; border:1px solid #f3c3bf; color:var(--danger);
  border-radius:10px; padding:10px 12px; font-size:13px; margin-top:12px; display:none}
.aviso-ok{background:#eaf5ee; border:1px solid #b7d4c1; color:var(--accent);
  border-radius:10px; padding:10px 12px; font-size:13px; margin-top:12px; display:none}
.marca-login{text-align:center; margin-bottom:16px}
.marca-login .logo{width:64px;height:64px;border-radius:16px;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:24px}

/* ---- Abas internas dos modais ---- */
.tabbar{display:flex; gap:6px; border-bottom:2px solid var(--border); margin-bottom:16px; flex-wrap:wrap}
.tabbar button{background:none; border:none; padding:10px 14px; font-weight:700;
  color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px}
.tabbar button.ativa{color:var(--accent); border-bottom-color:var(--accent)}

/* ---- Tabelas admin/histórico ---- */
.tab-admin{width:100%; border-collapse:collapse; font-size:13px}
.tab-admin th, .tab-admin td{border:1px solid var(--border); padding:8px 10px; text-align:left}
.tab-admin th{background:#f1f5f4; color:var(--dark)}
.tab-admin tr:hover td{background:#f9fbfa}
.tab-admin .mini{padding:5px 9px; font-size:12px; border-radius:8px; border:1px solid var(--border);
  background:#fff; cursor:pointer; font-weight:600}
.tab-admin .mini.perigo{color:var(--danger); border-color:#f3c3bf}
.tag-status{padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700}
.tag-status.validado{background:#eaf5ee; color:var(--accent)}
.tag-status.enviado{background:#fff7e6; color:var(--warning)}
.tag-status.rascunho{background:#eef2f7; color:var(--muted)}
.form-linha{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end}

/* ---- Barra do gestor ---- */
#barraGestor{display:none; gap:10px; align-items:end; flex-wrap:wrap;
  background:#f1f7f3; border:1px dashed #b7d4c1; border-radius:12px; padding:12px; margin-top:12px}
#barraGestor .field{min-width:170px}
#barraGestor .field label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase}

/* ---- Upload de assinatura ---- */
.assinatura-upload{display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap}
.assinatura-upload label.arquivo{
  background:#eef2f7; border:1px solid var(--border); border-radius:9px;
  padding:8px 12px; font-size:12px; font-weight:700; color:var(--dark); cursor:pointer;
  text-transform:none; letter-spacing:0; margin:0;
}
.assinatura-upload .status-ass{font-size:12px; color:var(--muted)}

/* ---- Toast ---- */
#toastWrap{position:fixed; right:16px; bottom:16px; z-index:120; display:flex; flex-direction:column; gap:8px}
.toast{background:#0f2e1c; color:#eafaf0; padding:12px 16px; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.25); font-size:14px; max-width:340px; animation:sobe .25s ease}
.toast.info{background:#123d55}
.toast.erro{background:#5a1a14}
@keyframes sobe{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* esconde o app ate o login */
body.nao-logado .container, body.nao-logado #barraGestor{display:none !important}