/* =======================================================
   🔥 ZAPSUITEX LOGIN — Branding Oficial + UI PRO
   ======================================================= */

/* 🎨 Paleta Oficial */
:root {
  --cor-primaria: #0064ff; /* Azul forte Zap */
  --cor-secundaria: #00b9ff; /* Azul claro */
  --cor-terciaria: #6c5ceb; /* Roxo X */

  --cor-primaria-clara: #4da2ff;
  --cor-terciaria-clara: #a084ff;

  --cor-texto: #0e1b2b; /* Preto premium do logo */
  --cor-fundo: #f5f7fa; /* Fundo claro moderno */

  --radius: 0.75rem;
}

/* =======================================================
   Layout Geral
   ======================================================= */

body {
  background: var(--cor-fundo);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
  margin: 0;
  color: var(--cor-texto);
  font-family: "Inter", system-ui, sans-serif;
}

/* CARD */
.card-login {
  border: none;
  border-radius: var(--radius);
  max-width: 420px;
  background: #fff;

  /* Sombra estilo Figma */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.04),
    0px 20px 40px rgba(0, 0, 0, 0.08);
}

/* =======================================================
   Inputs
   ======================================================= */

.form-label {
  color: #4a4a4a;
}

.form-control {
  border-radius: calc(var(--radius) - 0.25rem);
  padding: 0.65rem 0.9rem;
  border: 1px solid #d7dbe0;
}

.form-control:focus {
  border-color: var(--cor-secundaria);
  box-shadow: 0 0 0 0.25rem rgba(0, 185, 255, 0.25);
}

/* =======================================================
   Botão ZapSuiteX PRO
   ======================================================= */

.btn-zapsuitex {
  --bs-btn-color: #fff;

  /* Estados principais */
  --bs-btn-bg: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);

  /* Hover */
  --bs-btn-hover-bg: var(--cor-secundaria);
  --bs-btn-hover-border-color: var(--cor-secundaria);

  /* Active */
  --bs-btn-active-bg: var(--cor-terciaria);
  --bs-btn-active-border-color: var(--cor-terciaria);

  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  transition: 0.25s ease;
  width: 100%;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

/* =======================================================
   Links
   ======================================================= */

.text-secondary {
  color: var(--cor-primaria) !important;
}

.text-secondary:hover {
  color: var(--cor-secundaria) !important;
}

/* =======================================================
   Responsividade
   ======================================================= */

@media (max-width: 480px) {
  .card-login {
    margin: 0 1rem;
  }
}