/* CRM Web Prime — design system
   Tokens definidos em CRM-ESPECIFICACAO.md secao 3.
   Regras: zero border-radius, sem sombra, verde nunca como texto. */

:root {
  --bg:  #F0F0ED;
  --sf:  #FFFFFF;
  --cd:  #FFFFFF;
  --bd:  #E3E3DF;
  --bd2: #C9C9C3;
  --tx:  #0A0A0A;
  --t2:  #6B6B67;
  --t3:  #9C9C97;
  --ac:  #9AFF00;
  --wr:  #EF9F27;
  --dg:  #E24B4A;
  --ok:  #3B6D11;

  --ff-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  --sb-aberta: 172px;
  --sb-fechada: 50px;
}

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

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
.mono { font-family: var(--ff-mono); }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sb-aberta);
  background: var(--sf);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width 180ms ease;
}
body.sb-fechada .sidebar { width: var(--sb-fechada); }
body.sb-fechada .sb-texto { display: none; }

.sb-topo {
  padding: 14px 12px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 57px;
}
.sb-logo { height: 22px; width: auto; display: block; }
.sb-logo-txt { font-size: 13px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.sb-logo-txt b { background: var(--ac); padding: 1px 3px; font-weight: 500; }

.sb-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--t3); display: flex; padding: 0;
}
.sb-toggle:hover { color: var(--tx); }
.sb-toggle svg { width: 17px; height: 17px; }

.sb-grupo {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--t3);
  letter-spacing: .1em;
  padding: 14px 0 4px 15px;
  white-space: nowrap;
}

.nv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: var(--t2);
  font-size: 13px;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
}
.nv:hover { background: var(--bg); color: var(--tx); }
.nv.on { background: var(--bg); color: var(--tx); border-left-color: var(--ac); font-weight: 500; }
.nv svg { width: 17px; height: 17px; flex-shrink: 0; }
.nv.off { opacity: .45; cursor: not-allowed; }
.nv.off:hover { background: none; color: var(--t2); }

.sb-rodape {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 9px;
}
.avatar {
  width: 26px; height: 26px;
  background: var(--tx); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; flex-shrink: 0;
}
.sb-rodape .nome { font-size: 11px; font-weight: 500; line-height: 1.2; }
.sb-rodape .perfil { font-family: var(--ff-mono); font-size: 9px; color: var(--t2); }

/* ---------- conteudo ---------- */
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--sf);
  border-bottom: 1px solid var(--bd);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 57px;
}
.topbar h1 { font-size: 14px; font-weight: 500; }
.topbar .sub { font-family: var(--ff-mono); font-size: 10px; color: var(--t2); margin-top: 1px; }
.topbar .esq { flex: 1; min-width: 0; }

.pagina { padding: 20px; max-width: 980px; }

/* ---------- componentes ---------- */
.btn {
  background: var(--tx); color: #fff;
  border: 1px solid var(--tx);
  padding: 8px 14px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: #262626; }
.btn svg { width: 14px; height: 14px; }
.btn.sec { background: transparent; color: var(--tx); border-color: var(--bd2); }
.btn.sec:hover { background: var(--sf); }
.btn.perigo { background: transparent; color: var(--dg); border-color: var(--dg); }
.btn.perigo:hover { background: #FCEBEB; }
.btn.mini { padding: 5px 9px; font-size: 11px; }

.card {
  background: var(--cd);
  border: 1px solid var(--bd);
  padding: 20px;
  margin-bottom: 16px;
}
.card h2 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.card .desc { font-size: 12px; color: var(--t2); margin-bottom: 18px; }

.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--t2);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.campo input, .campo select {
  width: 100%;
  background: var(--cd);
  border: 1px solid var(--bd);
  color: var(--tx);
  padding: 9px 11px;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--tx); }
.campo .dica { font-family: var(--ff-mono); font-size: 10px; color: var(--t3); margin-top: 4px; }
.linha { display: flex; gap: 12px; }
.linha .campo { flex: 1; min-width: 0; }

table.grade { width: 100%; border-collapse: collapse; }
table.grade th {
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 400;
  color: var(--t3);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--bd2);
}
table.grade td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
  vertical-align: middle;
}
table.grade tr:last-child td { border-bottom: none; }
table.grade td.mono { font-family: var(--ff-mono); font-size: 12px; color: var(--t2); }

.chip {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .04em;
  padding: 2px 6px;
  display: inline-block;
  text-transform: uppercase;
  background: #EDEDE9;
  color: #5F5E5A;
}
.chip.ac { background: var(--ac); color: var(--tx); }
.chip.wr { background: #FAEEDA; color: #854F0B; }
.chip.dg { background: #FCEBEB; color: #A32D2D; }

.aviso {
  border: 1px solid var(--bd);
  border-left: 3px solid var(--t3);
  background: var(--sf);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}
.aviso.ok  { border-left-color: var(--ok); }
.aviso.err { border-left-color: var(--dg); }
.aviso.wr  { border-left-color: var(--wr); }
.aviso .destaque { display: block; margin-top: 8px; font-family: var(--ff-mono); font-size: 15px; }

.vazio {
  border: 1px dashed var(--bd2);
  padding: 40px 20px;
  text-align: center;
  color: var(--t2);
  font-size: 13px;
}

.campo textarea {
  width: 100%;
  background: var(--cd);
  border: 1px solid var(--bd);
  color: var(--tx);
  padding: 9px 11px;
  resize: vertical;
}
.campo textarea:focus { outline: none; border-color: var(--tx); }
.campo input[type="file"] {
  border: 1px dashed var(--bd2);
  background: var(--bg);
  padding: 10px 11px;
  font-size: 12px;
  color: var(--t2);
}
code {
  font-family: var(--ff-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--bd);
  padding: 1px 5px;
}
.card .passo { margin-bottom: 0; }

/* ---------- login ---------- */
.login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-caixa { width: 100%; max-width: 340px; }
.login-caixa .marca { margin-bottom: 24px; }
.login-caixa .marca .sb-logo { height: 26px; }
.login-caixa .card { padding: 24px; margin: 0; }
.login-caixa .btn { width: 100%; justify-content: center; margin-top: 6px; }