/* Personalización de la página de registro (empezar.html).
   Inspirado en signin.png: tarjeta blanca flotando sobre fondo oscuro,
   encabezado grande, checkbox de términos, botones apilados del mismo
   ancho/alto/radio. Todo lo custom de esta página va acá, no inline. */

.registro-card {
  /* Vuelve a colores "claros" adentro de la tarjeta aunque la sección
     padre sea .dark-background (mismo mecanismo que .light-background
     usa en main.css: pisar las custom properties, no cada regla). */
  --background-color: #ffffff;
  --default-color: #444444;
  --heading-color: #151515;
  --surface-color: #ffffff;
  --contrast-color: #312f2f;

  background: var(--background-color);
  border-radius: 20px;
  padding: 44px 36px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
}

.registro-card h2 {
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--heading-color);
  margin-bottom: 12px;
}

.registro-card p.registro-subtitle {
  color: color-mix(in srgb, var(--default-color), white 25%);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.registro-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), white 25%);
  margin-bottom: 26px;
  text-align: left;
  cursor: pointer;
}

.registro-terms input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.pass-wrapper {
  position: relative;
}

.pass-wrapper .toggle-pass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  cursor: pointer;
  font-size: 15px;
}

/* Botones apilados: mismo ancho, alto y radio para Google y Email.
   El borde va en el contenedor (no se puede tocar el botón real de Google,
   vive en un iframe ajeno) para que resalte un poco más que el borde fino
   que trae por defecto el widget. */
#google-btn-container {
  height: auto;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  border: 2px solid var(--accent-color);
  border-radius: 10px;
  padding: 4px;
}

#google-btn-inner {
  display: flex;
  justify-content: center;
  width: 100%;
}

#email-btn-container,
#email-submit-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Botón grande amarillo, compartido entre "Registrarse con email" (paso 1)
   y "Registrarse" (submit del paso 2) — mismo ancho/alto/radio que el de Google */
.btn-registro {
  width: 100%;
  height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #151515;
  border: 0;
  border-radius: 10px;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  transition: 0.3s;
}

.btn-registro:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* Paso 2: label arriba de cada campo, como signupemail.png */
.registro-field {
  margin-bottom: 18px;
  text-align: left;
}

.registro-field label {
  display: block;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--heading-color);
  margin-bottom: 6px;
}

.registro-status {
  margin-top: 16px;
}

/* Estos 3 mensajes vivían dentro de <form class="php-email-form"> y su
   display:none/estilo por defecto venían de main.css scoped a esa clase
   (.php-email-form .loading/.error-message/.sent-message). Al moverlos afuera
   (para que el de Google se vea aunque el paso 2 esté oculto) dejaron de
   matchear esa regla — se replica acá, scoped a .registro-status. El
   display:none real ahora está inline en el HTML (no depende del CSS). */
.registro-status .error-message {
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.registro-status .sent-message {
  color: #151515;
  background: var(--accent-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.reenviar-verificacion {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 400;
}

.reenviar-verificacion a {
  color: #151515;
  text-decoration: underline;
}

.registro-status .loading {
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.registro-status .loading::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: registro-loading-spin 1s linear infinite;
}

@keyframes registro-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* El template pone height:100% al form en .contact, lo que empuja el
   contenido posterior fuera de la vista */
#form-registro {
  height: auto !important;
}