:root {
  --azul: #2f6fed;
  --azul-claro: #eaf1ff;
  --verde: #17a689;
  --verde-claro: #e6f8f4;
  --tinta: #1c2430;
  --tinta-suave: #5b6472;
  --linha: #e6e9ef;
  --fundo: #f6f8fb;
  --branco: #ffffff;
  --alerta: #d9534f;
  --alerta-claro: #fdecea;
  --aviso: #b7791f;
  --aviso-claro: #fdf3dd;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(28, 36, 48, 0.06), 0 8px 24px rgba(28, 36, 48, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.topbar {
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.marca .ponto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul), var(--verde));
}

.nav-principal {
  display: flex;
  gap: 4px;
}

.nav-principal a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-suave);
}

.nav-principal a.ativo,
.nav-principal a:hover {
  background: var(--azul-claro);
  color: var(--azul);
}

.usuario {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--tinta-suave);
}

.usuario a { color: var(--azul); font-weight: 500; }

.pagina {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 28px 64px;
}

.cabecalho-pagina {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.cabecalho-pagina h1 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}

.cabecalho-pagina p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  background: var(--azul);
  color: white;
}

.btn:hover { filter: brightness(1.06); }

.btn.secundario {
  background: var(--branco);
  color: var(--tinta);
  border-color: var(--linha);
}

.btn.perigo { background: var(--alerta); }
.btn.fantasma {
  background: transparent;
  color: var(--tinta-suave);
  border-color: var(--linha);
}
.btn.pequeno { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 22px;
}

.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.stat-card .numero {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stat-card .rotulo {
  color: var(--tinta-suave);
  font-size: 13px;
  margin-top: 2px;
}

.lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.linha-lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px 18px;
  gap: 12px;
}

.linha-lista:hover { border-color: var(--azul); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.azul { background: var(--azul-claro); color: var(--azul); }
.badge.verde { background: var(--verde-claro); color: var(--verde); }
.badge.aviso { background: var(--aviso-claro); color: var(--aviso); }
.badge.alerta { background: var(--alerta-claro); color: var(--alerta); }
.badge.cinza { background: #eef0f3; color: var(--tinta-suave); }

.aviso-ia {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--aviso-claro);
  border: 1px solid #f1dca3;
  color: #7a5310;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}

.selo-demo {
  display: inline-block;
  background: var(--alerta);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

form.form-padrao {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.campo input, .campo select, .campo textarea {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--linha);
  font-size: 14px;
  font-family: inherit;
  background: var(--branco);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-claro);
}

.erros-form { color: var(--alerta); font-size: 13px; }

.mensagens { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.mensagem {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14px;
  background: var(--verde-claro);
  color: #0d5f4e;
}
.mensagem.error { background: var(--alerta-claro); color: #8a2c29; }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 20px; }
.abas a {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 550;
  color: var(--tinta-suave);
  border-bottom: 2px solid transparent;
}
.abas a.ativo { color: var(--azul); border-color: var(--azul); }

.escondido { display: none !important; }

.vazio {
  text-align: center;
  padding: 48px 20px;
  color: var(--tinta-suave);
  font-size: 14px;
}