/* ═══════════════════════════════════════════════════════════
   MAIN.CSS — reset global, variáveis, header, status bar,
   sidebar (Módulo 10) e layout geral do app.
   Migrado do <style> único do v19, mantendo todas as variáveis
   de cor/raio originais.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Inter:wght@400;500;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --or: #FF6B1A; --or2: #e85e10;
  --bg: #0A0A0A; --s1: #141414; --s2: #1E1E1E; --s3: #252525; --bd: #2A2A2A;
  --tx: #F0F0F0; --mu: #666;
  --green: #22c55e; --red: #ef4444; --blue: #3b82f6; --amber: #f59e0b;
  --rad: 10px;
}

body, #app {
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', sans-serif;
  min-height: 600px;
}

/* ── LAYOUT GERAL: sidebar + conteúdo ── */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── HEADER ── */
.hdr {
  background: var(--s1); border-bottom: 1px solid var(--bd);
  padding: 0 22px; display: flex; align-items: center; justify-content: space-between; height: 58px;
}
.logo { display: flex; align-items: center; gap: 9px; }
.lic {
  width: 32px; height: 32px; background: var(--or); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.lnm {
  font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.lnm span { color: var(--or); }
.hmeta { font-size: 11px; color: var(--mu); text-align: right; line-height: 1.5; }
.hmeta b { color: #bbb; font-weight: 500; }

/* ── STATUS BAR ── */
.sbar {
  background: var(--s2); border-bottom: 1px solid var(--bd);
  padding: 7px 22px; display: flex; align-items: center; gap: 7px;
}
.sdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .3s; background: var(--mu); }
.sdot.ok { background: var(--green); }
.sdot.err { background: var(--red); }
.sdot.spin { background: var(--or); animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.stxt { font-size: 12px; color: var(--mu); flex: 1; }
.stxt b { color: var(--tx); font-weight: 500; }
.btn-recon {
  margin-left: auto; background: var(--s3); border: 1px solid var(--bd); border-radius: 5px;
  color: var(--tx); font-family: 'Inter', sans-serif; font-size: 11px; padding: 4px 12px;
  cursor: pointer; display: none; transition: background .2s;
}
.btn-recon:hover { background: var(--bd); }

/* ── CONFIG WARNING ── */
.cfg-warn {
  background: #2a1408; border: 1px solid #4a2a10; border-radius: 7px;
  padding: 9px 12px; font-size: 11px; color: var(--amber);
  margin: 10px 22px; display: none; align-items: center; gap: 6px;
}
.cfg-warn.on { display: flex; }

/* ── SIDEBAR (Módulo 10) ── */
.sidebar {
  width: 200px; flex-shrink: 0; background: var(--s1); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; padding: 14px 0;
}
.sidebar .lnm { padding: 0 16px 14px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  font-size: 13px; color: var(--mu); background: none; border: none; cursor: pointer;
  text-align: left; width: 100%; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--s2); color: var(--tx); }
.nav-item.active { background: var(--s2); color: var(--or); border-right: 2px solid var(--or); }

/* ── PÁGINAS ── */
.page { display: none; }
.body { padding: 22px; max-width: 780px; }
.sey { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin-bottom: 4px; }
.sti { font-family: 'Barlow Condensed', sans-serif; font-size: 25px; font-weight: 700; margin-bottom: 3px; }
.sde { font-size: 12px; color: var(--mu); margin-bottom: 20px; line-height: 1.6; }

/* ── CARDS (compartilhado por todos os módulos) ── */
.card { background: var(--s1); border: 1px solid var(--bd); border-radius: var(--rad); padding: 18px; margin-bottom: 12px; }
.cttl {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mu); margin-bottom: 14px; display: flex; align-items: center; gap: 5px;
}

/* ── GRIDS DE FORMULÁRIO ── */
.g1 { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.g0 { margin-bottom: 0; }
@media (max-width: 540px) { .g2, .g3 { grid-template-columns: 1fr; } }

.fl label {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mu); margin-bottom: 5px;
}
.fl input, .fl select, .fl textarea {
  width: 100%; background: var(--s2); border: 1px solid var(--bd); border-radius: 7px;
  color: var(--tx); font-family: 'Inter', sans-serif; font-size: 13px; padding: 9px 11px;
  outline: none; transition: border-color .2s, background .2s;
}
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color: var(--or); }
.fl input::placeholder, .fl textarea::placeholder { color: #333; }
.fl select option { background: #1e1e1e; }
.sub { font-size: 10px; margin-top: 3px; color: #3a3a3a; }

/* ── BOTÕES GENÉRICOS (novos — usados nos módulos do ERP) ── */
.btn-sm {
  background: var(--s2); border: 1px solid var(--bd); border-radius: 6px;
  color: var(--tx); font-family: 'Inter', sans-serif; font-size: 11px; padding: 6px 10px;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.btn-sm:hover { border-color: var(--or); }

.btn-auth {
  background: var(--or); color: #fff; border: none; border-radius: 7px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: .05em; padding: 9px 18px; cursor: pointer; white-space: nowrap; transition: background .2s;
}
.btn-auth:hover { background: var(--or2); }
.btn-auth:disabled { background: #333; color: #666; cursor: not-allowed; }

/* ── FOOTER ── */
.foot { padding: 14px 22px; border-top: 1px solid var(--bd); display: flex; justify-content: space-between; font-size: 11px; color: #222; margin-top: 6px; }

/* ── SPINNERS ── */
.sp { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.15); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.sp-sm { width: 9px; height: 9px; border-width: 1.5px; border-color: rgba(34,197,94,.15); border-top-color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── BADGES DE STATUS (compartilhado) ── */
.badge { display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 8px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.badge-ok { background: #001408; border: 1px solid #003020; color: var(--green); }
.badge-err { background: #2a0808; border: 1px solid #4a1010; color: var(--red); }
.badge-warn { background: #2a1408; border: 1px solid #4a2a10; color: var(--amber); }
.badge-mu { background: var(--s3); border: 1px solid var(--bd); color: var(--mu); }

.bdg { display: inline-flex; align-items: center; gap: 3px; border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-left: 5px; }
.bdg-g { background: #001408; border: 1px solid #003020; color: var(--green); }

/* ── TABELAS (compartilhado) ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { text-align: left; font-weight: 600; color: var(--mu); text-transform: uppercase; font-size: 10px; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--bd); }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--bd); color: var(--tx); }
.data-table tr:last-child td { border-bottom: none; }
.table-empty { font-size: 12px; color: var(--mu); padding: 16px 0; text-align: center; }

/* ── ALERTAS (Módulo 8) ── */
.alert { border-radius: 7px; padding: 10px 14px; font-size: 12px; margin-bottom: 10px; }
.alert-err { background: #2a0808; border: 1px solid #4a1010; color: #f87171; }
.alert-warn { background: #2a1408; border: 1px solid #4a2a10; color: var(--amber); }

/* ── MODAL GENÉRICO ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-box { background: var(--s1); border: 1px solid var(--bd); border-radius: var(--rad); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--bd); }
.modal-title { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--mu); font-size: 22px; cursor: pointer; line-height: 1; }
.modal-close:hover { color: var(--tx); }
.modal-body { padding: 18px; }