/*
 * SAO Vox: página de registro (/registro). Encima de estilos.css, que pone la cabecera, el contenedor y el pie.
 * El formulario manda; al lado, en texto plano y con filetes, lo que trae la prueba. Una columna en móvil, formulario primero.
 */

.registro__cuenta { color: var(--sv-text-2); font-size: var(--sv-text-sm); }
.registro__cuenta a { color: var(--sv-text-1); font-weight: var(--sv-weight-semibold); text-underline-offset: 0.25em; }
@media (max-width: 29.99rem) {
  .registro__pregunta { display: none; }
}

.registro { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem); }
.registro__fila { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 26rem); justify-content: space-between; gap: 3rem clamp(3rem, 8vw, 8rem); align-items: start; }
@media (max-width: 55.99rem) {
  .registro__fila { grid-template-columns: minmax(0, 30rem); }
}

.registro h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); font-weight: var(--sv-weight-bold); line-height: 1.06; letter-spacing: -0.03em; }
.registro__intro { margin-top: 0.75rem; color: var(--sv-text-2); font-size: var(--sv-text-lg); }

.formulario { display: grid; gap: 1.25rem; margin-top: 2rem; }
.formulario__aviso[hidden] { display: none; }
.formulario__aviso:focus { outline: none; }
.formulario__aviso a { color: inherit; font-weight: var(--sv-weight-semibold); }
.formulario__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); gap: 1.25rem 1rem; }
@media (max-width: 29.99rem) {
  .formulario__par { grid-template-columns: minmax(0, 1fr); }
}
.campo__error { color: var(--sv-danger); font-weight: var(--sv-weight-medium); }

.clave { position: relative; }
.clave .sv-campo__control { padding-right: 5.5rem; }
.clave__mostrar {
  position: absolute;
  top: 50%;
  right: 0.375rem;
  transform: translateY(-50%);
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: calc(var(--sv-radius-md) - 2px);
  background: transparent;
  color: var(--sv-text-1);
  font: inherit;
  font-size: var(--sv-text-sm);
  font-weight: var(--sv-weight-semibold);
  cursor: pointer;
}
.clave__mostrar:hover { background: var(--sv-surface-2); }

/* Campo trampa: fuera de la vista y del orden de tabulación; solo lo llena un robot */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulario__enviar { width: 100%; margin-top: 0.5rem; }
.formulario__enviar[disabled] { opacity: 0.7; cursor: progress; }
.formulario__nota { color: var(--sv-text-2); font-size: var(--sv-text-sm); text-align: center; }

.registro__lado { display: grid; gap: 1rem; padding-top: 0.5rem; color: var(--sv-text-2); }
.registro__lado h2 { color: var(--sv-text-1); font-size: var(--sv-text-lg); font-weight: var(--sv-weight-bold); letter-spacing: -0.01em; }
.registro__lado .registro__subtitulo { margin-top: 1.5rem; }
.registro__lado p { max-width: 52ch; }
@media (max-width: 55.99rem) {
  .registro__lado { padding-top: 2.5rem; border-top: 1px solid var(--sv-border-strong); }
}

.ficha { display: grid; }
.ficha > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.25rem 1.25rem; padding-block: 0.875rem; border-top: 1px solid var(--sv-border); }
.ficha > div:last-child { border-bottom: 1px solid var(--sv-border); }
.ficha dt { color: var(--sv-text-1); font-weight: var(--sv-weight-semibold); }
@media (max-width: 23.99rem) {
  .ficha > div { grid-template-columns: minmax(0, 1fr); }
}