/* auth.css — unifies login / registro / recuperar with the admin & creator panels.
   Loaded AFTER each page's inline <style> so it overrides the shared primitives.
   Design language: light page bg (#f7f7f8), white surfaces, 1px borders, subtle
   shadows, DM Sans, brand purple #7429af used sparingly. */

:root {
  --primary: #7429af;
  --primary-dark: #5a1f8e;
  --bg-page: #f7f7f8;
  --surface: #ffffff;
  --border: #e5e5e5;
  --text-1: #171717;
  --text-2: #525252;
  --text-3: #737373;
  --text-muted: #a3a3a3;
}

/* Page background → clean light (matches the panels, no more dark gradient) */
html { background: var(--bg-page) !important; }
body {
  background: var(--bg-page) !important;
  background-attachment: initial !important;
  color: var(--text-1);
}

/* Card → white surface with a subtle border + soft shadow (panel style) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  width: 400px;
  max-width: 100%;
  overflow: hidden;
}

/* Header / typography */
.card-header { padding: 32px 30px 20px; text-align: center; }
.title { color: var(--text-1); font-weight: 700; }
.subtitle { color: var(--text-3); }

/* Brand logo tile stays purple */
.logo {
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* Labels */
.field label { color: var(--text-2); font-size: 12px; font-weight: 600; }

/* Inputs / selects → neutral border, panel radius, brand focus ring */
.field input,
.field select,
.field textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-1);
  font-size: 14.5px;
  background: var(--surface);
}
.field input { height: 46px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(116, 41, 175, 0.1);
}
.field select:disabled { background-color: var(--bg-page); }

/* Neutral select chevron */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Primary button → brand purple, panel radius */
.btn {
  border-radius: 10px;
  height: 48px;
  background: var(--primary);
  font-size: 14.5px;
  font-weight: 600;
}
.btn:hover { background: var(--primary-dark); box-shadow: 0 4px 16px rgba(116, 41, 175, 0.22); }

/* Footer + links */
.card-footer { color: var(--text-3); }
.card-footer a,
.forgot-link { color: var(--primary); font-weight: 600; }

/* Password toggle icon color */
.pw-toggle { color: var(--text-muted); }
.pw-toggle:hover { background: rgba(116, 41, 175, 0.06); color: var(--primary); }

/* Toast → light surface to match the panel (was dark) */
.login-toast {
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--border);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
}
.login-toast-msg { opacity: 1; color: var(--text-3); }

@media (max-width: 480px) {
  .card { border-radius: 16px; }
}