/* =====================================================================
   BLACK Sistema — tema compartilhado
   Mude o visual de TODO o sistema editando só este arquivo.
   Clima executivo: topo escuro + corpo claro, um único destaque (azul-aço).
   ===================================================================== */
:root{
  /* superfícies */
  --bg:#eef1f5;            /* fundo do corpo */
  --topbar:#0a0e16;        /* barra escura do topo */
  --card:#ffffff;          /* cards de conteúdo */
  --field:#f8fafc;         /* fundo dos campos */
  --nav:#ffffff;           /* barra de navegação clara */

  /* linhas / bordas */
  --line:#e2e8f0;          /* bordas de cards e divisórias */
  --field-line:#d8dee7;    /* bordas dos campos */

  /* texto */
  --txt:#1e293b;           /* texto principal */
  --muted:#64748b;         /* texto secundário */
  --label:#334155;         /* rótulos de campo */
  --on-dark:#e9edf3;       /* texto sobre o topo escuro */
  --on-dark-muted:#9aa6b8; /* texto secundário sobre o topo escuro */

  /* destaque (azul-aço) — o ÚNICO destaque do sistema */
  --accent:#2f6da8;
  --accent-700:#27598a;    /* hover do destaque */
  --accent-weak:rgba(47,109,168,.08);   /* preenchimento suave (card selecionado) */
  --on-accent:#ffffff;     /* texto sobre o destaque */

  /* feedback */
  --danger:#dc2626;
  --ok:#16a34a;

  /* medidas */
  --radius-card:14px;
  --radius-field:10px;
  --radius-pill:999px;
  --pad-card:22px;
  --gap:14px;
  --maxw:880px;
  --topbar-h:58px;

  /* tipografia */
  --font:system-ui,Segoe UI,Arial,sans-serif;
}

/* ===== base ===== */
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--txt);
  font-family:var(--font); -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }   /* usado pelo JS via classList.toggle('hidden', …) */

/* ===== topo escuro ===== */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--topbar-h); padding:0 22px; background:var(--topbar);
}
.brand img{ height:28px; width:auto; display:block; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.avatar{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:13px; font-weight:600; letter-spacing:.02em; user-select:none;
}
.btn-sair{
  background:transparent; border:1px solid rgba(148,163,184,.35);
  color:var(--on-dark); padding:7px 14px; border-radius:10px;
  font-size:13px; cursor:pointer; font-family:inherit;
}
.btn-sair:hover{ border-color:var(--accent); }

/* ===== barra de navegação clara ===== */
.navtabs{
  display:flex; align-items:center; gap:4px;
  background:var(--nav); border-bottom:1px solid var(--line);
  padding:0 22px;
}
.tab{
  display:inline-block; padding:14px 16px; font-size:14px; font-weight:500;
  color:var(--muted); text-decoration:none; border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.tab:hover{ color:var(--txt); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.tab.disabled{ color:#aeb7c4; cursor:default; pointer-events:none; }

/* ===== breadcrumb ===== */
.breadcrumb{
  max-width:var(--maxw); margin:0 auto; padding:16px 22px 0;
  font-size:12.5px; color:var(--muted);
}
.breadcrumb b{ color:var(--txt); font-weight:600; }
.breadcrumb .sep{ margin:0 7px; color:#b8c0cc; }

/* ===== layout de conteúdo ===== */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:14px 22px 64px; }
.page-title{ font-size:22px; font-weight:700; margin:8px 0 2px; }
.page-lead{ color:var(--muted); font-size:14px; margin:0 0 20px; }

/* ===== cards ===== */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:var(--pad-card); margin-bottom:18px;
}
.card-label{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 16px;
  display:flex; align-items:center; gap:10px;
}

/* ===== grid de campos ===== */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.row .full{ grid-column:1 / -1; }
@media(max-width:560px){ .row{ grid-template-columns:1fr; } }

label{ display:block; font-size:13px; color:var(--label); margin:0 0 6px; font-weight:500; }
.req{ color:var(--accent); font-weight:700; }

input,select{
  width:100%; padding:11px 13px; border-radius:var(--radius-field);
  background:var(--field); border:1px solid var(--field-line);
  color:var(--txt); font-size:15px; font-family:inherit;
}
input::placeholder{ color:#9aa6b8; }
input:focus,select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
input:read-only{ background:#eef2f7; color:var(--muted); cursor:default; }

.err{ color:var(--danger); font-size:12px; margin-top:5px; min-height:14px; }
.hint{ color:var(--muted); font-size:12px; margin-top:5px; }
.alerta{ color:var(--danger); font-size:13px; font-weight:600; margin-bottom:10px; }

/* ===== badge ===== */
.badge{
  display:inline-block; font-size:12px; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--accent-weak); color:var(--accent); font-weight:600;
}

/* ===== ações / botões ===== */
.actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.status{ font-size:13px; color:var(--muted); margin-right:auto; }
.btn{
  padding:11px 18px; border-radius:var(--radius-field); border:1px solid var(--field-line);
  background:var(--card); color:var(--txt); font-size:14px; font-weight:500;
  cursor:pointer; font-family:inherit;
}
.btn:hover{ border-color:var(--accent); }
.btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.btn.primary:hover{ background:var(--accent-700); border-color:var(--accent-700); }
.btn:disabled{ opacity:.5; cursor:default; }

/* ===== tipo de cliente: cards selecionáveis ===== */
.tipo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:560px){ .tipo-grid{ grid-template-columns:1fr; } }
.tipo-card{
  position:relative; display:block; cursor:pointer;
  border:1.5px solid var(--field-line); border-radius:12px;
  padding:16px 16px 14px; background:var(--field); transition:.12s;
}
.tipo-card:hover{ border-color:#b9c4d4; }
.tipo-card input{ position:absolute; opacity:0; pointer-events:none; }
.tipo-card .tc-nome{ display:block; font-size:15px; font-weight:600; color:var(--txt); }
.tipo-card .tc-desc{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; }
.tipo-card .tc-check{
  position:absolute; top:12px; right:12px; width:20px; height:20px;
  border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent);
  font-size:12px; line-height:20px; text-align:center; display:none;
}
.tipo-card:has(input:checked){ border-color:var(--accent); background:var(--accent-weak); box-shadow:0 0 0 1px var(--accent); }
.tipo-card:has(input:checked) .tc-check{ display:block; }