/* Zengo RS - paleta e componentes base reaproveitados do APP_VENDAS
   (painel_vendas.html), conforme decisao de identidade visual aprovada. */

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

:root {
  --blue:#1a56db; --blue-d:#1447c0; --blue-l:#eff6ff;
  --green:#059669; --green-l:#d1fae5;
  --red:#ef4444; --red-l:#fee2e2;
  --amber:#d97706; --amber-l:#fef3c7;
  --orange:#e85220; --orange-d:#c8431a; --orange-l:#fdece4;
  --navy:#171e38;
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb;
  --g300:#d1d5db; --g400:#9ca3af; --g500:#6b7280;
  --g700:#374151; --g900:#111827;
  --r:12px; --rl:16px;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
}

body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#f0f4f8; min-height:100vh; color:var(--g900);
}

a { color:var(--blue); }

/* ===== LOGIN (identico ao padrao do APP_VENDAS) ===== */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; background:linear-gradient(135deg,#1e3a5f 0%,#1a56db 100%); }
.login-card { background:white; border-radius:20px; padding:2rem; width:100%; max-width:350px; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.login-logo { display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; }
.login-logo img { height:52px; width:auto; }
.login-title { text-align:center; font-size:19px; font-weight:600; margin-bottom:3px; }
.login-sub { text-align:center; font-size:13px; color:var(--g500); margin-bottom:1.5rem; }
.login-err { background:var(--red-l); color:#991b1b; font-size:13px; padding:8px 11px; border-radius:8px; margin-bottom:.875rem; }
.login-ok { background:var(--green-l); color:#065f46; font-size:13px; padding:8px 11px; border-radius:8px; margin-bottom:.875rem; }
.login-links { display:flex; justify-content:space-between; margin-top:.75rem; font-size:12.5px; }

/* ===== FORM ===== */
.field { margin-bottom:.875rem; }
.field:last-child { margin-bottom:0; }
label.fl { display:block; font-size:13px; font-weight:500; color:var(--g700); margin-bottom:4px; }
input[type="date"],input[type="text"],input[type="email"],input[type="number"],input[type="password"],textarea,select {
  width:100%; padding:9px 11px; font-size:14px; border:1.5px solid var(--g200); border-radius:10px;
  background:var(--g50); color:var(--g900); outline:none; transition:border-color .15s,box-shadow .15s; font-family:inherit;
}
input:focus,textarea:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,86,219,.1); background:white; }
.checkbox-field { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--g500); }
.checkbox-field input { width:auto; margin-top:2px; }

/* ===== BUTTONS ===== */
.btn-sub { width:100%; padding:13px; font-size:15px; font-weight:600; color:white; background:var(--blue); border:none; border-radius:11px; cursor:pointer; transition:background .15s,transform .1s; }
.btn-sub:hover { background:var(--blue-d); }
.btn-sub:active { transform:scale(.99); }
.btn-accent { background:var(--orange); }
.btn-accent:hover { background:var(--orange-d); }
.nb { padding:6px 12px; font-size:13px; font-weight:500; border:1.5px solid var(--g200); border-radius:8px; background:white; cursor:pointer; color:var(--g700); transition:all .15s; white-space:nowrap; text-decoration:none; display:inline-block; }
.nb:hover { background:var(--g50); border-color:var(--g300); }

/* ===== NAV / CARD (paineis internos) ===== */
.nav { background:white; border-bottom:1px solid var(--g200); padding:0 1.25rem; display:flex; align-items:center; justify-content:space-between; height:54px; position:sticky; top:0; z-index:50; gap:8px; }
.nav-brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; }
.nav-logo img { height:32px; width:auto; display:block; }
.subnav { background:white; border-bottom:1px solid var(--g200); padding:0 1.25rem; display:flex; gap:4px; overflow-x:auto; }
.subnav a { padding:11px 10px; font-size:13px; font-weight:500; color:var(--g500); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; }
.subnav a:hover { color:var(--g900); }
.pw { max-width:720px; margin:0 auto; padding:1.5rem 1rem 3rem; }
.pwd { max-width:1100px; margin:0 auto; padding:1.5rem 1rem 3rem; }
.table-wrap { overflow-x:auto; }
table.dtable { width:100%; border-collapse:collapse; font-size:13.5px; }
table.dtable th { text-align:left; font-size:11px; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.05em; padding:8px 10px; border-bottom:1.5px solid var(--g200); }
table.dtable td { padding:10px; border-bottom:1px solid var(--g100); vertical-align:top; }
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600; }
.badge.draft { background:var(--g100); color:var(--g700); }
.badge.open { background:var(--green-l); color:#065f46; }
.badge.paused { background:var(--amber-l); color:#92400e; }
.badge.closed { background:var(--red-l); color:#991b1b; }
.badge.archived { background:var(--g100); color:var(--g500); }

/* ===== KANBAN ===== */
.kboard { display:flex; gap:12px; overflow-x:auto; padding-bottom:1rem; align-items:flex-start; }
.kcolumn { flex:0 0 270px; background:var(--g50); border:1px solid var(--g200); border-radius:var(--rl); display:flex; flex-direction:column; max-height:calc(100vh - 220px); }
.kcolumn-header { padding:11px 13px; font-size:12.5px; font-weight:700; color:var(--g700); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--g200); }
.kcolumn-count { background:var(--g200); color:var(--g700); border-radius:20px; padding:1px 8px; font-size:11px; }
.kcolumn-body { padding:10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex:1; transition:background .15s; }
.kcolumn-body.drag-over { background:var(--blue-l); }
.kcard { background:white; border:1px solid var(--g200); border-radius:12px; padding:10px 11px; cursor:grab; box-shadow:var(--sh); }
.kcard.dragging { opacity:.4; }
.kcard-name { font-size:13.5px; font-weight:600; }
.kcard-meta { font-size:11.5px; color:var(--g500); margin-top:2px; }
.kcard-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.kcard-score { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--blue-l); color:var(--blue-d); }
.kcard-source { font-size:11px; color:var(--g400); }
.kcard-link { display:block; margin-top:8px; font-size:12px; text-align:center; color:var(--blue); text-decoration:none; }
.card { background:white; border-radius:var(--rl); border:1px solid var(--g200); padding:1.25rem; margin-bottom:1rem; box-shadow:var(--sh); }
.slabel { font-size:11px; font-weight:700; color:var(--g400); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.875rem; }

/* ===== TOAST ===== */
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--g900); color:white; padding:10px 16px; border-radius:10px; font-size:13.5px; font-weight:500; z-index:300; }
.toast.ok { background:#065f46; }
.toast.err { background:#7f1d1d; }

/* ===== HOME (escolha de perfil) ===== */
.home-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 4%; background:linear-gradient(135deg,#1e3a5f 0%,#1a56db 100%); }
.home-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:900px; width:100%; }
.home-img { flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.home-img img { width:100%; max-width:560px; height:auto; display:block; }
.home-side { flex:0 0 320px; display:flex; flex-direction:column; gap:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:2rem 1.75rem; backdrop-filter:blur(4px); }
.choice-grid { display:flex; flex-direction:column; gap:10px; width:100%; }
.choice-btn { border-radius:14px; padding:1.1rem 1.3rem; cursor:pointer; border:none; transition:transform .15s; display:flex; align-items:center; gap:.9rem; text-align:left; width:100%; text-decoration:none; }
.choice-btn:hover { transform:translateY(-2px); }
.choice-btn.light { background:white; }
.choice-btn.dark { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25); }