/* ══════════════════════════════════════════════════════════════════
   LA VENTANA DE ACCESO («Entrar») EN LA PORTADA NUEVA — 04/09/2026
   La portada nueva (index.html) no carga styles.css (tiene sus propias
   hojas), pero sí necesita la ventana de acceso que vivía en la portada
   antigua. Estas son las reglas de styles.css que usa esa ventana, con
   sus variables de color puestas AQUÍ dentro para no depender de nadie
   y con todo acotado a la ventana (.modal-overlay) y a los avisos
   (.toast-stack) para no pisar los estilos de la portada.
   Si se cambia la ventana en styles.css, revisar aquí.
   ══════════════════════════════════════════════════════════════════ */
.modal-overlay, .toast-stack {
  --ink: #141A26; --ink-soft: #3D4459; --muted: #6B7290; --paper: #F7F7FB; --surface: #FFFFFF;
  --line: #E4E4F0; --accent: #5B2FD6; --accent-ink: #4423A8; --accent-soft: #EDE7FB; --success: #2F7A5C;
  --shadow: 0 1px 2px rgba(20, 26, 38, 0.05), 0 8px 24px rgba(20, 26, 38, 0.08);
  --radius-s: 8px; --radius-l: 22px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 16, 13, .55); z-index: 900;
  display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay[data-open="true"] { display: flex; }
.modal {
  position: relative;
  background: var(--surface); border-radius: var(--radius-l); padding: 2rem; max-width: 420px; width: 100%;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1.1rem; max-height: 90vh; overflow-y: auto;
}
.modal h3 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.modal p { margin: 0; }
.modal .muted { color: var(--muted); }
.modal-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 2.1rem; height: 2.1rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
  z-index: 2;
}
.modal-close:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.modal-overlay .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: var(--radius-s); font-weight: 700; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem; white-space: nowrap;
  transition: transform .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.modal-overlay .btn-primary { background: var(--accent); color: #FBF3EF; }
.modal-overlay .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.modal-overlay .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.modal-overlay .btn-ghost:hover { border-color: var(--accent); }
.modal-overlay .btn-block { width: 100%; }
.modal-overlay .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }
.modal-overlay .btn-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.modal-overlay .btn-link:hover { color: var(--accent); }
.modal-overlay .field { display: flex; flex-direction: column; gap: .4rem; }
.modal-overlay .field label { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.modal-overlay .field input {
  font: inherit; padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface); color: var(--ink);
  transition: border-color .2s var(--ease-out);
}
.modal-overlay .field input:focus { border-color: var(--accent); outline: none; }
.modal-overlay .form-msg { font-size: .88rem; padding: .7rem .9rem; border-radius: var(--radius-s); }
.modal-overlay .form-msg-error { background: #FBEAE7; color: #8A2F26; }
.modal-overlay .form-msg-ok { background: #E6F2EC; color: var(--success); }
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 950; display: flex; flex-direction: column; gap: .6rem; }
.toast {
  background: var(--ink); color: var(--paper); padding: .8rem 1.1rem; border-radius: var(--radius-s);
  font-size: .88rem; box-shadow: var(--shadow); max-width: 320px;
}
.toast-error { background: #8A2F26; }
.toast-ok { background: var(--success); }

/* El botón «Continuar con Google» de la ventana de Entrar (13/09/2026): el
   aspecto de Google (blanco, borde gris, la G de colores) y el mismo gesto al
   pasar el ratón que el resto de botones — se levanta un pelín y coge sombra. */
.btn-google {
  gap: 10px; background: #fff; color: #1F1F1F; border: 1px solid #DADCE0;
  font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.btn-google:hover {
  /* Más marcado (Rafael, 13/09): sube 3 px, sombra grande y el borde se pone
     del azul de Google. Se nota sin gritar. */
  background: #fff; border-color: #4285F4;
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 28px rgba(66, 133, 244, .28), 0 2px 6px rgba(0, 0, 0, .10);
}
.btn-google:hover svg { transform: scale(1.15); }
.btn-google svg { transition: transform .2s ease; }
.btn-google svg { flex: 0 0 auto; }