/* Importação de Fontes */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Reset e Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #020617; /* bg-slate-950 */
  color: #f1f5f9; /* text-slate-100 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

::selection {
  background-color: #f97316; /* selection:bg-orange-500 */
  color: #ffffff;
}

/* Card Principal */
.login-card {
  width: 100%;
  max-width: 28rem; /* max-w-md */
  background-color: #0f172a; /* bg-slate-900 */
  border: 1px solid #1e293b; /* border-slate-800 */
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* shadow-2xl */
}

.login-card > * + * {
  margin-top: 2rem; /* space-y-8 */
}

/* Header & Logo */
.card-header {
  text-align: center;
}

.card-header > * + * {
  margin-top: 0.75rem; /* space-y-3 */
}

.brand-logo {
  width: 10rem; /* w-40 */
  height: auto;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  display: block;
}

.title-wrapper > * + * {
  margin-top: 0.25rem; /* space-y-1 */
}

.login-title {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.025em;
}

.login-subtitle {
  font-size: 0.75rem; /* text-xs */
  color: #94a3b8; /* text-slate-400 */
}

/* Alerta de Erro */
.error-alert {
  padding: 1rem;
  border-radius: 0.75rem; /* rounded-xl */
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171; /* text-red-400 */
  font-size: 0.75rem;
  text-align: center;
  font-weight: 500;
}

.error-alert.hidden {
  display: none;
}

/* Formulário */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space-y-5 */
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem; /* space-y-1.5 */
}

.input-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #cbd5e1; /* text-slate-300 */
}

.input-field {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #020617; /* bg-slate-950 */
  border: 1px solid #1e293b; /* border-slate-800 */
  border-radius: 0.75rem; /* rounded-xl */
  font-size: 0.75rem;
  color: #ffffff;
  outline: none;
  transition: all 0.2s ease;
}

.input-field::placeholder {
  color: #64748b; /* placeholder-slate-500 */
}

.input-field:focus {
  border-color: #f97316; /* focus:border-orange-500 */
  box-shadow: 0 0 0 1px #f97316;
}

/* Botão Entrar */
.btn-submit {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: #f97316; /* bg-orange-500 */
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-submit:hover {
  background-color: #ea580c; /* hover:bg-orange-600 */
}

.btn-submit:active {
  transform: scale(0.98);
}

.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Footer */
.footer-text {
  text-align: center;
  font-size: 10px;
  color: #64748b; /* text-slate-500 */
}