:root {
  /* cores do logotipo: sacola #014A50, check #01B681 */
  --primaria: #014A50;
  --primaria-escura: #013A3F;
  --primaria-clara: #01B681;
  --primaria-bg: #E3F7EF;
  --verde: #01936A;
  --verde-bg: #ECFDF5;
  --vermelho: #B91C1C;
  --vermelho-bg: #FEF2F2;
  --amarelo: #B45309;
  --amarelo-bg: #FFFBEB;
  --fundo: #F4FAF7;
  --texto: #1F2937;
  --texto-suave: #64748B;
  --borda: #E2EFE9;
  --sombra: 0 1px 2px rgba(1, 74, 80, .05), 0 8px 24px rgba(1, 74, 80, .07);
}

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

body {
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
}

.oculto { display: none !important; }

button {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--primaria);
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .15s;
}
button:hover { background: var(--primaria-escura); }
button.link {
  background: none;
  color: var(--texto-suave);
  font-size: 13px;
  padding: 4px;
}
button.link:hover { color: var(--primaria-escura); text-decoration: underline; }

input, select {
  font: inherit;
  padding: 10px 13px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  outline: none;
}
input:focus, select:focus { border-color: var(--primaria-clara); }

.cartao {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 22px;
}

/* ---------- telas centrais (auth / criar org) ---------- */
.tela-centro {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(600px 400px at 20% 10%, #E3F7EF 0%, transparent 60%),
    radial-gradient(700px 500px at 85% 90%, #EAF8F1 0%, transparent 60%),
    var(--fundo);
  padding: 16px;
}
.auth-cartao {
  width: 360px;
  text-align: center;
  padding: 36px 32px 32px;
}
.marca-texto {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primaria);
}
.login-logo { width: 96px; display: block; margin: 0 auto 10px; }
.auth-sub {
  color: var(--texto-suave);
  margin: 6px 0 24px;
  font-size: 13px;
  font-weight: 700;
}
.auth-cartao input { width: 100%; margin-bottom: 12px; text-align: center; }
.auth-cartao button[type="submit"] { width: 100%; }
.auth-msg { margin-top: 14px; font-size: 13px; font-weight: 700; }
.auth-msg.erro { color: var(--vermelho); }
.auth-msg.ok { color: var(--verde); }

.abas {
  display: flex;
  gap: 6px;
  background: var(--fundo);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}
.aba {
  flex: 1;
  background: none;
  color: var(--texto-suave);
  padding: 8px;
  border-radius: 8px;
}
.aba:hover { background: #fff; }
.aba.ativo { background: #fff; color: var(--primaria-escura); box-shadow: var(--sombra); }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100dvh; }

.sidebar {
  width: clamp(180px, 15vw, 240px);
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--borda);
  padding: 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.marca {
  padding: 0 8px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.marca-logo { width: 30px; }
.marca .marca-texto { font-size: 19px; }

.sidebar a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--texto-suave);
  text-decoration: none;
  padding: 10px 13px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.sidebar a svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar a:hover { background: var(--fundo); color: var(--primaria-escura); }
.sidebar a.ativo { background: var(--primaria-bg); color: var(--primaria-escura); }

.sidebar-rodape {
  margin-top: auto;
  padding: 12px 8px 0;
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.org-atual { font-size: 13px; font-weight: 800; color: var(--texto); }

.conteudo { flex: 1; padding: 26px clamp(16px, 2.5vw, 40px); min-width: 0; }
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.topo h2 {
  color: var(--primaria-escura);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.em-construcao {
  color: var(--texto-suave);
  font-weight: 700;
  text-align: center;
  padding: 60px 20px;
}

/* ---------- tabelas e seções ---------- */
section.cartao { margin-bottom: 20px; }
.secao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.secao-topo h3 { color: var(--primaria); font-size: 17px; }

.rolagem-x { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left;
  color: var(--texto-suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 10px;
  border-bottom: 2px solid var(--borda);
}
.tabela td { padding: 10px; border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: 0; }
.linha-variacao td { background: var(--fundo); font-size: 13px; }

.acoes { text-align: right; white-space: nowrap; }
.btn-peq {
  background: var(--fundo);
  color: var(--texto-suave);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
}
.btn-peq:hover { background: var(--primaria-bg); color: var(--primaria); }
.btn-perigo:hover { background: var(--vermelho-bg); color: var(--vermelho); }
.btn-sec {
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--borda);
}
.btn-sec:hover { background: var(--primaria-bg); }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 99px;
  margin-left: 6px;
}
.badge-vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.badge-verde { background: var(--verde-bg); color: var(--verde); }

/* ---------- dialogs / formulários ---------- */
dialog {
  margin: auto; /* o reset global zera o margin e destrava o dialog do centro */
  border: 0;
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 26px;
  width: min(480px, 92vw);
}
dialog::backdrop { background: rgba(15, 40, 35, .35); }
.form-dlg { display: flex; flex-direction: column; gap: 12px; }
.form-dlg h3 { color: var(--primaria); margin-bottom: 4px; }
.form-dlg label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
}
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-dlg label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.form-dlg label.check input { width: auto; }
.rotulo { font-size: 13px; font-weight: 700; color: var(--texto-suave); margin-top: 4px; }
.botoes-dlg { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.linhas-comp { display: flex; flex-direction: column; gap: 8px; }
.linha-comp {
  display: grid;
  grid-template-columns: 1fr 90px auto;
  gap: 8px;
  align-items: center;
}

/* ---------- kits ---------- */
.grade-kits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.kit-card {
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px;
}
.kit-card ul { list-style: none; margin: 8px 0 12px; color: var(--texto-suave); font-size: 13px; }
.kit-card li { padding: 2px 0; }

/* ---------- precificação ---------- */
.prec-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.prec-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-suave);
}
.prec-custo { margin-bottom: 12px; }
.prec-lucro { color: var(--verde); font-weight: 800; }
.prec-impossivel { color: var(--vermelho); font-weight: 700; }
.prec-nota { color: var(--texto-suave); font-size: 12px; margin-top: 10px; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 12px;
  box-shadow: var(--sombra);
  z-index: 50;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
    padding: 12px;
  }
  .marca { padding: 0 8px; align-self: center; }
  .sidebar-rodape { margin: 0 0 0 auto; padding: 0; border: 0; }
}