/**
 * @file
 * Aviso de correo repetido que no coincide.
 */

.ccv-registro__aviso {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #a91b40;
  background: #fdf3f6;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #7d1430;
}

.ccv-registro__aviso:empty {
  display: none;
}

/* Aviso de coincidencia que dibuja el núcleo.
   Lo pinta siempre, incluso sin nada escrito: mostraba «Los correos
   coinciden:» sin respuesta y reservaba una línea, abriendo un hueco de
   55 px hasta el campo siguiente. El JavaScript le pone la clase cuando ya
   hay algo que decir. */
.password-confirm-message {
  height: 0;
  margin: 0;
  overflow: hidden;
}

.password-confirm-message.ccv-con-veredicto {
  height: auto;
  margin-top: 0.4rem;
  overflow: visible;
}

/* Casillas de verificación.
   El tema las heredaba con la altura de un campo de texto —34x46, más altas
   que anchas— y con la etiqueta debajo en lugar de al lado. Se corrige para
   todas las del portal, no solo las del registro: el problema venía del
   tema y aparecía en cualquier formulario. */
.js-form-type-checkbox,
.form-type-checkbox,
.js-form-type-boolean {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.6rem;
  row-gap: 0.2rem;
}

.js-form-type-checkbox input[type="checkbox"],
.form-type-checkbox input[type="checkbox"],
.js-form-type-boolean input[type="checkbox"] {
  /* Cuadrada y alineada con la primera línea del texto. */
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  flex: none;
  /* El texto arranca en 1.5 de interlineado; se centra la casilla con él. */
  margin-top: 0.2rem;
  cursor: pointer;
}

.js-form-type-checkbox > label,
.form-type-checkbox > label,
.js-form-type-boolean > label {
  grid-column: 2;
  margin: 0;
  line-height: 1.45;
  cursor: pointer;
}

/* La ayuda se alinea con la etiqueta, no con la casilla. */
.js-form-type-checkbox > .description,
.form-type-checkbox > .description,
.js-form-type-boolean > .description {
  grid-column: 2;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Registro: secciones y dos columnas
   ───────────────────────────────────────────────────────────── */

/* En escritorio el formulario tenía 640px fijos y dejaba media pantalla sin
   usar. Se ensancha lo justo: pasado cierto punto, las líneas se vuelven
   difíciles de seguir de un renglón al siguiente. */
.ccv-registro {
  max-width: 56rem;
}

/* Sin caja ni borde: el encabezado ya separa las secciones. Encerrar cada
   una en un recuadro añadía casi 100px de relleno por sección — más de lo
   que ahorraban las dos columnas, y el formulario acababa más largo que
   antes de agruparlo. */
.ccv-seccion {
  margin: 0 0 1.35rem;
}

.ccv-seccion__titulo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e3e4e8;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ccv-rojo, #a91b40);
}

.ccv-seccion__ayuda {
  margin: -0.5rem 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #55565a;
}

/* Rejilla de dos columnas: los campos ocupan el ancho completo salvo los
   marcados como pareja. */
.ccv-seccion__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

.ccv-seccion__campos > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.ccv-seccion__campos > .ccv-media {
  grid-column: span 1;
}

/* Tres en fila para país, departamento y ciudad. La rejilla se declara con
   seis columnas para poder repartir en mitades y en tercios sin cambiar de
   contenedor. */
.ccv-seccion__campos {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ccv-seccion__campos > .ccv-media {
  grid-column: span 3;
}

.ccv-seccion__campos > .ccv-tercio {
  grid-column: span 2;
}

/* Se aprieta la separación entre campos: con 17 campos, cada píxel de más
   se multiplica y es lo que hacía el formulario interminable. */
.ccv-registro .js-form-item {
  margin-bottom: 1rem;
}

.ccv-registro .description {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Una sola columna solo en teléfono. El corte estaba en 768px y dejaba a
   las tabletas —y a media pantalla de portátil— con una columna teniendo
   sitio de sobra: el formulario se volvía tres pantallas y media. */
@media (max-width: 36rem) {
  .ccv-seccion__campos {
    grid-template-columns: 1fr;
  }

  .ccv-seccion__campos > .ccv-media,
  .ccv-seccion__campos > .ccv-tercio {
    grid-column: 1 / -1;
  }
}

/* «Repita su email» y «Confirme su email» son el mismo dato dos veces: van
   uno al lado del otro. Drupal los envuelve en un contenedor propio, así que
   la rejilla se aplica ahí dentro y no en la sección. */
.ccv-registro .js-form-type-password-confirm,
.ccv-registro .form-type-password-confirm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  align-items: start;
}

.ccv-registro .js-form-type-password-confirm > .js-form-item,
.ccv-registro .form-type-password-confirm > .js-form-item {
  margin-bottom: 0;
}

/* La ayuda del par ocupa las dos columnas. */
.ccv-registro .js-form-type-password-confirm > .description,
.ccv-registro .form-type-password-confirm > .description {
  grid-column: 1 / -1;
}

@media (max-width: 36rem) {
  .ccv-registro .js-form-type-password-confirm,
  .ccv-registro .form-type-password-confirm {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
}

/* Entre tableta y escritorio, tres campos por fila dejan cada uno unos
   230px: se aprietan las etiquetas largas. Pasan a dos por fila. */
@media (min-width: 36.0625rem) and (max-width: 62rem) {
  .ccv-seccion__campos > .ccv-tercio {
    grid-column: span 3;
  }
}

/* En teléfono el encabezado de sección pesa proporcionalmente mucho más:
   con cinco secciones sumaba casi trescientos píxeles. Se abrevia sin
   perder la separación entre bloques. */
@media (max-width: 36rem) {
  .ccv-seccion {
    margin-bottom: 1rem;
  }

  .ccv-seccion__titulo {
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    font-size: 0.8125rem;
  }

  .ccv-registro .js-form-item {
    margin-bottom: 0.85rem;
  }
}