/* ── tokens ──────────────────────────────────────────────────────────── */
:root {
  --accent:       #6B5FE8;
  --accent-glow:  rgba(107, 95, 232, 0.35);
  --accent-focus: rgba(107, 95, 232, 0.18);

  /* dark (default) */
  --bg:           #0A0A0F;
  --bg-card:      rgba(255, 255, 255, 0.042);
  --border-card:  rgba(255, 255, 255, 0.08);
  --bg-input:     rgba(255, 255, 255, 0.06);
  --border-input: rgba(255, 255, 255, 0.10);
  --text:         #E8E8F2;
  --text-muted:   #70708A;
  --shadow-card:  none;
  --glow:         radial-gradient(
                    ellipse 70% 55% at 50% 36%,
                    rgba(107, 95, 232, 0.14) 0%,
                    transparent 68%
                  );
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:           #FAFAFA;
    --bg-card:      #FFFFFF;
    --border-card:  rgba(0, 0, 0, 0.07);
    --bg-input:     #F4F4F8;
    --border-input: #E0E0EA;
    --text:         #1A1A2E;
    --text-muted:   #8080A0;
    --shadow-card:  0 8px 40px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    --glow:         radial-gradient(
                      ellipse 70% 55% at 50% 36%,
                      rgba(107, 95, 232, 0.055) 0%,
                      transparent 68%
                    );
  }
}

/* ── reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* garantiza que [hidden] siempre gane, incluso dentro de flex/grid */
[hidden] {
  display: none !important;
}

/* ── base ────────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  background-image: var(--glow);
  background-attachment: fixed;
  color: var(--text);
  /* dvh para mobile (evita saltos con barra del navegador) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── layout ──────────────────────────────────────────────────────────── */
.page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding vertical compacto en mobile, más holgado en desktop */
  padding: clamp(1.25rem, 5vw, 2.5rem) 1rem;
}

/* ── card ────────────────────────────────────────────────────────────── */
.card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: clamp(1.625rem, 6vw, 2.25rem);
  box-shadow: var(--shadow-card);
  animation: card-in 0.25s ease both;
}

@media (prefers-color-scheme: dark) {
  .card {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

/* ── logo ────────────────────────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 5vw, 2rem);
}

/* display:contents hace <picture> invisible al layout →
   el <img> se convierte en flex child directo, sin ambigüedad en Firefox */
/* .logo-wrap picture {
  display: contents;
} */

.logo {
  width: clamp(110px, 42%, 175px);
  height: auto;
  display: block;
  flex-shrink: 1;
}

.logo-icon {
  display: block;
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ── form ────────────────────────────────────────────────────────────── */
form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.field-group {
  display: flex;
  flex-direction: column;
}

.field {
  width: 100%;
  height: 48px;           /* mínimo táctil recomendado */
  padding: 0 1rem;
  font-size: 1rem;        /* ≥16px: evita zoom automático en iOS al enfocar */
  font-family: inherit;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.field::placeholder {
  color: var(--text-muted);
}

.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus);
}

/* ── remember checkbox ───────────────────────────────────────────────── */
.remember-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.remember-check {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  forced-color-adjust: none;   /* evita que Windows/Firefox sobreescriban colores */
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  /* Colores explícitos (opacos) para que Firefox no los compute mal */
  border: 1.5px solid #2E2E44;
  border-radius: 3px;
  background: #111118;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  box-sizing: border-box;
}

@media (prefers-color-scheme: light) {
  .remember-check {
    background: #F4F4F8;
    border-color: #D0D0E0;
  }
}

.remember-check:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.remember-check:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.remember-check:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus);
}

/* ── error ───────────────────────────────────────────────────────────── */
.error-msg {
  font-size: 0.875rem;
  color: #F87171;
  text-align: center;
  padding: 0.25rem 0.25rem;
  line-height: 1.45;
  /* ocupa espacio solo cuando visible para no romper el layout */
}

/* ── submit button ───────────────────────────────────────────────────── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 48px;
  margin-top: 0.25rem;
  padding: 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #FFFFFF;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  /* evitar doble-tap zoom en iOS */
  touch-action: manipulation;
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: 0 4px 22px var(--accent-glow);
}

.btn-primary:active:not(:disabled) {
  filter: brightness(0.94);
  box-shadow: none;
}

.btn-primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── spinner (CSS puro) ──────────────────────────────────────────────── */
.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.7s linear infinite;
}

.btn-primary.loading .btn-spinner {
  display: block;
}

/* ── forgot / card-help ──────────────────────────────────────────────── */
.card-help {
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-card);
  display: flex;
  justify-content: center;
}

.forgot-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.forgot-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── modal overlay ───────────────────────────────────────────────────── */
.modal-overlay:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 100;
  animation: fadeIn 0.18s ease both;
}

/* ── modal box ───────────────────────────────────────────────────────── */
.modal-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  padding: 1.75rem 1.75rem 1.625rem;
  box-shadow: var(--shadow-card);
  animation: card-in 0.2s ease both;
}

@media (prefers-color-scheme: dark) {
  .modal-box {
    background: rgba(14, 14, 22, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ── modal close button ──────────────────────────────────────────────── */
.modal-close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.modal-close:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-input);
}

.modal-close:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ── modal content ───────────────────────────────────────────────────── */
.modal-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  padding-right: 1.5rem; /* no solaparse con la X */
}

.modal-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.modal-info strong {
  color: var(--text);
  font-weight: 500;
}

/* ── modal steps (mostrados/ocultados con [hidden]) ──────────────────── */
.modal-step-col:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-step-center:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

.modal-step-result:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
  padding: 0.25rem 0;
}

/* ── modal spinner ───────────────────────────────────────────────────── */
.modal-spinner-ring {
  display: block;
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-input);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.modal-processing-text {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ── modal result ────────────────────────────────────────────────────── */
.modal-result-icon {
  line-height: 1;
}

.modal-result-msg {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 28ch;
}

.modal-result-msg.is-success { color: #4ADE80; }
.modal-result-msg.is-error   { color: #F87171; }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer a:hover {
  color: var(--text);
}

.lang-toggle {
  background: none;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.lang-toggle:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ── accesibilidad ───────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── animaciones ─────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── mobile fine-tuning (≤ 480px) ───────────────────────────────────── */
@media (max-width: 480px) {
  .page {
    /* card casi borde a borde en pantallas muy pequeñas */
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
}