/* =====================================================
   DisparoZap — Design System
   ===================================================== */

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

:root{
  --verde:        #25D366;
  --verde-escuro: #128C7E;
  --verde-100:    #E7F9EF;
  --azul:         #2563EB;
  --azul-100:     #EAF1FE;
  --roxo:         #7C3AED;
  --roxo-100:     #F1EAFE;
  --amarelo:      #F59E0B;
  --amarelo-100:  #FEF3E0;
  --laranja:      #EA7317;
  --laranja-100:  #FDEEE2;
  --vermelho:     #E1444C;
  --vermelho-100: #FCE9EA;
  --cinza-100:    #F1F3F5;
  --cinza-600:    #6B7280;

  --bg:        #F5F7FA;
  --card:      #FFFFFF;
  --texto:     #111827;
  --texto-sec: #6B7280;
  --borda:     #E5E9EF;
  --sidebar:   #0F1B2B;
  --sidebar-2: #16273D;
  --sidebar-txt: #C4D0E0;

  --radius:    14px;
  --radius-sm: 9px;
  --sombra:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sombra-lg: 0 8px 24px rgba(16,24,40,.10);
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--texto);
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
button{ font-family:inherit; }

/* ── Layout geral (sidebar + topbar) ───────────────────────────── */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:250px; flex-shrink:0; background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:var(--sidebar-txt); display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0;
  z-index:40; transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:.6rem; padding:1.3rem 1.2rem; font-weight:800; font-size:1.05rem; color:#fff;
}
.sidebar-brand .logo-dot{
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--verde),var(--verde-escuro));
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0;
}
.sidebar-nav{ flex:1; overflow-y:auto; padding:.5rem .7rem; }
.sidebar-secao{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#5A7290; margin:1.1rem .6rem .4rem; }
.sidebar-nav a{
  display:flex; align-items:center; gap:.7rem; padding:.62rem .8rem; border-radius:10px; color:var(--sidebar-txt);
  font-size:.9rem; font-weight:500; margin-bottom:2px; text-decoration:none; transition:.15s;
}
.sidebar-nav a .ic{ width:19px; text-align:center; flex-shrink:0; opacity:.85; }
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.ativo{ background:rgba(37,211,102,.14); color:#fff; }
.sidebar-nav a.ativo .ic{ opacity:1; }
.sidebar-footer{ padding:.9rem 1.2rem; border-top:1px solid rgba(255,255,255,.08); font-size:.78rem; color:#5A7290; }

.main{ margin-left:250px; flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.6rem; background:var(--card); border-bottom:1px solid var(--borda);
  position:sticky; top:0; z-index:30;
}
.topbar h1{ font-size:1.15rem; margin:0; }
.topbar-user{ display:flex; align-items:center; gap:.7rem; }
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--verde-100); color:var(--verde-escuro);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem;
}
.menu-toggle{ display:none; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--texto); }

.content{ padding:1.6rem; max-width:1400px; width:100%; margin:0 auto; }

/* ── Cards / grid ───────────────────────────────────────────────── */
.card{ background:var(--card); border:1px solid var(--borda); border-radius:var(--radius); box-shadow:var(--sombra); }
.card-body{ padding:1.4rem; }
.card-header{ padding:1.1rem 1.4rem; border-bottom:1px solid var(--borda); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.card-header h3{ font-size:1rem; margin:0; }

.grid{ display:grid; gap:1.1rem; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.stat-card{ padding:1.3rem; border-radius:var(--radius); background:var(--card); border:1px solid var(--borda); box-shadow:var(--sombra); }
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.stat-card .stat-ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.stat-card .stat-valor{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
.stat-card .stat-rotulo{ color:var(--texto-sec); font-size:.82rem; }
.ic-verde{ background:var(--verde-100); color:var(--verde-escuro); }
.ic-azul{ background:var(--azul-100); color:var(--azul); }
.ic-roxo{ background:var(--roxo-100); color:var(--roxo); }
.ic-vermelho{ background:var(--vermelho-100); color:var(--vermelho); }
.ic-amarelo{ background:var(--amarelo-100); color:var(--amarelo); }

/* ── Botões ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.62rem 1.1rem;
  border-radius:10px; font-weight:600; font-size:.88rem; border:1px solid transparent; cursor:pointer;
  transition:.15s; text-decoration:none; line-height:1.2;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--verde-escuro); color:#fff; }
.btn-primary:hover{ background:#0e7568; }
.btn-secondary{ background:var(--cinza-100); color:var(--texto); }
.btn-secondary:hover{ background:#e4e7eb; }
.btn-outline{ background:transparent; border-color:var(--borda); color:var(--texto); }
.btn-outline:hover{ background:var(--cinza-100); }
.btn-danger{ background:var(--vermelho); color:#fff; }
.btn-danger:hover{ background:#c53039; }
.btn-block{ width:100%; }
.btn-sm{ padding:.42rem .8rem; font-size:.8rem; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ── Formulários ────────────────────────────────────────────────── */
.form-group{ margin-bottom:1.05rem; }
.form-label{ display:block; font-size:.83rem; font-weight:600; margin-bottom:.4rem; color:var(--texto); }
.form-hint{ font-size:.78rem; color:var(--texto-sec); margin-top:.35rem; }
.form-control, select.form-control, textarea.form-control{
  width:100%; padding:.65rem .85rem; border:1.5px solid var(--borda); border-radius:10px;
  font-size:.9rem; font-family:inherit; background:#fff; color:var(--texto); transition:.15s;
}
.form-control:focus{ outline:none; border-color:var(--verde-escuro); box-shadow:0 0 0 3px rgba(18,140,126,.12); }
textarea.form-control{ resize:vertical; min-height:90px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px){ .form-row{ grid-template-columns:1fr; } }

/* ── Tabelas ────────────────────────────────────────────────────── */
.table-wrap{ overflow-x:auto; }
table.tabela{ width:100%; border-collapse:collapse; font-size:.87rem; }
table.tabela th{ text-align:left; padding:.75rem 1rem; color:var(--texto-sec); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--borda); white-space:nowrap; }
table.tabela td{ padding:.8rem 1rem; border-bottom:1px solid var(--borda); vertical-align:middle; }
table.tabela tr:last-child td{ border-bottom:none; }
table.tabela tr:hover td{ background:#FAFBFC; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge{ display:inline-flex; align-items:center; padding:.28rem .65rem; border-radius:20px; font-size:.74rem; font-weight:600; white-space:nowrap; }
.badge-cinza{ background:var(--cinza-100); color:var(--cinza-600); }
.badge-azul{ background:var(--azul-100); color:var(--azul); }
.badge-verde{ background:var(--verde-100); color:var(--verde-escuro); }
.badge-roxo{ background:var(--roxo-100); color:var(--roxo); }
.badge-vermelho{ background:var(--vermelho-100); color:var(--vermelho); }
.badge-amarelo{ background:var(--amarelo-100); color:#946009; }
.badge-laranja{ background:var(--laranja-100); color:var(--laranja); }

/* ── Alertas ────────────────────────────────────────────────────── */
.alert{ padding:.85rem 1.05rem; border-radius:10px; font-size:.86rem; margin-bottom:1.1rem; border:1px solid transparent; }
.alert span{ display:inline; }
.alert-success{ background:var(--verde-100); color:#0d6e5f; border-color:#bceed7; }
.alert-danger{ background:var(--vermelho-100); color:#a5222a; border-color:#f5c2c5; }
.alert-aviso{ background:var(--amarelo-100); color:#7a4c07; border-color:#f7dda6; }
.alert-info{ background:var(--azul-100); color:#1e4fbf; border-color:#c4d7fb; }

/* ── Progresso ──────────────────────────────────────────────────── */
.progress{ height:10px; background:var(--cinza-100); border-radius:20px; overflow:hidden; }
.progress-bar{ height:100%; background:linear-gradient(90deg,var(--verde),var(--verde-escuro)); border-radius:20px; transition:width .4s ease; }

/* ── Passos (wizard) ────────────────────────────────────────────── */
.passos{ display:flex; gap:.5rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.passo{ display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:20px; background:var(--cinza-100); color:var(--texto-sec); font-size:.82rem; font-weight:600; }
.passo.ativo{ background:var(--verde-100); color:var(--verde-escuro); }
.passo .num{ width:20px; height:20px; border-radius:50%; background:currentColor; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; }
.passo .num span{ color:inherit; filter:invert(1) grayscale(1) contrast(9); }

/* ── Dropzone upload ────────────────────────────────────────────── */
.dropzone{
  border:2px dashed var(--borda); border-radius:var(--radius); padding:2.2rem 1.5rem; text-align:center;
  background:#FAFBFC; cursor:pointer; transition:.15s;
}
.dropzone:hover, .dropzone.arrastando{ border-color:var(--verde-escuro); background:var(--verde-100); }
.dropzone .ic{ font-size:2rem; margin-bottom:.5rem; }

/* ── Login ──────────────────────────────────────────────────────── */
.login-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #123a2f 0%, #0F1B2B 55%, #0a1420 100%);
  padding:1.5rem;
}
.login-wrapper{ width:100%; max-width:400px; }
.login-card{ background:#fff; border-radius:20px; padding:2.3rem 2rem; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.login-header{ text-align:center; margin-bottom:1.6rem; }
.login-logo{
  width:56px; height:56px; border-radius:16px; margin:0 auto .9rem; font-size:1.6rem;
  background:linear-gradient(135deg,var(--verde),var(--verde-escuro)); display:flex; align-items:center; justify-content:center;
}
.login-title{ font-size:1.35rem; margin-bottom:.15rem; }
.login-subtitle{ color:var(--texto-sec); font-size:.86rem; margin:0; }
.login-links{ display:flex; justify-content:space-between; margin-top:1rem; font-size:.82rem; }

/* ── Utilitários ────────────────────────────────────────────────── */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-1{ gap:.5rem; } .gap-2{ gap:1rem; }
.text-sec{ color:var(--texto-sec); } .text-sm{ font-size:.82rem; } .text-xs{ font-size:.74rem; }
.mono{ font-family:var(--mono); }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.w-full{ width:100%; }
.empty-state{ text-align:center; padding:3rem 1.5rem; color:var(--texto-sec); }
.empty-state .ic{ font-size:2.4rem; margin-bottom:.7rem; opacity:.5; }

/* ── Responsivo (mobile) ────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{ transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.3); }
  .sidebar.aberta{ transform:translateX(0); }
  .main{ margin-left:0; }
  .menu-toggle{ display:block; }
  .content{ padding:1.1rem; }
  .card-body{ padding:1.1rem; }
}
.overlay-sidebar{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:35; }
.overlay-sidebar.ativo{ display:block; }