/* ===== Reset mínimo + base tipográfica ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  color: #1f2937; /* gray-800 */
  background: linear-gradient(135deg, #FAF5FF 0%, #FFF1F2 50%, #F0F9FF 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Layout ===== */
.container-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.login-wrap { width: min(100%, 440px); }

.login-card {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.15);
}

/* ===== Header ===== */
.login-head { text-align: center; margin-bottom: 1.5rem; }
.head-icon {
  width: 64px; height: 64px; margin: 0 auto .75rem;
  border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(135deg, #f3e8ff, #ffe4e6);
}
.icon { width: 32px; height: 32px; color: #a78bfa; display: block; }
h1 { font-size: 1.6rem; margin: .25rem 0 .2rem; font-weight: 650; }
.subtitle { margin: 0; font-size: .95rem; color: #6b7280; }

/* ===== Alerts/erros ===== */
.alert {
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
  color: #ef4444;
  padding: .75rem .9rem;
  border-radius: .8rem;
  margin-bottom: 1rem;
}
.field-error { margin-top: .35rem; }
.field-error small { color: #ef4444; }

/* ===== Form ===== */
.login-form { display: grid; gap: 1rem; }
.label {
  display: block; font-size: .92rem; color: #374151; margin-bottom: .35rem; font-weight: 500;
}

.input-icon { position: relative; height: 48px; }
.input-icon .icon-left {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: #9ca3af; display: block; pointer-events: none;
}

.input-icon input {
  width: 100%; height: 48px;
  padding: 0 .9rem 0 2.6rem; /* espaço para ícone à esquerda */
  border: 1px solid #e5e7eb;
  border-radius: .9rem;
  background: rgba(249,250,251,.6);
  color: #111827;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-icon input::placeholder { color: #9ca3af; }
.input-icon input:focus {
  border-color: #d8b4fe; /* purple-300 */
  box-shadow: 0 0 0 4px rgba(216,180,252,.25);
  background: #fff;
}

/* link auxiliar */
.row-right { display: flex; justify-content: flex-end; margin-top: .2rem; }
.link {
  color: #a78bfa; text-decoration: none; font-weight: 500;
  transition: color .2s ease;
}
.link:hover { color: #8b5cf6; }

/* ===== Botão ===== */
.btn-gradient {
  width: 100%; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: none; border-radius: .9rem;
  background: linear-gradient(90deg, #a78bfa, #f0abfc);
  color: #374151; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px rgba(168,85,247,.25);
  transition: transform .1s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, opacity .2s ease;
}
.btn-gradient .icon-right { width: 20px; height: 20px; color: #4b5563; display: inline-block; }
.btn-gradient:hover {
  background: linear-gradient(90deg, #c4b5fd, #f5c2fd);
  box-shadow: 0 10px 22px rgba(168,85,247,.32);
  filter: brightness(1.02);
}
.btn-gradient:active { transform: translateY(1px); }
.btn-gradient:disabled { opacity: .7; cursor: not-allowed; }

/* estado “Entrando…” com spinner simples */
.is-loading {
  position: relative;
}
.is-loading .icon-right { opacity: 0; }
.is-loading::after {
  content: ""; position: absolute; right: 14px; width: 18px; height: 18px;
  border: 2px solid rgba(55,65,81,.35); border-top-color: rgba(55,65,81,.9);
  border-radius: 999px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg);} }

/* ===== Rodapé ===== */
.signup { margin-top: 1rem; text-align: center; color: #6b7280; }
.terms { margin-top: .9rem; text-align: center; font-size: .75rem; color: #9ca3af; }

/* ===== Acessibilidade ===== */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}


/* === THEME: STEEL (Cinza & Azul-petróleo) === */
.theme-steel{
  --bg-grad: linear-gradient(135deg, #E5E7EB 0%, #CBD5E1 100%); /* cinzas frios */
  --glass-bg: rgba(255,255,255,0.88);
  --glass-brd: rgba(148,163,184,0.35); /* #94A3B8 */
  --text-1: #1E293B;  /* slate-800 */
  --text-2: #64748B;  /* slate-500 */

  /* Botão: azul-petróleo */
  --brand-1: #0EA5E9;       /* sky-500 */
  --brand-2: #0369A1;       /* sky-800 */
  --brand-1-hover: #38BDF8; /* sky-400 */
  --brand-2-hover: #0EA5E9; /* sky-500 */

  /* Focus/realce */
  --focus-ring: rgba(14,165,233,.25); /* sky-500 */
}

/* pequenos ajustes de contraste no tema */
.theme-steel .login-card{ box-shadow: 0 20px 40px rgba(2,132,199,0.12); } /* cyan-ish */
.theme-steel .input-icon input:focus{
  border-color:#7DD3FC; /* sky-300 */
  box-shadow:0 0 0 4px var(--focus-ring);
}
.theme-steel .btn-gradient{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:#0F172A; /* slate-900 */
}
.theme-steel .btn-gradient:hover{
  background: linear-gradient(90deg, var(--brand-1-hover), var(--brand-2-hover));
}
.theme-steel .head-icon{ background: linear-gradient(135deg, #E2E8F0, #D1D5DB); }
.theme-steel .icon{ color:#0284C7; } /* cyan-600 */
.theme-steel .link{ color:#0284C7; }
.theme-steel .link:hover{ color:#0369A1; }



/* === THEME: OLIVEGOLD (Verde escuro & Dourado) === */
.theme-olivegold{
  --bg-grad: linear-gradient(135deg, #F3F6F4 0%, #E9F1EB 100%); /* off-white esverdeado */
  --glass-bg: rgba(255,255,250,0.9); /* leve “creme” */
  --glass-brd: rgba(180, 83, 9, 0.18); /* dourado queimado #B45309 */
  --text-1: #374151;  /* gray-700 */
  --text-2: #6B7280;  /* gray-500 */

  /* Botão: verde profundo → verde médio */
  --brand-1: #065F46;       /* emerald-900 */
  --brand-2: #10B981;       /* emerald-500 */
  --brand-1-hover: #0B7A5A; /* tom intermediário */
  --brand-2-hover: #34D399; /* emerald-400 */

  /* Focus/realce em verde */
  --focus-ring: rgba(16,185,129,.25); /* emerald-500 */
}

.theme-olivegold .login-card{ box-shadow: 0 20px 40px rgba(6,95,70,0.14); }
.theme-olivegold .input-icon input{
  background: rgba(250, 250, 245, .7); /* “papel” */
}
.theme-olivegold .input-icon input:focus{
  border-color:#6EE7B7; /* emerald-300 */
  box-shadow:0 0 0 4px var(--focus-ring);
  background:#fffef8;
}
.theme-olivegold .btn-gradient{
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:#F9FAFB; /* quase branco para contraste */
}
.theme-olivegold .btn-gradient:hover{
  background: linear-gradient(90deg, var(--brand-1-hover), var(--brand-2-hover));
}
.theme-olivegold .head-icon{ background: linear-gradient(135deg, #ECFDF5, #FFFBEB); } /* verde→dourado suave */
.theme-olivegold .icon{ color:#065F46; } /* verde escuro */
.theme-olivegold .link{ color:#0E7490; } /* teal-700 para links */
.theme-olivegold .link:hover{ color:#115E59; } /* teal-800 */