/* ==========================================================================
   Cannis — el registro global (PD-68) dentro de las pantallas de cuenta
   --------------------------------------------------------------------------
   Lo que le falta a componentes.css para un formulario de varios pasos: casillas y opciones, grupos con
   título, error por campo, el indicador de pasos, los bloques que dependen de otro campo, la grilla de
   la agenda y la pantalla final. Prefijo `cu-reg-`. Sin un solo color propio: todo sale de tokens.css
   (la marca del producto desde el que se abre el registro).

   Antes vivía en `public/css/web/registro.css` y colgaba de los tokens `--w-*` del sitio institucional;
   al pasar a las pantallas de cuenta (que se pintan dentro de cada producto) se reescribió contra los
   tokens `--cu-*`. Las clases `w-reg-*` son hoy `cu-reg-*`, y lo genérico (el «Mostrar» la contraseña,
   el texto para lectores de pantalla, el asterisco) subió a base.css y componentes.css.

   Lo usan sólo las pantallas de `resources/views/cuenta/registro/`. Se sirve crudo, sin build, y se
   carga con `versioned_asset()`.

   El formulario funciona sin JavaScript: lo que depende del script se esconde bajo `.js` (la clase la
   pone el layout antes de pintar) y los controles que sólo el script crea nacen con `hidden`.
   ========================================================================== */

/* ===== Utilidades ===== */

/* El señuelo contra los robots: fuera de pantalla, no `display: none` (algunos lo saltean). */
.cu-reg-aparte {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Lo que depende de otro campo, escondido sólo si el script corre. Sin script se ve todo. */
.js [data-oculto] { display: none; }
.cu-reg-form [hidden] { display: none !important; }

/* ===== El selector de perfiles ===== */

.cu-reg-subtitulo { margin-block: var(--cu-s3) var(--cu-s2); }

.cu-reg-perfil { gap: 0.4rem; }
.cu-reg-perfil__duracion {
    display: block;
    color: var(--cu-tinta-suave);
    font-size: 0.85rem;
}
.cu-reg-perfil:focus-visible { outline-offset: 4px; }

.cu-reg-nota {
    max-width: 62ch;
    margin-top: var(--cu-s3);
    color: var(--cu-tinta-suave);
    font-size: 0.93rem;
}
.cu-reg-nota a { font-weight: 700; }

/* Lo que se dejó a medias. */
.cu-reg-pendientes { margin-bottom: var(--cu-s3); }
.cu-reg-pendientes__lista { display: grid; gap: var(--cu-s2); margin-top: var(--cu-s2); }
.cu-reg-pendiente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cu-s3);
    padding: var(--cu-s2) var(--cu-s3);
    border: 1px solid var(--cu-marca);
    border-radius: var(--cu-radio-md);
    background: var(--cu-marca-suave);
}
.cu-reg-pendiente__datos { display: grid; gap: var(--cu-s1); min-width: 0; flex: 1; }
.cu-reg-pendiente__texto { color: var(--cu-tinta-suave); font-size: 0.88rem; }
.cu-reg-pendiente .cu-btn { flex-shrink: 0; }

/* El renglón de botones de las pantallas sin formulario (continuar, verificado, listo). */
.cu-reg-principal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cu-s2) var(--cu-s3); margin-top: var(--cu-s4); }
.cu-reg-principal--arriba { margin-top: 0; margin-bottom: var(--cu-s3); }
.cu-reg-principal form { margin: 0; }

/* ===== La barra y los pasos ===== */

.cu-reg-progreso { margin-top: var(--cu-s3); }
.cu-reg-progreso__texto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem var(--cu-s2);
    margin: 0 0 var(--cu-s2);
    font-size: 0.95rem;
}
.cu-reg-progreso__texto strong { color: var(--cu-tinta); }
.cu-reg-progreso__texto span { color: var(--cu-tinta-suave); }

.cu-reg-barra {
    appearance: none;
    display: block;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--cu-barra);
    color: var(--cu-marca);
}
.cu-reg-barra::-webkit-progress-bar { background: var(--cu-barra); border-radius: 999px; }
.cu-reg-barra::-webkit-progress-value { background: var(--cu-marca); border-radius: 999px; }
.cu-reg-barra::-moz-progress-bar { background: var(--cu-marca); border-radius: 999px; }

.cu-reg-pasos { display: flex; flex-wrap: wrap; gap: var(--cu-s1) var(--cu-s2); margin-top: var(--cu-s2); }
.cu-reg-pasos__item { display: flex; }
.cu-reg-pasos__enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--cu-s1);
    min-height: var(--cu-toque);
    padding-right: var(--cu-s2);
    color: var(--cu-tinta-suave);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
}
a.cu-reg-pasos__enlace:hover { color: var(--cu-marca); }
.cu-reg-pasos__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1.5px solid var(--cu-borde-campo);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
}
.cu-reg-pasos__numero .cu-ico { width: 1rem; height: 1rem; stroke-width: 2.4; }
.cu-reg-pasos__item--pendiente .cu-reg-pasos__numero { color: var(--cu-tinta-suave); }
.cu-reg-pasos__item--hecho .cu-reg-pasos__numero { border-color: var(--cu-boton); background: var(--cu-boton); color: var(--cu-sobre-boton); }
.cu-reg-pasos__item--actual .cu-reg-pasos__enlace { color: var(--cu-tinta); }
.cu-reg-pasos__item--actual .cu-reg-pasos__numero { border-color: var(--cu-marca); background: var(--cu-marca-suave); color: var(--cu-marca); }

/* ===== El formulario ===== */

.cu-reg-leyenda { margin-bottom: var(--cu-s1); color: var(--cu-tinta-suave); font-size: 0.85rem; }

.cu-reg-resumen { scroll-margin-top: var(--cu-s3); }
.cu-reg-resumen a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-toque);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Un grupo de campos con su título. El <legend> flota para que el margen de abajo cuente. */
.cu-reg-grupo { min-width: 0; margin: 0 0 var(--cu-s3); padding: 0; border: 0; }
.cu-reg-grupo__titulo {
    float: left;
    width: 100%;
    margin: 0 0 var(--cu-s2);
    padding: 0;
    color: var(--cu-tinta);
    font-size: 1.05rem;
    font-weight: 700;
}
.cu-reg-grupo__titulo + .cu-form__grilla { clear: both; }

.cu-reg-nota-paso { margin-top: 0; }

/* Las casillas y los botones de opción no son campos de texto: componentes.css ya los deja afuera del estirado; acá el tamaño y el foco. */
.cu-reg-campo input[type="checkbox"],
.cu-reg-campo input[type="radio"],
.cu-reg-opcion input[type="checkbox"],
.cu-reg-opcion input[type="radio"] {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0.1rem 0 0;
    padding: 0;
    accent-color: var(--cu-marca);
    cursor: pointer;
}

.cu-reg-campo--error .cu-reg-opcion { border-color: var(--cu-error); }
.cu-reg-error { display: grid; gap: 0.15rem; color: var(--cu-error); font-size: 0.88rem; font-weight: 600; line-height: 1.45; }

.cu-reg-info { color: var(--cu-tinta-suave); font-size: 0.95rem; }
.cu-reg-contador { align-self: flex-end; color: var(--cu-tinta-suave); font-size: 0.8rem; }
.cu-reg-confirmar { margin-top: var(--cu-s2); }

/* Una casilla suelta (términos, WhatsApp): la caja y el texto, con el enlace en el color de la marca. */
.cu-reg-check { display: flex; align-items: flex-start; gap: var(--cu-s2); padding-block: 0.4rem; }
.cu-reg-check label {
    color: var(--cu-tinta-suave);
    font-size: 0.95rem;
    line-height: 1.55;
    cursor: pointer;
}
.cu-reg-check a { color: var(--cu-marca); text-decoration: underline; text-underline-offset: 3px; }

/* Una opción entre varias, o varias a la vez: cada una es una fila entera que se toca. */
.cu-reg-opciones { min-width: 0; margin: 0; padding: 0; border: 0; }
.cu-reg-opciones legend { margin-bottom: var(--cu-s2); padding: 0; }
.cu-reg-opciones__lista { display: grid; gap: var(--cu-s2); }
.cu-reg-opcion {
    display: flex;
    align-items: center;
    gap: var(--cu-s2);
    min-height: var(--cu-toque);
    padding: 0.6rem var(--cu-s2);
    border: 1px solid var(--cu-borde-campo);
    border-radius: var(--cu-radio-md);
    background: var(--cu-campo);
    color: var(--cu-tinta);
    font-size: 0.97rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color var(--cu-transicion), background var(--cu-transicion);
}
.cu-reg-opcion:hover { border-color: var(--cu-marca); }
.cu-reg-opcion:has(input:checked) { border-color: var(--cu-marca); background: var(--cu-marca-suave); }

/* El texto de una opción: el rótulo y, si el campo la trae, una bajada (`Campo::descripciones()`). Sin bajada la opción es una sola línea centrada y el
   rótulo conserva su peso de siempre; con bajada el rótulo pasa a ser un título y la opción se alinea arriba, para que la casilla quede junto al título. */
.cu-reg-opcion__texto { display: grid; gap: 0.2rem; min-width: 0; flex: 1; }
.cu-reg-opcion__titulo { overflow-wrap: anywhere; }
.cu-reg-opcion__bajada { color: var(--cu-tinta-suave); font-size: 0.88rem; line-height: 1.45; }
.cu-reg-opcion--con-bajada { align-items: flex-start; padding-block: 0.8rem; }
.cu-reg-opcion--con-bajada .cu-reg-opcion__titulo { font-weight: 700; line-height: 1.35; }
.cu-reg-opcion--con-bajada input[type="radio"] { margin-top: 0.1rem; }

/* ===== La agenda ===== */

.cu-reg-agenda { min-width: 0; margin: 0; padding: 0; border: 0; }
.cu-reg-agenda legend { margin-bottom: var(--cu-s2); padding: 0; }
.cu-reg-agenda__duracion { margin-bottom: var(--cu-s2); max-width: 20rem; }

.cu-reg-dias { display: grid; gap: var(--cu-s1); margin-bottom: var(--cu-s2); }
.cu-reg-dia {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr;
    align-items: center;
    gap: var(--cu-s2) var(--cu-s3);
    padding: 0.35rem var(--cu-s2);
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio-md);
    background: var(--cu-superficie);
}
.cu-reg-dia:has(input[data-reg-dia-atiende]:checked) { border-color: var(--cu-marca); background: var(--cu-marca-suave); }
.cu-reg-dia__nombre {
    display: flex;
    align-items: center;
    gap: var(--cu-s2);
    min-height: var(--cu-toque);
    color: var(--cu-tinta);
    font-weight: 700;
    cursor: pointer;
}
.cu-reg-dia__nombre input { width: 1.35rem; height: 1.35rem; accent-color: var(--cu-marca); }
.cu-reg-dia__horas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cu-s2) var(--cu-s3); color: var(--cu-tinta-suave); }
.cu-reg-dia__hora { display: flex; align-items: center; gap: var(--cu-s2); }
.cu-reg-dia__rotulo { font-size: 0.86rem; font-weight: 600; }
.cu-reg-dia__hora input { width: auto; min-width: 8.5rem; padding-block: 0.6rem; }
/* Las horas de un día sin tildar se atenúan, pero el texto sigue llegando al contraste mínimo: se baja el fondo y no la tinta. */
.cu-reg-dia:not(:has(input[data-reg-dia-atiende]:checked)) .cu-reg-dia__horas input { background: transparent; border-style: dashed; }

.cu-reg-agenda__copiar { min-height: var(--cu-toque); margin-bottom: var(--cu-s2); }
.cu-reg-agenda__extra { margin-top: var(--cu-s2); }

/* ===== El pie de cada paso ===== */

.cu-reg-pie { margin-top: var(--cu-s3); padding-top: var(--cu-s3); border-top: 1px solid var(--cu-linea); }
.cu-reg-pie__lateral { display: flex; flex-wrap: wrap; gap: var(--cu-s1); margin-left: auto; }

/* ===== La pantalla final ===== */

/* Una columna: «Tu registro» y «Lo que sigue en Cannis» uno debajo del otro. Dentro de la hoja (48 rem) lado a lado le dejaban a cada panel unos
   290 px y el nombre de cada paso se partía en tres renglones junto a su «Completar». */
.cu-reg-listo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cu-s3); margin-bottom: var(--cu-s3); }
.cu-reg-panel {
    min-width: 0;
    padding: var(--cu-s3);
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio-md);
    background: var(--cu-superficie);
}
.cu-reg-panel .cu-reg-barra { margin-bottom: var(--cu-s2); }
.cu-reg-panel .cu-subtitulo { margin-bottom: var(--cu-s2); }

.cu-reg-resumen-pasos { display: grid; gap: var(--cu-s1); }
.cu-reg-resumen-paso { display: flex; align-items: center; gap: var(--cu-s2); min-height: var(--cu-toque); }
.cu-reg-resumen-paso__marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border: 1.5px solid var(--cu-borde-campo);
    border-radius: 50%;
}
.cu-reg-resumen-paso--hecho .cu-reg-resumen-paso__marca { border-color: var(--cu-boton); background: var(--cu-boton); color: var(--cu-sobre-boton); }
.cu-reg-resumen-paso__marca .cu-ico { width: 0.95rem; height: 0.95rem; stroke-width: 2.4; }
.cu-reg-resumen-paso__nombre { flex: 1; min-width: 0; color: var(--cu-tinta-suave); font-size: 0.97rem; }
.cu-reg-resumen-paso--hecho .cu-reg-resumen-paso__nombre { color: var(--cu-tinta); }

/* Lo que sigue en Cannis. */
.cu-reg-siguientes { display: grid; gap: var(--cu-s2); }
.cu-reg-siguientes__item { display: flex; gap: var(--cu-s2); }
.cu-reg-siguientes__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cu-marca-suave);
    color: var(--cu-marca);
    font-weight: 700;
    font-size: 0.9rem;
}
.cu-reg-siguientes__titulo { margin: 0 0 0.2rem; font-size: 1.02rem; font-weight: 700; color: var(--cu-tinta); }
.cu-reg-siguientes__texto { margin: 0; color: var(--cu-tinta-suave); font-size: 0.93rem; }

.cu-reg-verificacion__form { margin-top: var(--cu-s2); }

.cu-reg-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cu-reg-acceso__datos { display: block; min-width: 0; flex: 1; }
.cu-reg-acceso__motivo { display: block; margin-top: 0.2rem; color: var(--cu-marca); font-size: 0.8rem; font-weight: 600; }

/* «Tus accesos»: debajo del botón principal de la pantalla final y arriba del selector. */
.cu-reg-tus-accesos { margin-block: var(--cu-s4) var(--cu-s3); }
.cu-reg-tus-accesos__bajada { max-width: 62ch; margin-block: var(--cu-s1) var(--cu-s2); color: var(--cu-tinta-suave); font-size: 0.97rem; }

/* ===== La vidriera de profesionales de Repronline (PD-69, vuelta 10) ===== */

/* El bloque que aparece con «pendiente» o «no»: un título, una línea y el botón que abre la lista. Sin script no hay botón (nace `hidden`) y la lista se ve
   debajo, a la vista, como un bloque más. */
.cu-reg-vidriera {
    min-width: 0;
    padding: var(--cu-s3);
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio-md);
    background: var(--cu-superficie);
}
.cu-reg-vidriera__resumen { display: grid; justify-items: start; gap: var(--cu-s2); }
.cu-reg-vidriera__titulo { margin: 0; font-size: 1rem; }
.cu-reg-vidriera__texto { max-width: 56ch; margin: 0; color: var(--cu-tinta-suave); font-size: 0.93rem; line-height: 1.5; }

/* El diálogo. `showModal()` lo pone en la capa de arriba y deja inerte el resto; sin script (`html:not(.js)`) es un bloque en la página. El `display`
   sólo se declara con `[open]`: un diálogo cerrado tiene que seguir escondido por la hoja del navegador. */
.cu-reg-modal {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(40rem, calc(100% - 2 * var(--cu-s2)));
    max-width: none;
    height: fit-content;
    max-height: 90vh;
    max-height: 90dvh;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio);
    background: var(--cu-hoja);
    color: var(--cu-tinta);
    box-shadow: var(--cu-sombra);
}
.cu-reg-modal[open] { display: flex; flex-direction: column; }
.cu-reg-modal::backdrop { background: var(--cu-fondo-bajo, CanvasText); opacity: 0.72; }
html:has(.cu-reg-modal[open]) { overflow: hidden; }

html:not(.js) .cu-reg-modal {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    margin: var(--cu-s3) 0 0;
    box-shadow: none;
}

/* La cabecera es la banda de marca: oscura en los dos temas, así que el logo de Repronline va en su modo original (letras claras). */
.cu-reg-modal__cabeza {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--cu-s2);
    padding: var(--cu-s2) var(--cu-s3);
    background: linear-gradient(135deg, var(--cu-fondo-alto), var(--cu-fondo-bajo));
}
.cu-reg-modal__logo { display: block; width: auto; max-width: 70%; height: 2.4rem; }
.cu-reg-modal__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--cu-toque);
    height: var(--cu-toque);
    padding: 0;
    border: 1px solid var(--cu-banda-linea);
    border-radius: 50%;
    background: transparent;
    color: var(--cu-banda-tinta);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--cu-transicion);
}
.cu-reg-modal__cerrar:hover { background: var(--cu-banda-anillo); }
.cu-reg-modal__cerrar:focus-visible { outline: 3px solid var(--cu-acento); outline-offset: 2px; }

.cu-reg-modal__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--cu-s3);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Fase 1: «Conectando con Repronline…». */
.cu-reg-modal__fase--conectando {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--cu-s3);
    min-height: 14rem;
    text-align: center;
}
.cu-reg-modal__conectando { margin: 0; color: var(--cu-tinta); font-size: 1.05rem; font-weight: 700; }
.cu-reg-spinner {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    border: 4px solid var(--cu-linea);
    border-top-color: var(--cu-marca);
    border-radius: 50%;
    animation: cu-reg-giro 0.9s linear infinite;
}
@keyframes cu-reg-giro { to { transform: rotate(360deg); } }

/* Fase 2: el contexto y la lista. */
.cu-reg-modal__fase--lista { min-width: 0; }
.cu-reg-modal__titulo { margin: 0; color: var(--cu-tinta); font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.cu-reg-modal__titulo:focus { outline: none; }
.cu-reg-modal__contexto { margin: var(--cu-s2) 0 0; color: var(--cu-tinta-suave); font-size: 0.95rem; line-height: 1.55; }
.cu-reg-modal__mas { margin: var(--cu-s3) 0 0; color: var(--cu-tinta-suave); font-size: 0.93rem; }
.cu-reg-modal__mas a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.cu-reg-profesionales { display: grid; gap: var(--cu-s2); margin: var(--cu-s3) 0 0; padding: 0; list-style: none; }
.cu-reg-profesional {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--cu-s2) var(--cu-s3);
    padding: var(--cu-s2) var(--cu-s3);
    border: 1px solid var(--cu-linea);
    border-radius: var(--cu-radio-md);
    background: var(--cu-superficie);
    transition: border-color var(--cu-transicion);
}
.cu-reg-profesional:hover,
.cu-reg-profesional:focus-within { border-color: var(--cu-marca); }

.cu-reg-profesional__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--cu-marca-suave);
}
.cu-reg-profesional__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cu-reg-profesional__iniciales { color: var(--cu-tinta); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; }

.cu-reg-profesional__datos { display: grid; gap: 0.15rem; min-width: 0; }
.cu-reg-profesional__nombre { color: var(--cu-tinta); font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.cu-reg-profesional__especialidad { color: var(--cu-tinta-suave); font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; }
.cu-reg-profesional__precio { color: var(--cu-tinta); font-size: 0.93rem; font-weight: 700; }
.cu-reg-profesional__rotulo { color: var(--cu-tinta-suave); font-weight: 600; }
.cu-reg-profesional__precio--gratis { color: var(--cu-ok); }
/* Sin `gap`: el texto de lector de pantalla (`.cu-sr`, absoluto) cuenta como un hijo más del flex de `.cu-btn` y le suma el hueco del `gap` a la
   derecha, que descentra el rótulo unos 4 px. Estos botones no llevan ícono, así que no hay nada que separar. */
.cu-reg-profesional__elegir { gap: 0; white-space: nowrap; }

/* Sin profesionales: el aviso y el enlace a Repronline. */
.cu-reg-vacio { display: grid; justify-items: start; gap: var(--cu-s2); margin-top: var(--cu-s3); padding: var(--cu-s3); border: 1px dashed var(--cu-borde-campo); border-radius: var(--cu-radio-md); }
.cu-reg-vacio p { margin: 0; color: var(--cu-tinta); font-weight: 600; }
.cu-reg-vacio .cu-btn { gap: 0; }

/* ===== Pantallas angostas ===== */

@media (max-width: 640px) {
    .cu-reg-accesos { grid-template-columns: minmax(0, 1fr); }

    .cu-reg-pendiente { flex-direction: column; align-items: stretch; }
    .cu-reg-pendiente .cu-btn { justify-content: center; }

    /* Los nombres de los pasos no entran: el título de la pantalla ya dice cuál es. */
    .cu-reg-pasos__nombre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cu-reg-pasos__enlace { justify-content: center; min-width: var(--cu-toque); padding-right: 0; }

    .cu-reg-dia { grid-template-columns: minmax(0, 1fr); }
    /* Dos horas con su reloj no entran una al lado de la otra en 390 px (el «a. m.» se corta): una debajo de la otra, a todo el ancho. */
    .cu-reg-dia__horas { flex-direction: column; align-items: stretch; }
    .cu-reg-dia__hora { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); }
    .cu-reg-dia__hora input { width: 100%; min-width: 0; }

    .cu-reg-pie .cu-btn--primario,
    .cu-reg-pie .cu-btn--secundario { flex: 1 1 100%; }
    .cu-reg-pie__lateral { width: 100%; margin-left: 0; justify-content: space-between; }

    .cu-reg-panel { padding: var(--cu-s2); }
    .cu-reg-vidriera { padding: var(--cu-s2); }
    .cu-reg-vidriera__abrir { width: 100%; }
    .cu-reg-modal__cabeza { padding: var(--cu-s1) var(--cu-s2); }
    .cu-reg-modal__cuerpo { padding: var(--cu-s2); }
    .cu-reg-principal > .cu-btn,
    .cu-reg-principal form,
    .cu-reg-principal form .cu-btn { width: 100%; }
}

@media (max-width: 420px) {
    /* Una tarjeta de profesional: la foto y los datos arriba, el botón a todo el ancho abajo. */
    .cu-reg-profesional { grid-template-columns: auto minmax(0, 1fr); }
    .cu-reg-profesional__elegir { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cu-reg-opcion,
    .cu-reg-profesional,
    .cu-reg-modal__cerrar { transition: none; }
    /* Un anillo quieto: el texto de al lado ya dice que se está conectando. */
    .cu-reg-spinner { animation: none; border-right-color: var(--cu-marca); }
}

/* ===== En la página del registro: más aire y letra más cómoda =====
   El formulario es largo: en una hoja ancha, con los campos de a dos, grupos bien separados y el título grande, se lee de corrido en vez
   de apretarse. (El formato «página» lo pide cada vista con `@section('formato', 'pagina')`.) */

.cu-reg-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--cu-toque);
    margin-bottom: var(--cu-s2);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}
.cu-reg-volver:hover { text-decoration: underline; }

.cu-pagina .cu-cabeza { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cu-pagina .cu-titulo { font-size: clamp(1.9rem, 1.45rem + 1.6vw, 2.6rem); }
.cu-pagina .cu-bajada { max-width: 62ch; font-size: 1.05rem; line-height: 1.65; }

.cu-pagina .cu-form { gap: var(--cu-s4); }
.cu-pagina .cu-form__grilla { gap: 1.5rem clamp(1rem, 3vw, 2rem); }
.cu-pagina .cu-reg-grupo { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.cu-pagina .cu-reg-grupo__titulo { margin-bottom: var(--cu-s3); font-size: 1.15rem; }
.cu-pagina .cu-campo { gap: 0.5rem; }
.cu-pagina .cu-campo__label { font-size: 0.97rem; }
.cu-pagina .cu-campo__ayuda { font-size: 0.9rem; }
.cu-pagina .cu-campo :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) { min-height: 3.25rem; }
.cu-pagina .cu-reg-leyenda { margin-bottom: var(--cu-s3); font-size: 0.9rem; }
.cu-pagina .cu-reg-pie { margin-top: var(--cu-s4); padding-top: var(--cu-s4); }
.cu-pagina .cu-tarjetas { gap: var(--cu-s3); }