:root {
    --red:    #8B0000;
    --red2:   #A50000;
    --red3:   #C41E1E;
    --text:   #FFFFFF;
    --muted:  rgba(255,255,255,0.5);
    --border: rgba(139,0,0,0.5);
    --card:   rgba(70,0,0,0.4);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Barlow',sans-serif; background:#000; color:var(--text); height:100vh; overflow:hidden; display:flex; flex-direction:column; }
  .bg {
    position:fixed; inset:0; z-index:0;
    background:
      radial-gradient(ellipse 90% 80% at 5% 50%, rgba(110,0,0,0.75) 0%, transparent 55%),
      radial-gradient(ellipse 60% 60% at 95% 10%, rgba(70,0,0,0.4) 0%, transparent 50%),
      radial-gradient(ellipse 50% 50% at 50% 105%, rgba(50,0,0,0.5) 0%, transparent 55%),
      #000;
  }
  .page { position:relative; z-index:1; width:100%; height:100vh; display:none; flex-direction:column; }
  .page.active { display:flex; }
  .site-credit { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--muted); letter-spacing:1px; z-index:10; pointer-events:none; white-space:nowrap; }
  .site-credit a { color:inherit; text-decoration:none; pointer-events:auto; }
  /* Em páginas com sidebar, centraliza em relação à área de conteúdo (ao lado da
     sidebar), não na janela inteira — evita sobrepor o botão de logout em telas estreitas. */
  .page:has(.sidebar) .site-credit { left:calc(190px + (100% - 190px) / 2); }

  /* ── LOGIN ── */
  #page-login { align-items:center; justify-content:center; flex-direction:column; gap:14px; }
  .login-title { font-family:'Bebas Neue'; font-size:48px; letter-spacing:8px; background:var(--red); padding:12px 56px; border-radius:14px; margin-bottom:8px; }
  .login-field { width:280px; display:flex; align-items:center; gap:12px; background:var(--red); border-radius:8px; padding:11px 16px; }
  .login-field input { background:none; border:none; outline:none; color:var(--text); font-size:14px; width:100%; }
  .login-field input::placeholder { color:rgba(255,255,255,0.4); }
  .toggle-pw { cursor:pointer; font-size:16px; opacity:0.7; flex-shrink:0; user-select:none; transition:opacity 0.2s; }
  .toggle-pw:hover { opacity:1; }
  .msg-error { width:280px; background:rgba(139,0,0,0.5); border:1px solid var(--red3); border-radius:8px; padding:10px 14px; font-size:13px; color:#FCA5A5; display:none; text-align:center; }
  .msg-error.show { display:block; }
  .msg-success { width:280px; background:rgba(0,80,0,0.5); border:1px solid #4ade80; border-radius:8px; padding:10px 14px; font-size:13px; color:#4ade80; display:none; text-align:center; }
  .msg-success.show { display:block; }
  .field-req { width:280px; font-size:11px; color:rgba(255,100,100,0.8); display:none; margin-top:-8px; }
  .field-req.show { display:block; }
  .login-btn { width:280px; padding:13px; background:var(--red2); border:2px solid #2222CC; border-radius:8px; color:var(--text); font-size:15px; font-weight:700; cursor:pointer; transition:background 0.2s; margin-top:4px; }
  .login-btn:hover { background:var(--red3); }
  .link-btn { font-size:12px; color:var(--muted); cursor:pointer; text-decoration:underline; transition:color 0.2s; margin-top:4px; }
  .link-btn:hover { color:var(--text); }
  .login-form { display:flex; flex-direction:column; gap:14px; align-items:center; width:100%; }
  .login-form.hide { display:none; }
  .alterar-form { display:none; flex-direction:column; gap:14px; align-items:center; width:100%; }
  .alterar-form.show { display:flex; }
  .alterar-title { font-family:'Bebas Neue'; font-size:28px; letter-spacing:4px; }
  .pw-hint { width:280px; font-size:11px; color:var(--muted); margin-top:-8px; }

  /* ── LAYOUT ── */
  .layout { display:flex; width:100%; height:100vh; overflow:hidden; }
  .sidebar { width:190px; flex-shrink:0; background:rgba(0,0,0,0.55); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:16px 0; gap:4px; height:100vh; overflow:hidden; }
  .nav-btn { display:block; width:calc(100% - 20px); margin:0 10px; padding:11px 14px; background:transparent; border:2px solid #2222AA; border-radius:6px; color:var(--text); font-family:'Barlow'; font-size:13px; font-weight:700; cursor:pointer; text-align:left; transition:all 0.2s; }
  .nav-btn:hover, .nav-btn.active { background:rgba(139,0,0,0.25); border-color:var(--red3); }
  .logout-wrap { margin-top:auto; padding:14px 10px 4px; }
  .logout-icon { width:34px; height:34px; background:var(--red); border-radius:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:17px; transition:background 0.2s; }
  .logout-icon:hover { background:var(--red3); }
  .main-content { flex:1; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column; gap:18px; }

  /* ── DASHBOARD ── */
  .dash-top { display:flex; gap:18px; align-items:flex-start; }
  .stat-col { display:flex; flex-direction:column; gap:14px; flex-shrink:0; }
  .stat-box { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 22px; min-width:150px; }
  .stat-lbl { font-size:13px; color:var(--muted); margin-bottom:4px; }
  .stat-val { font-family:'Bebas Neue'; font-size:44px; line-height:1; }
  .stat-val-sm { font-family:'Bebas Neue'; font-size:24px; line-height:1; margin-top:4px; }
  .chart-box { flex:1; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; align-items:center; }
  .chart-legend-row { display:flex; gap:16px; justify-content:flex-end; margin-bottom:8px; width:100%; }
  .leg { display:flex; align-items:center; gap:6px; font-size:12px; }
  .leg-dot { width:10px; height:10px; border-radius:50%; }
  .summary { display:flex; gap:28px; font-size:14px; }
  .summary span { font-weight:700; }
  .search-bar-wrap { display:flex; align-items:center; background:rgba(50,0,0,0.6); border:1px solid var(--border); border-radius:50px; padding:4px 4px 4px 20px; gap:10px; }
  .search-bar-input { flex:1; background:none; border:none; outline:none; color:var(--text); font-size:14px; font-family:'Barlow'; padding:8px 0; }
  .search-bar-input::placeholder { color:var(--muted); }
  .search-bar-btn { background:var(--red2); border:none; border-radius:50px; color:var(--text); font-size:13px; font-weight:700; padding:10px 24px; cursor:pointer; flex-shrink:0; transition:background 0.2s; }
  .search-bar-btn:hover { background:var(--red3); }
  .table-wrap { background:var(--card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .table-title { padding:12px 18px; font-size:14px; font-weight:700; border-bottom:1px solid var(--border); }
  table { width:100%; border-collapse:collapse; table-layout:fixed; }
  thead th { background:#1E3A8A; padding:9px 14px; text-align:left; font-size:12px; font-weight:700; }
  thead th:nth-child(1) { width:30%; }
  thead th:nth-child(2) { width:12%; }
  thead th:nth-child(3) { width:22%; }
  thead th:nth-child(4) { width:16%; }
  thead th:nth-child(5) { width:14%; }
  thead th:nth-child(6) { width:12%; }
  td:nth-child(1) { width:30%; }
  td:nth-child(2) { width:12%; }
  td:nth-child(3) { width:22%; }
  td:nth-child(4) { width:16%; }
  td:nth-child(5) { width:14%; }
  td:nth-child(6) { width:12%; }
  thead th { background:#1E3A8A; padding:9px 14px; text-align:left; font-size:12px; font-weight:700; }
  tbody tr { border-bottom:1px solid rgba(139,0,0,0.2); cursor:pointer; transition:background 0.15s; }
  tbody tr:hover { background:rgba(139,0,0,0.2); }
  tbody tr:last-child { border-bottom:none; }
  td { padding:9px 14px; font-size:13px; }
  .badge { display:inline-block; padding:2px 10px; border-radius:4px; font-size:11px; font-weight:700; }
  .b-bord { background:rgba(30,58,138,0.5); color:#93C5FD; }
  .b-chec { background:rgba(120,53,15,0.5); color:#FCD34D; }
  .b-reje { background:rgba(139,0,0,0.5); color:#FCA5A5; }
  .b-desi { background:rgba(60,60,60,0.5); color:#D1D5DB; }
  .empty-state { padding:32px; text-align:center; color:var(--muted); font-size:14px; }

  /* ── PROCESSO ── */
  .proc-wrap { max-width:680px; display:flex; flex-direction:column; gap:16px; }
  .fld-lbl { font-size:13px; color:var(--muted); margin-bottom:6px; display:block; }
  .fld-input { width:100%; background:rgba(139,0,0,0.3); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:12px 16px; font-size:14px; outline:none; transition:border-color 0.2s; }
  .fld-input:focus { border-color:var(--red3); }
  .fld-input::placeholder { color:rgba(255,255,255,0.3); }
  .fld-textarea { width:100%; background:rgba(139,0,0,0.3); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:12px 16px; font-size:12px; font-family:monospace; outline:none; resize:vertical; min-height:200px; line-height:1.6; transition:border-color 0.2s; }
  .fld-textarea:focus { border-color:var(--red3); }
  .fld-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .file-btn { display:inline-flex; align-items:center; gap:6px; background:rgba(139,0,0,0.4); border:1px solid var(--border); border-radius:6px; padding:7px 14px; font-size:12px; cursor:pointer; color:var(--text); transition:background 0.2s; }
  .file-btn:hover { background:rgba(196,30,30,0.5); border-color:var(--red3); }
  .gerar-btn { padding:13px 32px; background:var(--red2); border:2px solid #2222CC; border-radius:8px; color:var(--text); font-size:14px; font-weight:700; cursor:pointer; transition:background 0.2s; align-self:flex-start; }
  .gerar-btn:hover { background:var(--red3); }
  .gerar-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .proc-msg { font-size:13px; padding:10px 14px; border-radius:8px; display:none; }
  .proc-msg.show { display:block; }
  .proc-msg.error { background:rgba(139,0,0,0.5); border:1px solid var(--red3); color:#FCA5A5; }
  .proc-msg.success { background:rgba(0,80,0,0.5); border:1px solid #4ade80; color:#4ade80; }

  /* ── CLIENTE ── */
  .delete-btn { width:100%; margin-top:12px; padding:12px 16px; background:rgba(139,0,0,0.3); border:1px solid var(--red3); border-radius:8px; color:#FCA5A5; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; display:none; }
  .delete-btn:hover { background:rgba(196,30,30,0.5); }
  .delete-btn.show { display:block; }
  .cli-back { font-size:12px; color:var(--muted); cursor:pointer; margin-bottom:8px; display:inline-block; }
  .cli-back:hover { color:var(--text); }
  .cli-grid { display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:start; margin-top:12px; }
  .cli-fields { display:flex; flex-direction:column; gap:12px; }
  .cli-field { display:flex; align-items:center; gap:10px; }
  .cli-field-label { font-size:11px; color:var(--muted); width:120px; flex-shrink:0; text-transform:uppercase; letter-spacing:1px; }
  .cli-field-value { font-size:14px; font-weight:600; flex:1; }
  .copy-btn { width:26px; height:26px; border:1px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px; opacity:0.7; flex-shrink:0; transition:opacity 0.2s; }
  .copy-btn:hover { opacity:1; }
  .status-label { font-size:12px; color:var(--muted); margin-bottom:6px; display:block; }
  .status-select { width:100%; background:rgba(139,0,0,0.5); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:12px 16px; font-size:14px; font-weight:600; outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; transition:border-color 0.2s; }
  .status-select:focus { border-color:var(--red3); }
  .status-select option { background:#3B0000; color:var(--text); }
  .comissao-box { margin-top:16px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
  .comissao-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
  .comissao-val { font-family:'Bebas Neue'; font-size:28px; color:#4ade80; }
  .comissao-val.inativa { color:var(--muted); }

  /* ── LOADING ── */
  .loading { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.8s linear infinite; vertical-align:middle; margin-right:6px; }
  @keyframes spin { to { transform:rotate(360deg); } }
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}