/* ============================================================
   vestir-entrar.css · F8 (26/09/2026, Claude Code en la nube) · ENTRAR, LOS 6 REGISTROS, CONTRASEÑA OLVIDADA/NUEVA, DOBLE FACTOR
   Viste los formularios de User Registration Pro 6.2.8 (+ Multi-Part, Advanced Fields, Conditional Logic, Two Factor) SIN el CSS
   del plugin: inc/vestir-plugins.php quita user-registration-general, user-registration-pro-frontend-style,
   ur-multi-part-frontend-style, ur-frontend-small-screen y urcma-frontend en estas páginas (solo con VL_VESTIR activo).
   Por eso aquí va TAMBIÉN la estructura (filas, columnas, ocultos), no solo el aspecto. Clases medidas en la réplica el 26/09
   (43 en el registro de ópticas, 30 en el login). Tokens de tokens.css · sin !important · sin @layer · móvil primero.
   Lo que el plugin ponía en línea y hay que ganar sin !important: style="width:48%" en cada columna → min-width:100% a 375.
   ============================================================ */

/* ---------- 1 · Lo que user-registration.css escondía y hay que seguir escondiendo (medido con grep display:none) ---------- */
.vl-vestir .ur-hidden,
.vl-vestir .login-registration .hidden,
.vl-vestir .user-registration-error > svg,
.vl-vestir .ur-message-container svg,
.vl-vestir .ur-form-row .ur-form-grid .ur-input-with-icon svg,
.vl-vestir .user-registration:not(.user-registration-MyAccount) .ur-form-row br { display: none; }

/* ---------- 2 · El marco del formulario: sin caja dentro de caja (la tarjeta la pone la plantilla del tema) ---------- */
.vl-vestir .ur-frontend-form,
.vl-vestir .user-registration { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; }
.vl-vestir .ur-frontend-form form,
.vl-vestir .user-registration form { margin: 0; }
.vl-vestir .ur-frontend-form .ur-form-row { display: flex; flex-wrap: wrap; gap: 0 4%; margin: 0; }
.vl-vestir .ur-frontend-form .ur-form-grid { min-width: 100%; padding: 0; box-sizing: border-box; }
/* Medido a 375 (26/09): plantilla-repaso.css §6b pone min-width:0 a estas columnas con un selector de 8 clases (html body :is(…)
   .user-registration.ur-frontend-form:not(…) .ur-form-row .ur-form-grid) y ganaba: la columna «Repite la contraseña» se quedaba en
   148 px y el campo en 36 px, con desbordamiento a 437 px. Mismo selector + body.vl-vestir (una clase más), solo hasta 599 px. */
@media (max-width: 599px) {
  html body.vl-vestir :is(.vl-hero--registro .vl-card--hero, .vl-plantilla-entrar .vl-auth__card) .user-registration.ur-frontend-form:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid,
  html body.vl-vestir .user-registration.ur-frontend-form:not(.user-registration-MyAccount) .ur-form-row .ur-form-grid { min-width: 100%; }
}
@media (min-width: 600px) {
  .vl-vestir .ur-frontend-form .ur-form-grid { min-width: 0; } /* aquí manda el width:48 % / 99 % en línea del plugin: dos columnas */
  .vl-vestir .ur-frontend-form .ur-form-grid.ur-grid-1:last-child { flex: 1 1 auto; }
}
.vl-vestir .ur-frontend-form .ur-field-item,
.vl-vestir .ur-frontend-form .ur-frontend-field { margin: 0 0 var(--vl-space-lg); }
.vl-vestir .ur-frontend-form .ur-field-item:last-child { margin-bottom: var(--vl-space-md); }

/* ---------- 3 · Etiquetas siempre visibles, ayuda y obligatorio ---------- */
.vl-vestir .ur-frontend-form label,
.vl-vestir .ur-frontend-form .ur-label,
.vl-vestir .user-registration-form__label,
.vl-vestir .user-registration-form-row label { display: block; margin: 0 0 var(--vl-space-sm); font-family: var(--font-cuerpo); font-size: var(--vl-font-small); line-height: var(--vl-lh-small); font-weight: 600; color: var(--vl-text); }
.vl-vestir .ur-frontend-form .required,
.vl-vestir .ur-frontend-form abbr.required { color: var(--vl-danger); text-decoration: none; border: 0; margin-left: 2px; }
.vl-vestir .ur-frontend-form .description,
.vl-vestir .ur-frontend-form .ur-field-description { display: block; margin: var(--vl-space-xs) 0 0; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); color: var(--vl-text-muted); }

/* ---------- 4 · Campos de 48 px, borde 3:1, foco visible ---------- */
.vl-vestir .ur-frontend-form input.input-text,
.vl-vestir .ur-frontend-form input[type="text"],
.vl-vestir .ur-frontend-form input[type="email"],
.vl-vestir .ur-frontend-form input[type="password"],
.vl-vestir .ur-frontend-form input[type="tel"],
.vl-vestir .ur-frontend-form input[type="url"],
.vl-vestir .ur-frontend-form input[type="number"],
.vl-vestir .ur-frontend-form input[type="date"],
.vl-vestir .ur-frontend-form select,
.vl-vestir .ur-frontend-form textarea,
.vl-vestir .user-registration input.user-registration-Input,
.vl-vestir .user-registration-form-login input.user-registration-Input { display: block; width: 100%; box-sizing: border-box; min-height: var(--vl-touch); margin: 0; padding: 11px var(--vl-space-md); border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); background: var(--vl-bg); font-family: var(--font-cuerpo); font-size: var(--vl-font-body); line-height: 1.4; color: var(--vl-text); box-shadow: none; transition: border-color var(--vl-transition-fast), box-shadow var(--vl-transition-fast); }
.vl-vestir .ur-frontend-form textarea { min-height: 120px; resize: vertical; }
.vl-vestir .ur-frontend-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; }
.vl-vestir .ur-frontend-form input:focus,
.vl-vestir .ur-frontend-form select:focus,
.vl-vestir .ur-frontend-form textarea:focus,
.vl-vestir .user-registration input.user-registration-Input:focus { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; border-color: var(--vl-secondary); }
.vl-vestir .ur-frontend-form input::placeholder,
.vl-vestir .ur-frontend-form textarea::placeholder { color: var(--vl-text-light); opacity: 1; }
/* El icono del campo (usuario, candado) del plugin: fuera el relleno extra que reservaba (sin su CSS no hay icono) */
.vl-vestir .ur-frontend-form .ur-pro-input-icon-padding,
.vl-vestir .ur-frontend-form .input-form-field-icons,
.vl-vestir .ur-frontend-form .without_icon { padding-left: var(--vl-space-md); }
.vl-vestir .ur-frontend-form .ur-icon { display: none; }

/* ---------- 5 · Contraseña: el botón «ver/ocultar» dentro del campo, de 48 × 48 ---------- */
/* Medido a 375 (26/09): sin el CSS del plugin, la fila de la contraseña (.form-row.hide_show_password) ponía etiqueta, campo y ayuda
   uno al lado del otro (el campo se quedaba en 36 px y la ayuda salía de la pantalla, a 437 px). Cada pieza en su línea. */
html body.vl-vestir .ur-frontend-form .form-row.hide_show_password,
html body.vl-vestir .ur-frontend-form .ur-field-item .form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; }
html body.vl-vestir .ur-frontend-form .form-row .input-wrapper,
html body.vl-vestir .ur-frontend-form .form-row .password-input-group { display: block; width: 100%; min-width: 0; padding: 0; margin: 0; } /* medido a 1440: el plugin dejaba 12 px de relleno y los dos campos de contraseña salían metidos hacia dentro */
html body.vl-vestir .ur-frontend-form .form-row .description { display: block; width: 100%; }
.vl-vestir .ur-frontend-form .password-input-group,
.vl-vestir .ur-frontend-form .input-wrapper { position: relative; }
.vl-vestir .ur-frontend-form .password-input-group input,
.vl-vestir .ur-frontend-form .input-wrapper input[type="password"] { padding-right: 56px; }
/* OJO (medido el 26/09): hide_show_password es la clase de la FILA entera del campo (div.form-row), no del botón del ojo; el botón lo
   mete el JS del plugin dentro de .password-input-group. Si se posiciona la fila, los dos campos de contraseña se montan uno sobre otro. */
.vl-vestir .ur-frontend-form .password-input-group > span,
.vl-vestir .ur-frontend-form .password-input-group > button,
.vl-vestir .ur-frontend-form .password-input-group .ur-icon { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--vl-radius-sm); background: transparent; color: var(--vl-secondary); cursor: pointer; }
.vl-vestir .ur-frontend-form .password-input-group > button:focus-visible,
.vl-vestir .ur-frontend-form .password-input-group > span:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); }
.vl-vestir .ur-frontend-form .password-input-group svg,
.vl-vestir .ur-frontend-form .password-input-group .dashicons { width: 22px; height: 22px; font-size: 22px; }
.vl-vestir .ur-frontend-form .password-input-group .ur-icon { display: inline-flex; }
/* El medidor de fuerza de la contraseña: barra fina + palabra (nunca solo color) */
.vl-vestir .ur-frontend-form .user-registration-password-strength,
.vl-vestir .ur-frontend-form .user-registration-password-hint { display: block; margin-top: var(--vl-space-sm); padding: 6px 12px; border-radius: var(--vl-radius-sm); font-size: var(--vl-font-caption); line-height: 1.4; font-weight: 600; background: var(--vl-bg-gray); color: var(--vl-text-muted); }
.vl-vestir .ur-frontend-form .user-registration-password-strength.short,
.vl-vestir .ur-frontend-form .user-registration-password-strength.bad { background: var(--vl-danger-bg); color: var(--vl-danger); }
.vl-vestir .ur-frontend-form .user-registration-password-strength.good { background: var(--vl-warning-bg); color: var(--vl-warning); }
.vl-vestir .ur-frontend-form .user-registration-password-strength.strong { background: var(--vl-success-bg); color: var(--vl-success); }

/* ---------- 6 · Casillas y opciones: como tarjetas grandes que se tocan bien ---------- */
.vl-vestir .ur-frontend-form .ur-checkbox-list,
.vl-vestir .ur-frontend-form .ur-radio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-space-sm); }
.vl-vestir .ur-frontend-form .ur-checkbox-list li,
.vl-vestir .ur-frontend-form .ur-radio-list li { margin: 0; }
.vl-vestir .ur-frontend-form .ur-checkbox-label,
.vl-vestir .ur-frontend-form .ur-radio-list label,
.vl-vestir .ur-frontend-form .ur-checkbox-list label,
.vl-vestir .ur-frontend-form .user-registration-form__label-for-checkbox { display: flex; gap: var(--vl-space-md); align-items: center; min-height: var(--vl-touch); padding: 10px var(--vl-space-md); margin: 0; border: 2px solid var(--vl-border-field); border-radius: var(--vl-radius-md); background: var(--vl-bg); font-size: var(--vl-font-body); font-weight: 500; color: var(--vl-text); cursor: pointer; transition: border-color var(--vl-transition-fast), background var(--vl-transition-fast); }
.vl-vestir .ur-frontend-form .ur-radio-list label:hover,
.vl-vestir .ur-frontend-form .ur-checkbox-label:hover { border-color: var(--vl-secondary); }
.vl-vestir .ur-frontend-form .ur-radio-list li:has(input:checked) label,
.vl-vestir .ur-frontend-form .ur-checkbox-list li:has(input:checked) label,
.vl-vestir .ur-frontend-form .ur-checkbox-label:has(input:checked) { border-color: var(--vl-secondary); background: var(--vl-secondary-light); }
.vl-vestir .ur-frontend-form input[type="checkbox"],
.vl-vestir .ur-frontend-form input[type="radio"],
.vl-vestir .user-registration-form__input-checkbox { width: 22px; height: 22px; min-height: 0; margin: 0; flex: 0 0 auto; accent-color: var(--vl-secondary); }
.vl-vestir .ur-frontend-form input[type="checkbox"]:focus-visible,
.vl-vestir .ur-frontend-form input[type="radio"]:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 2px; }
/* La casilla de privacidad / condiciones (texto largo con enlace): la etiqueta va arriba alineada */
.vl-vestir .ur-frontend-form .field-privacy_policy .ur-checkbox-label,
.vl-vestir .ur-frontend-form .field-checkbox .ur-checkbox-label { align-items: flex-start; }
.vl-vestir .ur-frontend-form .ur-checkbox-label a { color: var(--vl-secondary); text-decoration: underline; }

/* ---------- 7 · Errores y avisos: icono + palabra, nunca solo color ---------- */
.vl-vestir .ur-frontend-form .user-registration-error,
.vl-vestir .ur-frontend-form .ur-error,
.vl-vestir .ur-frontend-form .error,
.vl-vestir .user-registration-error { display: flex; gap: 8px; align-items: flex-start; margin: var(--vl-space-sm) 0 0; padding: 0; font-size: var(--vl-font-small); line-height: var(--vl-lh-small); font-weight: 600; color: var(--vl-danger); background: transparent; border: 0; }
.vl-vestir .ur-frontend-form .user-registration-error::before,
.vl-vestir .ur-frontend-form .ur-error::before,
.vl-vestir .user-registration-error::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4m0 4h.01'/%3E%3C/svg%3E") no-repeat center / 20px; }
.vl-vestir .ur-frontend-form .ur-field-item:has(.user-registration-error) input,
.vl-vestir .ur-frontend-form .ur-field-item:has(.user-registration-error) select,
.vl-vestir .ur-frontend-form .ur-field-item:has(.user-registration-error) textarea { border-color: var(--vl-danger); }
/* Los mensajes de arriba del formulario (entrada mal, cuenta pendiente, correo enviado…) */
.vl-vestir .ur-message-container,
.vl-vestir .user-registration-message,
.vl-vestir .user-registration-info,
.vl-vestir .ur-info,
.vl-vestir ul.user-registration-error { display: flex; gap: var(--vl-space-md); align-items: flex-start; margin: 0 0 var(--vl-space-lg); padding: var(--vl-space-md) var(--vl-space-lg); border-radius: var(--vl-radius-lg); border: 1px solid transparent; list-style: none; font-size: var(--vl-font-body); line-height: var(--vl-lh-body); }
.vl-vestir ul.user-registration-error li { margin: 0; }
.vl-vestir .user-registration-message,
.vl-vestir .user-registration-info,
.vl-vestir .ur-info { background: var(--vl-info-bg); color: var(--vl-info); border-color: #c9defb; }
.vl-vestir ul.user-registration-error { background: var(--vl-danger-bg); color: var(--vl-danger); border-color: #fca5a5; font-weight: 500; }
.vl-vestir .user-registration-message.success,
.vl-vestir .ur-message-container.ur-success { background: var(--vl-success-bg); color: var(--vl-success); }

/* ---------- 8 · El botón: azul, píldora, 48 px, ancho completo en móvil ---------- */
.vl-vestir .ur-frontend-form .ur-button-container { margin-top: var(--vl-space-md); display: flex; flex-wrap: wrap; gap: var(--vl-space-sm) var(--vl-space-md); align-items: center; }
.vl-vestir .ur-frontend-form .ur-submit-button,
.vl-vestir .ur-frontend-form button.ur-submit-button,
.vl-vestir .ur-frontend-form input[type="submit"],
.vl-vestir .user-registration-Button.button,
.vl-vestir .user-registration button.user-registration-Button,
.vl-vestir .ur-frontend-form .user-registration-Button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--vl-touch); margin: 0; padding: 12px var(--vl-space-lg); border: 2px solid var(--vl-secondary); border-radius: var(--vl-radius-pill); background: var(--vl-secondary); color: var(--vl-on-color); font-family: var(--font-cuerpo); font-size: var(--vl-font-boton); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2; cursor: pointer; box-shadow: none; transition: background var(--vl-transition-fast), border-color var(--vl-transition-fast), transform var(--vl-transition-neon); }
.vl-vestir .ur-frontend-form .ur-submit-button:hover,
.vl-vestir .user-registration-Button.button:hover,
.vl-vestir .user-registration button.user-registration-Button:hover { background: var(--vl-secondary-dark); border-color: var(--vl-secondary-dark); color: var(--vl-on-color); }
.vl-vestir .ur-frontend-form .ur-submit-button:focus-visible,
.vl-vestir .user-registration-Button.button:focus-visible { outline: var(--vl-focus-width) solid var(--vl-focus); outline-offset: 3px; }
.vl-vestir .ur-frontend-form .ur-submit-button[disabled],
.vl-vestir .user-registration-Button.button[disabled] { opacity: .5; cursor: not-allowed; }
@media (min-width: 600px) {
  .vl-vestir .ur-frontend-form .ur-submit-button,
  .vl-vestir .user-registration-Button.button { width: auto; min-width: 220px; }
}
/* El aro de «cargando» del plugin (ur-submit-button.ur-loading) sin su CSS: un aro que gira, 0 ms con menos movimiento */
.vl-vestir .ur-frontend-form .ur-submit-button.ur-loading::after,
.vl-vestir .user-registration-Button.button.processing::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); border-top-color: var(--vl-on-color); animation: vl-vestir-gira .8s linear infinite; }
@keyframes vl-vestir-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vl-vestir .ur-frontend-form .ur-submit-button.ur-loading::after { animation: none; } }

/* ---------- 9 · Entrar: recordarme, ¿has olvidado la contraseña?, el aviso de la segunda pestaña ---------- */
.vl-vestir .user-registration-form-login .user-registration-form-row,
.vl-vestir .user-registration-form-login .form-row { margin: 0 0 var(--vl-space-lg); }
.vl-vestir .user-registration-form-login .user-registration-form-row--wide { width: 100%; }
.vl-vestir .user-registration-form-login .user-registration-before-login-btn { margin: 0 0 var(--vl-space-md); }
.vl-vestir .user-registration-form-login .user-registration-form__label-for-checkbox { border: 0; padding: 4px 0; min-height: var(--vl-touch); background: transparent; font-weight: 500; }
.vl-vestir .user-registration-LostPassword,
.vl-vestir .ur-frontend-form .lost_password { margin: var(--vl-space-md) 0 0; font-size: var(--vl-font-small); }
.vl-vestir .user-registration-LostPassword a,
.vl-vestir .ur-frontend-form a { color: var(--vl-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vl-vestir .user-registration-LostPassword a { display: inline-flex; align-items: center; min-height: var(--vl-touch); }
/* Entrar con Google/Facebook (Social Login, si Sergio lo activa): botones secundarios con aro neón */
.vl-vestir .ur-frontend-form .ur-social-login a,
.vl-vestir .ur-frontend-form .user-registration-social-connect a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--vl-touch); padding: 10px var(--vl-space-lg); border-radius: var(--vl-radius-aro); background: var(--vl-bg); color: var(--vl-primary-dark); box-shadow: var(--vl-aro); font-weight: 600; text-decoration: none; }

/* ---------- 10 · Registro por pasos (Multi-Part): «Paso 1 de 3» con barra, botones Anterior/Siguiente ---------- */
.vl-vestir .ur-frontend-form .ur-multi-part-progress,
.vl-vestir .ur-frontend-form .ur-multipart-progress,
.vl-vestir .ur-frontend-form .ur-mp-progress { margin: 0 0 var(--vl-space-lg); }
.vl-vestir .ur-frontend-form .ur-multi-part-progress .ur-progress-bar,
.vl-vestir .ur-frontend-form .ur-multipart-progress .ur-progress-bar,
.vl-vestir .ur-frontend-form .ur-progress-bar { position: relative; height: 8px; border-radius: var(--vl-radius-pill); background: var(--vl-border); overflow: hidden; }
.vl-vestir .ur-frontend-form .ur-progress-bar span,
.vl-vestir .ur-frontend-form .ur-progress-bar .ur-progress { display: block; height: 100%; border-radius: var(--vl-radius-pill); background: var(--vl-secondary); box-shadow: 0 0 12px rgba(var(--vl-neon-rgb), .35); transition: width var(--vl-transition-normal); }
.vl-vestir .ur-frontend-form .ur-multi-part-progress .ur-progress-title,
.vl-vestir .ur-frontend-form .ur-part-title,
.vl-vestir .ur-frontend-form .ur-multipart-title { margin: var(--vl-space-sm) 0 0; font-size: var(--vl-font-small); font-weight: 600; color: var(--vl-text-muted); }
.vl-vestir .ur-frontend-form .ur-multi-part-progress ul,
.vl-vestir .ur-frontend-form .ur-multi-part-progress-list { list-style: none; display: flex; gap: var(--vl-space-sm); margin: var(--vl-space-sm) 0 0; padding: 0; }
.vl-vestir .ur-frontend-form .ur-multi-part-progress li { flex: 1; font-size: var(--vl-font-caption); font-weight: 600; text-align: center; padding: 6px 4px; border-radius: var(--vl-radius-sm); color: var(--vl-text-muted); background: var(--vl-bg-gray); }
.vl-vestir .ur-frontend-form .ur-multi-part-progress li.active,
.vl-vestir .ur-frontend-form .ur-multi-part-progress li.ur-active { background: var(--vl-secondary-light); color: var(--vl-secondary-dark); }
.vl-vestir .ur-frontend-form .ur-multi-part-nav,
.vl-vestir .ur-frontend-form .ur-multipart-nav,
.vl-vestir .ur-frontend-form .ur-multi-part-navigation { display: flex; flex-direction: column-reverse; gap: var(--vl-space-sm); margin-top: var(--vl-space-lg); }
@media (min-width: 600px) { .vl-vestir .ur-frontend-form .ur-multi-part-nav, .vl-vestir .ur-frontend-form .ur-multipart-nav, .vl-vestir .ur-frontend-form .ur-multi-part-navigation { flex-direction: row; justify-content: space-between; } }
.vl-vestir .ur-frontend-form .ur-multi-part-nav button,
.vl-vestir .ur-frontend-form .ur-multi-part-nav .button,
.vl-vestir .ur-frontend-form .ur-multipart-nav button,
.vl-vestir .ur-frontend-form .ur-multi-part-navigation button,
.vl-vestir .ur-frontend-form .ur-multi-part-nav-prev,
.vl-vestir .ur-frontend-form .ur-multi-part-nav-next { display: inline-flex; align-items: center; justify-content: center; min-height: var(--vl-touch); padding: 12px var(--vl-space-lg); border-radius: var(--vl-radius-pill); border: 2px solid var(--vl-secondary); background: var(--vl-secondary); color: var(--vl-on-color); font-size: var(--vl-font-boton); font-weight: 600; cursor: pointer; }
.vl-vestir .ur-frontend-form .ur-multi-part-nav-prev,
.vl-vestir .ur-frontend-form .ur-multi-part-nav .ur-prev,
.vl-vestir .ur-frontend-form button[class*="prev"] { background: var(--vl-bg); color: var(--vl-secondary-dark); }

/* ---------- 11 · Los complementos: teléfono con prefijo, fecha, foto de perfil, código de invitación, doble factor ---------- */
.vl-vestir .ur-frontend-form .iti { width: 100%; }
.vl-vestir .ur-frontend-form .iti__flag-container { border-radius: var(--vl-radius-md) 0 0 var(--vl-radius-md); }
.vl-vestir .ur-frontend-form .flatpickr-input[readonly] { background: var(--vl-bg); cursor: pointer; }
.vl-vestir .ur-frontend-form .user-registration-profile-picture-upload,
.vl-vestir .ur-frontend-form .ur-profile-picture-upload { display: flex; flex-wrap: wrap; gap: var(--vl-space-md); align-items: center; padding: var(--vl-space-md); border: 2px dashed var(--vl-border-field); border-radius: var(--vl-radius-md); }
.vl-vestir .ur-frontend-form .user-registration-profile-picture-upload img,
.vl-vestir .ur-frontend-form .ur-profile-picture-upload img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.vl-vestir .ur-frontend-form .user-registration-profile-picture-upload button,
.vl-vestir .ur-frontend-form .ur-profile-picture-upload button { min-height: var(--vl-touch); padding: 10px var(--vl-space-lg); border-radius: var(--vl-radius-aro); border: 0; background: var(--vl-bg); color: var(--vl-primary-dark); box-shadow: var(--vl-aro); font-weight: 600; cursor: pointer; }
/* Doble factor (Two Factor Authentication): el código de 6 cifras grande y centrado */
.vl-vestir .ur-2fa-otp input,
.vl-vestir .ur-frontend-form input[name*="otp"],
.vl-vestir .ur-frontend-form input[name*="2fa"],
.vl-vestir .ur-tfa-code input,
.vl-vestir .user-registration-2fa input.input-text { font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.vl-vestir .ur-2fa-resend,
.vl-vestir .ur-tfa-resend a { display: inline-flex; align-items: center; min-height: var(--vl-touch); color: var(--vl-secondary); font-weight: 600; }

/* ---------- 12 · Contraseña olvidada / nueva contraseña: un solo campo centrado, el aviso en lila ---------- */
.vl-vestir .user-registration-ResetPassword,
.vl-vestir .user-registration-lost-password,
.vl-vestir .user-registration-reset-password,
.vl-vestir .ur-lost-password-form { max-width: 520px; }
.vl-vestir .user-registration-ResetPassword p:first-child,
.vl-vestir .user-registration-lost-password p:first-child { margin: 0 0 var(--vl-space-lg); font-size: var(--vl-font-body); line-height: var(--vl-lh-body); color: var(--vl-text-muted); }
.vl-vestir .user-registration-ResetPassword .user-registration-form-row,
.vl-vestir .user-registration-lost-password .user-registration-form-row { margin-bottom: var(--vl-space-lg); }

/* ---------- 13 · Selección del tipo de cuenta en «elige tu perfil» y las tarjetas de registro (las pinta el tema) ---------- */
.vl-vestir .vl-registro__form .ur-frontend-form { padding: 0; }
.vl-vestir .ur-frontend-form .ur-form-grid > .ur-field-item:only-child { margin-bottom: var(--vl-space-lg); }

/* ---------- 14 · reCAPTCHA: que no desborde a 375 ---------- */
.vl-vestir .ur-frontend-form .g-recaptcha,
.vl-vestir .ur-frontend-form .ur-recaptcha-node { max-width: 100%; overflow: hidden; margin: 0 0 var(--vl-space-md); }
@media (max-width: 359px) { .vl-vestir .ur-frontend-form .g-recaptcha { transform: scale(.9); transform-origin: 0 0; } }