/**
 * Formulario de registro de clientes.
 *
 * Todo cuelga de body:has(#registration[name="registrationCustom"]) para no
 * alterar ninguna otra pantalla de la tienda. #registration es el input
 * oculto que inyecta register.tpl, no el id del body. El name hace falta
 * porque Mi perfil usa la misma plantilla y el mismo id, con
 * name="updateCustom", y alli no va nada de esto. Y no el body porque al
 * mismo formulario se llega por dos rutas (iniciar-sesion?create_account=1,
 * con body id "authentication", e index.php?controller=registration, con
 * body id "registration") y atarlo al body dejaba la hoja entera muerta en la
 * primera, que es justo la que enlaza el menu de la tienda.
 *
 * PrestaShop maqueta cada campo como una fila con la etiqueta a la izquierda
 * (col-md-3) y el campo estrecho al lado (col-md-6), lo que dejaba media
 * pantalla vacia y obligaba a un scroll larguisimo. Aqui pasa a dos columnas
 * con la etiqueta encima del campo.
 *
 * OJO: entre el <form> y los .form-group hay un <div> sin clase. La rejilla
 * tiene que ir en ese div, no en el formulario, o solo habria una columna.
 */

body:has(#registration[name="registrationCustom"]) {
    --eureka-rojo: #e2001a;
    --eureka-texto: #16202b;
    --eureka-etiqueta: #4a5763;
    --eureka-suave: #8a94a0;
    --eureka-borde: #dfe3e8;
    --eureka-radio: 10px;
}

/* ---- Ancho util ----------------------------------------------------- */

body:has(#registration[name="registrationCustom"]) #content.page-content {
    max-width: 1180px;
    margin-inline: auto;
    padding: 2.25rem clamp(1rem, 3vw, 2.75rem);
}

/* ---- Rejilla de dos columnas ---------------------------------------- */

body:has(#registration[name="registrationCustom"]) #customer-form > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.35rem;
    align-items: start;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    min-width: 0;
}

/* El navegador esconde [hidden] con un display:none de su hoja por defecto,
   que pierde contra cualquier regla nuestra. Sin esto, el grupo de la
   parroquia salia desde el principio aunque el HTML lo marque oculto. */
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row[hidden] {
    display: none;
}

/* Etiqueta encima, legible, sin mayusculas forzadas */
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > label,
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > .form-control-label {
    width: 100%;
    max-width: none;
    padding: 0;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--eureka-etiqueta);
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > .col-md-6,
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > .col-md-9,
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > .js-input-column {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}

/* ---- Campos ---------------------------------------------------------- */

body:has(#registration[name="registrationCustom"]) #customer-form .form-control,
body:has(#registration[name="registrationCustom"]) #customer-form select.form-control,
body:has(#registration[name="registrationCustom"]) #customer-form input[type="text"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="email"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="password"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="number"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="tel"] {
    width: 100%;
    max-width: none;
    min-height: 46px;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    color: var(--eureka-texto);
    background-color: #fff;
    border: 1px solid var(--eureka-borde);
    border-radius: var(--eureka-radio);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:has(#registration[name="registrationCustom"]) #customer-form .fixed-width-xl {
    width: 100%;
    max-width: none;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-control:hover {
    border-color: #c2c9d1;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-control:focus,
body:has(#registration[name="registrationCustom"]) #customer-form .form-control:focus-visible {
    outline: none;
    border-color: var(--eureka-rojo);
    box-shadow: 0 0 0 3px rgb(226 0 26 / 12%);
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-control-label.required::after {
    content: " *";
    color: var(--eureka-rojo);
}

/* ---- Textos de ayuda -------------------------------------------------
   Eran largos, repetidos y empujaban el formulario hacia abajo. Se
   reservan 0 altura y solo aparecen cuando el campo tiene el foco. */

/* Las leyendas de ayuda se quitan: aparecian al enfocar cada campo y el
   formulario daba saltos segun donde estuviera el cursor. Los avisos de
   validacion no son de esta clase -PrestaShop los pinta en .help-block-
   asi que se siguen viendo. */
body:has(#registration[name="registrationCustom"]) #customer-form .form-control-comment {
    display: none;
}

/* La columna de comentarios del maquetado original ya no pinta nada */
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > .col-md-3.form-control-comment:empty {
    display: none;
}

/* ---- Lo que necesita la fila entera ---------------------------------- */

body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row:has(#mapa-eureka),
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row:has(textarea),
body:has(#registration[name="registrationCustom"]) #customer-form .bloque-documentos,
body:has(#registration[name="registrationCustom"]) #customer-form .form-footer,
body:has(#registration[name="registrationCustom"]) #customer-form > div > .form-group:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
}

/* ---- Mapa ------------------------------------------------------------ */

body:has(#registration[name="registrationCustom"]) #mapa-eureka {
    height: clamp(280px, 36vh, 400px);
    width: 100%;
    border: 1px solid var(--eureka-borde);
    border-radius: var(--eureka-radio);
}


/* El punto elegido se ve siempre, no solo mientras el campo tiene el foco.
   Antes llevaba la clase form-control-comment y perdia contra la regla que
   la esconde, que gana por llevar una clase de mas. */
body:has(#registration[name="registrationCustom"]) .mapa-coordenadas {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--eureka-suave);
}

body:has(#registration[name="registrationCustom"]) .mapa-coordenadas strong {
    color: var(--eureka-texto);
    font-variant-numeric: tabular-nums;
}

/* ---- Documentacion de credito ---------------------------------------- */

body:has(#registration[name="registrationCustom"]) .bloque-documentos {
    padding: 1.5rem;
    background: #fafbfc;
    border: 1px solid var(--eureka-borde);
    border-radius: var(--eureka-radio);
}

body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:first-child {
    margin-bottom: 1rem;
}

body:has(#registration[name="registrationCustom"]) .bloque-documentos h4 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--eureka-texto);
}

/* ---- Los documentos, en fichas ---------------------------------------
   Antes cada uno era una franja de lado a lado y la lista se leia como un
   muro. En fichas de ancho parejo se abarca de un vistazo cuantos faltan.
   auto-fill con minmax deja que quepan dos, tres o cuatro por fila segun el
   sitio, sin media queries. */
body:has(#registration[name="registrationCustom"]) .bloque-documentos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* La cabecera ocupa toda la fila y no lleva recuadro */
body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:first-child,
body:has(#registration[name="registrationCustom"]) .bloque-documentos > div:first-child {
    grid-column: 1 / -1;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

/* Cada documento es una ficha. Solo los que llevan un adjunto: la cabecera
   del bloque tambien es un .form-group.row y se llevaba el recuadro entero,
   con su altura minima, quedando un rectangulo enorme y casi vacio. */
body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:has(input[type="file"]) {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 168px;
    margin: 0;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--eureka-borde);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:has(input[type="file"]):hover,
body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:has(input[type="file"]):focus-within {
    border-color: #9aa5b1;
    box-shadow: 0 4px 14px rgb(16 32 48 / 7%);
}

body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:has(input[type="file"]) > label {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--eureka-texto);
}

/* El campo se lleva el hueco que sobre, asi todas las fichas acaban igual
   de altas aunque sus nombres ocupen una linea o tres */
body:has(#registration[name="registrationCustom"]) .bloque-documentos > .form-group.row:has(input[type="file"]) > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    width: 100%;
    max-width: none;
    padding: 0;
}

body:has(#registration[name="registrationCustom"]) .bloque-documentos input[type="file"] {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.82rem;
    background: #fafbfc;
    border: 1px dashed var(--eureka-borde);
    border-radius: 10px;
    cursor: pointer;
}

body:has(#registration[name="registrationCustom"]) .bloque-documentos input[type="file"]:hover {
    border-color: var(--eureka-rojo);
    background: #fff;
}

/* El formato descargable, al pie de su ficha */
body:has(#registration[name="registrationCustom"]) .bloque-documentos .doc-plantilla {
    margin: 0.7rem 0 0;
}

/* ---- Enlace de inicio de sesion y pie --------------------------------- */

body:has(#registration[name="registrationCustom"]) #customer-form .form-footer {
    margin-top: 1.75rem;
    text-align: right;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-footer button,
body:has(#registration[name="registrationCustom"]) #customer-form .form-footer .btn-primary {
    min-height: 48px;
    padding-inline: 2.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--eureka-radio);
}

/* ---- Movil ------------------------------------------------------------ */

@media (max-width: 767px) {
    body:has(#registration[name="registrationCustom"]) #customer-form > div,
    body:has(#registration[name="registrationCustom"]) .bloque-documentos {
        grid-template-columns: 1fr;
    }

    body:has(#registration[name="registrationCustom"]) #content.page-content {
        padding: 1.25rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#registration[name="registrationCustom"]) #customer-form .form-control {
        transition: none;
    }
}

/* =====================================================================
   Secciones del formulario y ventana de credito
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .registro-seccion {
    grid-column: 1 / -1;
    padding-top: 1.75rem;
    border-top: 1px solid var(--eureka-borde);
}

body:has(#registration[name="registrationCustom"]) .registro-seccion:first-of-type {
    padding-top: 0;
    border-top: 0;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__cabecera {
    margin-bottom: 1.1rem;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--eureka-texto);
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__descripcion {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--eureka-suave);
}

/* Dentro de cada seccion, los campos siguen a dos columnas */
body:has(#registration[name="registrationCustom"]) .registro-seccion__campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.35rem;
    align-items: start;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__campos .form-group.row:has(#mapa-eureka) {
    grid-column: 1 / -1;
}

/* ---- Llamada al credito ---------------------------------------------- */

body:has(#registration[name="registrationCustom"]) .registro-credito {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.25rem;
    background: #fff7f7;
    border: 1px solid #f6d5d8;
    border-radius: var(--eureka-radio);
}

body:has(#registration[name="registrationCustom"]) .registro-credito__texto {
    flex: 1 1 260px;
    margin: 0;
    font-size: 0.92rem;
    color: var(--eureka-etiqueta);
}

body:has(#registration[name="registrationCustom"]) .registro-credito__boton {
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--eureka-rojo);
    border: 0;
    border-radius: var(--eureka-radio);
    cursor: pointer;
    transition: filter 0.15s ease;
}

body:has(#registration[name="registrationCustom"]) .registro-credito__boton:hover { filter: brightness(1.08); }

body:has(#registration[name="registrationCustom"]) .registro-credito__estado {
    flex: 1 1 100%;
    font-size: 0.85rem;
    color: var(--eureka-suave);
}

body:has(#registration[name="registrationCustom"]) .registro-credito__estado--ok { color: #1a7f4b; font-weight: 600; }

/* ---- Ventana del credito ---------------------------------------------- */

/* Columna flexible: la cabecera y el pie se quedan quietos y solo se
   desplaza el cuerpo. Se hace asi y no con position:sticky porque el
   dialogo tiene su propio padding, y un elemento pegajoso dentro de un
   contenedor con relleno se ancla al borde del relleno y no al del
   contenido, dejando ver lo que pasa por detras. */
body:has(#registration[name="registrationCustom"]) .registro-modal {
    width: min(920px, 92vw);
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
    overflow: hidden;
}

/* El display va SOLO en el estado abierto. El navegador esconde un dialogo
   cerrado con display:none de su hoja por defecto, y eso lo pisa cualquier
   regla de autor: al ponerle display:flex a secas, la ventana se pintaba
   cerrada y dentro del flujo, al final del formulario. */
body:has(#registration[name="registrationCustom"]) .registro-modal[open] {
    display: flex;
    flex-direction: column;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__cabecera {
    flex: none;
    padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 1rem;
    background: #fff;
    border-bottom: 1px solid #e6eaee;
}

/* Y con el puntero sobre el fondo oscuro la pagina se movia igual, porque
   showModal() bloquea los clics pero no la rueda. Mientras la ventana este
   abierta, la pagina no se desplaza.
   Va acotado a esta pantalla para no cambiarle el comportamiento al resto
   de la tienda. */
body:has(#registration[name="registrationCustom"]):has(.registro-modal[open]) {
    overflow: hidden;
}

/* Al bloquear la pagina desaparece su barra de desplazamiento y el contenido
   de detras se desplaza unos pixeles a la derecha, con el consiguiente salto
   al abrir y cerrar. Reservando el hueco desde el principio no se mueve
   nada. Aqui no cuesta nada, porque esta pantalla siempre tiene scroll. */
html:has(#registration[name="registrationCustom"]) {
    scrollbar-gutter: stable;
}

body:has(#registration[name="registrationCustom"]) .registro-modal::backdrop {
    background: rgb(15 23 32 / 55%);
}

body:has(#registration[name="registrationCustom"]) .registro-modal__cerrar-form {
    float: right;
    margin: -0.5rem -0.5rem 0 0;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__cerrar {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--eureka-suave);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__cerrar:hover { background: #f1f3f5; }

body:has(#registration[name="registrationCustom"]) .registro-modal__titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--eureka-texto);
}

/* El logo sustituye a la palabra "Eureka" del titulo, asi que se alinea con
   el texto y crece con el */
body:has(#registration[name="registrationCustom"]) .registro-modal__logo {
    height: 1.5em;
    width: auto;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__intro {
    margin: 0;
    font-size: 0.92rem;
    color: var(--eureka-suave);
}

body:has(#registration[name="registrationCustom"]) .registro-modal__cuerpo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.75rem;
    row-gap: 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.35rem clamp(1rem, 3vw, 2.25rem);
    overflow-y: auto;
    /* Al llegar al final, la rueda pasaba a mover la pagina de detras */
    overscroll-behavior: contain;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__cuerpo .bloque-documentos {
    grid-column: 1 / -1;
}

/* El pie tambien se queda quieto: el boton de guardar siempre a la vista */
body:has(#registration[name="registrationCustom"]) .registro-modal__pie {
    display: flex;
    justify-content: flex-end;
    flex: none;
    margin: 0;
    padding: 1.1rem clamp(1rem, 3vw, 2.25rem);
    background: #fff;
    border-top: 1px solid var(--eureka-borde);
}

body:has(#registration[name="registrationCustom"]) .registro-modal__listo {
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: var(--eureka-texto);
    border: 0;
    border-radius: var(--eureka-radio);
    cursor: pointer;
}

@media (max-width: 767px) {
    body:has(#registration[name="registrationCustom"]) .registro-seccion__campos,
    body:has(#registration[name="registrationCustom"]) .registro-modal__cuerpo {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Campo que aparece al elegir el tipo de documento
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .campo-revelable {
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body:has(#registration[name="registrationCustom"]) .campo-revelable--visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    body:has(#registration[name="registrationCustom"]) .campo-revelable {
        transition: none;
        transform: none;
    }
}

/* Variante que ademas se pliega.
   El numero de documento se limita a desvanecerse porque su hueco se
   vuelve a llenar enseguida; la razon social, en cambio, desaparece del
   todo cuando el tipo no es RUC, o dejaria medio renglon vacio en la
   rejilla de dos columnas. */
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row.campo-plegable {
    display: none;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row.campo-plegable.campo-revelable--visible {
    display: flex;
}

/* =====================================================================
   Ventana de credito: maquetado robusto
   El tema posiciona algunas etiquetas, y dentro del dialogo se montaban
   unas sobre otras. Aqui se normaliza todo lo del dialogo.
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .registro-modal .form-group,
body:has(#registration[name="registrationCustom"]) .registro-modal .form-group.row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    min-width: 0;
    position: static;
    float: none;
}

body:has(#registration[name="registrationCustom"]) .registro-modal .form-group label,
body:has(#registration[name="registrationCustom"]) .registro-modal .form-group .form-control-label {
    position: static;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
    color: var(--eureka-etiqueta);
    white-space: normal;
}

body:has(#registration[name="registrationCustom"]) .registro-modal .form-group > div,
body:has(#registration[name="registrationCustom"]) .registro-modal .form-group > .col-md-6,
body:has(#registration[name="registrationCustom"]) .registro-modal .form-group > .col-md-3,
body:has(#registration[name="registrationCustom"]) .registro-modal .form-group > .col-md-9 {
    position: static;
    float: none;
    width: 100%;
    max-width: none;
    padding: 0;
    flex: none;
}

body:has(#registration[name="registrationCustom"]) .registro-modal input[type="file"] {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font-size: 0.88rem;
    background: #fff;
    border: 1px dashed #c8d0d8;
    border-radius: var(--eureka-radio);
}

body:has(#registration[name="registrationCustom"]) .registro-modal input[type="file"]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--eureka-texto);
    background: #f1f3f5;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Dentro del dialogo valen las mismas fichas: solo se ajusta el relleno.
   Antes iba en una sola columna porque las etiquetas largas se amontonaban a
   dos, pero en fichas cada una tiene su sitio y el nombre puede ocupar
   varias lineas sin empujar a las vecinas. */
body:has(#registration[name="registrationCustom"]) .registro-modal .bloque-documentos {
    grid-column: 1 / -1;
    padding: 1.25rem;
}

body:has(#registration[name="registrationCustom"]) .registro-modal .bloque-documentos > .form-group.row {
    margin-bottom: 0;
}

/* =====================================================================
   Expandir la ventana a pantalla completa
   ===================================================================== */

/* Anclados arriba a la derecha de la cabecera. Antes iban flotados, pero el
   titulo ahora es flex -para alinear el logo- y un contenedor flex no rodea
   a los flotantes: se habrian superpuesto. */
body:has(#registration[name="registrationCustom"]) .registro-modal__cabecera {
    position: relative;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__acciones {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

/* Que el titulo no se meta debajo de los botones */
body:has(#registration[name="registrationCustom"]) .registro-modal__titulo {
    padding-right: 5.5rem;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__expandir {
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--eureka-suave);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__expandir:hover { background: #f1f3f5; }

body:has(#registration[name="registrationCustom"]) .registro-modal--ancho {
    width: 96vw;
    max-width: none;
    max-height: 94vh;
}

body:has(#registration[name="registrationCustom"]) .registro-modal--ancho .registro-modal__cuerpo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Al expandir hay sitio para mas fichas por fila; de cuantas caben se
   encarga el propio auto-fill. */
@media (max-width: 767px) {
    body:has(#registration[name="registrationCustom"]) .registro-modal--ancho .registro-modal__cuerpo {
        grid-template-columns: 1fr;
    }

    body:has(#registration[name="registrationCustom"]) .bloque-documentos {
        grid-template-columns: 1fr;
    }
}

/* Grupos sin ningun campo visible (solo llevan un input oculto).
   Dejaban una celda vacia en la rejilla y descolocaban lo que venia detras. */
body:has(#registration[name="registrationCustom"]) .form-group--sin-campos {
    display: none;
}

/* =====================================================================
   Ajustes de legibilidad
   ===================================================================== */

/* El enlace de "¿Ya tiene una cuenta?" ya esta en la cabecera del sitio */
body:has(#registration[name="registrationCustom"]) .register-form > p:first-child {
    display: none;
}

/* Titulos de seccion mas presentes y con separacion clara */
body:has(#registration[name="registrationCustom"]) .registro-seccion {
    padding-top: 2.25rem;
    margin-top: 0.5rem;
    border-top: 2px solid #e6eaee;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__titulo {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__descripcion {
    margin-top: 0.4rem;
    font-size: 0.95rem;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__cabecera {
    margin-bottom: 1.4rem;
}

/* Bordes de campo con mas presencia: los anteriores casi no se veian */
body:has(#registration[name="registrationCustom"]) {
    --eureka-borde: #9aa5b1;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-control,
body:has(#registration[name="registrationCustom"]) #customer-form select.form-control,
body:has(#registration[name="registrationCustom"]) #customer-form input[type="text"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="email"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="password"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="number"],
body:has(#registration[name="registrationCustom"]) #customer-form input[type="tel"],
body:has(#registration[name="registrationCustom"]) .registro-modal input[type="file"] {
    border-width: 1.5px;
    border-color: #9aa5b1;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-control:hover {
    border-color: #6b7784;
}

/* Las etiquetas tambien un punto mas legibles */
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > label,
body:has(#registration[name="registrationCustom"]) #customer-form .form-group.row > .form-control-label {
    font-size: 1rem;
    color: #2d3843;
}

/* Campos que quedan mejor ocupando la fila entera: si van a media fila
   dejan a su lado un hueco o emparejan cosas que no tienen que ver. */
body:has(#registration[name="registrationCustom"]) .registro-seccion__campos .form-group.row:has([name="company"]),
body:has(#registration[name="registrationCustom"]) .registro-seccion__campos .form-group.row:has([name="email"]) {
    grid-column: 1 / -1;
}

/* =====================================================================
   Boton de envio
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .registro-enviar {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 52px;
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    background: var(--eureka-rojo);
    border: 0;
    border-radius: var(--eureka-radio);
    cursor: pointer;
    transition: filter 0.15s ease;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar:hover { filter: brightness(1.08); }

body:has(#registration[name="registrationCustom"]) .registro-enviar__logo {
    height: 26px;
    width: auto;
    /* El logo es blanco sobre fondo transparente, encaja sobre el rojo */
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e6eaee;
}

/* =====================================================================
   Buscador de ubicacion sobre el mapa
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .mapa-buscador {
    position: relative;
    margin-bottom: 0.6rem;
}

body:has(#registration[name="registrationCustom"]) .mapa-buscador input {
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    border: 1.5px solid #9aa5b1;
    border-radius: var(--eureka-radio);
}

body:has(#registration[name="registrationCustom"]) .mapa-buscador__resultados {
    position: absolute;
    z-index: 1000; /* por encima del mapa de Leaflet */
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #c8d0d8;
    border-radius: var(--eureka-radio);
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

body:has(#registration[name="registrationCustom"]) .mapa-buscador__resultados li {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--eureka-texto);
    cursor: pointer;
    border-bottom: 1px solid #eef1f4;
}

body:has(#registration[name="registrationCustom"]) .mapa-buscador__resultados li:last-child { border-bottom: 0; }
body:has(#registration[name="registrationCustom"]) .mapa-buscador__resultados li:hover { background: #f6f8fa; }

/* =====================================================================
   Ajustes finales
   ===================================================================== */

/* Sin descripcion, la cabecera de seccion dejaba un hueco debajo del titulo */
body:has(#registration[name="registrationCustom"]) .registro-seccion__cabecera {
    margin-bottom: 0.9rem;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__cabecera:not(:has(.registro-seccion__descripcion)) {
    margin-bottom: 0.65rem;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion__titulo {
    line-height: 1.2;
}

/* Los resultados del buscador quedaban por debajo de los controles de zoom:
   Leaflet coloca .leaflet-top y .leaflet-bottom en z-index 1000. */
body:has(#registration[name="registrationCustom"]) .mapa-buscador {
    position: relative;
    z-index: 1100;
}

body:has(#registration[name="registrationCustom"]) .mapa-buscador__resultados {
    z-index: 1200;
}

/* ...pero esos 1000-1200 competian con TODA la pagina, asi que al bajar el
   scroll el buscador y los botones de zoom se pintaban por encima de la
   cabecera fija, que esta en 900.
   
   La solucion no es subir el numero de la cabecera -seria empezar una carrera
   que se pierde con el siguiente elemento-, sino encerrar el mapa en su propio
   contexto de apilado. Dentro de el, 1000 y 1200 siguen ordenando el buscador
   sobre el mapa; fuera, el bloque entero vale lo que le toca por orden del
   documento, que es por debajo de la cabecera. */
body:has(#registration[name="registrationCustom"]) .form-group.row:has(#mapa-eureka) {
    isolation: isolate;
}

/* =====================================================================
   Correcciones
   ===================================================================== */

/* Cualquier grupo sin un campo visible dentro deja de ocupar celda.
   Se hace tambien en CSS y no solo desde el JS, por si este no llega a
   ejecutarse. El grupo del mapa queda excluido: solo lleva inputs ocultos
   pero si pinta el mapa. */
body:has(#registration[name="registrationCustom"]) .registro-seccion__campos > .form-group:not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)):not(:has(button)):not(:has(#mapa-eureka)) {
    display: none;
}

/* Sin descripcion, el titulo pegaba directamente con los campos */
body:has(#registration[name="registrationCustom"]) .registro-seccion__cabecera {
    margin-bottom: 0.75rem;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion {
    padding-top: 1.75rem;
}

body:has(#registration[name="registrationCustom"]) .registro-seccion:first-of-type {
    padding-top: 0.25rem;
    margin-top: 0;
    border-top: 0;
}

/* =====================================================================
   El boton ocupa el ancho del formulario
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) #customer-form .form-footer {
    display: block;
    grid-column: 1 / -1;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar,
body:has(#registration[name="registrationCustom"]) .registro-enviar:hover,
body:has(#registration[name="registrationCustom"]) .registro-enviar:focus-visible {
    width: 100%;
    max-width: none;
    float: none;
    /* Con el ancho completo, logo y texto van juntos en el centro */
    justify-content: center;
}

/* El texto se ve siempre.
   Venia de cuando el boton era una pildora estrecha que se ensanchaba al
   pasar el raton: entonces tenia sentido esconderlo. Al pasar a ancho
   completo ese apano se quedo puesto, asi que quedaba una barra verde con
   el logo y sin decir a que da. */
body:has(#registration[name="registrationCustom"]) .registro-enviar span {
    max-width: none;
    opacity: 1;
    white-space: nowrap;
}

/* float-xs-right del tema lo sacaba del flujo y lo dejaba en la esquina */
body:has(#registration[name="registrationCustom"]) #customer-form .form-footer .float-xs-right {
    float: none !important;
}

/* El boletin es una casilla: etiqueta al lado, no encima, y fila entera */
body:has(#registration[name="registrationCustom"]) .grupo-boletin {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center;
    gap: 0.6rem;
}

body:has(#registration[name="registrationCustom"]) .grupo-boletin label {
    width: auto !important;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
}

body:has(#registration[name="registrationCustom"]) .grupo-boletin input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    flex: none;
    accent-color: var(--eureka-rojo);
}

/* Razon social y correo vuelven a media fila, como el resto */
body:has(#registration[name="registrationCustom"]) .registro-seccion__campos .form-group.row:has([name="company"]),
body:has(#registration[name="registrationCustom"]) .registro-seccion__campos .form-group.row:has([name="email"]) {
    grid-column: auto;
}

/* =====================================================================
   El boton principal cambia de papel segun la forma de pago
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito {
    background: #16202b;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito:hover {
    filter: brightness(1.35);
}

/* El aviso ya no lleva boton propio: lo hace el boton principal */
body:has(#registration[name="registrationCustom"]) .registro-credito {
    display: block;
}

body:has(#registration[name="registrationCustom"]) .registro-credito__texto {
    margin: 0 0 0.35rem;
}

body:has(#registration[name="registrationCustom"]) .registro-credito__estado {
    display: block;
    font-size: 0.88rem;
}

/* El boton de expandir lleva un icono SVG: se centra y hereda el color */
body:has(#registration[name="registrationCustom"]) .registro-modal__expandir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body:has(#registration[name="registrationCustom"]) .registro-modal__expandir svg {
    display: block;
}

/* =====================================================================
   Colores del boton: negro para el registro normal, rojo para el credito
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .registro-enviar {
    background: #16202b;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar:hover {
    filter: brightness(1.35);
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito {
    background: var(--eureka-rojo);
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito:hover {
    filter: brightness(1.08);
}

/* =====================================================================
   Boton de credito en amarillo
   Con fondo amarillo el texto y el logo blancos no se leen, asi que el
   contenido pasa a oscuro. El logo es blanco sobre transparente, y
   brightness(0) lo vuelve negro sin necesidad de otro fichero.
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito {
    background: #f5c000;
    color: #16202b;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito:hover {
    filter: brightness(1.06);
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito .registro-enviar__logo {
    filter: brightness(0);
}

/* El logo y el texto se quedan en blanco sobre el amarillo */
body:has(#registration[name="registrationCustom"]) .registro-enviar--credito {
    color: #fff;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito .registro-enviar__logo {
    filter: none;
}

/* Boton de credito en negro (antes verde; pedido del usuario, 22-oct-2026),
   como los demas botones negros de la tienda; al pasar, rojo */
body:has(#registration[name="registrationCustom"]) .registro-enviar--credito {
    background: #16181d;
    color: #fff;
    transition: background-color 0.2s ease;
}

body:has(#registration[name="registrationCustom"]) .registro-enviar--credito:hover {
    background: #e72b37;
    filter: none;
}

/* =====================================================================
   Mapa en el formulario de direcciones de la cuenta
   (no cuelga de #registration: esa pagina tiene otro id de body)
   ===================================================================== */

/* --- El formulario en dos columnas -------------------------------------
   Nombre | Apellidos, Direccion | Edificio, Pais | Provincia,
   Ciudad | Parroquia, Referencia | Telefono, y el mapa a todo el ancho.
   Solo en la pagina de direcciones de la cuenta (body id "address"); el
   HTML es el de PrestaShop mas lo que anade direcciones.js. En el movil,
   una sola columna. */
@media (min-width: 768px) {
    body#address .js-address-form .form-fields {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
    }
    /* Lo que anade direcciones.js va en un envoltorio: que sus campos entren
       en la rejilla como los demas */
    body#address .js-address-form .form-fields > .eureka-direccion-geo {
        display: contents;
    }
    body#address .js-address-form .form-fields .form-group.row {
        margin-left: 0;
        margin-right: 0;
    }
    body#address .js-address-form .form-fields .form-group.row > [class*="col-md-"] {
        float: none;
        width: 100%;
        max-width: none;
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }
    body#address .js-address-form .form-fields .form-control-comment:empty {
        display: none;
    }
    /* El mapa, a todo el ancho. Va al final porque direcciones.js pone el
       telefono antes que el en el HTML (por el orden del tabulador) */
    body#address .js-address-form .form-fields .form-group.row:has(#eureka-mapa) {
        grid-column: 1 / -1;
    }
    /* Lo que PrestaShop mande fuera de un grupo (avisos, textos) ocupa la fila */
    body#address .js-address-form .form-fields > :not(.form-group):not(.eureka-direccion-geo) {
        grid-column: 1 / -1;
    }
}

/* Hasta que se elige la ciudad no hay mapa: un recuadro dice que va aqui */
.mapa-espera {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin: 0;
    padding: 18px 20px;
    border: 1px dashed #cfd6db;
    border-radius: 10px;
    background: #f7f9fa;
    color: #6c7a86;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}
#eureka-mapa:not([hidden]) ~ .mapa-espera {
    display: none;
}

/* Por que no se ha guardado: encima del boton, que es donde se mira */
.eureka-direccion-geo ~ .form-aviso,
form .form-aviso {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fbe4e2;
    color: #9b2c24;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
form .form-aviso[hidden] {
    display: none;
}
form .form-aviso__ir {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

#eureka-mapa {
    height: clamp(280px, 36vh, 400px);
    width: 100%;
    border: 1.5px solid #9aa5b1;
    border-radius: 10px;
}

/* Mismo encierro que en el registro: sin esto, el buscador y los controles
   de zoom se pintan sobre la cabecera fija al bajar el scroll. */
.eureka-direccion-geo .form-group.row:has(#eureka-mapa) {
    isolation: isolate;
}

/* Bootstrap da display:flex a .row, y eso pisa el display:none que el
   navegador aplica a [hidden]. Sin esta linea, el grupo de la parroquia
   saldria antes de elegir ciudad. */
.eureka-direccion-geo .form-group.row[hidden] {
    display: none;
}

/* El nombre de la direccion (alias) es el primer campo del formulario, y el
   personalizador del tema lo esconde con la regla de mas abajo. Se muestra:
   ver direcciones.js. */
/* Mas especifica que la del tema (.js-address-form .form-group:first-of-type),
   que tambien lleva !important y se carga despues: con el mismo peso gana
   ella y el campo seguia escondido, con su error dentro sin verse. */
body .js-address-form .form-fields .form-group.row.eureka-grupo-alias {
    /* block y no flex: como los demas campos, la etiqueta encima */
    display: block !important;
}

/* Los errores de los campos se dicen en el aviso de arriba (direcciones.js):
   el campo queda marcado en rojo, sin repetir el mensaje debajo */
.js-address-form.ek-errores-arriba .form-group.has-error .help-block {
    display: none;
}
.js-address-form .form-group.has-error .form-control {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgb(192 57 43 / 12%);
}
@media (min-width: 768px) {
    /* Sola en su fila, pero con el ancho de una columna: es un nombre corto */
    body#address .js-address-form .form-fields .form-group.eureka-grupo-alias {
        grid-column: 1 / -1;
    }
    body#address .js-address-form .form-fields .form-group.eureka-grupo-alias > [class*="col-md-"] {
        max-width: calc(50% - 12px);
    }
}

/* El personalizador del tema (nrtthemecustomizer, custom_s_1.css) esconde
   ".js-address-form .form-group:first-of-type", pensado para el primer campo
   de PrestaShop. :first-of-type vale tambien para el primero de CUALQUIER
   contenedor, y el primero del bloque de direcciones.js es la parroquia: se
   quedaba escondida aunque se pidiera, y el formulario no se podia guardar.
   Aqui se devuelve a la vista, salvo cuando esta oculta a proposito. */
/* !important porque la del tema lo lleva; gana esta por ser mas especifica */
.js-address-form .eureka-direccion-geo > .form-group.row:first-of-type:not([hidden]) {
    display: flex !important;
}

.eureka-direccion-geo .mapa-buscador {
    position: relative;
    z-index: 1100;
    margin-bottom: 0.6rem;
}

.eureka-direccion-geo .mapa-buscador__resultados {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #c8d0d8;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.eureka-direccion-geo .mapa-buscador__resultados li {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #eef1f4;
}

.eureka-direccion-geo .mapa-buscador__resultados li:hover {
    background: #f6f8fa;
}

#eureka-coordenadas strong {
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Pantalla final del registro (module/eureka_functions/register)
   No cuelga de body:has(#registration[name="registrationCustom"]): ahi ya no hay formulario.
   ===================================================================== */

.eureka-final {
    max-width: 560px;
    margin: clamp(2rem, 7vh, 5rem) auto;
    padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
    text-align: center;
    background: #fff;
    border: 1px solid #e4e8ec;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgb(16 32 48 / 8%);
}

.eureka-final__marca {
    margin-bottom: 1.5rem;
}

.eureka-final__logo {
    max-height: 46px;
    width: auto;
    /* Latido muy suave: presencia de marca sin robar atencion al mensaje */
    animation: eureka-latido 2.8s ease-in-out infinite;
}

@keyframes eureka-latido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* ---- Sello: el circulo se dibuja y despues el trazo ------------------ */

.eureka-final__sello {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.25rem;
}

.eureka-final__sello svg {
    width: 100%;
    height: 100%;
}

.sello-aro {
    stroke: var(--sello-color);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: eureka-trazar 0.6s ease-out forwards;
}

.sello-trazo,
.sello-punto {
    stroke: var(--sello-color);
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: eureka-trazar 0.35s 0.5s ease-out forwards;
}

.sello-punto {
    fill: var(--sello-color);
    stroke: none;
    opacity: 0;
    animation: eureka-aparecer 0.25s 0.8s ease-out forwards;
}

@keyframes eureka-trazar  { to { stroke-dashoffset: 0; } }
@keyframes eureka-aparecer { to { opacity: 1; } }

/* ---- Un color por desenlace ----------------------------------------- */

.eureka-final--exito  { --sello-color: #1f8a4c; }
.eureka-final--espera { --sello-color: #b8860b; }
.eureka-final--error  { --sello-color: #e2001a; }

.eureka-final__titulo {
    margin: 0 0 0.6rem;
    font-size: clamp(1.4rem, 3.4vw, 1.85rem);
    font-weight: 700;
    color: #16202b;
}

.eureka-final__texto {
    margin: 0 auto 1.75rem;
    max-width: 44ch;
    font-size: 1.02rem;
    line-height: 1.55;
    color: #4a5763;
}

/* ---- Resumen de lo registrado --------------------------------------- */

.eureka-final__resumen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem 1.25rem;
    margin: 0 0 1.9rem;
    padding: 1.15rem 1.35rem;
    text-align: left;
    background: #f7f9fa;
    border: 1px solid #e4e8ec;
    border-radius: 12px;
    font-size: 0.94rem;
}

.eureka-final__resumen dt {
    color: #8a94a0;
    font-weight: 500;
    white-space: nowrap;
}

.eureka-final__resumen dd {
    margin: 0;
    color: #16202b;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---- Botones --------------------------------------------------------- */

.eureka-final__acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.eureka-final__boton {
    display: block;
    padding: 0.95rem 1.5rem;
    background: var(--sello-color);
    color: #fff;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.eureka-final__boton:hover,
.eureka-final__boton:focus-visible {
    color: #fff;
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.eureka-final__enlace {
    color: #4a5763;
    font-size: 0.94rem;
    text-decoration: underline;
}

.eureka-final__enlace:hover {
    color: #16202b;
}

.eureka-final__nota {
    margin: 1.5rem 0 0;
    font-size: 0.88rem;
    color: #8a94a0;
}

/* Quien pide menos movimiento ve el resultado, no el camino */
@media (prefers-reduced-motion: reduce) {
    .eureka-final__logo { animation: none; }
    .sello-aro,
    .sello-trazo { animation: none; stroke-dashoffset: 0; }
    .sello-punto { animation: none; opacity: 1; }
    .eureka-final__boton { transition: none; }
}

/* =====================================================================
   Aviso de que las contrasenas coinciden (o no)
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) .aviso-password {
    display: block;
    margin: 0.65rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--eureka-rojo);
}

body:has(#registration[name="registrationCustom"]) .aviso-password--ok {
    color: #1b7a4b;
}

/* [hidden] pierde contra cualquier regla nuestra, y arriba le hemos dado
   display:block */
body:has(#registration[name="registrationCustom"]) .aviso-password[hidden] {
    display: none;
}

/* El borde solo se pone en rojo cuando el usuario ya ha interactuado con el
   campo: :user-invalid no se activa mientras escribe por primera vez, al
   contrario que :invalid, que reprende antes de haber terminado. */
body:has(#registration[name="registrationCustom"]) #customer-form input:user-invalid {
    border-color: var(--eureka-rojo);
}

/* Enlace para descargar el formato que el cliente debe rellenar.
   No usa form-control-comment porque esas estan ocultas a proposito. */
body:has(#registration[name="registrationCustom"]) .doc-plantilla {
    margin: 0.45rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--eureka-suave);
}

body:has(#registration[name="registrationCustom"]) .doc-plantilla a {
    color: var(--eureka-rojo);
    font-weight: 600;
    text-decoration: underline;
}

/* Que formatos y que tamano se admiten. Va con clase propia y no con
   form-control-comment porque esas estan ocultas desde que se quitaron las
   leyendas, y este dato hace falta antes de elegir el archivo. */
body:has(#registration[name="registrationCustom"]) .bloque-documentos__nota {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--eureka-suave);
}

/* ---- Boton para descargar el formato ---------------------------------
   Era un enlace subrayado en letra pequena, perdido bajo el campo de
   adjuntar; siendo el paso previo a todo lo demas, conviene que se vea. */
body:has(#registration[name="registrationCustom"]) .doc-plantilla__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--eureka-rojo);
    text-decoration: none;
    background: #fff;
    border: 1.5px solid var(--eureka-rojo);
    border-radius: 9px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body:has(#registration[name="registrationCustom"]) .doc-plantilla__boton svg {
    width: 16px;
    height: 16px;
    flex: none;
}

body:has(#registration[name="registrationCustom"]) .doc-plantilla__boton:hover,
body:has(#registration[name="registrationCustom"]) .doc-plantilla__boton:focus-visible {
    color: #fff;
    background: var(--eureka-rojo);
}

body:has(#registration[name="registrationCustom"]) .doc-plantilla__nota {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--eureka-etiqueta);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    body:has(#registration[name="registrationCustom"]) .doc-plantilla__boton { transition: none; }
}

/* Declaraciones de renta de una persona natural: si son obligatorias o no
   (renta-condicional.js). Clase propia, como .doc-plantilla__nota. */
body:has(#registration[name="registrationCustom"]) .doc-condicion {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--eureka-etiqueta);
}

body:has(#registration[name="registrationCustom"]) .doc-condicion--obligatoria {
    color: var(--eureka-rojo);
    font-weight: 600;
}

/* ---- Estado de la documentacion ----------------------------------------
   El aviso bajo la forma de pago cambia de color segun lo que falte, y en
   la ventana se resaltan las fichas obligatorias vacias. Estas solo se
   marcan despues de intentar seguir, no nada mas abrir la ventana. */
body:has(#registration[name="registrationCustom"]) .registro-credito:has(.registro-credito__estado--ok) {
    background: #eef8f2;
    border-color: #b7e0c8;
}

body:has(#registration[name="registrationCustom"]) .registro-credito:has(.registro-credito__estado--falta) {
    background: #fff8e6;
    border-color: #f0d48a;
}

body:has(#registration[name="registrationCustom"]) .registro-credito__estado--falta {
    color: #8a5a00;
    font-weight: 600;
}

body:has(#registration[name="registrationCustom"]) .doc-ficha--pendiente > label::after {
    content: " \2014 pendiente";
    font-weight: 500;
    color: #8a5a00;
}

/* =====================================================================
   Pin del mapa: sugerido (lo pone la tienda) o confirmado (el cliente)
   Vale para los dos mapas, por eso no cuelga de body:has(#registration[name="registrationCustom"]).
   ===================================================================== */

.pin-eureka {
    background: none;
    border: 0;
}

.pin-eureka svg {
    display: block;
    width: 30px;
    height: 42px;
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / 30%));
}

.pin-eureka svg circle {
    fill: #fff;
}

/* Sugerido: gris y con un pequeno bote, para que se vea que hay que moverlo */
.pin-eureka--sugerido svg path {
    fill: #8a94a0;
}

.pin-eureka--sugerido svg {
    animation: pin-bote 1.6s ease-in-out infinite;
    transform-origin: 50% 100%;
}

@keyframes pin-bote {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Confirmado: el rojo de la marca, quieto */
.pin-eureka--confirmado svg path {
    fill: #e2001a;
}

@media (prefers-reduced-motion: reduce) {
    .pin-eureka--sugerido svg { animation: none; }
}

/* ---- Aviso bajo el mapa ------------------------------------------------ */

.mapa-estado {
    margin: 0.6rem 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    font-weight: 500;
    color: #4a5763;
}

.mapa-estado--pendiente {
    color: #8a5a00;
}

.mapa-estado--ok {
    color: #1b7a4b;
}

/* Se intento enviar sin colocar el pin: el mapa se resalta un momento */
.mapa-reclamado #mapa-eureka,
.mapa-reclamado #eureka-mapa {
    outline: 3px solid #e0a800;
    outline-offset: 2px;
}

/* ---- Boton "Usar mi ubicacion actual" ---------------------------------- */

/* Va dentro del mapa, arriba a la derecha, como un control de Leaflet. Los
   margenes los igualo a los suyos (10px del borde) con la misma
   especificidad: esta hoja se carga despues y gana el empate. */
.leaflet-control.mapa-mi-ubicacion {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 10px 10px 0 0;
    padding: 0.55rem 1rem 0.55rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a5fb4;
    background: #fff;
    border: 0;
    border-radius: 999px;
    /* Sin borde y con sombra, que es como se distinguen los controles que
       flotan sobre un mapa */
    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mapa-mi-ubicacion:hover,
.mapa-mi-ubicacion:focus-visible {
    background: #f3f7fc;
}

.mapa-mi-ubicacion:disabled {
    cursor: progress;
}

.mapa-mi-ubicacion svg {
    width: 20px;
    height: 20px;
    flex: none;
}

/* En pantallas estrechas no cabe el texto: solo el icono. El nombre sigue
   en aria-label para los lectores de pantalla. */
@media (max-width: 575px) {
    .leaflet-control.mapa-mi-ubicacion {
        padding: 0.6rem;
    }
    .mapa-mi-ubicacion span {
        display: none;
    }
}

/* Mientras busca, el punto del centro late */
.mapa-mi-ubicacion--buscando svg circle:last-of-type {
    animation: gps-late 1s ease-in-out infinite;
    transform-origin: 12px 12px;
}

@keyframes gps-late {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .mapa-mi-ubicacion--buscando svg circle:last-of-type { animation: none; }
}

/* Lo que dijo el dispositivo no sirve: el pin se queda donde estaba */
.mapa-estado--aviso {
    color: #8a5a00;
}

/* ---- Tarjeta de aviso dentro del mapa ---------------------------------
   Para lo que dice el dispositivo al pedir su ubicacion. Abajo del mapa, en
   letra pequena, pasaba desapercibido; aqui, encima de lo que se esta
   mirando, no. */
.mapa-tarjeta {
    position: absolute;
    left: 50%;
    bottom: 16px;
    /* Por encima de los controles de Leaflet, que estan en 1000 */
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 1rem 0.7rem 1rem 1.25rem;
    font-size: 1.02rem;
    line-height: 1.45;
    color: #fff;
    background: #202124;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
    transform: translate(-50%, 12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.mapa-tarjeta--visible {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mapa-tarjeta__texto {
    flex: 1 1 auto;
}

.mapa-tarjeta__accion {
    flex: none;
    padding: 0.4rem 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8ab4f8;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

/* Un display de autor pisa el display:none que el navegador da a [hidden] */
.mapa-tarjeta__accion[hidden] {
    display: none;
}

.mapa-tarjeta__cerrar {
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.mapa-tarjeta__accion:hover,
.mapa-tarjeta__accion:focus-visible,
.mapa-tarjeta__cerrar:hover,
.mapa-tarjeta__cerrar:focus-visible {
    background: rgb(255 255 255 / 12%);
}

@media (max-width: 575px) {
    .mapa-tarjeta {
        bottom: 10px;
        max-width: calc(100% - 20px);
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapa-tarjeta,
    .mapa-tarjeta--visible {
        transition: none;
    }
}

/* El aviso de estado del pin, bajo el mapa, tambien se leia pequeno: el
   tema le ganaba el tamano de letra */
#customer-form .mapa-estado,
.eureka-direccion-geo .mapa-estado {
    font-size: 0.95rem;
}

/* =====================================================================
   Mismo aspecto que el resto de la tienda (diseno.css): cada seccion es
   una tarjeta con su numero en un circulo, como los pasos del checkout;
   el rojo de la marca en vez de otro parecido (#e2001a) y botones en
   pastilla. Los bordes de los campos se quedan con el contraste que se
   les subio arriba ("Bordes de campo con mas presencia").
   ===================================================================== */

body:has(#registration[name="registrationCustom"]) {
    --eureka-rojo: var(--color-primary, #e72b37);
    --eureka-radio: 12px;
}

/* La caja de la pagina ya no hace falta: las tarjetas son las secciones */
body:has(#registration[name="registrationCustom"]) #content.page-content {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: 0;
    /* diseno.css le pone overflow hidden a la caja de iniciar sesion (a esta
       pagina tambien se llega por iniciar-sesion?create_account=1) y
       cortaria la sombra de las tarjetas */
    overflow: visible;
}

body:has(#registration[name="registrationCustom"]) #customer-form > div {
    counter-reset: ek-seccion;
    row-gap: 1.25rem;
}

body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion,
body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion:first-of-type {
    margin: 0;
    padding: 1.6rem 1.75rem 1.75rem;
    border: 1px solid #e9ecf0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 6%);
    counter-increment: ek-seccion;
    transition: box-shadow 0.25s, border-color 0.25s;
}

/* La seccion en la que se esta escribiendo se destaca, como el paso actual */
body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion:focus-within {
    border-color: #f1d4d6;
    box-shadow: 0 14px 32px rgb(16 24 40 / 10%), 0 2px 6px rgb(16 24 40 / 6%);
}

body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion__cabecera {
    margin-bottom: 1.35rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecf0;
}

body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion__titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.3rem;
}

body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion__titulo::before {
    content: counter(ek-seccion);
    display: inline-grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--eureka-rojo);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
}

/* La descripcion alineada con el texto del titulo, no con el circulo */
body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion__descripcion {
    margin-left: calc(32px + 0.75rem);
}

/* El mapa y las fichas de documentos con el mismo redondeo que las tarjetas */
body:has(#registration[name="registrationCustom"]) #mapa-eureka {
    border-radius: 16px;
    overflow: hidden;
}

/* Llamada al credito y sus botones */
body:has(#registration[name="registrationCustom"]) .registro-credito {
    border-radius: 16px;
}

body:has(#registration[name="registrationCustom"]) .registro-credito__boton,
body:has(#registration[name="registrationCustom"]) .registro-enviar,
body:has(#registration[name="registrationCustom"]) #customer-form .form-footer button,
body:has(#registration[name="registrationCustom"]) #customer-form .form-footer .btn-primary {
    border-radius: 999px;
}

body:has(#registration[name="registrationCustom"]) #customer-form .form-footer {
    margin-top: 0.5rem;
}

@media (max-width: 767px) {
    body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion,
    body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion:first-of-type {
        padding: 1.2rem 1rem 1.25rem;
        border-radius: 16px;
    }

    body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion__descripcion {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion {
        transition: none;
    }
}

/* Los documentos usan la zona de adjuntos.js (estilos en diseno.css): el
   input queda invisible encima de ella y las reglas de arriba para el input
   a la vista ya no le tocan */
body:has(#registration[name="registrationCustom"]) .ek-adjunto > input[type="file"] {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* ---------------------------------------------------------------------
 * Borrador de la solicitud (borrador-solicitud.js): ventana que avisa de
 * que se retomo lo que el cliente ya habia llenado, con el carrito de
 * Eureka, "Entendido" y "Prefiero empezar de nuevo".
 * --------------------------------------------------------------------- */
dialog.ek-borrador {
    width: min(420px, calc(100vw - 32px));
    margin: auto;
    padding: 32px 28px 22px;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgb(16 24 32 / 25%);
    text-align: center;
    color: #16181d;
}
dialog.ek-borrador[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: ek-borrador-entra .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
dialog.ek-borrador::backdrop {
    background: rgb(16 24 32 / 45%);
    backdrop-filter: blur(2px);
}
.ek-borrador__logo {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    filter: drop-shadow(0 8px 14px rgb(231 43 55 / 25%));
    animation: ek-borrador-logo .6s cubic-bezier(.2, .9, .3, 1.3) .1s both;
}
.ek-borrador__titulo {
    margin: 0 0 8px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}
.ek-borrador__detalle {
    margin: 0 0 22px;
    font-size: 1.45rem;
    line-height: 1.5;
    color: #5f6b76;
}
.ek-borrador__entendido {
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 999px;
    background: #16181d;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
.ek-borrador__entendido:hover {
    background: #e72b37;
}
/* Recibe el foco al abrirse: con un contorno, no con el color del hover */
.ek-borrador__entendido:focus-visible {
    outline: 3px solid rgb(231 43 55 / 35%);
    outline-offset: 3px;
}
.ek-borrador__reiniciar {
    margin-top: 12px;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: #5f6b76;
    font-size: 1.3rem;
    text-decoration: underline;
    cursor: pointer;
}
.ek-borrador__reiniciar:hover { color: #16181d; }
@keyframes ek-borrador-entra {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
}
@keyframes ek-borrador-logo {
    from { opacity: 0; transform: scale(.5) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
    dialog.ek-borrador[open], .ek-borrador__logo { animation: none; }
}

/* Volver a abrir la solicitud de credito desde el aviso de la documentacion */
body:has(#registration[name="registrationCustom"]) .registro-credito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}
body:has(#registration[name="registrationCustom"]) .registro-credito__estado {
    flex: 1 1 220px;
}
body:has(#registration[name="registrationCustom"]) .registro-credito__revisar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid #16181d;
    border-radius: 999px;
    background: #fff;
    color: #16181d;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body:has(#registration[name="registrationCustom"]) .registro-credito__revisar:hover,
body:has(#registration[name="registrationCustom"]) .registro-credito__revisar:focus-visible {
    background: #16181d;
    color: #fff;
}

/* =====================================================================
   Registro paso a paso (registro-pasos.js, 22-oct-2026)
   ===================================================================== */

/* Mientras registro.js reparte los campos, el formulario no se ve: antes se
   veia un momento con los campos de PrestaShop seguidos y luego se ordenaba.
   Solo con JavaScript (html.ek-js) y como mucho 4 s (html.ek-js-tarde). */
html.ek-js:not(.ek-js-tarde) body:has(#registration[name="registrationCustom"]) #customer-form:not(.ek-pasos-listo) {
    visibility: hidden;
}

/* El titulo grande de la pagina (con las migas) empujaba el formulario hacia
   abajo: escondido (queda para lectores de pantalla); el titulo va en la
   barra de pasos */
body:has(#registration[name="registrationCustom"]) .page-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0 !important;
    padding: 0 !important;
}
body:has(#registration[name="registrationCustom"]) #wrapper {
    padding-top: 22px !important;
}

/* Barra de pasos (y Atras / Siguiente): a todo el ancho de la rejilla del
   formulario */
body:has(#registration[name="registrationCustom"]) .ek-pasos,
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav {
    grid-column: 1 / -1;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos {
    position: relative;
    margin: 0 0 18px;
    padding: 18px 20px 22px;
    border: 1px solid #e3e5e8;
    border-radius: 18px;
    background: #fff;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos::before {
    content: "Crear una cuenta";
    display: block;
    /* Centrado, con el carrito a su izquierda */
    width: max-content;
    max-width: 100%;
    margin: 0 auto 16px;
    padding-left: 44px;
    background: url("../img/eureka-carrito.png") left center / 34px 34px no-repeat;
    font-size: 21px;
    font-weight: 800;
    line-height: 34px;
    color: #16181d;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__boton {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 4px;
    border: 0;
    background: none;
    text-align: left;
    cursor: default;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__paso--abierto .ek-pasos__boton {
    cursor: pointer;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__numero {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 2px solid #d9dde1;
    border-radius: 50%;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
    color: #8a949e;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__nombre {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #8a949e;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__paso--actual .ek-pasos__numero {
    border-color: #e72b37;
    background: #e72b37;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgb(231 43 55 / 14%);
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__paso--actual .ek-pasos__nombre {
    color: #16181d;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__paso--hecho .ek-pasos__numero {
    border-color: #1f8a4c;
    background: #1f8a4c;
    color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__paso--hecho .ek-pasos__nombre {
    color: #1f6b3f;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__progreso {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 4px;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
    background: #f1f2f4;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos__progreso span {
    display: block;
    height: 100%;
    width: 0;
    background: #e72b37;
    transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* El numero de cada seccion, el de su paso (data-paso) */
body:has(#registration[name="registrationCustom"]) #customer-form .registro-seccion__titulo[data-paso]::before {
    content: attr(data-paso);
}

/* Una seccion a la vez, con una entrada suave */
body:has(#registration[name="registrationCustom"]) .registro-seccion[hidden] {
    display: none !important;
}
body:has(#registration[name="registrationCustom"]) .registro-seccion.ek-paso-entra {
    animation: ek-paso-entra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ek-paso-entra {
    from { opacity: 0; transform: translateX(14px); }
}

/* Atras / Siguiente */
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 6px;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__cuenta {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #8a949e;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__atras,
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__siguiente {
    min-height: 50px;
    padding: 0 28px;
    border: 1.5px solid #16181d;
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    color: #16181d;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__siguiente {
    margin-left: auto;
    border-color: #e72b37;
    background: #e72b37;
    color: #fff;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__siguiente:hover {
    border-color: #c41f2a;
    background: #c41f2a;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__atras:hover {
    background: #16181d;
    color: #fff;
}
body:has(#registration[name="registrationCustom"]) .ek-pasos-nav [hidden] {
    display: none;
}
body:has(#registration[name="registrationCustom"]) #customer-form .form-footer[hidden] {
    display: none !important;
}

@media (max-width: 767.98px) {
    body:has(#registration[name="registrationCustom"]) .ek-pasos {
        padding: 14px 14px 18px;
    }
    /* En el movil, solo el numero; el nombre del paso actual debajo */
    body:has(#registration[name="registrationCustom"]) .ek-pasos__boton {
        justify-content: center;
    }
    body:has(#registration[name="registrationCustom"]) .ek-pasos__nombre {
        display: none;
    }
    body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__atras,
    body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__siguiente {
        padding: 0 18px;
    }
    body:has(#registration[name="registrationCustom"]) .ek-pasos-nav__cuenta {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#registration[name="registrationCustom"]) .registro-seccion.ek-paso-entra {
        animation: none;
    }
}