/* ===========================================
  REGISTER - Landing Principal
  Extiende las clases de login.css
=========================================== */

/* -------------------------------------------
  Captcha
------------------------------------------- */
.register-captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

/* -------------------------------------------
  Términos y condiciones
------------------------------------------- */
.register-terms-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.register-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.register-check-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--p-morado);
  cursor: pointer;
}

.register-check-item label {
  font-size: 0.8375rem;
  color: var(--gris);
  line-height: 1.5;
  cursor: pointer;
}

.register-check-item label a {
  color: var(--p-morado);
  font-weight: 500;
}

.register-check-item label a:hover {
  opacity: 0.75;
}

/* -------------------------------------------
  Validación de contraseña
------------------------------------------- */
.register-pwd-requirements {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.register-pwd-req {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--gris);
  margin: 0;
  transition: color 0.2s ease;
}

.register-pwd-req svg {
  flex-shrink: 0;
  color: var(--gris);
  transition: color 0.2s ease;
}

/* La palomita solo se dibuja cuando el requisito ya se cumplió; mientras falta,
   queda el círculo vacío. Así el estado se ve por la FORMA y no solo por el
   color, que es lo único que los separaba: los dos tonos son oscuros y parecidos
   —1.11:1 entre el verde y el gris—, así que quien no distingue rojo de verde
   (cerca de 2 de cada 100 hombres) veía los tres requisitos iguales aunque dos
   ya estuvieran cumplidos. El SVG ya trae el círculo y la palomita por separado,
   y ocultar solo la palomita no mueve el texto de sitio.

   Va en `path` y no en el SVG entero para que el círculo se quede. */
.register-pwd-req svg path      { opacity: 0; transition: opacity 0.2s ease; }
.register-pwd-req--met svg path { opacity: 1; }

/* El verde de TEXTO, no el de marca: este texto es pequeño y es el que dice si
   la contraseña ya sirve, así que hay que poder leerlo de una ojeada. El de
   marca da 2.56:1 sobre blanco, la mitad del mínimo. */
.register-pwd-req--met     { color: var(--p-verde-texto); }
.register-pwd-req--met svg { color: var(--p-verde-texto); }

.register-pwd-match {
  font-size: 0.8125rem;
  margin-top: 0.375rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.register-pwd-match--ok    { color: var(--p-verde-texto); }
.register-pwd-match--error { color: #dc3545; }

/* -------------------------------------------
  Modal protección de datos
------------------------------------------- */
.register-modal .modal-header {
  background: var(--p-morado);
  padding: 1.25rem 1.5rem;
}

.register-modal .modal-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.register-modal .modal-body {
  font-size: 0.875rem;
  color: var(--gris-oscuro);
  line-height: 1.7;
  max-height: 50vh;
  overflow-y: auto;
}

.register-modal .modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.register-modal-btn {
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.5rem;
  border: none;
  background: var(--p-morado);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
}

.register-modal-btn:hover {
  background: #6253c8;
}