/* Registro propio: la misma tarjeta de la entrada del panel, con avance de tres pasos. */
.registro .hoja-entrar { animation: aparecer var(--t-entrar) var(--ease); }
.registro-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.registro-cabeza .marca-producto { color: var(--tinta); text-decoration: none; }
.paso-texto { font-size: 13px; font-weight: 500; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.pasos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 18px 0 0; padding: 0; }
.pasos li { height: 3px; border-radius: 2px; background: var(--linea-fuerte); transition: background-color var(--t-rapido) var(--ease); }
.pasos li.hecho { background: var(--accion); }
.registro .hoja-entrar h1 { text-wrap: balance; }
.registro .hoja-entrar h1:focus { outline: none; }
.registro .bajada { margin-bottom: 22px; }
.registro .bajada b { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
.registro .entrada.mono { font-family: var(--mono); font-size: 16px; }
.registro .campo > .ayuda { margin-top: 2px; }
.registro .hoja-entrar .boton.texto { width: 100%; margin-top: 6px; }
.registro .otra-via { margin-top: 16px; }

.nota-correo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio-sm); background: var(--hundido); color: var(--tinta-2); font-size: 15px; }
.nota-correo .icono { margin-top: 2px; color: var(--accion); flex: none; }
.nota-correo + .alerta, .nota-correo + .alerta + .boton { margin-top: 22px; }

/* Un metodo a la vez: filas con regla, no tarjetas. Los campos se abren debajo de la fila elegida. */
.opciones { border: 0; border-top: 1px solid var(--linea); margin: 0; padding: 0; min-width: 0; }
.opcion { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.opcion input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); background: var(--hundido); cursor: pointer; transition: border-color var(--t-rapido) var(--ease), border-width var(--t-rapido) var(--ease); }
.opcion input:checked { border: 7px solid var(--accion); }
.opcion input:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
.opcion-texto { display: grid; gap: 2px; }
.opcion-texto b { font-weight: 600; font-size: 16px; }
.opcion-texto small { font-size: 14px; color: var(--tinta-3); }
.opcion:has(input:checked) { border-bottom-color: transparent; }
.registro .opcion-campos { grid-template-columns: 1fr; margin: 0 0 0 36px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.registro form > .boton[type=submit] { margin-top: 20px; }

.listo .creado-url { overflow-wrap: anywhere; }
.listo .a-panel { width: 100%; margin-top: 10px; }

@media (hover: hover) and (pointer: fine) {
  .opcion:hover input:not(:checked) { border-color: var(--accion); }
}
@media (max-width: 520px) {
  .registro .opcion-campos { margin-left: 0; }
}
/* Negocio o persona (solo en la demo): va primero y marca qué campos siguen. */
.tipo-cuenta { border-top: 0; margin-bottom: 22px; }
.tipo-cuenta legend { padding: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.legal { margin: 4px 0 12px; font-size: 13px; }
.legal a { color: var(--tinta-2); text-underline-offset: 3px; }