/* ==========================================================================
   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); }

/* ===== 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; }

/* ===== 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-principal > .cu-btn,
    .cu-reg-principal form,
    .cu-reg-principal form .cu-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cu-reg-opcion { transition: none; }
}

/* ===== 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); }