/* Store4Bike · Unificacion de las paginas que no tienen diseño propio.
 *
 * QUE PAGINAS: contacto, identificarse, registro, mi cuenta, direcciones,
 * pedidos, paginas legales (CMS), busqueda, novedades, mas vendidos,
 * rebajados, marcas, seguimiento de pedido, 404 y carrito.
 *
 * QUE PAGINAS NO, y por que:
 *   · portada, categoria, ficha y blog ya tienen su hoja propia;
 *   · **EL PROCESO DE PAGO SE QUEDA FUERA A PROPOSITO.** Es el camino del
 *     dinero y lo pinta un modulo de terceros (`ets_onepagecheckout`); tocarlo
 *     de pasada, dentro de una pasada de estilo que abarca quince paginas, es
 *     la forma de romper una compra sin enterarse. Merece su propia pasada, con
 *     su propia comprobacion de que se puede pagar.
 * El interruptor esta en `_partials/head.tpl`, por nombre de pagina.
 *
 * QUE SE UNIFICA, medido en contacto y en identificarse el 13/09/2026:
 *   1. la BANDA GRIS del titulo (115 px, titulo centrado + miga) — el resto del
 *      sitio ya no la usa;
 *   2. el `text-transform: capitalize` de los encabezados, que en castellano
 *      escribe mal («Contacte Con Nosotros»);
 *   3. el BOTON PRINCIPAL en rojo `#ff0123` — en la misma pagina, el boton del
 *      buscador ya era negro. Dos botones primarios de dos colores distintos en
 *      una pantalla no es una jerarquia, es un descuido;
 *   4. los textos en el `#253237` del tema en vez del negro de la tienda.
 *
 * Sin border-radius: manda `sin-radios.css`.
 */

/* ================================================================== */
/*  1 · La banda gris del titulo                                       */
/* ================================================================== */
/* No se oculta: se deja de ver como banda. El titulo y la miga siguen ahi
   —hacen falta— pero alineados a la izquierda y sin fondo, como en la ficha de
   producto. Ocultarla del todo dejaria estas paginas sin H1 visible. */
.s4b-pag .page-title-wrapper,
.s4b-pag .page-heading {
    /* `!important` en el fondo y el relleno: los pone Creative Elements en un
       `<style>` EN LINEA y con `!important`, igual que en la ficha de producto.
       Es la tercera vez que muerde; en esta instalacion, si un ajuste de
       espaciado o de fondo «no se aplica», la causa por defecto es esa. */
    background: transparent !important;
    padding: 18px 0 0 !important;
    margin-bottom: 10px;
    text-align: left;
}

/* DOS H1 EN LA MISMA PAGINA. En contacto los dos decian «Contacte con
 * nosotros». NO son dos bandas: es **una sola banda con dos `.page-header`
 * dentro** — medido, porque la suposicion razonable (una banda + un titulo en
 * el contenido) era falsa y una regla basada en ella no hacia nada.
 * Se oculta el segundo en adelante, nunca el primero: asi la pagina se queda
 * siempre con exactamente un h1. */
.s4b-pag .page-title-wrapper .page-header ~ .page-header {
    display: none;
}

/* El `<ol>` de la miga es flex con `justify-content: center`: `text-align` no
   lo mueve, hay que tocar el eje del flex. Misma trampa que en la ficha. */
.s4b-pag .breadcrumb ol {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.s4b-pag .breadcrumb li,
.s4b-pag .breadcrumb li a {
    font-size: 12px;
    color: #6b6b6b;
}

/* ================================================================== */
/*  2 · Encabezados                                                    */
/* ================================================================== */
.s4b-pag h1,
.s4b-pag .page-header h1,
.s4b-pag h2,
.s4b-pag h3 {
    /* El tema capitaliza los encabezados y en castellano eso escribe mal. */
    text-transform: none;
    color: #1a1a1a;
}

.s4b-pag h1,
.s4b-pag .page-header h1 {
    font-size: 28px;
    line-height: 1.15;
    text-align: left;
}

.s4b-pag h2 { font-size: 20px; }

/* ================================================================== */
/*  3 · Botones                                                        */
/* ================================================================== */
/* NEGRO, como en toda la tienda. El rojo se reserva para el precio y para el
   estado de `:hover`, que son señales distintas.
   `!important` porque el tema los pinta desde su paquete generado con
   selectores largos; sin el hay que ir persiguiendo cada uno. */
/* `.btn-default` entra tambien: el boton «Seleccionar archivo» del formulario
   de contacto lo lleva, y estaba en rojo mientras el de enviar quedaba negro. */
.s4b-pag .btn-primary,
.s4b-pag .btn-default,
.s4b-pag button[type="submit"].btn,
.s4b-pag input[type="submit"].btn,
.s4b-pag .form-control-submit {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
}

.s4b-pag .btn-primary:hover,
.s4b-pag button[type="submit"].btn:hover,
.s4b-pag .form-control-submit:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* El secundario, en blanco con borde: asi se distingue del principal sin
   meter un tercer color. */
.s4b-pag .btn-secondary,
.s4b-pag .btn-outline-primary {
    background: #fff !important;
    border: 1px solid #1a1a1a !important;
    color: #1a1a1a !important;
}

/* ================================================================== */
/*  4 · Formularios                                                    */
/* ================================================================== */
.s4b-pag .form-control-label,
.s4b-pag label {
    color: #1a1a1a;
    font-weight: 600;
    /* El tema alinea las etiquetas a la DERECHA (es su estilo de formulario) y
       eso descoloca el texto. Misma correccion que en el banner de cookies. */
    text-align: left;
}

.s4b-pag .form-control,
.s4b-pag input[type="text"],
.s4b-pag input[type="email"],
.s4b-pag input[type="password"],
.s4b-pag input[type="tel"],
.s4b-pag select,
.s4b-pag textarea {
    background: #fff;
    border: 1px solid #cfcfcf;
    color: #1a1a1a;
    /* 16px o iOS hace zoom al enfocar el campo. Es la misma razon que en el
       buscador de la cabecera. */
    font-size: 16px;
}

.s4b-pag .form-control:focus,
.s4b-pag select:focus,
.s4b-pag textarea:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: -2px;
    border-color: #1a1a1a;
}

/* ================================================================== */
/*  5 · Texto corrido (paginas legales y «quiénes somos»)              */
/* ================================================================== */
/* Estas paginas son texto largo y hoy se leen a todo el ancho del contenedor.
   A 1440 px eso son mas de 200 letras por renglon. */
.s4b-pag .page-content.page-cms,
.s4b-pag #main .rte {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

.s4b-pag .page-content.page-cms h2,
.s4b-pag .page-content.page-cms h3 {
    margin: 30px 0 12px;
}

.s4b-pag .page-content.page-cms p { margin: 0 0 16px; }

.s4b-pag .page-content.page-cms ul,
.s4b-pag .page-content.page-cms ol {
    margin: 0 0 16px;
    padding-left: 22px;
    list-style: disc;
}

.s4b-pag .page-content.page-cms ol { list-style: decimal; }

.s4b-pag .page-content.page-cms a {
    color: #1a1a1a;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .s4b-pag h1,
    .s4b-pag .page-header h1 { font-size: 23px; }
    .s4b-pag .page-content.page-cms,
    .s4b-pag #main .rte { font-size: 15px; }
}

/* ================================================================== */
/*  6 · ACCESO: entrar, crear cuenta y recuperar contraseña            */
/*      (15/09/2026, peticion del cliente sobre la pagina de login)    */
/* ================================================================== */
/* LAS TRES COMPARTEN EL MISMO MECANISMO DE FORMULARIO de PrestaShop, asi que
 * tenian el MISMO descuadre. Por eso se arreglan juntas:
 *   body#authentication · body#registration · body#password
 *
 * LO QUE ESTABA MAL, MEDIDO A 1200 Y A 390, no opinado:
 *   - el formulario ocupaba 1.018 px y el campo de correo 652;
 *   - correo y contraseña NO cerraban a la misma derecha (652 contra 563),
 *     porque el boton «Mostrar» se come el hueco del segundo;
 *   - la etiqueta iba en una columna Bootstrap de 168 px y «Direccion de
 *     correo electronico» partia en dos lineas al lado de un campo vacio;
 *   - en movil la etiqueta arrancaba en x=41 y el campo en x=51;
 *   - los campos median 38 px de alto, por debajo del suelo de 44 que se
 *     respeta en el resto de la tienda.
 *
 * LA CAUSA ES LA DE SIEMPRE EN ESTE TEMA: `form-fields.tpl` da por hecho que
 * su padre es una fila de Bootstrap y reparte `col-md-2 / col-md-8 /
 * col-md-2`. Es el mismo problema que descuadro la barra del listado con
 * `sort-orders.tpl`. **No se toca la plantilla**: la usan tambien la ficha de
 * direccion y el proceso de pago, que es el camino del dinero. Se anulan las
 * columnas desde aqui, acotado a estas tres paginas por el id del `body`. */

/* --- la columna ---------------------------------------------------- */
/* EL TITULO ENTRA EN LA MISMA COLUMNA QUE EL FORMULARIO, y no es un adorno:
 * el `<h1>` vive FUERA de `#content` (en `header.page-header`), asi que
 * centrando solo el formulario quedaba un titulo pegado al margen izquierdo y
 * un formulario en mitad de la pantalla — dos ejes distintos. Con los dos en
 * la misma caja de 420 px se leen como un bloque.
 * La miga de pan se queda a todo el ancho a proposito: es la navegacion de la
 * pagina, no parte del formulario. */
body#authentication .page-header,
body#registration .page-header,
body#password .page-header,
body#authentication #content,
body#registration #content,
body#password #content {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* `#content` es un `.card` de Bootstrap: de ahi salian el recuadro y los 30 px
   de relleno. Se retira el borde —decision del cliente, y es lo coherente con
   la portada desde que se quitaron los bordes de contenedor—. Para reponerlo
   basta con devolver aqui `border: 1px solid #e3e3e3` y su relleno. */
body#authentication #content,
body#registration #content,
body#password #content {
    padding: 0;
    border: 0;
    background: none;
}

/* EL TITULO Y EL FORMULARIO CUELGAN DE CAJAS DISTINTAS, y por eso centrar los
 * dos con `margin: auto` NO los deja en el mismo sitio: el `<h1>` vive FUERA de
 * `#content`, en `.page-title-wrapper > .container`, mientras que `#content`
 * cuelga de `#main` con tres rellenos mas por el camino. Medido antes de
 * tocarlo: titulo en 510..930 y formulario en 540..960, **30 px de descuadre**.
 *
 * SE IGUALAN LAS DOS CAJAS, NO SE COMPENSA LA DIFERENCIA. El primer intento fue
 * un relleno de 90 px en el contenedor del titulo, calculado para reproducir la
 * caja de `#main`: **acertaba a 1440 y fallaba por 5 px a 768**. Dos motivos, y
 * los dos invisibles desde el CSS propio:
 *   - por debajo de 991 px Creative Elements cambia esos mismos rellenos a 5 px
 *     **con `!important`**, asi que la cadena mide otra cosa;
 *   - y ese `!important` se comia ademas la regla de los 90 px, que no lo
 *     llevaba: el ajuste no llegaba ni a aplicarse.
 * Dandole a los DOS contenedores el mismo relleno y anulando los intermedios,
 * comparten eje **por construccion**, sin ningun numero que se descuadre el dia
 * que alguien toque un relleno. */
body#authentication #wrapper > .page-title-wrapper > .container,
body#registration #wrapper > .page-title-wrapper > .container,
body#password #wrapper > .page-title-wrapper > .container,
body#authentication #wrapper > .container,
body#registration #wrapper > .container,
body#password #wrapper > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Los tres rellenos que hay entre `.container` y `#content` son ASIMETRICOS
   —solo por la izquierda— asi que sin anularlos el formulario se centra contra
   una caja distinta que el titulo. */
body#authentication .row-wrapper,
body#registration .row-wrapper,
body#password .row-wrapper,
body#authentication #content-wrapper,
body#registration #content-wrapper,
body#password #content-wrapper,
body#authentication #main,
body#registration #main,
body#password #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Y EL MARGEN NEGATIVO DE `.row`, QUE ES OTRA COSA Y SE VE EN OTRO SITIO.
 * Bootstrap le da a la fila `margin: 0 -10px` para compensar el relleno de sus
 * columnas; al anular ese relleno arriba, el margen se queda suelto y saca el
 * formulario 10 px por los dos lados.
 * **En escritorio NO se nota, y ahi esta la trampa**: como el bloque va
 * centrado con `max-width: 420px`, restar 10 a la izquierda y sumar 10 a la
 * derecha deja el eje en el mismo sitio. Solo aparece por debajo de 576 px,
 * donde el formulario ocupa la caja entera: medido a 390, titulo en 15 y
 * formulario en 5. */
body#authentication .row-wrapper,
body#registration .row-wrapper,
body#password .row-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- sin miga de pan ------------------------------------------------ */
/* DECISION DEL CLIENTE (15/09/2026): «en estas paginas creo que da igual no
 * tener breadcrumbs». Y encaja: la miga de estas tres solo decia «Inicio /
 * <el mismo texto que el h1 de debajo>», o sea que no llevaba a ningun sitio
 * al que no se llegue desde la cabecera, que esta entera arriba.
 * DE PASO SE LLEVA POR DELANTE DOS APAÑOS que ya no hacen falta: el que la
 * devolvia a su margen tras centrar el titulo, y el de la barra colgando en
 * movil (Creative Elements oculta los niveles por debajo de 991 px y dejaba
 * «Inicio /» suelto).
 * **El marcado y el JSON-LD de la miga siguen intactos**: esto solo deja de
 * pintarla. Para recuperarla, borrar este bloque — y entonces vuelve el
 * separador suelto en movil, que se arreglaba con
 * `li:nth-last-child(2)::after { content: '' }`. */
body#authentication .breadcrumb,
body#registration .breadcrumb,
body#password .breadcrumb {
    display: none;
}

/* --- la etiqueta pasa ENCIMA del campo ------------------------------ */
/* Se anula la rejilla en los TRES sitios donde el tema la escribe: la etiqueta
   (`col-md-2` o `col-md-3`), el campo (`col-md-8` o `col-md-5`) y la columna
   de ayuda (`col-md-2 form-control-comment`). Se busca por `[class*="col-"]`
   en vez de enumerarlas: las tres paginas usan repartos distintos y una lista
   cerrada se queda corta en cuanto PrestaShop cambie una. */
body#authentication .form-group,
body#registration .form-group,
body#password .form-group {
    display: block;
    margin: 0 0 18px;
    /* EL RELLENO HAY QUE ANULARLO CON `!important`, Y NO ES MANIA: estos grupos
     * llevan la clase `.row`, y Creative Elements inyecta EN LINEA
     *     #main, .container, .row, … { padding-left: 30px }
     * y, por debajo de 991 px, `padding-left: 5px !important`.
     * Por eso los campos arrancaban 30 px mas adentro que los botones en
     * escritorio y 5 px en movil — un descuadre DENTRO de la propia columna que
     * solo se ve midiendo los dos. Un `!important` vence a cualquier selector
     * que no lo lleve, asi que sin esto la mitad movil del arreglo no aplica. */
    padding: 0 !important;
}

body#authentication .form-group > [class*="col-"],
body#registration .form-group > [class*="col-"],
body#password .form-group > [class*="col-"] {
    float: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    padding-left: 0;
    padding-right: 0;
}

body#authentication .form-group > label,
body#registration .form-group > label,
body#password .form-group > label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    /* El tema alinea las etiquetas a la derecha; ya se anula mas arriba, pero
       aqui la etiqueta va justo encima del campo y el descuadre cantaria. */
    text-align: left;
}

/* La columna de ayuda queda debajo del campo, que es donde se lee. En el login
   viene VACIA —solo espacios— y un bloque con espacios colapsados no genera
   linea, asi que no abre ningun hueco. */
body#authentication .form-control-comment,
body#registration .form-control-comment,
body#password .form-control-comment {
    margin-top: 6px;
    font-size: 13px;
    color: #6b6b6b;
}

/* --- los campos ----------------------------------------------------- */
/* 44 px es el mismo suelo de pulsacion que la barra del listado y la cabecera:
   con el dedo, un objetivo mas bajo se falla. El `font-size` lo hereda de la
   seccion 4 y son 16 px, que es lo que evita el zoom de iOS. */
body#authentication .form-control,
body#registration .form-control,
body#password .form-control {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
}

/* El grupo de la contraseña: el campo y «Mostrar» forman UNA caja. Sin esto el
   campo se queda corto y su borde derecho no cuadra con el del correo, que es
   justo el descuadre que se ve en pantalla. */
body#authentication .input-group,
body#registration .input-group {
    display: flex;
    width: 100%;
}

/* `flex: 1 1 0` Y `width: auto`, NO `1 1 auto`: la regla de arriba le pone
   `width: 100%` a todo `.form-control`, y con base `auto` esa anchura ES la
   base de reparto — el campo pide los 420 enteros y **el boton «Mostrar» se
   sale 88 px por la derecha**, que es justo lo que se midio en el primer
   intento. Con base 0 el campo ocupa lo que sobra. */
body#authentication .input-group .form-control,
body#registration .input-group .form-control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

/* `width: auto` ES LO QUE ARREGLA EL DESBORDE, y no se adivina: el tema monta
   el grupo con la maquetacion de TABLA de Bootstrap 3
   (`.input-group { display: table }` + `.input-group-btn { width: 1% }`), un
   truco para que la celda del boton se encoja a su contenido. En una caja
   flex ese 1% deja de ser un truco y pasa a ser una anchura de verdad: **3,9
   px**, con el boton de 92 px saliendose por la derecha. Se vio midiendo, no
   leyendo el CSS — el `.input-group` ya decia `display: flex` y parecia
   correcto. */
body#authentication .input-group-btn,
body#registration .input-group-btn {
    flex: 0 0 auto;
    display: flex;
    width: auto;
}

body#authentication .input-group-btn .btn,
body#registration .input-group-btn .btn {
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #cfcfcf;
    border-left: 0;
    background: #f4f4f4;
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 600;
}

body#authentication .input-group-btn .btn:hover,
body#registration .input-group-btn .btn:hover {
    background: #e6e6e6;
    color: #1a1a1a;
}

/* --- botones -------------------------------------------------------- */
/* A ancho completo de la columna: son LA accion de la pagina. En movil ya lo
   hacia `botones-movil.css`; aqui vale tambien en escritorio porque la columna
   mide 420 y un boton suelto de 120 px dentro se lee como un detalle.
   Se toca solo el ANCHO, nunca el `display`: la pagina de recuperar contraseña
   trae DOS botones —uno para escritorio y otro para movil— que el tema oculta
   con sus clases `hidden-*`, y forzar `display` sacaria los dos a la vez. */
body#authentication .form-footer .btn,
body#registration .form-footer .btn,
body#password .form-control-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    /* El tema capitaliza los botones y en castellano eso escribe mal: el
       boton decia «Iniciar Sesión». Misma correccion que en los titulos. */
    text-transform: none;
}

body#authentication .form-footer,
body#registration .form-footer {
    text-align: left;
    padding: 0;
}

/* --- enlaces de la pagina de acceso --------------------------------- */
/* Iban en `#253237`, el azul grisaceo DEL TEMA, no el negro de la tienda.
   Misma familia que el `color: inherit` que ya mordio en la portada. */
body#authentication .forgot-password a,
body#authentication .no-account a {
    color: #1a1a1a;
}

/* «¿Olvido su contraseña?» es una salida de emergencia: pequeña, alineada con
   el campo al que se refiere y NO centrada, que es como venia. */
body#authentication .forgot-password {
    margin: -6px 0 18px;
    /* El `!important` es obligatorio: el tema lo centra con `!important`, y
       entre dos `!important` gana la especificidad — de ahi tambien el
       `body#...` delante. Sin el, el enlace se queda centrado y parece que la
       regla no existe. */
    text-align: right !important;
    font-size: 13px;
}

body#authentication .forgot-password a { text-decoration: underline; }

/* CREAR CUENTA ES LA SEGUNDA ACCION DE LA PAGINA, no una nota al pie: pasa a
   boton de linea, igual que «Ver el carrito» en el cajon. El alto es el mismo
   que el de «Iniciar sesion» para que los dos pesen igual y solo se distingan
   por el relleno de color. */
body#authentication .no-account {
    text-align: center;
}

body#authentication .no-account a {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border: 1px solid #1a1a1a;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

body#authentication .no-account a:hover {
    background: #f4f4f4;
    color: #1a1a1a;
}

/* La linea que separa entrar de registrarse. Se queda —marca el cambio de
   tarea— pero fina y con aire. */
body#authentication #content hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid #e3e3e3;
}

/* --- casillas y radios (crear cuenta) ------------------------------- */
/* En estos grupos la etiqueta de la izquierda viene VACIA y el texto va dentro
   del campo, asi que no hay nada que apilar. Lo unico que hace falta es que el
   texto no se pegue a la casilla y que se lea a su tamaño. */
body#registration .custom-checkbox,
body#registration .custom-radio {
    text-align: left;
}

body#registration .custom-checkbox span,
body#registration .custom-checkbox label,
body#registration .form-control-valign label {
    font-weight: 400;
    font-size: 14px;
}

/* AVISO PARA EL RESTO DE LA WEB: la miga de pan de **todas** las demas paginas
 * de `.s4b-pag` (contacto, legales, marcas...) sigue perdiendo sus niveles en
 * movil y dejando el separador colgando — es la regla en linea de Creative
 * Elements que solo se arreglo para la ficha de producto el 13/09/2026.
 * Aqui ya no se nota porque la miga no se pinta. */

/* --- movil ---------------------------------------------------------- */
@media (max-width: 575px) {
    /* La columna deja de topar y manda el relleno del contenedor. Asi el campo
       y su etiqueta comparten borde izquierdo, que es lo que no pasaba. */
    body#authentication .page-header,
    body#registration .page-header,
    body#password .page-header,
    body#authentication #content,
    body#registration #content,
    body#password #content {
        max-width: none;
    }
}

/* --- el titulo, el ritmo y el remate del bloque (16/09/2026) --------- */
/* EL `<h1>` NO MEDIA LOS 28 px DE LA SECCION 2: MEDIA 24. Lo pisa una regla EN
 * LINEA de Creative Elements —`.page-title-wrapper.p_tilte_small .page-header
 * h1 { font-size: 1.5rem }`, o sea TRES clases— que gana a `.s4b-pag h1`.
 * Se vio enumerando `document.styleSheets`, no leyendo el fichero: aqui la
 * regla parecia estar aplicada y no lo estaba.
 * **Hace falta un id para ganarle** (un `#` vence a cualquier numero de
 * clases), y por eso esto no se puede escribir como `.s4b-pag`. */
body#authentication .page-header h1,
body#registration .page-header h1,
body#password .page-header h1 {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    body#authentication .page-header h1,
    body#registration .page-header h1,
    body#password .page-header h1 {
        font-size: 24px;
    }
}

/* EL RITMO VERTICAL AGRUPA, QUE ES PARA LO QUE SIRVE. Antes todos los huecos
 * median 30-34 px —titulo, campos, enlace, botones— y el bloque se leia como
 * una lista de cosas sueltas. Ahora: la etiqueta pegada a SU campo, 22 entre
 * campos, el «¿Olvido su contraseña?» pegado al campo al que se refiere, y el
 * hueco grande reservado para separar las DOS acciones distintas. */
body#authentication .form-group,
body#registration .form-group,
body#password .form-group {
    /* 14 y no 22 (16/09/2026, peticion del cliente: «reduce la separacion
       entre elementos del form»). El hueco REAL entre un campo y la etiqueta
       siguiente no es este numero: se le suman los 6 px del `margin-top` de
       `.form-control-comment` —que en entrar viene vacio pero cuenta— y el
       renglon de la etiqueta. Medido: con 22 salian 36 px; con 14 salen 28. */
    margin-bottom: 10px !important;
}

/* LOS 30 px ENTRE EL TITULO Y EL PRIMER CAMPO ERAN DOS MARGENES SUMADOS, y
 * ninguno estaba donde uno los busca: 15 px de `margin-bottom` del contenedor
 * del titulo —que ademas viene con `!important`, de ahi el nuestro— y 15 mas
 * de `margin-top` de la propia `section.login-form`. Tocar solo uno deja la
 * mitad del hueco y parece que la regla no funciona. */
/* EL LOGO ENCIMA DEL FORMULARIO (16/09/2026, peticion del cliente).
 *
 * VA COMO `::before` DEL CONTENEDOR DEL TITULO, Y NO COMO MARCADO, POR UNA
 * RAZON DE ESTRUCTURA: el `<h1>` vive FUERA de `#content`, asi que cualquier
 * cosa añadida a la plantilla de la pagina —que se pinta DENTRO de `#content`—
 * saldria POR DEBAJO del titulo, nunca encima. Desde aqui cae en su sitio y
 * ademas comparte eje con el titulo y con los campos por construccion.
 *
 * ES DECORATIVO A PROPOSITO: la vuelta a la tienda ya la da la flecha, que es
 * un enlace de verdad con su nombre accesible. Un logo que ademas fuera enlace
 * duplicaria el mismo destino dos veces en la misma pantalla.
 *
 * 160x19 y no un alto fijo cualquiera: el fichero es 800x93 (8,6:1) y con
 * `contain` respeta esa proporcion. `img { max-width: 100% }` del tema no le
 * afecta al ser un fondo — que es justo lo que aplasto el logo del panel movil
 * en su dia. */
/* VA EN `.page-header`, NO EN `.page-title-wrapper`: el contenedor ocupa la
   columna entera y ahi el logo salia pegado al borde izquierdo, 200 px a la
   izquierda del titulo. `.page-header` es la caja de 440 px centrada, o sea la
   misma que el formulario — asi el logo, el titulo y los campos comparten eje
   sin ningun numero que ajustar. */
body#authentication .page-header::before,
body#registration .page-header::before,
body#password .page-header::before {
    content: '';
    display: block;
    width: 160px;
    height: 19px;
    margin-bottom: 22px;
    background: url('/img/logo-store4bike.png') left center / contain no-repeat;
}

body#authentication .page-title-wrapper,
body#registration .page-title-wrapper,
body#password .page-title-wrapper {
    /* 16 y no 2: al quitar los dos margenes el titulo se quedaba PEGADO a la
       primera etiqueta. Es el unico hueco que aqui se deja respirar, porque
       separa el encabezado del formulario. */
    margin-bottom: 12px !important;
}

body#authentication .login-form,
body#registration .register-form,
body#password .forgotten-password {
    margin-top: 0;
}

/* LA CAJA DE AYUDA VACIA SI OCUPA: trae 8 px de relleno propio del tema ademas
   del margen. En entrar viene vacia en los dos campos, asi que eran 14 px de
   aire invisible por campo. Cuando lleva texto —crear cuenta— sigue
   separandose de su campo con el margen. */
body#authentication .form-control-comment,
body#registration .form-control-comment,
body#password .form-control-comment {
    margin-top: 2px;
    padding-top: 0;
}

body#authentication .forgot-password {
    /* Pegado al campo al que se refiere: es la salida de emergencia de ESA
       contraseña, no un elemento suelto del formulario. */
    margin: -4px 0 0 !important;
    /* Traia 15 px de relleno inferior del tema, que se sumaban al hueco con el
       boton. */
    padding-bottom: 0;
}

/* EL `margin-bottom: 30px` DEL PIE DEL FORMULARIO SE FUSIONA CON EL MARGEN DE
 * «crear cuenta» Y GANA EL MAYOR: por eso ese hueco seguia en 30 px por mucho
 * que yo bajara el otro a 22. **Margenes verticales adyacentes se fusionan, no
 * se suman** — mirar solo la regla propia no lo explica. */
body#authentication .form-footer,
body#registration .form-footer {
    margin-top: 14px;
    margin-bottom: 0;
}

/* LA LINEA QUE SEPARA ENTRAR DE REGISTRARSE VA EN `.no-account`, NO EN EL
 * `<hr>`: ese `<hr>` existe en el marcado pero **el tema lo esconde** con
 * `.login-form ~ hr { display: none }`, asi que las reglas que le puse antes
 * eran codigo muerto. Resucitarlo seria pelearse con el tema para reponer un
 * elemento que no aporta nada: la linea se pinta como borde del bloque que ya
 * hay que separar. */
body#authentication .no-account {
    /* Este hueco SE RECORTA MENOS que los demas a proposito: es el unico que
       separa dos acciones distintas —entrar y registrarse— y si se aprieta
       igual que el resto, el bloque vuelve a leerse como una lista seguida. */
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ececec;
}

/* --- sin cabecera ni pie (16/09/2026, decision del cliente) ---------- */
/* SE ESCONDEN `#s4b-cabecera` Y `#s4b-pie`, **NO `#header` NI `#footer`**, y
 * la diferencia no es cosmetica:
 *   · **el banner de cookies vive DENTRO de `#footer`** (`#s4b-cookies`, como
 *     HERMANO del pie visible). Un `display: none` al `#footer` lo mataria:
 *     quien entrara por aqui no podria aceptar ni rechazar, la medicion se
 *     quedaria bloqueada **sin dar ningun error** y encima seria un problema
 *     legal;
 *   · el cajon del carrito (`#s4b-carrito`) esta dentro de `#header` por el
 *     mismo motivo y tampoco puede desaparecer.
 * Comprobado en el DOM antes de escribir esto, no supuesto. */
body#authentication #s4b-cabecera,
body#registration #s4b-cabecera,
body#password #s4b-cabecera,
body#authentication #s4b-pie,
body#registration #s4b-pie,
body#password #s4b-pie {
    display: none;
}

/* El `#footer` se queda (lleva el banner dentro) pero ya no pinta nada: sin
   esto dejaria 70 px de blanco al final de la pagina. */
body#authentication #footer,
body#registration #footer,
body#password #footer {
    margin-top: 0;
}

/* LA FLECHA DE VOLVER ES LA UNICA SALIDA DE LA PAGINA, asi que va fija: en
 * crear cuenta el formulario mide 1.300 px y con la flecha en el flujo habria
 * que desplazarse hasta arriba para encontrarla.
 * El marcado esta en `_partials/acceso-volver.tpl`, incluido desde las CUATRO
 * plantillas de acceso (entrar, crear cuenta, pedir contraseña y escribir la
 * nueva). */
.s4b-volver {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: #1a1a1a;
    /* Fondo blanco solido: la flecha se superpone a la pagina y, el dia que el
       diseño cambie y quede sobre la foto, sin fondo no se leeria. */
    background: #fff;
}

.s4b-volver:hover,
.s4b-volver:focus-visible {
    color: #ff0123;
}

/* EN MOVIL NO VA FIJA (16/09/2026, peticion del cliente: «no pongas la flecha
 * sticky en mobile»). Pasa a `absolute`, que la deja EN EL MISMO SITIO —arriba
 * a la izquierda— pero **se va con el desplazamiento** en vez de quedarse
 * clavada encima del formulario.
 * **`absolute` y no `static`**: en el flujo no puede ir, porque el marcado de
 * la flecha se pinta DENTRO de `#content` y ahi caeria POR DEBAJO del titulo,
 * que es justo lo contrario de lo que se quiere. Por eso tambien **se queda el
 * `padding-top` del titulo**: sigue fuera del flujo y sin ese hueco se montaria
 * encima.
 * Necesita que `#wrapper` sea el ancestro posicionado, o la flecha se anclaria
 * a la ventana igual que antes.
 * **En escritorio SIGUE FIJA**: alli el formulario de crear cuenta mide 1.300 px
 * y la flecha es la unica salida de la pagina. */
@media (max-width: 991px) {
    body#authentication #wrapper,
    body#registration #wrapper,
    body#password #wrapper {
        position: relative;
    }

    /* **HAY QUE APAGAR LOS POSICIONADOS DE EN MEDIO.** Un elemento absoluto se
       ancla al ancestro posicionado MAS CERCANO, y `#content-wrapper` ya es
       `relative` por el tema: con `#wrapper` a secas la flecha se fue a y=195,
       o sea DENTRO del formulario y por debajo del logo. Medido con
       `offsetParent`, que es lo que dice la verdad — la regla parecia correcta. */
    body#authentication #content-wrapper,
    body#registration #content-wrapper,
    body#password #content-wrapper,
    body#authentication #main,
    body#registration #main,
    body#password #main,
    body#authentication #content,
    body#registration #content,
    body#password #content {
        position: static;
    }

    .s4b-volver {
        position: absolute;
    }
}

/* EL ICONO VA CENTRADO EN UNA CAJA DE 56, asi que su dibujo empieza 8 px
   dentro. En movil la flecha cae justo encima del titulo, y con `left: 16` el
   trazo arrancaba 9 px a la derecha del texto — poco, pero se ve porque estan
   uno debajo del otro. Se descuenta el hueco para que los dos bordes
   coincidan; **la caja sigue midiendo 56x56**, que es la zona de pulsacion. */
.s4b-volver { left: 7px; }

@media (min-width: 992px) {
    /* En escritorio la flecha esta en la esquina de la pagina y el formulario
       va centrado en su columna: no hay nada con lo que alinear, asi que manda
       el margen. */
    .s4b-volver { top: 24px; left: 24px; }
}

/* EN MOVIL HAY QUE RESERVARLE SITIO. Al ir fija sale del flujo, y ahi el
   contenido arranca pegado arriba: sin este relleno la flecha se monta encima
   del titulo. En escritorio no hace falta —el bloque va centrado y la flecha
   queda en la esquina, lejos— y por eso el relleno solo se pone aqui. */
@media (max-width: 991px) {
    body#authentication .page-title-wrapper,
    body#registration .page-title-wrapper,
    body#password .page-title-wrapper {
        /* 96 y no 72 (16/09/2026, lo vio el cliente: «en movil la flecha se
           sobrepone al logo»). **El numero hay que recalcularlo cada vez que
           cambie la flecha o lo que venga debajo**: la caja de la flecha
           empieza en 16 y mide 56, o sea que termina en 72 — justo donde
           arrancaba el logo. Con 72 el hueco era de 2 px: medido no era
           solapamiento, pero a la vista se tocan, que es lo mismo. */
        padding-top: 96px !important;
    }
}

/* ================================================================== */
/*  7 · ACCESO A DOS MITADES: FORMULARIO + FOTO (16/09/2026)           */
/* ================================================================== */
/* SOLO DE 992 px PARA ARRIBA. Por debajo se queda exactamente el
   formulario de una columna que ya esta publicado: una foto decorativa en
   movil son kilobytes y empuja el correo y la contraseña fuera de
   pantalla, justo lo contrario de lo que busca quien entra a
   identificarse. */
@media (min-width: 992px) {

    /* LA PARTICION SE HACE EN `#wrapper` PORQUE ES EL UNICO ANCESTRO
     * COMUN: el titulo vive en `.page-title-wrapper` y el formulario en
     * `.container`, que son hermanos. Y hay un TERCER hermano que no se
     * puede olvidar: `aside#notifications`, **que es donde salen los
     * avisos de «contraseña incorrecta»**. Mide 0 px cuando no hay nada,
     * asi que es facil no verlo al mirar la pagina — y dejarlo fuera de la
     * mitad del formulario lo mandaria encima de la foto.
     *
     * `minmax(0, 1fr)` Y NO `1fr`: un `1fr` a secas lleva un minimo `auto`
     * implicito, asi que el contenido ENSANCHA su columna. Medido: la miga
     * de pan estiraba la izquierda hasta 1.520 px y **se comia la mitad de
     * la foto**. Es la misma trampa que ya mordio en la rejilla de la
     * cabecera. El `min-width: 0` de los hijos es el mismo seguro por el
     * otro lado. */
    body#authentication #wrapper,
    body#registration #wrapper,
    body#password #wrapper {
        display: grid;
        /* LA FOTO OCUPA EL 40%, NO LA MITAD (16/09/2026, peticion del
           cliente: «dale menos anchura a la imagen»). A 1900 px pasa de 943 a
           760. El formulario se queda con el 60%, que es donde esta lo que hay
           que leer y rellenar. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
        /* Las dos filas `1fr` de los extremos son lo que centra el bloque
           en vertical dentro de su mitad. Con `align-content: center` no
           valdria: la foto dejaria de llegar de arriba abajo. */
        /* LAS TRES PAGINAS ARRANCAN A LA MISMA ALTURA (16/09/2026, decision del
           cliente: «me gusta mas que empiece a la misma altura que las otras
           paginas de login»).
           El problema: entrar y recuperar van CENTRADAS, asi que su altura de
           arranque depende del alto de la ventana —254 px en una de 950, menos
           en un portatil—, y crear cuenta no puede centrarse porque es mas alta
           que la pantalla.
           **Por eso el minimo es una FORMULA y no un numero fijo:**
           `50vh - 230px` es donde cae el borde superior de un bloque centrado
           de ~460 px, que es lo que mide el de entrar. Asi crear cuenta cae
           donde caeria si pudiera centrarse, **en cualquier ventana**; con un
           numero fijo coincidirian solo a un alto concreto.
           El `max(56px, …)` es el suelo: en una ventana muy baja la formula se
           queda corta —o negativa— y el logo volveria a pegarse al borde.
           **No se usa `padding-top` en `#wrapper`**: el relleno empujaria
           TAMBIEN la foto —es un elemento de la rejilla— y dejaria una franja
           blanca sobre ella. */
        grid-template-rows: minmax(max(56px, calc(50vh - 230px)), 1fr) auto auto auto 1fr;
        /* LA PANTALLA ENTERA, porque ya no hay cabecera ni pie que respetar
           (16/09/2026). Con `100vh` la foto va de borde a borde de la ventana,
           que es el patron de la referencia.
           **OJO AL EFECTO EN EL ENCUADRE, que no es obvio:** cuanto mas alto
           el panel, mas vertical es, y `cover` recorta mas por los lados.
           Medido a 1235x941 con la foto cuadrada:
             panel 488x620  -> se ve el 79% del ancho
             panel 488x941  -> se ve el **52%**
           Es el precio de que llene la pantalla. Si algun dia se quiere ver
           mas foto, la palanca es **ensanchar la columna** (el 40% de mas
           abajo), no cambiar el fichero: eso ya se probo y no mueve nada. */
        min-height: 100vh;
    }

    body#authentication #wrapper > *,
    body#registration #wrapper > *,
    body#password #wrapper > * {
        min-width: 0;
    }

    body#authentication #wrapper > .page-title-wrapper,
    body#registration #wrapper > .page-title-wrapper,
    body#password #wrapper > .page-title-wrapper { grid-column: 1; grid-row: 2; }

    body#authentication #wrapper > #notifications,
    body#registration #wrapper > #notifications,
    body#password #wrapper > #notifications { grid-column: 1; grid-row: 3; }

    body#authentication #wrapper > .container,
    body#registration #wrapper > .container,
    body#password #wrapper > .container { grid-column: 1; grid-row: 4; }

    /* LA FOTO, EN UN PSEUDOELEMENTO: no hace falta marcado y es
       decorativa, asi que como fondo esta en su sitio — un lector de
       pantalla no tiene nada que anunciar. `grid-row: 1 / -1` es lo que la
       hace llegar de arriba abajo pase lo que pase con el formulario. */
    body#authentication #wrapper::after,
    body#registration #wrapper::after,
    body#password #wrapper::after {
        content: '';
        grid-column: 2;
        grid-row: 1 / -1;
        /* LA FOTO SE QUEDA FIJA AL DESPLAZAR (16/09/2026, peticion del
           cliente). Solo se nota en CREAR CUENTA, que es la unica de las tres
           mas alta que la pantalla; en entrar y recuperar no hay desplazamiento
           y esto no cambia nada.
           **HACEN FALTA LAS TRES DECLARACIONES JUNTAS, y `align-self` es la que
           no se ve venir:** siendo elemento de rejilla, por defecto se estira a
           TODO el alto de su area (`stretch`), o sea el alto de la pagina. Un
           pegajoso tan alto como su contenedor **no tiene recorrido y no se
           pega nunca** — la regla parece aplicada y no hace nada. Con
           `align-self: start` la caja pasa a medir lo que se le diga, y esos
           `100vh` son los que dejan el resto del area como margen de
           desplazamiento.
           `top: 0` sin reservar nada arriba porque en estas tres paginas la
           cabecera esta oculta: la foto llega al borde de la ventana.
           **Si algun dia un ancestro coge `overflow: hidden` o `auto`, esto
           deja de pegarse sin dar ningun error** — es la trampa clasica de
           `sticky`, la misma que ya obligo a `fixed` en la cabecera. */
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        /* RUTA ABSOLUTA, y no relativa: desde `assets/css/` hacen falta
           CUATRO saltos para llegar a la raiz, no tres. El primer intento
           ponia `../../../`, que cae en `/themes/` — un 404 mudo que deja
           medio panel negro sin dar ningun error.
           El color de respaldo NO es decorativo: es lo que se ve si algun dia
           falta el fichero, y en negro se lee como una decision.
           **`-v2` PORQUE LA PRIMERA FOTO YA ESTUVO PUBLICADA.** Era vertical
           (3:4) y el cliente la cambio por una CUADRADA el 16/09/2026: en una
           pantalla ancha y baja el panel es casi cuadrado —medido 754x797 a
           1900— y la vertical se recortaba arriba y abajo. `/img/` lleva
           `max-age` de 30 dias, asi que sobrescribir habria dejado viendo la
           vieja —hasta un mes— a quien ya hubiera entrado. La siguiente sera
           `-v3`. */
        background: #1a1a1a url('/img/acceso/panel-v3.webp') center / cover no-repeat;
    }

    /* Y NO BASTA CON LA REGLA DE ARRIBA: EL `<main>` QUE ENVUELVE TODO LLEVA
       `overflow: hidden`, ASI QUE LA FOTO NO SE PEGABA.
       Un `overflow` distinto de `visible` convierte al elemento en el
       *scrollport* de referencia de todo lo pegajoso que lleve dentro — y ese
       `main` no se desplaza, asi que no hay nada a lo que pegarse. **La regla
       se aplica, se lee correcta en el inspector y no hace absolutamente
       nada**; se vio en una captura desplazada al final, no midiendo estilos.
       Es la misma familia que ya obligo a usar `fixed` en la cabecera.
       **`clip` Y NO `visible`**: ese `hidden` esta ahi para que nada desborde
       de lado, y quitarlo a secas devolveria ese riesgo. `overflow-x: clip`
       recorta igual **sin crear scrollport**, y ademas es la unica forma de
       dejar el eje vertical en `visible` — con `hidden`, el navegador
       convierte el otro eje en `auto` y el problema vuelve.
       Acotado a estas tres paginas: el resto del sitio se queda como estaba. */
    body#authentication > main,
    body#registration > main,
    body#password > main {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* --- la mitad del formulario ------------------------------------ */
    /* LAS DOS CAJAS DE LA IZQUIERDA SE IGUALAN A PROPOSITO, y esto
     * sustituye al apaño de los 90 px que usa el diseño de una columna:
     * alli el titulo y el formulario cuelgan de cadenas de rellenos
     * distintas y habia que compensar a mano. Aqui se les da a las dos el
     * MISMO ancho y el MISMO relleno, y luego se centra dentro un bloque
     * de 420: asi comparten eje **por construccion**, sin ningun numero
     * medido que se descuadre el dia que cambie un relleno. */
    body#authentication #wrapper > .page-title-wrapper > .container,
    body#registration #wrapper > .page-title-wrapper > .container,
    body#password #wrapper > .page-title-wrapper > .container,
    body#authentication #wrapper > .container,
    body#registration #wrapper > .container,
    body#password #wrapper > .container {
        width: 100%;
        max-width: none;
        /* El `!important` es contra Creative Elements, que inyecta EN
           LINEA `#main, .container, .row, … { padding-left: 30px }`. */
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Los tres rellenos intermedios que hay entre `.container` y
       `#content` (`.row-wrapper`, `#content-wrapper` y `#main`) son
       asimetricos —solo por la izquierda— y descentrarian el formulario
       dentro de su mitad. */
    body#authentication .row-wrapper,
    body#registration .row-wrapper,
    body#password .row-wrapper,
    body#authentication #content-wrapper,
    body#registration #content-wrapper,
    body#password #content-wrapper,
    body#authentication #main,
    body#registration #main,
    body#password #main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body#authentication .page-header,
    body#registration .page-header,
    body#password .page-header,
    body#authentication #content,
    body#registration #content,
    body#password #content {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    /* AQUI NO HAY NADA QUE HACER CON LA MIGA DE PAN: desde el 15/09/2026
       no se pinta en estas tres paginas (decision del cliente), asi que no
       hay que centrarla ni recolocarla. Si algun dia vuelve, hay que
       meterla en el mismo bloque de 420 que el titulo y el formulario:
       suelta contra el borde izquierdo se lee como un resto. */

    /* EL RELLENO DEL DISEÑO DE UNA COLUMNA SE PISA AQUI. Alli las dos cajas
       se igualan con 15 px; aqui hacen falta 40, que es el aire entre el
       borde de la pantalla y el formulario. */
    body#authentication .page-title-wrapper > .container,
    body#registration .page-title-wrapper > .container,
    body#password .page-title-wrapper > .container {
        padding-left: 40px !important;
    }

    /* LA FOTO TIENE QUE LLEGAR HASTA EL PIE. El tema le da al pie
       `margin-top: 70px`, y con el panel a media pantalla esos 70 px de
       blanco hacen que la foto parezca cortada a medias — se vio en la
       captura, no midiendo.
       **Solo se quita aqui**: por debajo de 992 px, sin panel, ese hueco es
       el ritmo normal del sitio y hace falta. */
    body#authentication #footer,
    body#registration #footer,
    body#password #footer {
        margin-top: 0;
    }

    /* --- mas aire alrededor del formulario --------------------------- */
    /* Con la foto al 40% la columna del formulario gana espacio, asi que el
       bloque puede crecer sin quedar apretado: 420 -> 440. */
    body#authentication #content,
    body#registration #content,
    body#password #content,
    body#authentication .page-header,
    body#registration .page-header,
    body#password .page-header {
        max-width: 440px;
    }
}

/* =========================================================================
   8. MI CUENTA (01/10/2026, peticion del cliente)
   Filas compactas sobre el gris #f4f4f4 del sitio (el mismo bloque del menu
   movil), icono negro, nombre + una linea de explicacion y flecha. Antes:
   tarjetas de 175 px con sombra e iconos en el VERDE del tema.
   Las filas de modulo (psgdpr, buyagain) entran por displayCustomerAccount con
   su propio marcado (`a.col-lg-4 > span.link-item`): se igualan aqui sin
   tocar los modulos. Plantilla: templates/customer/my-account.tpl.
   ========================================================================= */
body#my-account .s4b-cuenta__hola {
    margin: 0 0 20px;
    font-size: 16px;
    color: #1a1a1a;
}

body#my-account .s4b-cuenta__rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 991px) {
    body#my-account .s4b-cuenta__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
    body#my-account .s4b-cuenta__rejilla { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* Propias y de modulo. El ancho, el float y el relleno de `col-lg-4` se anulan:
   aqui manda la rejilla. */
body#my-account .s4b-cuenta__rejilla > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    float: none;
    width: auto;
    max-width: none;
    flex: none;
    min-height: 72px;
    margin: 0;
    padding: 14px 44px 14px 18px;
    background: #f4f4f4;
    color: #1a1a1a;
    text-decoration: none;
    text-align: left;
    text-transform: none;
}

/* La flecha: dibujada, no un caracter, para que no dependa de la tipografia. */
body#my-account .s4b-cuenta__rejilla > a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #1a1a1a;
    border-right: 2px solid #1a1a1a;
    transform: translateY(-50%) rotate(45deg);
}

body#my-account .s4b-cuenta__rejilla > a:hover { background: #ececec; }
body#my-account .s4b-cuenta__rejilla > a:hover .s4b-cuenta__nombre,
body#my-account .s4b-cuenta__rejilla > a:hover .link-item { color: #d9001d; }
body#my-account .s4b-cuenta__rejilla > a:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

body#my-account .s4b-cuenta__rejilla .material-icons {
    flex: 0 0 24px;
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #1a1a1a;
}

body#my-account .s4b-cuenta__texto { min-width: 0; }
body#my-account .s4b-cuenta__nombre {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
body#my-account .s4b-cuenta__desc {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    color: #6b6b6b;
}

/* Filas de modulo: su `span.link-item` era la tarjeta (sombra, alto, centrado). */
body#my-account .s4b-cuenta__rejilla > a .link-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    text-align: left;
    text-transform: none;
}

body#my-account .s4b-cuenta__salir { margin: 28px 0 0; }
body#my-account .s4b-cuenta__salir a {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: underline;
}
body#my-account .s4b-cuenta__salir a:hover { color: #d9001d; }

/* El titulo cuelga de .page-title-wrapper > .container (30 px) y el contenido
   de .container > .row-wrapper > #content-wrapper > #main, con 30 + 30 - 10 + 10
   mas: la rejilla quedaba 60 px dentro. Se anulan los intermedios, como en las
   paginas de acceso (seccion 6). El !important es por Creative Elements, que
   pone el relleno de .row EN LINEA y con !important por debajo de 991 px. */
body#my-account #wrapper > .container > .row-wrapper {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body#my-account #content-wrapper,
body#my-account #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Movil: Creative Elements deja los contenedores a 5 px (EN LINEA, !important);
   la cabecera y el pie van a 15. Se igualan titulo y contenido a 15. */
@media (max-width: 991px) {
    body#my-account .page-title-wrapper > .container,
    body#my-account #wrapper > .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* LA MIGA EN MOVIL, EN TODAS LAS PAGINAS .s4b-pag (01/10/2026). Creative
   Elements oculta sus niveles por debajo de 991 px con `display: none
   !important` EN LINEA y quedaba «Inicio /» con la barra colgando. Aqui son dos
   o tres niveles cortos: se devuelven y, si no caben, parten de linea.
   Entrar, crear cuenta y recuperar contraseña NO se ven afectadas: alli se
   oculta la miga ENTERA a proposito (seccion 6). */
@media (max-width: 991px) {
    body.s4b-pag #wrapper .breadcrumb ol {
        flex-wrap: wrap;
    }
    body.s4b-pag #wrapper .breadcrumb ol li {
        display: inline-block !important;
    }
}

/* Subpaginas de la cuenta: «Volver A Mi Cuenta» por el capitalize del tema. */
body.s4b-pag .account-link,
body.s4b-pag .account-link span {
    text-transform: none;
}