div{
   box-sizing: border-box;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 1rem;
}
module {
    display: none;
}

:root{
	--btn_color: #ff6000;

--site-ancho: 1728px;--site-margen: 20px;--site-desplazamiento: 0px;--site-carril: calc(100% - var(--site-hueco) * 2 - var(--site-margen) * 2);--site-hueco: max(var(--site-desplazamiento), (100% - var(--site-ancho)) / 2);--site-carril-izq: calc(var(--site-hueco) + var(--site-margen));--site-carril-der: var(--site-carril-izq);}

body
{

	overflow-y: scroll;	
	margin: 0px;
	-webkit-font-smoothing: antialiased;
background-color: #e9ebee;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    font-size: 1.4rem;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════════
   LA CABECERA DEL SITIO, Y SOLO ELLA
   ───────────────────────────────────────────────────────────────────
   Estas reglas eran de TIPO --`header`, `header .logo`, `header .content`…--
   y por tanto alcanzaban a CUALQUIER `<header>` de cualquier componente:
   una ficha con su propia cabecera heredaba `position:sticky`, el fondo
   blanco y `z-index:1000`, y se colocaba donde no debía sin dar un solo
   error. Ya pasó en `TRegisterQuick` --la marca 92px por encima de su
   tarjeta-- y volvió a pasar en la pantalla de Soporte.

   `body > header` acota a la cabecera de verdad, que cuelga del body, sin
   depender de una clase que el portal del vendedor no pondría al
   sustituirla. Las cabeceras internas de los componentes quedan libres.

   Y por lo mismo el JS busca `body > header`: con un `<header>` de
   componente antes en el DOM, `querySelector('header')` cogía el
   equivocado y medía la cabecera que no era.
   ═══════════════════════════════════════════════════════════════════ */
body > header
{
clear:both;

border-bottom: 0px solid #bbb;
background-color: #fff;
 /*position: fixed;   */
z-index: 100;
width: 100%;


z-index: 1000;
transition: box-shadow 0.3s linear;
align-items: flex-start;

/* LA CABECERA NO SE ESCONDE.
   Estaba en `top: -92px`, y ese número no era un ajuste fino: es la altura de
   la fila de arriba --logo, buscador, cuenta--, así que al bajar se salía
   entera de la pantalla y solo quedaba pegada la barra de navegación. En una
   tienda con filtros y rejilla, el buscador y el carrito son justo lo que hay
   que tener a mano mientras se recorre el catálogo.
   Con `top: 0` la cabecera se queda completa y su sombra la separa del
   contenido que pasa por debajo. */
top: 0;
position: sticky;
transition: box-shadow 0.3s ease; /* Animación suave */
}

body > header.sticky-shadow{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



/* EL LOGO, EN SU PROPORCION.
   Estaba clavado a 100x100: un logo que no fuera cuadrado se aplastaba
   --el de 267x400 salia estirado a lo ancho--. Ahora la caja es un TOPE,
   no una medida: la imagen crece hasta donde quepa y conserva su ratio. */
body > header .logo
{
	max-width: 100px;
    max-height: 100px;
	width: auto;
    height: auto;
    object-fit: contain;
	z-index: 5000;
	cursor: pointer;
    margin-right: 20px;    
	position: relative;
	top: 10px;

}



body > header .finder
{
	border-radius: 5px;
	border: 1px solid #aaa;
	display: flex;
	color: #000;
	cursor: pointer;
	height: 35px;
	top: 20px;
	position: relative;
	box-sizing: border-box;
	flex: auto;
}

body > header .usermenu
{
	position: relative;
	min-width: 200px;
    top: -11px;
    display: flex;
    	justify-content: space-around;
}

body > header .usermenu > div
{
	display: inline-block;
	width: auto;
	margin-top: 10px;
}

body > header .finder input
{
	width: 100%;
	border: 0px solid #aaa;
	font: 15px sans-serif !important;
}

body > header .categoriesSelectorFinder
{
	padding: 5px;
	margin-right: 10px;
	
	border-right: 1px solid #aaa;
}




body > header .content
{
	position: relative;
	margin: auto;
	max-width: 1000px;
	
}



/* ------------------ MENU ---------------------------------- */

nav{
    	
		background-color: #FFF; 
		/* z-index: 1 Y NO 10000.
		 *
		 * ESTE era el que tapaba el panel de notificaciones. La cabecera tiene DOS
		 * `.body-content`: uno con la sesion --donde vive la campana y su panel-- y
		 * otro dentro de este `nav`, con el menu de categorias. Con el nav en 10000,
		 * los nombres del menu se pintaban por delante del panel abierto, que parecia
		 * translucido.
		 *
		 * Con 1 basta: la barra solo necesita quedar sobre el contenido de la pagina,
		 * no sobre lo que se abre desde la propia cabecera. */
		z-index: 1;
		border-bottom: 1px solid #bbb;
		
}

nav .body-content{
   display:flex;
       overflow: hidden;
}

/* LA CAPA DE LA SESION, UN PUNTO POR ENCIMA DEL MENU.
 *
 * La cabecera tiene DOS `.body-content` hermanos dentro del mismo `header`: este
 * --con la sesion, el carrito y la campana-- y el del `nav` con las categorias. Con
 * los dos al mismo z-index gana el segundo por orden de documento, y los nombres
 * del menu seguian pintandose por delante del panel de notificaciones aunque el
 * `nav` ya estuviera en 1.
 *
 * Es el hijo DIRECTO del header, que es lo que lo distingue del otro sin tocar el
 * menu. */
body > header > .body-content{
   z-index: 2;
}

body > header .logo{transition: all 0.3s ease; opacity: 1;}
/* Y EL LOGO NO SE APAGA. Se ocultaba al pegarse --tenía sentido cuando la
   cabecera se encogía y había que ganar sitio-- pero con la barra entera a la
   vista, un hueco en blanco donde estaba el logo es un fallo, no un ahorro. */
body > header.sticky-shadow .logo{ opacity: 1; }

 nav .mainmenu{
  transition: margin-left 0.3s ease;
   margin-left: 0px;
}

nav.sticky-active .mainmenu{    
   margin-left: 50px;
}

 nav .logo{
    opacity: 0;
    transition: all 0.3s ease;
	position: absolute;
    width: 59px;
    top: -3px;
}
nav.sticky-active .logo{

    opacity: 1;
}


nav ul.mainmenu
{
	margin-top: 0px;

	position: relative;
	display: inline-block;

	padding-left: 20px;
	justify-content: flex-start;
}

nav ul.mainmenu li
{
	
	font: bold 15px Arial;
	color: #808080;
	position: relative;
	white-space: nowrap;
	display: inline-block;
}

nav ul.mainmenu li li
{
	display: block;
}

/* submenu 1*/
nav ul.mainmenu > li:hover > ul
{
	left: 0px;
	display: block;
	top: calc(100% - 1px);
	background-color: #fff;
}

/* submenu 2*/
nav ul.mainmenu ul
{
	position: absolute;
	left: 100%;
	display: none;
	padding-left: 20px;
	box-shadow: 1.3em 1.3em 2em rgb(0 0 0 / 30%);
}

nav ul.mainmenu ul > li:hover ul
{
	top: 0px;
	left: 100%;
	display: block;
	background-color: #fff;

}


/* -------------------------*/

nav ul.mainmenu li, nav a, nav a:active, nav a:focus, nav a:visited
{
	font: bold 15px Arial;
	color: #808080;
    padding: 8px;
}

nav ul.mainmenu li:hover
{
	cursor: pointer;
}
nav ul.mainmenu li:hover > a
{
	color: #de661a;
	cursor: pointer;
	text-decoration: none;
	/*background: rgb(242, 242, 242);*/
}

/* <img src="images/categoriesIcon.png" height="20" style="position: absolute; left: 2px; top: 6px; " /> */
nav ul.mainmenu > ul > li:first-child
{
	margin-right: 50px;
	background-size: cover;
}

nav ul.mainmenu li[data-icon]
{
	background: var(--bg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position-y: center;
	padding-left: 25px !important;
}

nav ul.mainmenu li[data-icon]:hover
{
	background: var(--bg-hover);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position-y: center;
}



/* ------------------ END MENU ---------------------------------- */


    
.body-content
{
	/* El relleno sale de la misma variable que el ancho: una página que se
	   alinee con este carril copia las dos y arranca en la misma vertical. */
	padding: 0px var(--site-margen) 0px var(--site-margen);
	clear: both;
	
	position: relative;
	/* z-index: 1 Y NO 100.
	 *
	 * Con 100, el menu de categorias --que vive aqui dentro-- se pintaba ENCIMA
	 * del panel flotante de notificaciones: el panel tapaba la barra pero los
	 * nombres del menu se leian por delante, como si el panel fuera translucido.
	 *
	 * Basta con 1: esta capa solo necesita quedar sobre el fondo de la pagina, no
	 * sobre lo que se abre por encima de ella. */
	z-index: 1;
    margin:0px auto;
	min-width: 800px;
                    	width: 100%;max-width: var(--site-ancho);margin-inline: auto;
}

/* ── EN EL MÓVIL Y LA TABLETA (≤ 860 px) EL CARRIL SE SUELTA ────────────
 *
 * Ese `min-width: 800px` hacía que TODO el sitio midiera 880 px en un teléfono
 * (la cabecera, el catálogo, la cesta…): `body{overflow-x:hidden}` escondía la
 * barra, no el desplazamiento. Solo la ficha lo soltaba, a su manera
 * (`TArticleProfile.css`).
 *
 * EL CORTE SUBIÓ DE 760 A 860 (16/09/2026), Y NO ES UN AJUSTE FINO.
 * Con 760, el problema seguía vivo de 761 a 835: `min-width: 800px` más los
 * 20 px de desplazamiento dan una página de 820, así que un iPad en vertical
 * --768, 810 u 820-- se desplazaba de lado en TODAS las páginas. Y la fila de
 * la cabecera de escritorio mide 790, así que a 768 tampoco cabía la cabecera.
 * 860 es además el corte que la tienda ya usaba para apilar su columna de
 * filtros: un solo número para el carril, la cabecera y la tienda.
 * Medido y escrito en Documentacion/PendingWorks/TIENDA-MOVIL.md §1.
 *
 * Y el carril, a la medida del teléfono: los 90vw del ajuste de ADMIN, los 20 px
 * de desplazamiento y los 30 px de relleno están pensados para un monitor, y a
 * 400 px dejaban 290 útiles. SE CAMBIAN LAS VARIABLES y no las reglas: las
 * páginas a sangre (`flush`) se alinean con ellas y siguen alineadas. */
/* ── SIN BANDA DE TABLETA: EL AIRE CRECE SOLO ──────────────────────────
 *
 * Aquí vivió un `@media (min-width: 861px) and (max-width: 1366px)` que soltaba
 * el carril para dejar 20 px clavados en una tableta. Hacía falta mientras el
 * tope del carril fue `90vw`: con un porcentaje, `(100% - 90vw) / 2` ya pasa de
 * 20 px en cuanto la ventana supera los 400, así que no había forma continua de
 * dar 20 en un iPad de 1366 y el único mecanismo era una banda.
 *
 * Y una banda deja un ESCALÓN en su borde. Medido: de 1366 a 1367 la barra de
 * la cabecera pasaba de 1311 a 1170 px -- un píxel más de ventana y 141 menos
 * de barra, con el buscador escondiéndose justo al ENSANCHAR la pantalla.
 *
 * Con el tope en píxeles no hace falta: el carril mide `min(100%, tope)`, así
 * que hasta que la ventana llega al tope el margen es el relleno y ni un píxel
 * más, y a partir de ahí crece solo, repartido a los dos lados. Continuo y sin
 * un solo `@media`. */

@media (max-width: 860px){
	:root{
		--site-ancho: 100vw;
		--site-margen: 16px;
		--site-desplazamiento: 0px;
	}

	.body-content{ min-width: 0; }
}

body{ margin:0; }#page_body_content.body-content{ max-width:none; min-width:0; padding:30px; margin:0; box-sizing:border-box; min-height:100vh; display:flex; justify-content:center; }#page_body_content.body-content > *{ margin:auto; width:100%; }body main{ padding-top:0; min-height:0; }


main
{
	min-height: 400px;
	margin-top: 0px;
	padding: 0px;
	width: 100%;
	color: #FFF;
	border: 0px solid #9C6;
	    z-index: 3;

	position: relative;

	min-height: 60vh;

	


          
}



main #columna_izq
{
	min-height: 650px;
	position: relative;
	margin: 0;
	padding: 0;
	width: 200px;
	border: 0px solid;
	left: 10px;
	margin-top: 0px;

	display: inline-block;
	vertical-align: top;
	
	border-radius: 5px;
	
	margin-right: 20px;
	border: 0px solid #ccc;
}


main #columna_central
{
	
	flex: auto;
}

main #columna_der
{
	min-height: 650px;
	position: relative;
	width: 180px;
	left: 0;
	margin: 0;
	border: 0px solid;
	padding: 0px;

	display: inline-block;
	vertical-align: top;
	background-color: #fff;
	border-radius: 5px;
	
	border: 1px solid #ccc;
}




.mapa_web
{
	width: 1000px;
	margin: auto;
	margin-bottom: 80px;
	opacity: 0.9;
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid #e8e8e8;
}



.pathnav
{
	display: flex;
	margin-top: -20px;	
	width: 100%;
}
.pathnav a
{
	font: normal 15px Arial, Verdana, Helvetica;
}
.pathnav div
{
	display: flex;
}
.pathnav span{
    padding: 5px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #bbb;
  
}

.pathnav .separator{
    font-size: 24px;
    height: 30px;
    padding: 5px;
    top: 5px;
    position: relative;
    background-color: transparent;
    border:none;
}

.pathnav svg
{
	width: 15px;
}

 .categorySelector
{
    width: 230px;
    border: 0px !important;
    width: 250px;
    outline: none;    

    /*
     * FONDO BLANCO, COMO EL BUSCADOR DE AL LADO.
     *
     * Era `#e9ebee` --gris-- y dentro el TSelect trae su `.wrap` con fondo
     * blanco y borde propio: se veía una caja blanca recuadrada metida dentro
     * de una caja gris, dos cajas donde el diseño tiene un solo campo. Con el
     * fondo igual que el del buscador y el borde del `.wrap` quitado (abajo),
     * lo único que separa las dos mitades es la línea vertical de la derecha,
     * que es lo que tiene que separarlas.
     */
    background-color: #fff !important;

    /*
     * EL TSelect DE DENTRO, CENTRADO.
     *
     * Aquí había `padding: 6px` con `height: 33px !important`, y con
     * `box-sizing: border-box` eso deja 21px de caja de contenido para un
     * TSelect que mide 31: se salía 10px por abajo y el desplegable quedaba
     * pegado al borde de arriba, descuadrado respecto al buscador de al lado.
     * Medido en el navegador.
     *
     * Con la caja en flex y `align-items: center` el hijo se coloca solo, mida
     * lo que mida, y el relleno se queda solo en los lados --que es el que hace
     * falta--.
     */
    display: flex;
    align-items: center;
    padding: 0 6px;

    border-radius: 5px 0px 0px 5px;   
	position: relative;
  
    height: 33px !important;
    border-radius: 0px !important;
    border-right: 1px solid #bbb !important;
}

/* El hijo ocupa el ancho disponible: como ítem flex se encogería a su
   contenido y el desplegable saldría más estrecho que su caja. */
.categorySelector > .TSelect { flex: 1; min-width: 0; }

/* Y sin caja propia: el recuadro lo pone ya `.categorySelector`. El `.wrap` del
   TSelect trae de serie su borde y su fondo blanco --que es lo correcto cuando
   vive suelto en un formulario-- y aquí dibujaba una segunda caja dentro de la
   primera. El desplegable que se abre NO se toca: ese sí necesita su marco. */
.categorySelector .TSelect > .wrap {
    border: 0;
    background: transparent;
}

.categorySelector > i.uil{
    top: -10px;
    right: -2px;
 }
.categorySelector ul.selection span{
	font: 15px Arial;
}
.categorySelector ul.popup span{
	font: 15px Arial;
}




/*
 * ═══════════════════════════════════════════════════════════════════
 *  LA CAJA DE SESIÓN TRAE SU PROPIO CSS
 * ═══════════════════════════════════════════════════════════════════
 *
 * Aquí estaban copiadas las reglas de `TSessionBox` --las mismas que ya vivían
 * en la hoja del componente-- y las dos copias se habían separado: la de aquí
 * no traía el `left: 15px` de la otra, así que la caja aparecía en un sitio u
 * otro según cuál se cargara. El marcado ya se unificó; esto es la otra mitad.
 *
 * SE LEE DEL FICHERO, no se vuelve a escribir. La hoja del componente no entra
 * en el bundle de arranque --ese solo vigila Tjquery, Tbasic y TProductSearch-- y
 * meterla ahí arrastraría también su PHP, que pintaría un segundo `#logoutBox`
 * dentro del div oculto de plantillas: dos elementos con el mismo id. Volcarla
 * aquí trae lo que hace falta y nada más.
 */

/*
 * ESTA HOJA ES LA ÚNICA. `base.php` la vuelca en su `<style>` con un
 * `readfile()` en vez de llevar su propia copia: antes tenía las mismas reglas
 * duplicadas y sin el `left: 15px` de aquí, así que la caja aparecía en un
 * sitio u otro según cuál se cargara.
 *
 * (El `left: 15px` se quitó al unificarlas: no lo tenía la versión que regía en
 * la tienda, y ponerlo ahora habría movido la cabecera de todo el sitio.)
 */
.TSessionBox{
    position: relative;
    box-sizing: border-box;
}

/* EL ICONO DE DEPURACIÓN DEL ADMIN. Antes era un `style=""` puesto por el JS
   que lo creaba (`top:-13px; cursor:pointer; position:relative`); al pasar el
   marcado a `TSessionBox.php` (`$adminDebugTool`), su sitio viene aquí. */
.sb-admin-debug{
    position: relative;
    top: -13px;
    cursor: pointer;
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS `<iconify-icon>` RESERVAN SU HUECO DESDE EL PRIMER PINTADO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * `iconify-icon` es un custom element: hasta que el navegador lo define y el
 * SVG llega -de la API de Iconify o de su caché en `localStorage`, unos
 * milisegundos siempre-, la caja no tiene NADA dentro. Sin ancho ni alto
 * declarados aquí, esa caja mide 0×0 -su propia hoja interna solo pone
 * `display:inline-block`, nunca un tamaño- y en cuanto el icono llega salta a
 * su tamaño real: el hueco se mueve, y con él la campana, el carrito, el
 * avatar y «Salir» que tiene al lado. Se ve más en la caja de sesión porque es
 * la que tiene más iconos seguidos.
 *
 * `1em` porque es al revés de como se lee: no es esta regla la que fija el
 * tamaño, es cada sitio que ya pone su `font-size` en el icono o en quien lo
 * envuelve (`.TSessionBox-carrito`, el `font-size:21px` en línea de la
 * campana, `#logoutBox .usermenu … iconify-icon`) -- y es el mismo valor que
 * usa el propio `iconify-icon` para el SVG cuando termina de cargar. Por eso
 * reservar el hueco con `1em` no cambia ni un píxel del tamaño ya pintado,
 * solo el momento en que ese tamaño existe.
 */
.TSessionBox iconify-icon,
#notifications iconify-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}



.TSessionBox [class^=uil-]:before, [class*=" uil-"]:before{

    font-size: 22px;
}
/*
 * EL BLOQUE DE DENTRO: su ancho y su separación de arriba.
 *
 * Los dos estaban en el `style=""` del propio div. El ancho ESTANDO EN LÍNEA no
 * se podía cambiar desde aquí --un estilo en el atributo gana a cualquier regla
 * sin `!important`-- así que subirlo a 400px pasaba por quitarlo de allí. Es la
 * razón de que ahora no quede nada en el atributo: la caja se dimensiona en un
 * solo sitio.
 */
#logoutBox > div {
    width: 400px;
    padding-top: 10px;
}

/*
 * EL MENÚ DE LA CAJA, TODO EN LA MISMA LÍNEA.
 *
 * «Cuenta Vendedor» salía más alto que Descargas, Mi cuenta y Admin, y no era
 * su margen: los contenedores empiezan en la misma vertical, lo que no
 * coincidía era el CONTENIDO. Los cuatro primeros son `<a>` en línea con un
 * `<img>`, y se colocan por la línea base del texto; «Cuenta Vendedor» lo pinta
 * ZoneMenu.js como `inline-flex` con un `<iconify-icon>`, que se coloca por su
 * caja. Dos formas de alinear en la misma fila no pueden cuadrar.
 *
 * El reparto lo decide el menú --`space-around` y `align-items: flex-end`, que
 * es la línea de abajo común a todos-- y cada enlace pone su icono y su texto
 * en la misma fila, así que da igual que uno traiga una imagen y otro un icono,
 * ni qué módulo añada el siguiente elemento a esa zona.
 */
header .usermenu {
    position: relative;
    min-width: 200px;
    top: -11px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LA CAJA DEL VISITANTE: carrito y puerta de entrada
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Ya no comparte marcado con el menú de la sesión --antes era otro
 * `.usermenu`, con lo que `header .usermenu` alcanzaba a los dos y había que
 * distinguirlos por la profundidad del árbol-- así que tiene sus clases y sus
 * reglas, y lo que se cambie aquí no puede tocar al otro sin querer.
 *
 * Los dos elementos en una fila con su hueco: el carrito venía colocado con un
 * `right: -21px` en línea, del diseño de cabecera anterior, y con la de ahora
 * caía justo encima del rótulo del botón.
 */
.TSessionBox-visita{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.TSessionBox-carrito{
    position: relative;

    display: inline-flex;
    align-items: center;

    font-size: 24px;
    color: #52606d;
    text-decoration: none;
}
.TSessionBox-carrito:hover{ color: #1f2933; text-decoration: none; }

/* La regla global `a:visited` del sitio los pinta de magenta; se dice aquí
   porque `getComputedStyle` no lo enseña y solo se ve en pantalla. */
.TSessionBox-carrito:visited{ color: #52606d; }

/*
 * EL CONTADOR, PEGADO A LA ESQUINA DEL ICONO Y NO EN LA FILA.
 *
 * Vacío no se pinta: sin nada dentro no queda una pastilla roja diciendo que
 * el carrito tiene algo cuando no tiene nada. Lo rellena el JS del carrito.
 */
.TSessionBox-carrito .cart_counter{
    position: absolute;
    top: -5px;
    right: -9px;

    min-width: 17px;
    height: 17px;
    padding: 0 4px;

    display: none;
    align-items: center;
    justify-content: center;

    font: 600 10px/1 Arial, sans-serif;
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: #ef4444;
    border-radius: 10px;
}
.TSessionBox-carrito .cart_counter:not(:empty){ display: inline-flex; }

.TSessionBox-entrar{
    padding: 9px 16px;

    background: var(--btn_color);
    border-radius: 6px;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.TSessionBox-entrar:visited{ color: #fff; }
.TSessionBox-entrar:hover{ color: #fff; text-decoration: none; filter: brightness(.94); }

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS ICONOS DE SESIÓN, EN COLUMNA: EL DIBUJO ARRIBA Y EL RÓTULO DEBAJO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * En fila, cada entrada mide su icono MÁS su palabra MÁS el hueco entre los
 * dos, y son cuatro --carrito, descargas, cuenta y las que añade cada módulo
 * por `Zone::SESSION_PANEL`, que hoy es «Cuenta Vendedor»--: entre las cuatro
 * se comían el ancho que necesita el buscador de la cabecera.
 *
 * En columna, cada una ocupa lo que mide la más larga de sus dos líneas. El
 * ancho de la caja de sesión baja casi a la mitad y deja de crecer cada vez
 * que un módulo declara un icono nuevo.
 *
 * LA REGLA ALCANZA TAMBIÉN A `.ZoneMenu-item`, que se estila desde el JS del
 * control (`Controles/ZoneMenu.js` inyecta su `<style>` en la cabecera). Se
 * gana por especificidad --`#logoutBox` contra una clase suelta-- y SOLO
 * dentro de la caja de sesión: los iconos que un módulo ponga en otra zona
 * siguen como estaban.
 */
#logoutBox .usermenu > div > a,
#logoutBox .ZoneMenu-item{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    text-align: center;
    font: 600 10.5px/1.2 Arial, sans-serif;
    white-space: nowrap;
}

/* EL TAMAÑO SE DECLARA EN EL ICONO, NO EN SU CAJA: `iconify-icon` no hereda el
   `font-size` del padre, y sin esto los cuatro salen al tamaño por defecto. */
#logoutBox .usermenu > div > a iconify-icon,
#logoutBox .ZoneMenu-item iconify-icon{ font-size: 19px; }

/* Y la fila que los contiene: pegados a la derecha con su hueco, en vez de
   repartidos en un ancho mínimo de 200px que ya no hace falta. */
header .usermenu{
    min-width: 0;
    gap: 16px;
    justify-content: flex-end;
    align-items: flex-start;
}

/* Y SIN EL EMPUJÓN DE 7px. `base.php` baja las imágenes del menú con
   `.usermenu a img { position: relative; top: 7px }`, que era el apaño para
   compensar la línea base cuando los enlaces iban en línea. Con el enlace en
   flex el icono ya se coloca solo, y esos 7px lo dejaban siete por debajo de su
   propio texto. Medido: icono y texto en la misma vertical en los cinco. */
#logoutBox .usermenu a img { top: 0; }

/*
 * EL CONTADOR DEL CARRITO, EN LA ESQUINA DE SU ICONO.
 *
 * `base.php` lo coloca con `left:16px; top:10px` --medidas de la cabecera de
 * alto fijo de antes--, y con el enlace ya en columna eso lo dejaba encima del
 * rótulo «Carrito». Se ancla al enlace, que es lo único que no va a cambiar de
 * sitio, y se pega a la esquina del dibujo.
 */
#logoutBox .usermenu > div > a{ position: relative; }
#logoutBox .usermenu #cartItemsCounter.cart_counter{
    left: auto;
    right: -2px;
    top: -4px;
    line-height: 14px;
    font-size: 10px;
}

/*
 * EL MENU DE CUENTA, LA OTRA CAJA DE SESION.
 *
 * `TAccountMenu` es lo que monta la cabecera por defecto --avatar redondo,
 * rotulo y panel flotante-- y `TSessionBox`, de aqui arriba, sigue siendo el
 * otro modo (`$cabecera['sesionCaja'] = 'box'`). Las dos hojas viajan siempre,
 * y son pequenas: decidir cual se manda obligaria a saber a esta altura que
 * modo eligio la pagina, y esa eleccion se hace mas abajo, en el include.
 *
 * Por el mismo camino que las otras --`readfile`-- y por el mismo motivo: el
 * componente tiene PHP, asi que meterlo en el bundle arrastraria su marcado al
 * div oculto de plantillas y la pagina acabaria con dos menus de cuenta, uno de
 * ellos escondido y con el mismo `#cartItemsCounter`.
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  EL MENÚ DE CUENTA DE LA CABECERA
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Campana, carrito, el disparador de cuenta y la llamada a vender, en una fila;
 * colgando del disparador, el panel flotante.
 *
 * ── LOS COLORES SON LOS DE LA CABECERA, CON RESPALDO ────────────────────
 *
 * Este componente vive dentro de `.sh`, que declara `--sh-verde`, `--sh-tinta`
 * y compañía, así que se usan ESOS y no unos nuevos: dos verdes distintos en la
 * misma franja es lo que después hace imposible unificar. El `var(--sh-x, …)`
 * lleva respaldo por si algún día se monta fuera de la cabecera --en el portal
 * del vendedor, por ejemplo-- y ahí no existen esas variables.
 *
 * ── TODO PREFIJADO CON `.TAccountMenu` ──────────────────────────────────
 *
 * La hoja global del sitio tiene reglas sueltas sobre `a`, `span`, `b`, `small`
 * y `button` --y un `a:visited` en magenta que alcanza a cualquier enlace--, así
 * que aquí se declara lo que hace falta en vez de confiar en lo heredado.
 */

.TAccountMenu{
    --am-verde:       var(--sh-verde, #16a34a);
    --am-verde-hondo: var(--sh-verde-hondo, #15803d);
    --am-verde-suave: var(--sh-verde-suave, #f0fdf4);
    --am-verde-linea: var(--sh-verde-linea, #d5eadd);

    --am-tinta:       var(--sh-tinta, #1f2933);
    --am-tinta-suave: var(--sh-tinta-suave, #52606d);
    --am-linea:       var(--sh-linea, #e4e9ee);

    /* El frío de las zonas destacadas del panel: la línea de la última sesión
       y el estado de foco. Es el mismo gris azulado de las tarjetas del sitio. */
    --am-frio:        #f5f8f7;

    /* LA SOMBRA DEL PANEL, EN DOS CAPAS Y VERDOSA.
       Una sola sombra gris deja el panel plano y despegado a la vez; dos --una
       larga y difusa que lo separa del fondo, otra corta que dibuja el canto--
       es lo que le da el relieve. Y tirando a verde (no negro puro) porque el
       fondo de la cabecera es crema: un gris neutro encima se ve sucio. */
    --am-sombra: 0 18px 44px -14px rgba(13, 48, 28, .30),
                 0 4px 14px -4px rgba(13, 48, 28, .10);

    display: flex;
    align-items: center;
    gap: 4px;
}

.TAccountMenu,
.TAccountMenu *,
.TAccountMenu *::before,
.TAccountMenu *::after{ box-sizing: border-box; }

/* Los enlaces ya visitados no cambian de color: la hoja global les pone un
   magenta que aquí convertiría el menú en un historial de navegación a la
   vista. Ver la nota larga de `TSiteHeader.css`. */
.TAccountMenu a:visited,
.TAccountMenu a:visited span,
.TAccountMenu a:visited b,
.TAccountMenu a:visited small{ color: inherit; }

.TAccountMenu a{ text-decoration: none; }
.TAccountMenu a:hover{ text-decoration: none; }

/* ── LOS DOS ICONOS SUELTOS: AVISOS Y CARRITO ──────────────────────────── */
/*
 * Cuadrados de 40, que es lo que mide el disparador de al lado: tres alturas
 * distintas en la misma fila se notan aunque cada pieza esté bien.
 *
 * `position: relative` en los dos porque los dos llevan una pastilla encima --el
 * número de avisos y el del carrito-- y una pastilla absoluta busca el ancestro
 * posicionado más cercano: sin esto se iría a la cabecera entera.
 */
.TAccountMenu .am-cesta,
.TAccountMenu .am-campana > .TNotificationsBell-toggle{
    position: relative;

    display: inline-grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;
    color: var(--am-verde-hondo);

    transition: background .14s ease;
}

.TAccountMenu .am-cesta:hover,
.TAccountMenu .am-campana > .TNotificationsBell-toggle:hover{ background: var(--am-verde-suave); }

.TAccountMenu .am-cesta iconify-icon,
.TAccountMenu .am-campana iconify-icon{
    /* EL TAMAÑO SE DECLARA EN EL ICONO: `iconify-icon` no hereda el `font-size`
       de su caja, y sin esto sale al tamaño por defecto dentro de una de 40. */
    font-size: 21px;
    color: inherit;
}

/* La campana la coloca su propia hoja con `position:absolute`; aquí entra en la
   fila como una pieza más y sigue siendo el ancestro posicionado de su panel. */
.TAccountMenu .am-campana{
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;

    display: flex;
    align-items: center;
}

/* ── LAS DOS PASTILLAS DE NÚMERO ───────────────────────────────────────── */
/*
 * La del carrito y la de avisos son la misma pieza con distinto color, así que
 * se declaran juntas: separadas acaban con dos redondeos y dos tamaños de letra.
 */
.TAccountMenu .cart_counter,
.TAccountMenu .TNotificationsBell-badge{
    position: absolute;
    top: 2px;
    right: 2px;

    min-width: 16px;
    height: 16px;
    padding: 0 4px;

    /*
     * SIN `display` AQUÍ, Y ES LO QUE MÁS CUESTA VER.
     *
     * La campana se trae su propia hoja inyectada desde el JS, con
     * `.TNotificationsBell-badge{ display:none }`, y la enciende poniendo un
     * `style="display:inline-block"` cuando hay avisos. Un `display` en esta
     * regla pesa (0,2,0) y le gana a esa: la pastilla ámbar se vería SIEMPRE,
     * vacía, desde el primer pintado. Cada una declara el suyo más abajo.
     */

    text-align: center;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    border-radius: 10px;

    /* EN BLANCO Y DICHO DOS VECES: sobre el rojo, el gris que heredaría de la
       cabecera es de lo que peor se lee, y alguna hoja del sitio fija el
       `-webkit-text-fill-color` por su cuenta. */
    color: #fff;
    -webkit-text-fill-color: #fff;

    /* El aro del color del fondo separa la pastilla del icono que tiene debajo:
       sin él, el trazo del carrito se mete dentro del número. */
    box-shadow: 0 0 0 2px var(--sh-fondo, #fffdf7);
}

/* El del carrito lo escribe `setTotalProductsCart()`, que apaga con
   `visibility`; vacío --antes de que nadie lo escriba-- no se pinta, que si no
   es un punto rojo sin número en la primera carga de cada página. */
.TAccountMenu .cart_counter{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
}
.TAccountMenu .cart_counter:empty{ display: none; }

/* El de avisos lo enciende la campana con un `style` en línea, así que aquí
   solo va el color y el alto de línea que lo centra en su píldora --con
   `inline-block` no hay caja flex que lo haga--. */
.TAccountMenu .TNotificationsBell-badge{
    background: #f59e0b;
    line-height: 16px;
}

/* ── EL DISPARADOR DE CUENTA ───────────────────────────────────────────── */
.TAccountMenu .am-cuenta{ position: relative; }

/*
 * AVATAR, RÓTULO Y FLECHA, EN UNA PÍLDORA.
 *
 * `.TComponentES6 button` de la hoja común fija 25 px de alto y un fondo gris,
 * así que aquí se declara todo: alto, relleno, fondo y familia de letra. Sin
 * eso el disparador salía como un botón de formulario de 1998.
 */
.TAccountMenu .am-disparo{
    display: flex;
    align-items: center;
    gap: 9px;

    height: 44px;
    min-height: 0;
    padding: 4px 8px 4px 4px;
    margin: 0;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;

    font-family: inherit;
    color: var(--am-tinta);
    cursor: pointer;

    transition: background .14s ease, border-color .14s ease;
}

.TAccountMenu .am-disparo:hover,
.TAccountMenu[data-abierto="1"] .am-disparo{
    background: #fff;
    border-color: var(--am-verde-linea);
}

/* Foco de teclado (WCAG 2.4.7), con los tokens del foco común del sitio. */
.TAccountMenu .am-disparo:focus-visible{
    outline: 2px solid var(--focus-ring-color, #2563eb);
    outline-offset: 2px;
}

/* ── EL AVATAR, REDONDO ────────────────────────────────────────────────── */
.TAccountMenu .am-avatar{
    flex: 0 0 auto;

    display: inline-grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;
    overflow: hidden;   /* la foto se recorta al círculo, no lo desborda */

    background: var(--am-verde-suave);
    color: var(--am-verde-hondo);
}

.TAccountMenu .am-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sin foto: el mismo círculo, con borde para que no se lea como un hueco. */
.TAccountMenu .am-avatar--vacio{
    border: 1px solid var(--am-verde-linea);
}

.TAccountMenu .am-avatar iconify-icon{ font-size: 19px; color: inherit; }

.TAccountMenu .am-iniciales{
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--am-verde-hondo);
}

/* El grande, el de la ficha del panel. Solo cambia la talla. */
.TAccountMenu .am-avatar--grande{ width: 44px; height: 44px; }
.TAccountMenu .am-avatar--grande iconify-icon{ font-size: 24px; }
.TAccountMenu .am-avatar--grande .am-iniciales{ font-size: 16px; }

/* ── EL RÓTULO ─────────────────────────────────────────────────────────── */
/*
 * LA SEGUNDA COLUMNA DEL FLEX, y todo el texto vive aquí.
 *
 * Es la regla de alineación del proyecto: el avatar en su columna, el texto en
 * la suya, y así las dos líneas arrancan en la misma vertical sin compensar
 * nada con márgenes. `min-width: 0` para que pueda encogerse por debajo de su
 * contenido en ventanas estrechas en vez de empujar la flecha fuera.
 */
.TAccountMenu .am-rotulo{
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;

    text-align: left;
}

.TAccountMenu .am-rotulo-alto{
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--am-tinta-suave);
}

.TAccountMenu .am-rotulo-bajo,
.TAccountMenu .am-rotulo-solo{
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--am-tinta);
}

/* Sin sesión el rótulo es una sola línea, así que se centra con el avatar. */
.TAccountMenu .am-rotulo-solo{ font-size: 13.5px; }

.TAccountMenu .am-flecha{
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--am-tinta-suave);
    transition: transform .16s ease;
}

.TAccountMenu[data-abierto="1"] .am-flecha{ transform: rotate(180deg); }

/* ── EL PANEL ──────────────────────────────────────────────────────────── */
.TAccountMenu .am-panel{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;

    width: 312px;

    background: #fff;
    border: 1px solid var(--am-linea);
    border-radius: 14px;
    box-shadow: var(--am-sombra);

    /* La entrada: aparece subiendo dos píxeles. Corta (.14s) a propósito --un
       menú que tarda en llegar se siente lento, no elegante--. */
    transform-origin: top right;
    animation: am-entrar .14s ease-out both;
}

@keyframes am-entrar{
    from{ opacity: 0; transform: translateY(-4px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* Quien prefiere no ver movimiento, no lo ve (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce){
    .TAccountMenu .am-panel{ animation: none; }
    .TAccountMenu .am-flecha{ transition: none; }
}

/* La punta que lo ata al disparador: el mismo cuadrado girado 45°, con el borde
   solo en los dos lados que se ven. */
.TAccountMenu .am-panel::after{
    content: "";
    position: absolute;
    top: -6px;
    right: 26px;

    width: 11px;
    height: 11px;

    background: #fff;
    border-left: 1px solid var(--am-linea);
    border-top: 1px solid var(--am-linea);
    border-radius: 2px 0 0 0;

    transform: rotate(45deg);
}

/* ── LA FICHA DE QUIEN HA ENTRADO ──────────────────────────────────────── */
/* Dos columnas: el avatar y, en la segunda, todo el texto. */
.TAccountMenu .am-ficha{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 14px 14px 12px;
}

.TAccountMenu .am-ficha-txt{
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.TAccountMenu .am-ficha-nombre{
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--am-tinta);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TAccountMenu .am-ficha-correo{
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    color: var(--am-tinta-suave);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── LA ÚLTIMA SESIÓN ──────────────────────────────────────────────────── */
/*
 * Destacada sobre fondo frío porque no es una entrada del menú: es un dato que
 * se comprueba. Las mismas dos columnas --icono y texto-- que todo lo demás.
 */
.TAccountMenu .am-anterior{
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin: 0 12px 4px;
    padding: 9px 10px;

    background: var(--am-frio);
    border: 1px solid var(--am-linea);
    border-radius: 10px;
}

.TAccountMenu .am-anterior > iconify-icon{
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 15px;
    color: var(--am-verde-hondo);
}

.TAccountMenu .am-anterior-txt{
    flex: 1 1 auto;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 1px;
}

.TAccountMenu .am-anterior-txt b{
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--am-tinta-suave);
}

.TAccountMenu .am-anterior-txt small{
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--am-tinta);
}

.TAccountMenu .am-anterior-ip{ color: var(--am-tinta-suave) !important; font-size: 11px !important; }

/* ── LAS ENTRADAS ──────────────────────────────────────────────────────── */
.TAccountMenu .am-lista{
    display: flex;
    flex-direction: column;

    padding: 6px;
    border-top: 1px solid var(--am-linea);

    /* Un `nav` dentro lleva la línea que le pone la hoja global del sitio: aquí
       las separaciones las decide este componente. */
    border-bottom: 0;
    background: transparent;
}

.TAccountMenu .am-item{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;
    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: var(--am-tinta);

    transition: background .12s ease;
}

.TAccountMenu .am-item:hover{ background: var(--am-verde-suave); color: var(--am-verde-hondo); }

.TAccountMenu .am-item iconify-icon{
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--am-tinta-suave);
}

.TAccountMenu .am-item:hover iconify-icon{ color: var(--am-verde-hondo); }

/* El color va en el `<span>` y no en el `<a>`: el navegador restringe lo que se
   puede cambiar en `:visited` y un `var()` no siempre se aplica ahí. */
.TAccountMenu .am-item > span{
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: inherit;
}

/* ── LOS BOTONES DEL VISITANTE ─────────────────────────────────────────── */
.TAccountMenu .am-acciones{
    display: flex;
    flex-direction: column;
    gap: 7px;

    padding: 0 12px 12px;
}

/*
 * LOS DOS DEL VISITANTE: entrar y darse de alta.
 *
 * En el verde de la casa y no con `btn-primary`/`btn-secondary`, que son las
 * del par de un overlay --azul marino macizo y texto azul-- y aquí quedaban
 * como dos botones traídos de otra pantalla. El porqué, entero, en la
 * plantilla.
 *
 * A ancho completo los dos: en una columna de 312 px, dos botones a su ancho
 * natural quedan de distinto tamaño y desalineados entre sí.
 */
.TAccountMenu .am-btn{
    display: block;
    width: 100%;
    padding: 10px 12px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;

    border: 1px solid transparent;
    border-radius: 9px;

    transition: background .13s ease, border-color .13s ease;
}

/* COLORES LITERALES Y NO `var()`: los dos son enlaces que SE VISITAN, y un
   `var()` dentro de `:visited` no siempre se aplica. #16a34a es `--sh-verde`,
   #15803d `--sh-verde-hondo` y #f0fdf4 `--sh-verde-suave`. */
.TAccountMenu .am-btn--lleno,
.TAccountMenu a.am-btn--lleno:visited{
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.TAccountMenu .am-btn--lleno:hover{ background: #15803d; border-color: #15803d; color: #fff; }

.TAccountMenu .am-btn--linea,
.TAccountMenu a.am-btn--linea:visited{
    background: #fff;
    border-color: #16a34a;
    color: #15803d;
}
.TAccountMenu .am-btn--linea:hover{ background: #f0fdf4; }

.TAccountMenu .am-btn:focus-visible{
    outline: 2px solid var(--focus-ring-color, #2563eb);
    outline-offset: 2px;
}

/* EL ENLACE DE LA CONTRASEÑA OLVIDADA: texto, no un tercer botón --es la
   salida rara, y con el mismo peso que «Iniciar sesión» competiría con él--.
   Color literal por lo mismo que los botones: se visita. */
.TAccountMenu .am-olvido,
.TAccountMenu a.am-olvido:visited{
    display: block;
    padding: 2px 0 0;

    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    text-align: center;
    color: #15803d;
}
.TAccountMenu .am-olvido:hover{ text-decoration: underline; }
.TAccountMenu .am-olvido:focus-visible{
    outline: 2px solid var(--focus-ring-color, #2563eb);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── EL PIE ────────────────────────────────────────────────────────────── */
.TAccountMenu .am-pie{
    padding: 6px;
    border-top: 1px solid var(--am-linea);
}

.TAccountMenu .am-salir{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;
    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    color: var(--am-tinta-suave);

    transition: background .12s ease, color .12s ease;
}

.TAccountMenu .am-salir iconify-icon{ font-size: 17px; color: inherit; }
.TAccountMenu .am-salir > span{ font-family: inherit; font-size: 13px; font-weight: 500; color: inherit; }

.TAccountMenu .am-salir:hover{ background: #fef2f2; color: #b91c1c; }

/* ── LA ZONA DE MÓDULOS ────────────────────────────────────────────────── */
/*
 * `Zone::SESSION_PANEL`: lo que cuelgue cada módulo instalado --«Cuenta
 * Vendedor», por ejemplo--. Su marcado lo pinta `ZoneMenu.js` DESPUÉS de cargar
 * la página, y viene con su propio aspecto: bold, más pequeño y con el icono en
 * negro. Al lado de las entradas de arriba se leía como otra cosa.
 *
 * Se le da el mismo aspecto que a `.am-item` en vez de al revés: son entradas
 * del mismo menú y tienen que verse iguales, vengan de donde vengan. La
 * estructura ya coincide --icono y `<span>`--, así que solo es vestirla.
 */
.TAccountMenu .am-zona{
    padding: 6px;
    border-top: 1px solid var(--am-linea);
}
.TAccountMenu .am-zona:empty{ display: none; }

/* `align-items: stretch` Y HAY QUE DECIRLO: la hoja de `ZoneMenu` trae
   `align-items: center`, pensada para una FILA de iconos en la cabecera. Al
   ponerla en columna, ese `center` deja de centrar verticalmente y pasa a
   centrar A LO ANCHO: la entrada medía 160 px y salía en mitad del panel,
   con el icono a media altura del resto de la lista. */
.TAccountMenu .am-zona .ZoneMenu{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
}

.TAccountMenu .am-zona .ZoneMenu-item{
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 10px;
    border-radius: 9px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    color: var(--am-tinta);

    transition: background .12s ease;
}

.TAccountMenu .am-zona .ZoneMenu-item:hover{ background: var(--am-verde-suave); color: var(--am-verde-hondo); }

.TAccountMenu .am-zona .ZoneMenu-item > span{
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    color: inherit;
}

.TAccountMenu .am-zona .ZoneMenu-item iconify-icon{
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--am-verde);
}

/* ── «VENDER EN AGROCALIA» ─────────────────────────────────────────────── */
/*
 * Contorno y no relleno, igual que la llamada a registrarse de la cabecera: un
 * botón macizo aquí compite con el avatar y con el carrito por la misma mirada.
 * Las medidas son las de `.sh-cta` a propósito --si algún día conviven, tienen
 * que ser el mismo botón-- y es candidato a la hoja común del escaparate.
 */
.TAccountMenu .am-vender{
    display: inline-flex;
    align-items: center;

    margin-left: 6px;
    padding: 10px 15px;

    border: 1px solid var(--am-verde);
    border-radius: 10px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    /* COLOR LITERAL Y NO `var()`: este enlace SÍ se visita --lleva a `/vender`--
       y un `var()` dentro de `:visited` no siempre se aplica. #15803d es
       `--sh-verde-hondo`. */
    color: #15803d;

    transition: background .13s ease;
}

.TAccountMenu a.am-vender:visited{ color: #15803d; border-color: var(--am-verde); }
.TAccountMenu .am-vender:hover{ background: var(--am-verde-suave); }

.TAccountMenu .am-vender:focus-visible{
    outline: 2px solid var(--focus-ring-color, #2563eb);
    outline-offset: 2px;
}

/* ── ESTRECHO ──────────────────────────────────────────────────────────── */
/*
 * Lo primero que sobra es el rótulo: el avatar ya dice de qué es el botón, y
 * «Vender en AgroCalia» ocupa más que las dos cosas juntas. Por debajo de
 * 760 px no se ve nada de esto --la cabecera esconde `.sh-derecha` entera y
 * monta su propia fila de iconos--, así que estos cortes son solo para el
 * tramo intermedio.
 */
@media (max-width: 1180px){
    .TAccountMenu .am-vender{ display: none; }
}

@media (max-width: 980px){
    .TAccountMenu .am-rotulo{ display: none; }
    .TAccountMenu .am-disparo{ padding: 4px 6px 4px 4px; gap: 4px; }
}

/* ── EL PANEL DE AVISOS ────────────────────────────────────────────────── */
/*
 * La campana trae su propia hoja inyectada desde el JS, pensada para la caja de
 * sesión anterior: el panel abría a 30 px del borde de arriba --el alto de
 * aquel enlace-- y con un borde gris y una sombra que no son los de aquí.
 *
 * Se le da la colocación y el aspecto del panel de cuenta, que es su vecino:
 * dos desplegables con distinto redondeo y distinta sombra en la misma esquina
 * de la cabecera es lo que después hace imposible unificar.
 */
.TAccountMenu .TNotificationsBell-panel{
    top: calc(100% + 10px);
    right: 0;

    width: 320px;

    border: 1px solid var(--am-linea);
    border-radius: 14px;
    box-shadow: var(--am-sombra);
}

/*
 * LA CABECERA, POR LO MISMO QUE LA CAJA DE SESION.
 *
 * `TSiteHeader` tiene PHP, asi que meterlo en el bundle arrastra su marcado al
 * div oculto de plantillas y la pagina acaba con DOS cabeceras: la visible, sin
 * componente, y una copia escondida con el buscador montado donde no lo ve
 * nadie. Se comprobo. Aqui solo se trae la hoja; el marcado lo imprime su
 * include y el JS va al final del documento.
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  LA CABECERA DEL SITIO
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Dos filas: la barra --marca, buscador y sesión-- y las categorías debajo.
 *
 * TODO PREFIJADO CON `.sh` y con sus propias variables. La hoja global del
 * sitio tiene reglas sueltas sobre `header`, `nav`, `ul` y `a` --hay un
 * `border-bottom` sobre `nav` que se cuela donde no toca-- así que aquí se
 * declara lo que hace falta en vez de confiar en lo que venga heredado.
 */

.sh{
    --sh-verde:       #16a34a;
    --sh-verde-hondo: #15803d;
    --sh-verde-suave: #f0fdf4;
    --sh-verde-linea: #d5eadd;

    --sh-tinta:       #1f2933;
    --sh-tinta-suave: #52606d;
    --sh-tenue:       #9aa5b1;

    --sh-linea:       #e4e9ee;
    --sh-fondo:       #fffdf7;   /* el crema de la marca, no blanco puro */

    display: block;
    width: 100%;

    /* EL FONDO LO PONE CADA BLOQUE, no la cabecera entera: son dos zonas con
       color propio --la de la marca y la de navegación-- y un fondo aquí se
       vería por debajo de las dos. */
    background: transparent;

    /* Y AQUÍ NO SE COLOCA NADA: la hoja global mueve el `<header>` del sitio
       con `sticky` y un `top` negativo, y esa regla se colaba en lo que hubiera
       dentro. Se declara la posición normal para no depender de ello. */
    position: static;
    top: auto;
}

/* ── LOS DOS BLOQUES ─────────────────────────────────────────────────── */
/*
 * Cada uno de extremo a extremo con su color; dentro, el `.body-content` del
 * sitio centra lo que se lee. Así el color llega a los bordes de la ventana y
 * el contenido se queda en la medida de la página, alineado con lo de abajo.
 */
.sh-zona{ width: 100%; }

/*
 * LA BARRA DE LA MARCA, POR ENCIMA DE LA DE NAVEGACIÓN.
 *
 * El desplegable del buscador vive aquí dentro y se abre hacia abajo, sobre la
 * barra de categorías. Sin este `z-index` gana la de navegación --que va
 * después en el documento y crea su propio contexto con `position: relative`--
 * y los resultados quedaban CORTADOS por detrás de ella: se veía la primera
 * línea y el resto desaparecía debajo del menú.
 */
.sh-zona-barra{
    position: relative;
    z-index: 20;
    background: var(--sh-fondo);
}

/* La navegación, en blanco: es un bloque aparte de la barra de la marca, y el
   cambio de tono es lo que lo separa sin tener que dibujar una caja. */
.sh-zona-nav{
    background: #fff;
    border-top: 1px solid var(--sh-linea);
    border-bottom: 1px solid var(--sh-linea);

    /* EL MARCO DEL PANEL: cuelga de aquí para poder ocupar todo el ancho de la
       ventana, y no del `li` de su categoría, que mide lo que mide su nombre. */
    position: relative;
}

.sh, .sh *, .sh *::before, .sh *::after{ box-sizing: border-box; }

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS ENLACES YA VISITADOS NO CAMBIAN DE COLOR
 * ═══════════════════════════════════════════════════════════════════════
 *
 * La hoja global del sitio le da a `a:visited` un magenta, y por eso los
 * accesos de la cabecera --«Descargas», «Mi cuenta», «Admin»-- salían de ese
 * color en cuanto alguien los había pulsado una vez, mientras los que nadie
 * había abierto seguían grises. Una barra con dos colores según por dónde
 * hayas pasado no es un diseño, es un historial de navegación a la vista.
 *
 * Y ES DIFÍCIL DE VER MIDIENDO: `getComputedStyle` MIENTE con `:visited` --
 * devuelve siempre el color del estado normal, por privacidad-- así que el
 * color medido decía gris mientras la pantalla pintaba magenta.
 *
 * Se declara para toda la cabecera de una vez, que es la única forma de que no
 * vuelva a colarse en la próxima zona que se añada.
 */
.sh a:visited,
.sh a:visited span,
.sh a:visited b,
.sh a:visited small{ color: inherit; }

.sh .sh-cat > a:visited > span{ color: var(--sh-tinta); }
.sh .sh-sesion a:visited{ color: var(--sh-tinta); }
.sh .sh-marca:visited .sh-marca-txt{ color: var(--sh-verde-hondo); }
.sh .sh-marca:visited .sh-marca-tld{ color: var(--sh-verde); }

/* Un `nav` dentro de la cabecera no lleva la línea que le pone la hoja global
   del sitio: aquí las separaciones las decide este componente. */
.sh nav{ border: 0; }

/*
 * EL SITIO DE LOS ICONOS, RESERVADO ANTES DE QUE LOS ICONOS EXISTAN.
 *
 * `iconify-icon` es un elemento a medida: hasta que su guion lo levanta es un
 * elemento DESCONOCIDO para el navegador --`display: inline`, sin contenido y
 * por tanto de ancho CERO-- y al levantarse pasa a ser un `inline-block` de
 * 1 em. O sea que la fila cambia de ancho ella sola en mitad de la carga.
 *
 * Aquí eso no es cosmético: el modo del buscador se decide MIDIENDO, y se mide
 * antes de pintar (`TSiteHeaderHueco.js`). Medido a 1.040 px de ventana,
 * `.sh-derecha` daba 221 px antes de que los iconos existieran y 236 después;
 * el hueco salía 308 --cabe-- cuando la verdad era 293 --no cabe--, así que la
 * lupa se decidía al revés y se corregía al llegar los iconos: el parpadeo otra
 * vez, y solo en una franja de anchos, que es de lo más difícil de reproducir.
 *
 * Reservando la caja, la medida es la misma antes y después. `1em` es
 * exactamente lo que el elemento se pone a sí mismo al levantarse, así que esto
 * no cambia ningún tamaño: solo lo adelanta. Quien quiera otra medida la declara
 * con más peso, como hacen `.sh-m-ico iconify-icon` aquí y las de
 * `.TAccountMenu` en su hoja.
 *
 * ── CANDIDATO A LA HOJA COMÚN ──────────────────────────────────────
 *
 * Esto no tiene nada de la cabecera: le pasa a CUALQUIER pantalla que mida
 * anchos o cuente columnas con iconos dentro, y el fallo se ve tarde y solo a
 * ratos. Va acotado a `.sh` porque soltarlo a todo el sitio alcanza a pantallas
 * que nadie ha mirado, y eso se decide aparte. Cuando se saque, se saca tal
 * cual y esta regla se borra.
 */
.sh iconify-icon{ display: inline-block; width: 1em; height: 1em; }

/* ── LA BARRA ────────────────────────────────────────────────────────── */
/*
 * Tres zonas: marca fija, buscador elástico y sesión fija. El buscador es el
 * único que crece, así que al estrechar la ventana se encoge él y las otras dos
 * mantienen su sitio -- que es justo lo que hace falta: el logo no se recorta y
 * los accesos de la derecha no se apilan.
 */
.sh-barra{
    display: flex;
    align-items: center;
    gap: 22px;

    /* SIN ANCHO PROPIO: lo pone el `.body-content` que la envuelve, que es el
       contenedor del sitio. Repetir aquí una medida dejaría la cabecera
       desalineada del resto de la web en cuanto alguien cambie la suya. */

    /*
     * EL ALTO SÍ ES SUYO: 70 px.
     *
     * `min-height` y no `height`, con el relleno de suelo: la fila crece si
     * algún día lo que lleve dentro mide más --un aviso, una segunda línea en
     * el menú de cuenta-- en vez de recortarlo. Con `height` fijo, lo que no
     * cabe se sale por arriba y por abajo sin que nada avise.
     *
     * ── Y NO ESTÁ ATADO A NINGÚN OTRO NÚMERO, aunque lo pareciera ──────
     *
     * La cabecera del sitio se pegaba arriba con `top: -92px` --el alto de esta
     * fila--, así que al bajar se salía entera y cambiarlo aquí la habría
     * dejado asomando. **Eso ya no es así**: la hoja global está en `top: 0`
     * desde que se decidió que el buscador y el carrito se quedan a mano
     * mientras se recorre el catálogo (ver la nota de `base.php`). La fila
     * pegada es esta misma, así que su alto es asunto suyo y de nadie más.
     *
     * Con 70 y las piezas de dentro a 44 --buscador, explorador, marca y el
     * menú de cuenta-- quedan 13 px de aire arriba y abajo: el relleno de
     * 10 px no llega a mandar y la fila no se recorta.
     */
    min-height: 70px;
    padding: 10px 0;

    /* EL MARCO DE LA FILA DESPLEGABLE. La fila 2 se cuelga del borde de abajo
       de la barra con `top: 100%`, y sin esto ese 100 % sería el de la ventana.
       Va aquí y no en la consulta de móvil desde que la lupa existe en
       cualquier ancho (`.es-lupa`). */
    position: relative;
}

/* El contenedor de dentro no pinta fondo ni sombra: solo mide. */
.sh .sh-fila{ background: transparent; box-shadow: none; }

/* ── LA MARCA ────────────────────────────────────────────────────────── */
/* El flex de dos columnas de siempre: icono a la izquierda, texto a la derecha,
   para que el nombre no baile respecto al dibujo. */
.sh-marca{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;

    /* Declarado aunque el texto de dentro traiga el suyo: la hoja global pinta
       los enlaces de morado, y basta con que un día el `span` de dentro no
       lleve color para que la marca salga de ese color. */
    color: var(--sh-verde-hondo);
}

/*
 * LA MARCA NO SE SUBRAYA AL PASAR POR ENCIMA.
 *
 * La hoja global tiene un `a:hover { text-decoration: underline }` que alcanza
 * a todo enlace del sitio, y sobre el nombre de la marca esa raya cruza también
 * el «.eu» en superíndice: parece un tachón, no un enlace.
 *
 * Se apaga en el enlace Y en sus hijos: la decoración la dibuja el elemento que
 * la declara sobre todo su texto, así que apagarla solo en el `<a>` no siempre
 * limpia lo que ya venía puesto en el `span`.
 */
.sh-marca:hover,
.sh-marca:focus,
.sh-marca:hover .sh-marca-txt,
.sh-marca:hover .sh-marca-tld{ text-decoration: none; }

.sh-marca-ico{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sh-verde-suave);
    border: 1px solid var(--sh-verde-linea);
    color: var(--sh-verde-hondo);
    font-size: 20px;
}

.sh-marca-txt{
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--sh-verde-hondo);

    /* SIN EL `font:` ABREVIADO de las reglas globales: ese atajo reinicia el
       tamaño de todo lo de dentro, y el `.eu` volvía al tamaño del nombre. */
}

/* La extensión del dominio, pequeña: no es parte del nombre, y a igual tamaño
   competía con él. */
.sh-marca-tld{
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
    color: var(--sh-verde);
    vertical-align: super;
    margin-left: 1px;
}

/* ── EL BUSCADOR ─────────────────────────────────────────────────────── */
/*
 * Es lo único que se estira. `min-width: 0` porque un ítem flex no baja de su
 * contenido si no se le dice, y el buscador lleva dentro un desplegable de
 * categorías con ancho propio: sin esto empujaba la zona de sesión fuera de la
 * pantalla en ventanas estrechas.
 */
.sh-buscador{
    flex: 1;
    min-width: 0;
    max-width: 720px;

    display: flex;
    align-items: stretch;

    /* 44 px: el de la maqueta, y el mínimo que pide WCAG 2.5.5 para algo que se
       pulsa. Va con el explorador de al lado, que mide lo mismo. */
    height: 44px;

    background: #fff;
    border: 1px solid var(--sh-verde-linea);
    border-radius: 10px;
    overflow: visible;   /* el desplegable de resultados tiene que poder salir */
}

/* Foco de teclado (WCAG 2.4.7). El campo no tiene borde propio y lleva
   `outline:none` (TProductSearch.css): el anillo en el campo quedaría pegado al
   selector y a la lupa, así que se dibuja en el marco, con los mismos tokens que
   el foco común de Tjquery/css/index.css. */
.sh-buscador:has(.tps-input:focus-visible){
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-ring-halo);
}

/* ── LA SESIÓN ───────────────────────────────────────────────────────── */
/* SIN `margin-left:auto` DESDE EL REDISEÑO (25/08/2026): quien empuja a la
   derecha ahora es `.sh-derecha`, que agrupa accesos, la llamada a registrarse
   y esta caja. Con el margen puesto aquí dentro, la caja se separaba de sus
   vecinas y el bloque se leía roto. */
.sh-sesion{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  DOS CAJAS DE SESIÓN, Y CADA UNA CON SU CLASE
 * ═══════════════════════════════════════════════════════════════════════
 *
 * La cabecera monta una de dos (`$cabecera['sesionCaja']`):
 *
 *     .sh-sesion--menu   `TAccountMenu`, el menú de cuenta con su panel
 *     .sh-sesion--box    `TSessionBox`, la caja de siempre
 *
 * TODO LO QUE SIGUE HASTA «LAS CATEGORÍAS» ES DE LA CAJA DE SIEMPRE, y por eso
 * lleva `--box`. Antes colgaba de `.sh-sesion` a secas --no había más que una
 * caja posible-- y en cuanto apareció la segunda esas reglas la alcanzaban
 * también: `.sh-sesion a{ font-size:13px }` le cambiaba el tamaño a los rótulos
 * del menú, `.sh-sesion .cart_counter` le movía la pastilla del carrito y
 * `.sh-sesion a:hover{ text-decoration: underline }` subrayaba cada entrada del
 * panel. Ninguna de esas reglas está mal: están escritas PARA otro marcado.
 *
 * `TAccountMenu` no necesita nada aquí: se coloca y se colorea con su propia
 * hoja, usando estas mismas variables (`--sh-verde`, `--sh-tinta`…).
 * ═══════════════════════════════════════════════════════════════════════
 */

/*
 * LA CAJA DE SESIÓN ES DEL PROYECTO --`TSessionBox`-- y trae su propia hoja,
 * pensada para la cabecera anterior: sus enlaces salían en naranja
 * (`rgb(182, 85, 24)`, medido) sobre este fondo crema, que es de otra familia
 * de color. Aquí se le da el tono de esta cabecera sin tocar su hoja, que la
 * usan también otras pantallas.
 *
 * Solo color y tamaño: la disposición sigue siendo suya.
 */
.sh-sesion--box a{
    color: var(--sh-tinta);
    font-size: 13px;
    text-decoration: none;
}
/* AQUÍ SÍ SE SUBRAYA (decisión del usuario): son accesos sueltos, no una barra
   de secciones, y el subrayado es lo que dice que se puede pulsar. */
.sh-sesion--box a:hover{ color: var(--sh-verde-hondo); text-decoration: underline; }

/* Salvo el botón de salir, que ya se distingue por su recuadro. */
.sh-sesion--box a.logout:hover{ text-decoration: none; }

/*
 * Y EL TEXTO DE DENTRO DEL ENLACE, otra vez.
 *
 * «Cuenta Vendedor» viene envuelto en un `span` sin clase, y la regla global de
 * `span` le gana al color del `<a>` que lo contiene: salía en morado al lado de
 * enlaces grises que dicen lo mismo. Medido: `rgb(145, 12, 136)`.
 */
.sh-sesion--box a span{
    font-family: inherit;
    font-size: 13px;
    font-weight: inherit;
    color: inherit;
}

/* Los iconos de la caja de sesión, en el verde de la casa. */
.sh-sesion--box a i,
.sh-sesion--box a svg,
.sh-sesion--box a iconify-icon{ color: var(--sh-verde); }

/* El saludo: el nombre manda, la sesión anterior acompaña. */
.sh-sesion--box b,
.sh-sesion--box strong{ color: var(--sh-tinta); font-size: 13px; }
.sh-sesion--box small{ color: var(--sh-tinta-suave); font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   LA CAJA DE SESIÓN, COLOCADA
   ═══════════════════════════════════════════════════════════════════════

   `TSessionBox` viene del diseño anterior: colocaba sus piezas con
   `position: absolute` --el botón de salir a la derecha, dos PNG de sombra
   en las esquinas-- sobre una caja de alto fijo. Cambiados sus iconos por
   Lucide y quitadas las sombras, eso dejaba el saludo y el «Salir» pisándose.

   Aquí se le da una rejilla, que es lo que pedía desde el principio:

       [avatar]  Hola, alex                 [campana] [salir]
       [avatar]  carrito · descargas · cuenta · admin · vendedor

   TODO PREFIJADO CON `.sh-sesion--box`: la hoja de `TSessionBox` no se toca porque
   la usan otras pantallas que siguen con la disposición de antes.
   ═══════════════════════════════════════════════════════════════════════ */

.sh-sesion--box #logoutBox{
    position: static;
    right: auto;
    top: auto;
    padding: 8px 14px;
    background: transparent;

    /* SIN EL ANCHO FIJO de su hoja --440px, medido--: con él, la fila de
       accesos no cabía y «Cuenta Vendedor» caía sola a una tercera línea. Aquí
       hay sitio de sobra, así que la caja ocupa lo que necesite. */
    width: auto;
    min-width: 0;
    max-width: none;
}

.sh-sesion--box #logoutBox > div{
    /* EL ANCHO FIJO VIVE AQUÍ, en el hijo: `#logoutBox > div { width: 400px }`
       de la hoja de `TSessionBox`. Con él, la fila de accesos no cabía y
       «Cuenta Vendedor» caía sola a una segunda línea. */
    width: auto;

    display: grid;
    grid-template-columns: auto 1fr auto auto;
    /*
     * EL AVATAR SOLO EN LA PRIMERA FILA: antes abarcaba las dos y quedaba
     * centrado a media altura, con el menú de accesos naciendo a su derecha
     * como si colgara de él. Va con el saludo, que es de quien es.
     */
    grid-template-areas:
        "avatar saludo campana salir"
        "menu   menu   menu    menu";
    align-items: center;
    gap: 2px 10px;
}

.sh-sesion--box #logoutBox .pic{
    grid-area: avatar;
    width: 34px; height: 34px;
    border-radius: 8px;
    object-fit: cover;
}

/* Sin foto: el icono en su casilla, con el mismo tamaño que tendría el retrato
   para que la fila no se mueva según quién haya entrado. */
.sh-sesion--box #logoutBox .pic-vacio{
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--sh-verde);
    background: var(--sh-verde-suave);
    border: 1px solid var(--sh-verde-linea);
    border-radius: 50%;
    font-size: 21px;
}

/*
 * EL SALUDO es el único hijo sin clase, así que se pide por posición. Es
 * frágil a propósito de decirlo: si algún día `TSessionBox` le pone una clase,
 * este selector se cambia por ella y se acabó.
 */
.sh-sesion--box #logoutBox > div > div:nth-child(3){ grid-area: saludo; line-height: 1.35; }

/*
 * AIRE ENTRE LA CAMPANA Y EL BOTÓN DE SALIR: pegados --2px, medido-- el badge
 * de avisos parecía parte del botón y se leía como si el número fuera suyo.
 *
 * `position: relative` Y NO `static`: su hoja la coloca en `absolute`, así que
 * estaba FUERA del flujo de la rejilla y ningún margen la movía. Relativa entra
 * en la fila y además sigue siendo el ancestro posicionado de su panel
 * desplegable, que cuelga de ella -- con `static` el panel se iría a buscar
 * otro y aparecería donde no toca.
 */
.sh-sesion--box .TNotificationsBell{
    grid-area: campana;
    margin-right: 18px;
}
.sh-sesion--box .usermenu{ grid-area: menu; }

/* El botón de salir: era una imagen absoluta de 50px en la esquina. */
.sh-sesion--box a.logout{
    grid-area: salir;
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 10px;

    font-size: 12px;
    color: var(--sh-tinta-suave);

    background: #f3f5f7;
    border: 1px solid var(--sh-linea);
    border-radius: 7px;
}
.sh-sesion--box a.logout:hover{ background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.sh-sesion--box a.logout iconify-icon{ font-size: 14px; color: inherit; }

/* La fila de accesos: en línea, repartidos a lo ancho de la caja de sesión. */
.sh-sesion--box .usermenu{
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    /* REPARTIDOS, no apelotonados a la izquierda: los accesos ocupan el ancho
       que ya tiene la caja de sesión, así que cada uno cae en su sitio y la
       fila deja de crecer y encoger según cuántos haya. El `gap` se queda como
       SUELO --lo que no pueden juntarse al envolver en dos líneas--. */
    justify-content: space-between;
    gap: 4px 12px;

    /* EL AIRE QUE FALTABA sobre los enlaces: pegados al saludo se leían como
       parte de él, no como una fila de accesos. */
    padding-top: 6px;
}
.sh-sesion--box .usermenu > div{ display: flex; align-items: center; }

.sh-sesion--box .usermenu a{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.sh-sesion--box .usermenu iconify-icon{ font-size: 16px; }

/* El contador del carrito, sobre su icono. */
.sh-sesion--box .cart_counter{
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: -6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: #ef4444;
    border-radius: 10px;
}

/* La campana, en el verde de la casa como los demás iconos. */
.sh-sesion--box .TNotificationsBell iconify-icon{ font-size: 19px; color: var(--sh-verde); }

/*
 * LOS DOS CONTADORES, EN BLANCO.
 *
 * El del carrito y el de avisos son pastillas de color fuerte --rojo y ámbar--
 * y el número iba en el color que heredara de la cabecera: gris oscuro sobre
 * rojo, que es de lo que peor se lee. Los dos juntos y no cada uno por su lado
 * porque son la misma pieza repetida.
 */
.sh-sesion--box .cart_counter,
.sh-sesion--box .TNotificationsBell-badge{
    color: #fff;
    -webkit-text-fill-color: #fff;   /* algunas hojas del sitio lo fijan aparte */
}

/* ── LAS CATEGORÍAS ──────────────────────────────────────────────────── */
.sh-cats{ padding: 0; }

.sh-cats-lista{
    display: flex;
    align-items: stretch;
    gap: 0;

    margin: 0;
    padding: 0;
    list-style: none;

    /*
     * SIN `overflow-x` AQUÍ, y no es un olvido.
     *
     * Con él, la barra recorta a sus hijos --y el panel de categorías es un
     * hijo absoluto que sale por debajo--: se pintaba entero y solo se veía la
     * franja que cabía dentro de la barra. En pantallas estrechas las entradas
     * se reparten en dos filas, que es preferible a perder el panel.
     */
    flex-wrap: wrap;
}

/*
 * LA ENTRADA NO SE POSICIONA, y es lo que hace que el panel funcione.
 *
 * `static` DECLARADO, no omitido: la hoja global del sitio tiene un
 * `li { position: relative }` que alcanza a cualquier elemento de lista, así
 * que quitar la regla de aquí no bastaba -- seguía ganando la suya.
 *
 * Con la entrada posicionada, el panel --absoluto con `left:0; right:0`-- se
 * medía contra el `<li>`, o sea contra el ancho de su nombre: se abría como una
 * columna de 202px y sus cuatro columnas se pisaban unas a otras. Medido.
 *
 * En `static`, el ancestro que lo coloca pasa a ser el `.body-content` de la
 * barra, así que el panel abre con el ancho de la página y alineado con ella.
 */
.sh-cat{ position: static; flex: 0 0 auto; }

/*
 * LA LÍNEA SÍ, EL SUBRAYADO DEL TEXTO NO.
 *
 * Son dos cosas distintas y se confunden fácil:
 *
 *   · el `border-bottom` del enlace es una línea que cruza toda la entrada, a
 *     la altura del pie de la barra -- eso es lo que marca por dónde va el
 *     ratón, y va;
 *   · el `text-decoration: underline` es una raya pegada a las letras, que
 *     además pasa por debajo del icono y ensucia la palabra -- eso no.
 *
 * El `underline` se apaga también en el `span`, que es donde vive el texto:
 * apagarlo solo en el `<a>` no basta, porque la decoración la puede traer
 * puesta el hijo desde las reglas globales.
 */
.sh-cat > a{
    display: flex;
    align-items: center;
    gap: 8px;

    /* `!important` porque la hoja global del sitio declara su propio relleno
       para los enlaces de lista y gana por especificidad. */
    padding: 8px 2px !important;

    text-decoration: none;
    white-space: nowrap;

    border-bottom: 2px solid transparent;
}

.sh-cat:hover > a{ border-bottom-color: var(--sh-verde); }

.sh-cat > a:hover,
.sh-cat > a:focus,
.sh-cat > a:hover > span,
.sh-cat > a:focus > span{ text-decoration: none; }

/*
 * EL TEXTO SE DECLARA EN EL `span`, NO SOLO EN EL ENLACE.
 *
 * La hoja global del sitio estiliza los `span` con un `font:` abreviado y color
 * propio, y eso GANA a lo que herede de su padre: las categorías salían en
 * morado de 11px y en Arial aunque el enlace pidiera 13px en gris. Medido con
 * `getComputedStyle`: `rgb(145, 12, 136)`, `11px`, `700`.
 *
 * Es la misma trampa de siempre en este proyecto --un `span` no hereda el
 * tamaño-- y se resuelve igual: diciéndolo donde el texto vive de verdad.
 */
.sh-cat > a > span{
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--sh-tinta);
}
.sh-cat > a:hover > span{ color: var(--sh-verde-hondo); }

.sh-cat > a > iconify-icon{ font-size: 17px; color: var(--sh-verde); flex: 0 0 auto; }

/*
 * «VENDEDORES»: LA ENTRADA FIJA DE LA BARRA.
 *
 * No sale del catálogo --es el directorio de agricultores, `/sellers`-- así que
 * se separa de las familias con una línea. Sin ella se lee como una categoría
 * más y el visitante espera un panel de subcategorías que no existe.
 */
.sh .sh-cat-fija{ margin-right: 12px; padding-right: 14px; border-right: 1px solid var(--sh-linea); }
.sh .sh-cat-fija > a > span:last-child{ font-weight: 700; }
.sh .sh-cat-fija > a > .sh-estampa{ color: var(--sh-verde-hondo); }
.sh-cat-flecha{ font-size: 14px !important; color: var(--sh-tenue) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   EL PANEL DE CATEGORÍAS
   ═══════════════════════════════════════════════════════════════════════

   Se abre al pasar por una entrada de la barra y ocupa todo el ancho: dentro
   caben las subcategorías repartidas en columnas y la zona de confianza.

   AL PASAR POR ENCIMA Y TAMBIÉN CON EL TECLADO (`focus-within`): un menú que
   solo responde al ratón deja fuera a quien navega con el tabulador.

   `visibility` ADEMÁS DE `opacity`: un panel solo transparente sigue robando
   los clics de lo que tiene debajo -- y este ocupa media pantalla.
   ═══════════════════════════════════════════════════════════════════════ */

.sh-mega{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2500;

    padding: 0 0 6px;

    background: #fff;
    border-top: 1px solid var(--sh-linea);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.sh-cat:hover > .sh-mega,
.sh-cat:focus-within > .sh-mega{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* El contenido, con el ancho de la página: el panel llega a los bordes de la
   ventana pero lo que se lee se queda donde está el resto de la web. */
.sh-mega-cuerpo{
    display: grid;
    gap: 28px;
    padding: 22px 30px 20px;
}

/* Tantas columnas como haya, y la de confianza siempre al final. */
.sh-mega-cuerpo.cols-1{ grid-template-columns: minmax(0,1fr) 300px; }
.sh-mega-cuerpo.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) 300px; }
.sh-mega-cuerpo.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) 300px; }

/* ── EL PIE DEL PANEL ────────────────────────────────────────────────── */
.sh-mega-pie{
    border-top: 1px solid var(--sh-linea);
    background: #fbfcfb;
}
.sh-mega-pie-fila{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 16px 30px;
}
.sh-mega-cond{ display: flex; align-items: center; gap: 11px; }
.sh-mega-cond b{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-tinta);
}
.sh-mega-cond small{
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--sh-tinta-suave);
}

/* ── UNA COLUMNA ─────────────────────────────────────────────────────── */
.sh-mega-col{ min-width: 0; }

.sh-mega-cab{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.sh-mega-titulo{ min-width: 0; }
.sh-mega-titulo b{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--sh-tinta);
}
.sh-mega-titulo small{
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sh-tinta-suave);
}

/* ── LA ESTAMPA ──────────────────────────────────────────────────────── */
/*
 * La casilla del dibujo. Mide siempre lo mismo lleve una ilustración o un
 * icono de trazo, para que las filas no bailen según lo que tenga cada
 * categoría.
 */
.sh-estampa{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background: var(--sh-verde-suave);
    overflow: hidden;
}
.sh-estampa img{ width: 100%; height: 100%; object-fit: contain; }
.sh-estampa-icono{ color: var(--sh-verde-hondo); font-size: 17px; }

.sh-estampa-grande{ width: 46px; height: 46px; font-size: 22px; }

/* En la barra, la estampa es pequeña y sin fondo: ahí el dibujo acompaña al
   nombre, no lo preside. */
.sh-cat > a > .sh-estampa{
    width: 22px;
    height: 22px;
    background: transparent;
}
.sh-cat > a > .sh-estampa iconify-icon{ font-size: 17px; color: var(--sh-verde); }

/* ── LA PORTADA ──────────────────────────────────────────────────────── */
/*
 * La foto ancha que presenta la familia. Enlaza a la categoría: quien pincha en
 * la imagen espera ir a lo que enseña, no que no pase nada.
 *
 * `aspect-ratio` en vez de una altura fija: la foto se sube en 720×300 y así se
 * queda con esa proporción mida lo que mida la columna. Con altura fija, en una
 * columna estrecha la imagen se recortaría por los lados hasta perder el motivo.
 */
.sh-mega-portada{
    display: block;
    margin-bottom: 14px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.sh-mega-portada img{
    width: 100%;
    aspect-ratio: 12 / 5;
    object-fit: cover;
    transition: transform .35s ease;
}
.sh-mega-portada:hover img{ transform: scale(1.03); }

/* ── LA LISTA DE SUBCATEGORÍAS ───────────────────────────────────────── */
.sh-mega-lista{
    margin: 0;
    padding: 0;
    list-style: none;
}

.sh-mega-lista a{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 9px 8px;
    border-radius: 9px;

    text-decoration: none;
}
.sh-mega-lista a:hover{ background: var(--sh-verde-suave); text-decoration: none; }

.sh-mega-txt{ flex: 1; min-width: 0; }
.sh-mega-txt b{
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sh-tinta);
}
.sh-mega-txt small{
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--sh-tinta-suave);
}

.sh-mega-mas{
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--sh-tenue);
}
.sh-mega-lista a:hover .sh-mega-mas{ color: var(--sh-verde); }

/* ── EL ENLACE DE CIERRE ─────────────────────────────────────────────── */
.sh-mega-todo{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 12px;
    padding: 9px 14px;

    font-size: 13px;
    font-weight: 500;
    color: var(--sh-verde-hondo);
    text-decoration: none;

    background: var(--sh-verde-suave);
    border: 1px solid var(--sh-verde-linea);
    border-radius: 9px;
}
.sh-mega-todo:hover{ background: #e4f6ea; text-decoration: none; }

/* ── LA COLUMNA DE CONFIANZA ─────────────────────────────────────────── */
.sh-mega-lado{
    display: flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 26px;
    border-left: 1px solid var(--sh-linea);
}

/* ── LA ZONA DE PUBLICIDAD ───────────────────────────────────────────── */
/*
 * La creatividad viene montada con su medida (600×720, o sea 5:6), así que aquí
 * solo se le da su hueco y se deja que ocupe el ancho: ni recortes, ni encajes,
 * ni texto encima. `aspect-ratio` mantiene su proporción sin tener que fijar
 * una altura que dependería del ancho de la columna.
 */
.sh-mega-banner{
    position: relative;
    display: block;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.sh-mega-banner img{
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

/* EL SELLO DE «PUBLICIDAD», solo cuando el hueco está pagado. Discreto pero
   legible: un espacio comprado tiene que decir que lo está, igual que los
   productos destacados de la tienda. */
.sh-mega-publi{
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 2px 8px;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    color: #4b5563;

    background: rgba(255, 255, 255, .88);
    border-radius: 20px;
}

.sh-mega-garantia{
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--sh-linea);
}
.sh-mega-garantia:last-child{ border-bottom: 0; }

.sh-mega-gico{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    border-radius: 50%;

    background: var(--sh-verde-suave);
    color: var(--sh-verde-hondo);
    font-size: 17px;
}
.sh-mega-garantia b{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-tinta);
}
.sh-mega-garantia small{
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--sh-tinta-suave);
}

@media (max-width: 1200px){
    /* La columna de confianza es lo primero que sobra cuando falta sitio: son
       las mismas tres promesas en todas las categorías, y el pie ya las repite. */
    .sh-mega-cuerpo.cols-1,
    .sh-mega-cuerpo.cols-2,
    .sh-mega-cuerpo.cols-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sh-mega-lado{ display: none; }
    .sh-mega-pie-fila{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
    .sh-mega{ display: none; }   /* en móvil, la barra lleva directamente */
}

/* ═══════════════════════════════════════════════════════════════════════
   EL PANEL VERTICAL
   ═══════════════════════════════════════════════════════════════════════

   Tres columnas: las familias a la izquierda --todas a la vez, con scroll
   propio--, lo que hay dentro de la que se mira en el centro, y la publicidad
   con las garantías a la derecha. El pie cruza las tres.

   UNO SOLO PARA TODA LA BARRA. El `.sh-mega` colgaba de cada entrada, así que
   el pie, el banner y las garantías se repetían tantas veces como categorías
   hubiera. Este cambia de vista sin cerrarse, que además es lo que permite
   saltar de una familia a otra sin volver a la barra.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS TONOS DEL PANEL, MUESTREADOS DE LA MAQUETA
 * ═══════════════════════════════════════════════════════════════════════
 *
 * No son «un gris parecido»: son los píxeles de `Submenu vertical.png`,
 * leídos uno a uno. El texto de un PNG está suavizado, así que cada valor sale
 * del promedio del tramo más oscuro de su bloque -- el mínimo a secas devuelve
 * un artefacto de compresión y la media, un gris lavado.
 *
 * Y viven aquí, en variables, porque son los tonos del panel entero: el mismo
 * gris de un subtítulo de familia es el de un subtítulo de subcategoría, y con
 * el valor repetido en seis reglas se separan a la tercera corrección.
 */
.shv{
    --shv-titulo:     #17191d;   /* nombre de una categoría, en reposo */
    --shv-sub:        #70747b;   /* su descriptor corto */
    --shv-borde:      #eef0f2;   /* el marco de las tarjetas */

    --shv-act-bg:     #f7fbf5;   /* la que se está mirando */
    --shv-act-borde:  #b8d5b6;
    --shv-act-titulo: #0c3d0f;
    --shv-act-sub:    #4b6a52;

    --shv-ayuda-bg:     #f3f7f1;
    --shv-ayuda-borde:  #dfe9dd;
    --shv-ayuda-titulo: #0d3d11;
    --shv-ayuda-txt:    #6f7579;
    --shv-ayuda-cta:    #1e6c1c;
    --shv-ayuda-ico:    #0d5b16;
}

.shv{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /*
     * POR DEBAJO DE LA BARRA DE LA MARCA (que va a 20), y es a propósito: el
     * desplegable del buscador baja sobre este panel y tiene que ganarle. Por
     * encima, en cambio, de todo lo que hay en la página -- el panel ocupa
     * media pantalla y cualquier tarjeta con posición se le colaba delante.
     */
    z-index: 10;

    padding-bottom: 30px;   /* aire para que el ratón no se salga al bajar */

    /*
     * EL MARCO NO TOCA EL RATÓN; LA TARJETA SÍ.
     *
     * `.shv` va de borde a borde de la ventana --tiene que hacerlo para que la
     * tarjeta quede centrada con el resto de la página-- así que sus franjas
     * laterales son un bloque transparente de 900px de alto tendido sobre el
     * contenido: se comía los clics de lo que hubiera debajo y, peor, el panel
     * no se cerraba nunca al salir de la tarjeta, porque el ratón seguía
     * dentro de él. Comprobado en el navegador.
     */
    pointer-events: none;

    /*
     * `visibility` ADEMÁS DE `opacity`: un panel solo transparente sigue
     * robando los clics de lo que tiene debajo, y este cubre media pantalla.
     */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);

    /*
     * LA VISIBILIDAD CAMBIA AL PRINCIPIO AL ABRIR Y AL FINAL AL CERRAR.
     *
     * Con `visibility .16s` a secas el panel tardaba ese tiempo en volverse
     * tocable: quien iba directo de la categoría a la primera subcategoría
     * --que está a un palmo-- llegaba antes que la transición, el ratón caía
     * sobre la página de debajo y el panel se cerraba en su cara. Comprobado.
     *
     * Al cerrar sí interesa el retardo, para que no desaparezca de golpe en
     * mitad del fundido.
     */
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.shv.es-abierto{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

.shv-caja{
    pointer-events: auto;

    background: #fff;
    border: 1px solid var(--sh-linea);
    border-top: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 22px 48px rgba(16, 24, 40, .16);
    overflow: hidden;
}

/*
 * EL CUERPO TIENE TOPE DE ALTO Y EL PIE SIEMPRE SE VE.
 *
 * Con ocho familias la columna de la izquierda medía 743px y empujaba el pie
 * hasta los 947 en una ventana de 953: las condiciones de la casa quedaban
 * fuera de la pantalla, y ahí no se puede llegar con scroll --el panel se
 * cierra en cuanto el ratón sale de él--. Medido en el navegador.
 *
 * El tope se calcula contra el alto de la ventana porque el panel arranca
 * donde acaba la cabecera, y eso cambia con el zoom y con el ancho.
 */
.shv-cuerpo{
    display: grid;
    /* 360px para que la tarjeta quede en los 330 de la maqueta, medidos. */
    grid-template-columns: 360px minmax(0, 1fr) 300px;

    /*
     * `minmax(0, 1fr)` EN LA FILA, y sin esto el tope no sirve de nada: una
     * fila de rejilla mide `auto`, o sea lo que ocupe su contenido, así que la
     * columna de familias crecía hasta 835px dentro de un cuerpo topado en 653
     * y se salía por debajo -- se veía el bloque de ayuda pintado ENCIMA del
     * pie. Medido en el navegador.
     */
    grid-template-rows: minmax(0, 1fr);

    max-height: calc(100vh - 300px);
    min-height: 360px;
}

/* `min-height: 0` en las celdas: sin él una celda de rejilla no baja de su
   contenido y el `overflow` de dentro no llega a activarse nunca. */
.shv-arbol, .shv-vistas, .shv-lado{ min-height: 0; }
.shv-vistas{ overflow-y: auto; }

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LOS ENLACES VISITADOS NO SE PINTAN EL BORDE DE NEGRO
 * ═══════════════════════════════════════════════════════════════════════
 *
 * La hoja global del sitio declara `a:visited { border: 0px }`, y ese
 * shorthand deja `border-color` en `currentColor`. `:visited` no puede cambiar
 * casi nada por privacidad, pero el color del borde SÍ es de lo poco que sí
 * puede -- así que en cuanto una categoría se había visitado una vez, su
 * tarjeta pasaba de gris claro a un borde casi negro. Por eso se veía en la
 * columna de familias y no en las subcategorías del centro: unas se habían
 * pinchado y otras no.
 *
 * Y NO SE PUEDE DIAGNOSTICAR MIRANDO EL COMPUTADO: `getComputedStyle` devuelve
 * a propósito el valor del enlace SIN visitar, así que decía `#e4e9ee` mientras
 * la pantalla pintaba negro. Es la misma trampa que ya mordió con el color de
 * los enlaces de la cabecera, y se arregla igual: diciéndolo en `:visited`.
 * ═══════════════════════════════════════════════════════════════════════ */

.shv-raiz:visited,
.shv-hijas a:visited,
.shv-garantia:visited{ border-color: var(--shv-borde); }

.shv-raiz.es-activa:visited,
.shv-hijas a:hover:visited{ border-color: var(--shv-act-borde); }

.shv-ayuda:visited{ border-color: var(--sh-verde-linea); }
.shv-portada.sin-foto:visited{ border-color: var(--sh-verde-linea); }

/* ── 1. LAS FAMILIAS ─────────────────────────────────────────────────── */
/*
 * CON SCROLL PROPIO Y NO EMPUJANDO EL PANEL.
 *
 * Con veinte familias la columna crecería hasta sacar el pie fuera de la
 * pantalla, y el panel se cierra en cuanto el ratón sale de él: habría que
 * hacer scroll en la página para llegar a algo que desaparece al intentarlo.
 * El tope se calcula contra el alto de la ventana --no un número fijo-- porque
 * el panel arranca donde acaba la cabecera y eso cambia con el zoom.
 */
/*
 * LA LISTA SE RECORRE; LA TARJETA DE AYUDA NO SE MUEVE.
 *
 * El scroll estaba en la columna entera, así que «¿Necesitas ayuda?» vivía al
 * final de la lista: con ocho familias había que bajar hasta el fondo para
 * verla, que es justo lo contrario de lo que sirve un acceso a soporte. Ahora
 * la columna es una caja de dos piezas --lista elástica arriba, tarjeta fija
 * abajo-- y lo que se recorre es solo la lista.
 */
.shv-arbol{
    display: flex;
    flex-direction: column;

    padding: 18px 16px 18px 18px;
    border-right: 1px solid var(--sh-linea);

    /* El alto lo manda `.shv-cuerpo`; aquí solo se recorta lo que sobre. */
    overflow: hidden;
}

.shv-raices{
    margin: 0;
    padding: 0 6px 0 0;   /* hueco para la barra de scroll, sin tapar el borde */
    list-style: none;

    /* `min-height: 0` para que pueda encogerse por debajo de su contenido: sin
       él, un elemento flexible no cede y el scroll no llega a aparecer. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* `static` DECLARADO: la hoja global del sitio pone `li{position:relative}` y
   eso desplaza los hijos absolutos que pueda haber dentro. */
.shv-raices > li{ position: static; margin-bottom: 8px; }

.shv-raiz{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 12px;

    border: 1px solid var(--shv-borde);
    border-radius: 12px;

    text-decoration: none;
    transition: background .13s ease, border-color .13s ease;
}

.shv-raiz:hover,
.shv-raiz:focus,
.shv-raiz:hover b,
.shv-raiz:hover small{ text-decoration: none; }

.shv-raiz.es-activa{
    background: var(--shv-act-bg);
    border-color: var(--shv-act-borde);
}

.shv-raiz-txt{ flex: 1; min-width: 0; }

/*
 * EL TEXTO SE DECLARA AQUÍ, no se hereda.
 *
 * La hoja global del sitio estiliza `b` y `small` con tamaño y color propios y
 * eso gana a lo que herede del enlace: los nombres salían en otro cuerpo y las
 * frases en gris azulado. Es la misma trampa de los `span` de la barra.
 */
.shv-raiz-txt b{
    display: block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--shv-titulo);
}
.shv-raiz-txt small{
    display: block;
    margin-top: 3px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--shv-sub);
}
.shv-raiz.es-activa .shv-raiz-txt b{ color: var(--shv-act-titulo); }
.shv-raiz.es-activa .shv-raiz-txt small{ color: var(--shv-act-sub); }

.shv-raiz-mas{ flex: 0 0 auto; font-size: 16px; color: var(--sh-tenue); }
.shv-raiz.es-activa .shv-raiz-mas{ color: var(--sh-verde); }

/* ── EL BLOQUE DE AYUDA ──────────────────────────────────────────────── */
/*
 * FIJO AL PIE DE LA COLUMNA y con las medidas de la maqueta, leídas de ella:
 * icono de 87×91 en su columna, texto en la otra, y los tres renglones
 * arrancando en la misma vertical -- que es la regla de alineación de siempre.
 *
 * Sin caja blanca detrás del icono: en la maqueta el dibujo va suelto sobre el
 * verde del bloque, a un tamaño que es casi dos tercios del alto de la tarjeta.
 * Encajonarlo en un cuadrito de 38px, que es como estaba, lo convertía en un
 * icono más de una lista.
 */
.shv-ayuda{
    flex: 0 0 auto;

    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-top: 14px;
    padding: 18px 16px;

    background: var(--shv-ayuda-bg);
    border: 1px solid var(--shv-ayuda-borde);
    border-radius: 12px;

    text-decoration: none;
}
.shv-ayuda:hover{ background: #eaf4e8; text-decoration: none; }
.shv-ayuda:hover b, .shv-ayuda:hover small{ text-decoration: none; }
.shv-ayuda:visited{ border-color: var(--shv-ayuda-borde); }

.shv-ayuda-ico{
    flex: 0 0 auto;
    display: inline-flex;

    /* Alineado con la primera línea del título y no con el centro del bloque:
       un icono grande centrado contra tres renglones queda flotando. */
    margin-top: 4px;
}
.shv-ayuda-ico iconify-icon{
    font-size: 76px;
    color: var(--shv-ayuda-ico);
}

/* TODO EL TEXTO EN LA SEGUNDA COLUMNA: es lo que hace que los tres renglones
   compartan margen sin compensar el ancho del icono a mano. */
.shv-ayuda-txt{ flex: 1; min-width: 0; }

.shv-ayuda b{
    display: block;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--shv-ayuda-titulo);
}
.shv-ayuda small{
    display: block;
    margin-top: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--shv-ayuda-txt);
}
.shv-ayuda-cta{
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 12px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shv-ayuda-cta);
}
.shv-ayuda-cta iconify-icon{ font-size: 15px; }

/* ── 2. LA FAMILIA QUE SE MIRA ───────────────────────────────────────── */
.shv-vistas{ min-width: 0; padding: 18px 22px; }

/* Solo una a la vez. Están todas pintadas --se cambia sin pedir nada por
   red-- y el JS enciende la que toca. */
.shv-vista{ display: none; }
.shv-vista.es-activa{ display: block; }

.shv-migas{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}
.shv-migas a{
    font-family: inherit;
    font-size: 12.5px;
    color: var(--sh-tinta-suave);
    text-decoration: none;
}
.shv-migas a:hover{ color: var(--sh-verde-hondo); text-decoration: none; }
.shv-migas a:visited{ color: var(--sh-tinta-suave); }
.shv-migas span{
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
}
.shv-migas iconify-icon{ font-size: 13px; color: var(--sh-tenue); }

/* ── LA PORTADA ──────────────────────────────────────────────────────── */
/*
 * LA FOTO DE FONDO Y EL TEXTO ENCIMA, con un velo que arranca en blanco por la
 * izquierda: así el título se lee sea cual sea la imagen que suban, sin tener
 * que recortarla para dejarle hueco a las letras. Con el texto directamente
 * sobre la foto, una portada clara lo borraba y una oscura lo tapaba.
 */
.shv-portada{
    display: block;
    position: relative;

    min-height: 212px;
    padding: 26px 28px;

    background-color: var(--sh-verde-suave);
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 14px;
    overflow: hidden;

    text-decoration: none;
}
/* Sin foto no hace falta el velo --no hay nada que atenuar-- y el bloque se
   queda más bajo: es una presentación, no una imagen. */
.shv-portada.sin-foto{
    min-height: 0;
    border: 1px solid var(--sh-verde-linea);
}
.shv-portada.sin-foto::before{ display: none; }

.shv-portada::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.93) 34%,
        rgba(255,255,255,.55) 54%,
        rgba(255,255,255,0) 72%);
}
.shv-portada:hover, .shv-portada:hover b, .shv-portada:hover small{ text-decoration: none; }

.shv-portada-txt{ position: relative; max-width: 330px; }

.shv-portada-txt b{
    display: block;
    font-family: inherit;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--sh-verde-hondo);
}
.shv-portada-txt small{
    display: block;
    margin-top: 10px;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--sh-tinta-suave);
}

.shv-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;
    padding: 10px 18px;

    background: var(--sh-verde);
    border-radius: 9px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
}
.shv-portada:hover .shv-btn{ background: var(--sh-verde-hondo); }
.shv-btn iconify-icon{ font-size: 15px; }

/* ── LAS SUBCATEGORÍAS ───────────────────────────────────────────────── */
/*
 * DOS COLUMNAS, no tres: con la descripción debajo de cada nombre, tres dejan
 * las líneas tan cortas que cada entrada se parte en dos renglones.
 */
.shv-hijas{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.shv-hijas > li{ position: static; }

.shv-hijas a{
    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 12px;

    border: 1px solid var(--shv-borde);
    border-radius: 12px;

    text-decoration: none;
    transition: background .13s ease, border-color .13s ease;
}
.shv-hijas a:hover{
    background: var(--shv-act-bg);
    border-color: var(--shv-act-borde);
    text-decoration: none;
}
.shv-hijas a:hover b, .shv-hijas a:hover small{ text-decoration: none; }

.shv-hija-txt{ flex: 1; min-width: 0; }
.shv-hija-txt b{
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--shv-titulo);
}
.shv-hija-txt small{
    display: block;
    margin-top: 3px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--shv-sub);
}
.shv-hijas a:hover .shv-hija-txt b{ color: var(--shv-act-titulo); }
.shv-hija-mas{ flex: 0 0 auto; font-size: 15px; color: var(--sh-tenue); }

.shv-todas{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 16px;
    padding: 10px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
    text-decoration: none;
}
.shv-todas:hover{ text-decoration: none; color: var(--sh-verde); }
.shv-todas:visited{ color: var(--sh-verde-hondo); }
.shv-todas iconify-icon{ font-size: 15px; }

/* ── 3. PUBLICIDAD Y GARANTÍAS ───────────────────────────────────────── */
.shv-lado{
    padding: 18px;
    border-left: 1px solid var(--sh-linea);
}

.shv-lado-cab{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.shv-lado-cab iconify-icon{ font-size: 17px; color: #f59e0b; }
.shv-lado-cab b{
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
}

/*
 * LA CREATIVIDAD, TAL CUAL VIENE.
 *
 * Ni recorte ni relleno: la imagen llega montada con su medida y lo único que
 * hace la hoja es que no se salga del ancho de la columna. Deformarla para que
 * encaje en un alto fijo es cambiar lo que el anunciante ha pagado.
 */
.shv-banner{
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}
.shv-banner img{ display: block; width: 100%; height: auto; }

.shv-publi{
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 2px 7px;

    background: rgba(15, 23, 42, .62);
    border-radius: 5px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
}

.shv-garantia{
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 12px;
    padding: 11px 12px;

    border: 1px solid var(--sh-linea);
    border-radius: 11px;
}

.shv-gico{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    background: var(--sh-verde-suave);
    border-radius: 9px;
}
.shv-gico iconify-icon{ font-size: 18px; color: var(--sh-verde-hondo); }

.shv-garantia b, .shv-cond b{
    display: block;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--shv-titulo);
}
.shv-garantia small, .shv-cond small{
    display: block;
    margin-top: 3px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--shv-sub);
}

/* ── EL PIE ──────────────────────────────────────────────────────────── */
.shv-pie{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    padding: 16px 22px;

    background: #fbfcfb;
    border-top: 1px solid var(--sh-linea);
}

.shv-cond{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 18px;
}
/* Separadores entre las cuatro, menos antes de la primera. */
.shv-cond + .shv-cond{ border-left: 1px solid var(--sh-linea); }

/* En pantallas medias la columna de publicidad es lo primero que sobra: sin
   ella las subcategorías respiran, y el banner vuelve en cuanto hay sitio. */
@media (max-width: 1180px){
    .shv-cuerpo{ grid-template-columns: 320px minmax(0, 1fr); }
    .shv-lado{ display: none; }
}

@media (max-width: 900px){
    .shv{ display: none; }   /* en móvil manda el menú del sitio, no este panel */
}

/* ── LO QUE SE APAGA POR CONFIGURACIÓN ───────────────────────────────── */
/*
 * Con la zona apagada desde el navegador se oculta en vez de borrarla: la
 * instancia puede volver a encenderla sin rehacer el marcado. Cuando se apaga
 * desde PHP ni siquiera se imprime.
 */
.sh.sin-busqueda .sh-buscador,
.sh.sin-sesion .sh-sesion,
.sh.sin-categorias .sh-cats{ display: none; }

/* Sin buscador, la sesión se va a la derecha ella sola por el `margin-left`. */

@media (max-width: 900px){
    /* EL RELLENO LATERAL NO, QUE YA LO PONE EL CARRIL. Aquí decía
       `padding: 10px 14px` y esos 14 px se sumaban a los 30 del
       `.body-content` que envuelve la barra: entre 861 y 900 el logo arrancaba
       en 82 mientras la rejilla del catálogo terminaba en 68, o sea la cabecera
       metida hacia dentro respecto del contenido. Solo se aprieta el alto. */
    .sh-barra{ gap: 14px; padding: 10px 0; }
    .sh-marca-txt{ font-size: 18px; }
    .sh-buscador{ height: 38px; }
}

@media (max-width: 640px){
    /* En móvil la marca se queda en el icono: el nombre y el buscador no caben
       a la vez, y el buscador es lo que se usa. */
    .sh-marca-txt{ display: none; }
    .sh-cats{ padding: 0 8px; }
}

/* ── EL LOGOTIPO ─────────────────────────────────────────────────────
 *
 * Se mide por el ALTO y el ancho lo pone su proporción: con un `width` fijo,
 * un logo que cambie de forma --y este ya ha cambiado una vez-- saldría
 * estirado. El `width`/`height` del marcado son los del fichero, para que el
 * navegador reserve el hueco y la cabecera no dé un salto al cargar. */
.sh .sh-marca-img{
    /* 44 px con la fila de 92: a 38 el logotipo se quedaba pequeño en la franja
       nueva y la barra se leía medio vacía. */
    height: 44px;
    width: auto;
    display: block;
}

@media (max-width: 860px){
    .sh .sh-marca-img{ height: 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   EL BLOQUE PROMOCIONAL DEL PANEL  (`.sh-promo`)
   ════════════════════════════════════════════════════════════════════════

   Lo compone ADMIN en Apariencia · Navegación y cuelga de una familia: sale
   dentro de SU panel, no en todos. NO es el hueco de publicidad --ese es
   `.shv-banner` / `.sh-mega-banner`, y lo decide `MenuBanner` con su regla de
   que manda quien paga--: son dos cosas distintas y por eso se ven distintas,
   aunque compartan columna en el panel de columnas.

   UNA SOLA HOJA PARA LOS DOS PANELES. La pieza es la misma en el vertical y en
   el de columnas; lo que cambia es dónde se cuelga, así que el ancho lo pone su
   sitio y aquí no se fija ninguno. */
.sh .sh-promo,
.shv .sh-promo{
    display: block;
    overflow: hidden;

    margin-top: 16px;

    border: 1px solid var(--sh-verde-linea);
    border-radius: 14px;
    background: var(--sh-verde-suave);

    text-decoration: none;
    transition: border-color .13s ease, box-shadow .13s ease;
}

/*
 * EL BORDE, TAMBIÉN CUANDO YA SE HA VISITADO.
 *
 * La hoja global del sitio pinta de negro el borde de cualquier enlace
 * visitado, y una tarjeta-enlace acaba con un marco negro en cuanto alguien la
 * pulsa una vez. No se ve en `getComputedStyle` mientras no esté visitada, así
 * que es de los que aparecen a la semana. Mismo remedio que `.shv-hijas a`.
 */
.sh a.sh-promo:visited,
.shv a.sh-promo:visited{ border-color: var(--sh-verde-linea); }

.sh a.sh-promo:hover,
.shv a.sh-promo:hover{
    border-color: var(--sh-verde);
    box-shadow: 0 2px 10px rgba(22, 163, 74, .12);
    text-decoration: none;
}

/* LA IMAGEN MANDA EL ALTO, no un rectángulo fijo: la creatividad viene con su
   medida y recortarla a ciegas es lo que parte los títulos que trae dentro. */
.sh .sh-promo img,
.shv .sh-promo img{
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--sh-verde-linea);
}

.sh .sh-promo-txt,
.shv .sh-promo-txt{ padding: 11px 13px 13px; }

.sh .sh-promo-txt b,
.shv .sh-promo-txt b{
    display: block;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sh-verde-hondo);
}

.sh .sh-promo-txt small,
.shv .sh-promo-txt small{
    display: block;
    margin-top: 4px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.35;
    color: var(--sh-tinta-suave);
}

.sh .sh-promo-cta,
.shv .sh-promo-cta{
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-top: 9px;

    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sh-verde-hondo);
}

/* EL TAMAÑO SE DECLARA EN EL ICONO, no en su caja: `iconify-icon` no hereda el
   `font-size` del padre y sin esto sale a 20px, más grande que su propio
   rótulo. */
.sh .sh-promo-cta iconify-icon,
.shv .sh-promo-cta iconify-icon{ font-size: 14px; }

/*
 * EL MEGA MENÚ EN LA BARRA: se lee como una entrada más, no como un botón.
 *
 * Es la primera y abre el panel entero, así que la tentación es destacarla con
 * un fondo. No: al lado de ocho familias con su dibujo, un botón de color se
 * lee como publicidad y se salta. Lo que la distingue es su icono de rejilla y
 * que su flecha ya viene puesta.
 */
.sh .sh-cat-mega > a{ font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
   LA CABECERA DE UNA SOLA FRANJA  (rediseño del 25/08/2026)
   ════════════════════════════════════════════════════════════════════════

   Antes eran dos franjas: la de la marca y, debajo, la de categorías. Ahora
   todo va en una --marca, explorador, buscador, navegación y accesos-- y la de
   debajo se queda como zona configurable, vacía de salida.

   LO DE ABAJO NO SE HA BORRADO: `.sh-zona-nav` sigue entera y con su hoja, y
   vuelve a verse en cuanto la zona «SubMenú de navegación 2» tenga entradas. */

/* ── EL EXPLORADOR ────────────────────────────────────────────────────
   Un cuadrado del alto del buscador, a su izquierda. Abre el panel de
   categorías -- explorar, no acotar la búsqueda: son dos cosas distintas y
   estaban en el mismo control. */
.sh .sh-explorador{
    flex: 0 0 auto;

    /* CUADRADO DE VERDAD, y con el mismo alto que la caja de búsqueda (44px):
       con `aspect-ratio` a secas un `min-width` heredado lo deformaba. */
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    background: #fff;
    border: 1px solid var(--sh-verde-linea);
    border-radius: 10px;
    color: var(--sh-verde-hondo);

    cursor: pointer;
    transition: background .13s ease, border-color .13s ease;
}

.sh .sh-explorador:hover{
    background: var(--sh-verde-suave);
    border-color: var(--sh-verde);
}

/* EL TAMAÑO SE DECLARA EN EL ICONO: `iconify-icon` no hereda el `font-size` de
   su caja, y sin esto sale a 20px dentro de un botón de 40. */
.sh .sh-explorador iconify-icon{ font-size: 19px; }

/* ── LA ZONA 1, A LA DERECHA DEL BUSCADOR ─────────────────────────────
   La pinta `NavigationRender::barra()`, así que su marcado es el genérico de
   una zona (`.nav-zona`); aquí solo se le da el aspecto de la cabecera. */
.sh .sh-nav1{ flex: 0 0 auto; }

/*
 * FONDO TRANSPARENTE, Y HAY QUE DECIRLO.
 *
 * La hoja global del sitio le pone `background:#fff` a `nav`, y la franja de la
 * cabecera es crema (`--sh-fondo`, #fffdf7): el resultado era un rectángulo
 * blanco recortado detrás de los rótulos, como si la navegación fuera una caja
 * pegada encima. Medido con `getComputedStyle`: el `<nav>` salía en
 * `rgb(255,255,255)` mientras el `ul`, el `li` y el `a` ya eran transparentes.
 *
 * Se apagan las tres capas y no solo el `<nav>`: cualquiera de ellas puede
 * heredar un fondo el día que alguien toque la hoja global, y aquí lo que se
 * quiere es que la navegación se lea sobre la franja, sin caja.
 */
.sh .nav-zona,
.sh .nav-zona-lista,
.sh .nav-zona-item{ background: transparent; }

.sh .nav-zona-lista{
    display: flex;
    align-items: center;
    gap: 4px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.sh .nav-zona-item{ position: static; }

.sh .nav-zona-item > a,
.sh .nav-zona-item > .nav-zona-txt{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 11px;
    border-radius: 8px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--sh-tinta);
    text-decoration: none;
    white-space: nowrap;

    transition: background .13s ease, color .13s ease;
}

/* ── LA MISMA SEÑAL QUE LA CABECERA DE LA LANDING ────────────────────
 *
 * Aquí el hover era una pastilla verde de fondo y NO HABÍA marca de la página
 * en la que estás; en la landing era al revés: subrayado en la activa y solo un
 * cambio de color al pasar el ratón. Dos cabeceras del mismo sitio diciendo lo
 * mismo de dos formas distintas.
 *
 * Se unifican al SUBRAYADO, que es lo que ya usa la barra de categorías de esta
 * misma hoja (`.sh-cat:hover > a`) y lo que sobrevive al modo de alto contraste
 * -- un fondo de color ahí desaparece y la señal se pierde entera.
 *
 * MISMO GROSOR Y MISMA SEPARACIÓN en las dos barras y en los dos estados (2px,
 * `text-underline-offset: 6px`): con medidas distintas la raya salta de sitio al
 * mover el ratón entre entradas si una de ellas es la activa.
 *
 * Y la pastilla se va del todo, no se reparte: el panel de categorías no lo abre
 * ninguna entrada de esta barra --lo abre `.sh-explorador`, el botón de al lado
 * del logotipo--, así que aquí no quedaba nada que señalar con un fondo.
 */
.sh .nav-zona-item > a:hover{
    color: var(--sh-verde-hondo);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--sh-verde);
}

.sh .nav-zona-item > a.es-activo{
    color: var(--sh-verde-hondo);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--sh-verde);
}

/* Pasar por encima de la que ya está activa no cambia nada: parpadear sobre la
   página en la que ya estás no informa de nada. */
.sh .nav-zona-item > a.es-activo:hover{ color: var(--sh-verde-hondo); }

/* El `a:visited` global pinta de morado lo ya visitado, y la entrada activa es
   por definición una página visitada. El color se repone en el `<span>`, que es
   donde el navegador sí deja cambiarlo -- ver la nota de aquí debajo. */
.sh .nav-zona-item > a.es-activo > span,
.sh .nav-zona-item > a.es-activo:visited > span{ color: var(--sh-verde-hondo); }

/*
 * EL COLOR VA EN EL `<span>`, NO EN EL `<a>`.
 *
 * La hoja global del sitio pinta de morado (#910c88) todo enlace visitado, y
 * una barra de navegación con la mitad de los rótulos en morado se lee como un
 * error. Poner `.nav-zona-item > a:visited{color:…}` NO basta: el navegador
 * restringe lo que se puede cambiar en `:visited` y no siempre aplica un
 * `var()` ahí -- y `getComputedStyle` devuelve el color de NO visitado, así que
 * el fallo no se ve midiendo, solo mirando.
 *
 * La salida es la que ya usa la barra de categorías de esta misma hoja: se
 * viste el elemento de DENTRO, que no está sujeto a esa restricción. Por eso el
 * rótulo de una zona se pinta siempre envuelto en un `<span>`.
 */
.sh .nav-zona-item > a > span{ color: var(--sh-tinta); }
.sh .nav-zona-item > a:hover > span{ color: var(--sh-verde-hondo); }
.sh .sh-nav-accesos .nav-zona-item > a > span{ color: var(--sh-tinta-suave); }

.sh .nav-zona-item iconify-icon{ font-size: 16px; color: var(--sh-tinta-suave); }

.sh .nav-zona-sep{
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--sh-linea);
}

/* Las hijas de una zona simple no se despliegan aquí: una zona de barra es de
   un nivel. Si alguien pide dos, `NavigationRender` las pinta y esta hoja las
   deja fuera del flujo hasta que haya un diseño para ellas. */
.sh .nav-zona-sub{ display: none; }

/* ── LO DE LA DERECHA ─────────────────────────────────────────────────
   Accesos, la llamada a registrarse y la caja de sesión, en ese orden. Es este
   bloque el que empuja hacia el margen, no cada pieza por su cuenta. */
.sh .sh-derecha{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;

    margin-left: auto;
}

.sh .sh-nav-accesos .nav-zona-item > a{ color: var(--sh-tinta-suave); }

/* LA LLAMADA A REGISTRARSE: contorno, no relleno. Un botón macizo al lado de la
   caja de sesión compite con ella --y con el carrito-- por la misma mirada;
   aquí lo que tiene que destacar es lo que ya es tuyo. */
.sh .sh-cta{
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

    border: 1px solid var(--sh-verde);
    border-radius: 9px;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--sh-verde-hondo);
    text-decoration: none;
    white-space: nowrap;

    transition: background .13s ease;
}

.sh .sh-cta:hover{ background: var(--sh-verde-suave); text-decoration: none; }
/* El CTA no lleva `<span>` dentro --es una sola palabra-- así que aquí sí se
   declara sobre el enlace, y con COLOR LITERAL: un `var()` en `:visited` no
   siempre se aplica. #15803d es `--sh-verde-hondo`. */
.sh a.sh-cta:visited{ color: #15803d; border-color: var(--sh-verde); }

/* ── LA FRANJA DE ABAJO, VACÍA ────────────────────────────────────────
   El contenedor se sigue pintando porque ES EL MARCO DEL PANEL --absoluto con
   `top:100%`--, pero sin bordes ni alto: no se ve, y el panel abre justo debajo
   de la franja de arriba. En cuanto la zona 2 tenga entradas, se le quita esta
   clase y vuelve a ser la franja de siempre. */
.sh .sh-zona-nav--vacia{
    border-top: 0;
    border-bottom: 0;
    background: transparent;
}

.sh .sh-zona-nav--vacia > .body-content{ padding-top: 0; padding-bottom: 0; }

/* ── ESTRECHO ─────────────────────────────────────────────────────────
   Con poco ancho lo primero que sobra son los rótulos de navegación: el
   buscador y el explorador son la puerta al catálogo y tienen que quedarse. */
@media (max-width: 1100px){
    .sh .sh-nav1{ display: none; }
}

@media (max-width: 860px){
    .sh .sh-nav-accesos, .sh .sh-cta{ display: none; }
}

/* ── «MI CUENTA», CON CONTRASTE AA (15/09/2026) ─────────────────────────
   `.sh-sesion--box a{ color: tinta }` (0,1,1) le ganaba a `.TSessionBox-entrar
   { color:#fff }` (0,1,0) y el rótulo salía gris oscuro sobre naranja. Pero
   el blanco sobre el naranja de marca (#ff6000) tampoco llega: 3,0:1, y a 13 px
   en negrita AA pide 4,5. Se devuelve el blanco que quería `TSessionBox` y el
   fondo baja a #c2410c (5,2:1); al pasar el ratón, #9a3412 (7,3:1). Solo aquí:
   la hoja de `TSessionBox` y el `--btn_color` del sitio no se tocan. */
.sh .sh-sesion--box a.TSessionBox-entrar,
.sh .sh-sesion--box a.TSessionBox-entrar:visited{
    color: #fff;
    background: #c2410c;
}
.sh .sh-sesion--box a.TSessionBox-entrar:hover{
    color: #fff;
    background: #9a3412;
    filter: none;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   LA CABECERA EN MÓVIL  (≤ 760 px · construida el 15/09/2026)
   ════════════════════════════════════════════════════════════════════════

   Contrato y maqueta: Documentacion/PendingWorks/CABECERA-MOVIL.md. Corte en 760 px, el
   mismo de la ficha (`TArticleProfile.css`) y de su barra de compra: las dos
   cambian de forma a la vez.

       ┌──────────────────────────────────────────────┐
       │ ☰   AgroCalia                      🛒²   ◯    │  56 px
       │ ▦  [🔍 Buscar productos o agricultores     ] │  52 px  ← se recoge al bajar
       └──────────────────────────────────────────────┘

   ES LA MISMA FILA DE ESCRITORIO, reordenada con `flex-wrap`: el marcado es
   uno solo y el orden del documento es el orden visual --menú, marca, lupa,
   cesta, cuenta, categorías, buscador--, así que el tabulador recorre la
   cabecera en el mismo orden en que se lee. Lo que no cabe en las dos filas
   (navegación, «Únete como comprador», la caja de sesión) va al panel.

   POR ENCIMA DE 760 px NADA DE ESTO SE PINTA: las piezas nuevas nacen en
   `display:none` y la fila de escritorio no cambia ni un píxel.

   SIN `transform` EN NINGÚN ANCESTRO del panel ni del buscador: un `transform`
   convierte a su caja en el marco de los `position:fixed` de dentro, y el
   panel se abriría del tamaño de la cabecera en vez del de la pantalla.
   ════════════════════════════════════════════════════════════════════════ */

/* ── EN ESCRITORIO NO EXISTEN ─────────────────────────────────────────── */
.sh .sh-m-salto,
.sh .shm-velo,
.sh .shm-panel{ display: none; }

/*
 * LOS ICONOS DE 44 × 44, EN CUALQUIER ANCHO (27/09/2026).
 *
 * Estaban dentro de `@media (max-width: 860px)` porque solo el móvil los
 * enseñaba. Ya no: **la lupa aparece en cuanto al buscador le quedan menos de
 * 300 px**, y eso pasa también en escritorio --una tableta apaisada de 1.024
 * con el menú, la cesta y «Mi cuenta» al lado deja al buscador en 29 px--. Si
 * la medida siguiera en el bloque de móvil habría que repetirla aquí, que es
 * justo como se separan.
 *
 * TODO LO QUE SE PULSA MIDE 44 × 44 (WCAG 2.5.5). `.sh .x` pesa (0,2,0) y le
 * gana a `.TComponentES6 button` (0,1,1), que fija 25 px de alto.
 */
.sh .sh-m-ico{
    position: relative;
    flex: 0 0 44px;

    display: inline-grid;
    place-items: center;

    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    margin: 6px 0;

    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sh-tinta);
    text-decoration: none;
    cursor: pointer;
}
.sh a.sh-m-ico:visited{ color: var(--sh-tinta); }
.sh .sh-m-ico:hover{ background: var(--sh-verde-suave); text-decoration: none; }

/* El tamaño, EN EL ICONO: `iconify-icon` no hereda el de su caja. */
.sh .sh-m-ico iconify-icon{ font-size: 22px; width: 22px; height: 22px; color: inherit; }

/*
 * LA CAJA DE ACCESOS NO DIBUJA NADA EN ESCRITORIO, PERO EXISTE.
 *
 * Con `display: none` --que es lo que había-- la lupa de dentro no se podía
 * encender sin encender también la cesta y la cuenta, que en escritorio ya
 * están en `.sh-derecha`. Con `display: contents` la caja desaparece y sus
 * hijos pasan a ser hijos directos de la barra: se enciende solo la lupa, y
 * cae justo detrás de la marca, que es donde estaba el buscador.
 *
 * VA DESPUÉS de `.sh-m-ico` a propósito: misma especificidad (0,2,0), así que
 * manda el orden y estos nacen apagados. Si esta lista subiera por encima de
 * `.sh-m-ico`, su `display: inline-grid` los encendería a todos --y no daría
 * ningún error: saldrían la hamburguesa y el «Volver» en escritorio--.
 */
.sh .sh-m-accesos{ display: contents; }
.sh .sh-m-menu,
.sh .sh-m-lupa,
.sh .sh-m-cesta,
.sh .sh-m-cuenta,
.sh .sh-busca-volver{ display: none; }

/* El marco del buscador no dibuja caja en escritorio: `display:contents` deja
   que `.sh-buscador` siga siendo hijo directo de la fila flex, con su `flex:1`
   de siempre. En móvil es la pantalla completa. */
.sh .sh-busca-marco{ display: contents; }

/* Y la caja de la fila 2, igual: en escritorio no dibuja nada y el explorador y
   el buscador siguen siendo hijos directos de la fila, como siempre. Solo en
   móvil se convierte en caja para poder desplegarse sin mover la cabecera. */
.sh .sh-fila2{ display: contents; }

/* ════════════════════════════════════════════════════════════════════════
 *  EL MODO LUPA: el buscador se recoge cuando NO LE QUEDAN 300 px
 * ════════════════════════════════════════════════════════════════════════
 *
 * La clase `.es-lupa` la pone el JS (`TSiteHeader._revisarHueco`) midiendo EL
 * HUECO QUE LE QUEDA AL BUSCADOR en la fila de la marca: la barra menos la
 * marca, el menú, los accesos y la caja de sesión. Por debajo de 300 px la
 * caja de búsqueda se recoge detrás de la lupa y baja desplegándose; por
 * encima se queda a la vista en la misma fila, y la lupa NO EXISTE --sería una
 * puerta a algo que ya está abierto--.
 *
 * ── POR QUÉ SE MIDE EL HUECO Y NO LA VENTANA NI LA BARRA ────────────
 *
 * Aquí hubo primero un `@media (max-width: 860px)` --y escondía el buscador en
 * una tableta de 820 que tenía 431 px libres-- y después un
 * `@container shbarra (max-width: 699px)`, que ya medía el componente pero
 * seguía siendo un número fijo. Ese número no existe: **las piezas de la fila
 * no son constantes**. El menú lo compone el gestor (Apariencia · Navegación),
 * y `.sh-derecha` cambia con la sesión y con la llamada a registrarse. Con el
 * menú de hoy, las piezas fijas suman 947 px, así que en un portátil de 1.024
 * al buscador le quedaban 29: la caja se aplastaba contra el botón verde y
 * encima del explorador, sin dar ningún error.
 *
 * Por eso la medida está en el JS, que ve los anchos reales, y la hoja solo
 * reacciona a la clase. Y por eso ESTO NO VA DENTRO DE NINGUNA CONSULTA DE
 * PANTALLA: el modo lupa vale para cualquier ancho.
 */

/*
 * LA LUPA, AQUÍ Y SOLO AQUÍ.
 *
 * Es el interruptor de la fila, así que existe exactamente cuando la fila está
 * escondida. Encenderla fuera de este modo sería una puerta a algo que ya está
 * abierto --el buscador a la vista, al lado de la marca--, que es lo que decía
 * la nota vieja de «dos puertas a lo mismo» y aquí vuelve a aplicar.
 *
 * ── HAY DOS BOTONES, Y NUNCA SE VEN LOS DOS ─────────────────────
 *
 * El mismo interruptor está escrito dos veces en la plantilla porque tiene que
 * salir en dos sitios que no son hermanos: en móvil junto a la cesta y la
 * cuenta (`.sh-lupa-movil`, dentro de `.sh-m-accesos`) y en escritorio **a la
 * izquierda de la campana** (`.sh-lupa-sesion`, dentro de `.sh-derecha`).
 * `order` no sirve: la campana vive dentro de la caja de sesión, que es otro
 * contenedor flex.
 *
 * Los dos llevan `sh-m-lupa`, que es la clase de COMPORTAMIENTO: el JS los
 * engancha con un solo `find()` y `aria-expanded` se escribe en los dos de una
 * vez. Lo que las distingue --dónde se dibuja cada uno-- es lo único que decide
 * esta hoja. Un contador o un estado propio sí habría que sincronizarlo; un
 * interruptor sin estado, no.
 */
.sh.es-lupa .sh-lupa-sesion{
    display: inline-grid;

    /* El aire lo pone el `gap: 10px` de `.sh-derecha`, no el margen de
       `.sh-m-ico`, que está pensado para la fila de la marca. */
    margin: 0;
}

/*
 * ── LA FILA 2, DESPLEGÁNDOSE ────────────────────────────────────
 *
 * Colgada del borde de abajo de la barra y fuera del flujo, así que aparecer no
 * empuja ni un píxel de la página.
 *
 * SE ANIMA EL ALTO, NO UN `transform`, y no es una preferencia: un `transform`
 * en un ancestro convierte su caja en el marco de los `position: fixed` de
 * dentro, y ahí dentro está el buscador a pantalla completa --que es `fixed` y
 * tiene que medirse contra la VENTANA--. Con un `transform` aquí, la pantalla
 * completa se abriría del tamaño de esta fila. Está avisado más arriba en esta
 * misma hoja y aquí se cumple.
 *
 * Con `overflow: hidden` y el alto yendo de 0 a su medida, la fila se DESPLIEGA:
 * el contenido se descubre de arriba abajo, como si saliera de debajo de la
 * cabecera. El `overflow` no recorta la pantalla completa porque un `fixed` solo
 * lo recorta un ancestro con `transform`, y aquí no hay ninguno -- que es la
 * otra mitad del motivo para no usarlo.
 */
.sh.es-lupa .sh-fila2{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    display: flex;
    align-items: center;

    /*
     * EL AIRE VA EN LOS MÁRGENES DE LAS PIEZAS, NUNCA EN EL RELLENO DE LA FILA.
     *
     * Aquí hubo un `padding: 4px 8px 8px`, y con la fila cerrada dejaba una
     * FRANJA DE 12 px de fondo colgando de la cabecera. No es un fallo de la
     * medida: con `box-sizing: border-box`, `max-height: 0` deja la caja de
     * contenido en cero, pero el relleno no se puede encoger, así que la caja
     * de borde sigue midiendo lo que suma el relleno. Lo que se encoge hasta
     * desaparecer del todo es lo que no lleva relleno propio.
     */

    /*
     * CERRADA POR DEFECTO, Y SIN NINGUNA CLASE QUE LO DIGA (27/09/2026).
     *
     * Antes la regla de abierta era `.sh:not(.es-recogida)`, o sea que la fila
     * estaba ABIERTA hasta que el JS ponía la clase al montar. El servidor pinta
     * el marcado sin ninguna clase de estado, así que en cada carga se veía la
     * fila un instante y se recogía de golpe: un parpadeo.
     *
     * La regla es: **el estado por defecto del CSS tiene que ser el mismo que el
     * del marcado que llega del servidor**. Como el marcado no trae clase, el
     * defecto es cerrada, y abrir es lo que pide una clase (`es-busca-abierta`,
     * que pone el JS). Así no hay ningún instante en que la pantalla enseñe algo
     * que no toca.
     */
    max-height: 0;
    overflow: hidden;

    /* Y no se enfoca ni se lee mientras está cerrada. El `0s .22s` retrasa SOLO
       el apagado: al cerrar, el contenido sigue visible mientras la caja se
       encoge, y desaparece al terminar. Al abrir gana la regla de abajo, que no
       tiene retraso. */
    visibility: hidden;

    /* El fondo de la cabecera: la fila se despliega ENCIMA de la página, y sin
       color propio se leería el contenido por debajo. */
    background: var(--sh-fondo);

    transition: max-height .22s ease, visibility 0s linear .22s;
}

/* Los mismos márgenes que ya tenían en móvil, ahora para cualquier ancho: son
   ellos los que separan la fila de los bordes de la cabecera. Y la caja crece
   hasta el borde -- los 720 px de escritorio la dejarían corta en una fila que
   ocupa todo el ancho. */
.sh.es-lupa .sh-explorador{ margin: 4px 8px 8px 8px; }
.sh.es-lupa .sh-buscador{ margin: 4px 8px 8px 0; max-width: none; }


/* Desplegada. `max-height` y no `height` porque lo de dentro mide lo que mide
   --caja de 40 o de 44 con el relleno de la fila-- y una medida fija aquí lo
   recortaría el día que cambie. */
.sh.es-lupa.es-busca-abierta .sh-fila2{
    max-height: 72px;
    border-bottom: 1px solid var(--sh-linea);

    visibility: visible;
    transition: max-height .22s ease, visibility 0s;
}

/*
 * ── Y ABIERTA DEL TODO, DEJA DE RECORTAR ────────────────────────
 *
 * El `overflow: hidden` de arriba es lo que hace la animación --descubre la fila
 * de arriba abajo-- pero mientras está puesto **se come el desplegable de
 * resultados**: `.tps-popup` es `position: absolute` colgando del buscador
 * (`top: calc(100% + 4px)`), así que cae fuera de la caja y un ancestro que
 * recorta lo recorta. Se escribía en el buscador y no aparecía nada, sin ningún
 * error.
 *
 * Por eso el recorte dura solo lo que dura el despliegue: la clase la pone el JS
 * al terminar la transición (`_recoger`), y la quita en cuanto empieza a
 * recogerse -- que es cuando el recorte vuelve a hacer falta.
 */
.sh.es-lupa.es-fila2-abierta .sh-fila2{ overflow: visible; }

/*
 * LO QUE QUEDA DEBAJO DEL CORTE NO SE ENFOCA NI SE LEE.
 *
 * `visibility: hidden` y no solo el `max-height` de arriba: recortar con
 * `overflow` esconde a la vista pero deja el campo enfocable con el tabulador y
 * visible para un lector de pantalla, así que se podía escribir en un buscador
 * que no está en la pantalla. Es el fallo clásico de todo plegable y no da
 * ningún aviso. El apagado va en `.sh-fila2` y se hereda: una sola regla para la
 * caja entera en vez de una por pieza, y así no se olvida ninguna al añadirla.
 *
 * Salvo a pantalla completa: ahí el buscador sale de la fila --es `fixed`-- y
 * tiene que verse aunque la fila esté cerrada detrás.
 */
.sh.es-lupa.es-buscando .sh-busca-marco,
.sh.es-lupa.es-buscando .sh-buscador{ visibility: visible; }

/*
 * ── NI ENTRAR NI SALIR DEL MODO LUPA SE ANIMA ───────────────────
 *
 * La clase la pone el JS mientras cambia `es-lupa`, y la quita al cabo de dos
 * cuadros. Entrar en modo lupa no es abrir ni cerrar la fila: es cambiar la
 * disposición de la cabecera, y eso se aplica de golpe. Con la transición
 * puesta, arrastrar el borde de la ventana por encima del umbral deslizaba la
 * fila abriéndose y cerrándose mientras se arrastra.
 *
 * Y de paso asegura el estado: `.sh-fila2` pasa de `display: contents` --sin
 * caja-- a `display: flex` en el mismo cambio en que le toca pasar de `visible`
 * a `hidden`, y la de `visibility` es una transición CON RETARDO. Aplicada de
 * golpe no hay ningún tramo en que la fila esté recogida y el campo siga
 * recibiendo el tabulador.
 *
 * VA LA ÚLTIMA, Y NO DA IGUAL: pesa (0,4,0), lo mismo que la regla de la fila
 * desplegada de aquí arriba, que también declara `transition`. Con el empate
 * manda el orden, así que escrita antes no apagaba nada al recoger una fila
 * abierta -- y eso no da ningún error: la fila se queda a medio cerrar.
 */
.sh.es-lupa.es-sin-anima .sh-fila2{ transition: none; }

/* Con la fila desplegada, la lupa se queda marcada: es lo que dice que volver a
   pulsarla la recoge. */
.sh.es-lupa.es-busca-abierta .sh-m-lupa{
    background: var(--sh-verde-suave);
    color: var(--sh-verde-hondo);
}

/* EL CORTE ES 860 Y NO 760 (16/09/2026). La fila de escritorio mide 790 px, así
   que entre 761 y 790 no cabía; y el carril del sitio se soltaba a 760 mientras
   `min-width:800px` seguía dando una página de 820 hasta 835. Se subieron los
   dos a la vez --aquí y en `base.php`-- para que cabecera, carril y tienda
   corten por el mismo sitio. Medido en Documentacion/PendingWorks/TIENDA-MOVIL.md §1. */
@media (max-width: 860px){

    /* ── EL CARRIL, SIN MÁRGENES DE ESCRITORIO ─────────────────────────── */
    .sh .sh-zona-barra > .body-content.sh-fila{
        min-width: 0;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }

    .sh .sh-barra{
        flex-wrap: wrap;
        align-items: center;
        gap: 0 2px;
        padding: 0 8px;

        /*
         * LA BARRA YA NO CAMBIA DE ALTO (27/09/2026).
         *
         * Aquí iba `max-height: 108px` (56 + 52) con su transición, y recoger
         * la fila 2 era cerrar ese alto hasta 56. Funcionaba, pero lo que se
         * animaba era LA CABECERA ENTERA: crecía y encogía, y con ella se movía
         * todo lo que tiene debajo. Lo que se quiere animar es la fila, no la
         * cabecera.
         *
         * Ahora la barra mide siempre lo que mide la fila 1, y la fila 2 se
         * despliega por su cuenta colgando de su borde de abajo (`.sh-fila2`).
         *
         * El `position: relative` que era el marco de esa fila se declara ya
         * arriba, en la regla general: la fila se despliega en cualquier ancho.
         */

        /*
         * AQUÍ ESTABA `container-type: inline-size` (27/09/2026, retirado el
         * mismo día). Servía para que una `@container` decidiera si el buscador
         * cabía, y se ha sustituido por la medida del JS --que es la única que
         * ve las piezas reales de la fila: el menú lo compone Apariencia ·
         * Navegación y `.sh-derecha` cambia con la sesión, así que ningún ancho
         * de barra fijo los representa--.
         *
         * Y SE RETIRA, no se deja «por si acaso»: `container-type` implica
         * `contain: layout`, y un elemento con contención de disposición pasa a
         * ser el marco de los `position: fixed` de dentro. Es exactamente la
         * trampa que esta hoja avisa para `transform` unas líneas más arriba, y
         * aquí dentro está el buscador a pantalla completa, que tiene que
         * medirse contra la VENTANA.
         */

        /*
         * SIN ESTO, LA CABECERA ENTRABA EN BUCLE (22/09/2026).
         *
         * `body > header` es `position: sticky` (`base.php`). Chrome intenta
         * compensar cualquier cambio de tamaño por ENCIMA de lo que se ve --el
         * "scroll anchoring" que evita el salto cuando una imagen carga tarde--
         * y esta fila cambia de alto ELLA SOLA, 108↔56, al recogerse. Chrome lo
         * lee como "el contenido de arriba se movió" y CORRIGE el scroll para
         * compensar -- lo que dispara otro evento `scroll`, que vuelve a leer
         * el umbral, que vuelve a recoger o soltar la fila, que vuelve a
         * disparar la compensación: el parpadeo mostrándose/ocultándose que se
         * veía en el móvil, sin que `_alDesplazar()` tenga ningún fallo -- el
         * bucle lo cierra el navegador, no el JS.
         *
         * `overflow-anchor: none` saca esta fila (y con ella toda la cabecera)
         * de ese cálculo: cambia de alto y el navegador ya no toca el scroll
         * por su cuenta.
         */
        overflow-anchor: none;
    }

    /* Lo que va al panel, fuera de la fila. */
    .sh .sh-nav1,
    .sh .sh-zona-nav,
    .sh #headerZone{ display: none; }

    /*
     * LA CAJA DE SESIÓN NO SE QUITA: SE ESCONDE.
     *
     * Dentro está la campana, y «Avisos» del panel abre SU panel --el mismo, no
     * una copia--. Con `display:none` ese panel no podría verse nunca; con
     * `visibility:hidden` en la caja y `visible` en el panel de avisos, sí. Y
     * lo escondido con `visibility` no recibe el foco del tabulador.
     */
    .sh .sh-derecha{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        visibility: hidden;
    }

    .sh .TNotificationsBell-panel{
        position: fixed;
        top: 62px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 70vh;
        visibility: visible;
    }

    /* ── FILA 1 (56 px): menú, marca, lupa, cesta, cuenta ───────────── */

    /* LOS 44 × 44 DE LOS ICONOS SE DECLARAN ARRIBA, fuera de esta consulta: la
       lupa sale también en escritorio en cuanto al buscador no le quedan 300 px.
       Aquí solo lo que de verdad es de móvil. */

    .sh .sh-m-menu{ display: inline-grid; }

    .sh .sh-marca{
        height: 44px;
        margin: 6px 0;
        padding: 0 6px;
    }
    .sh .sh-marca-img{ height: 26px; }

    /* En móvil la caja SÍ dibuja: agrupa lupa, cesta y cuenta contra el borde
       derecho. En escritorio es `display: contents` (arriba) y solo sale la
       lupa, porque cesta y cuenta ya están en `.sh-derecha`. */
    .sh .sh-m-accesos{
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }

    .sh .sh-m-cesta,
    .sh .sh-m-cuenta{ display: inline-grid; }

    /*
     * LA LUPA, SIEMPRE (27/09/2026).
     *
     * Aquí ponía `display: none` y solo la encendía `.es-recogida`, con este
     * motivo: «con la fila a la vista serían dos puertas a lo mismo». **Ya no
     * lo son**, porque la lupa ha dejado de ser una puerta: ahora es el
     * INTERRUPTOR de esa fila --la despliega y la recoge-- y la fila nace
     * recogida. Un interruptor que desaparece cuando lo que manda está
     * encendido no se puede apagar.
     *
     * La nota vieja no se borra: sigue siendo cierta para el diseño anterior,
     * donde la fila estaba siempre y la lupa llevaba a otra pantalla.
     */
    /* ESCONDIDA DE PARTIDA: la enciende `.es-lupa`, que es quien sabe si al
       buscador le quedan los 300 px que pide. Aquí solo se elige CUÁL de las dos
       sale: la de la fila de la marca, y no la que va pegada a la campana --su
       sitio, `.sh-derecha`, en móvil está escondido--. Se apaga explícitamente
       en vez de dejarla a merced de eso: si algún día la caja de sesión vuelve
       a la fila, saldrían las dos. */
    .sh.es-lupa .sh-lupa-movil{ display: inline-grid; }
    .sh.es-lupa .sh-lupa-sesion{ display: none; }

    /* EL NÚMERO DE LA CESTA, en el naranja de la barra de compra y con el
       blanco que aguanta sobre él (#fff sobre #c2410c: 5,2:1). */
    .sh .sh-m-contador{
        position: absolute;
        top: 5px;
        right: 3px;

        display: none;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;

        border-radius: 999px;
        background: #c2410c;
        color: #fff;

        font: 700 10px/17px 'Inter', sans-serif;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .sh .sh-m-contador.es-visible{ display: block; }

    /* El salto de línea de la fila flex: todo lo que va detrás, a la fila 2. */
    .sh .sh-m-salto{
        display: block;
        flex: 0 0 100%;
        height: 0;
    }

    /* ── FILA 2 (52 px): categorías y buscador ──────────────────────── */
    .sh .sh-explorador{ margin: 4px 8px 8px 4px; }

    .sh .sh-buscador{
        flex: 1 1 0;
        max-width: none;
        height: 40px;
        margin: 4px 8px 8px 0;
        border-color: #d5dde3;
    }

    /* La caja como en la maqueta: lupa dentro y sin el botón verde. Intro --el
       «Ir» del teclado del teléfono-- ya busca. */
    .sh .tps .tps-lupa{ display: block; font-size: 17px; }
    .sh .tps-lanzar{ display: none; }
    .sh .tps-caja{ padding: 0 12px; gap: 8px; border-radius: 10px; }

    /* 16 px Y NO 15: por debajo, Safari en iOS amplía la página al enfocar el
       campo, y a quien entra con sesión se le deja ampliar (`user-scalable`). */
    .sh .tps-input{ font-size: 16px; }

    /* ── RECOGIDA ───────────────────────────────────────────────────── */
    /* AQUÍ ESTABA `.sh.es-recogida .sh-barra{ max-height: 56px }`, que es lo
       que encogía la cabecera entera. Ahora lo que se despliega y se recoge es
       `.sh-fila2`, y la barra no se entera. */

    /* El salto de línea del flex sobra en cuanto la fila 2 sale del flujo: ya
       no hay nada detrás que empujar abajo. */
    .sh .sh-m-salto{ display: none; }


    /* La sombra de la barra de compra de la ficha, dada la vuelta: las dos
       barras fijas se leen como un par. Sustituye a la doble de `sticky-shadow`. */
    body > header.sticky-shadow{ box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

    /* ── EL BUSCADOR A PANTALLA COMPLETA ───────────────────────────── */
    .sh.es-buscando .sh-busca-marco{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1102;

        display: flex;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 16px 0 6px;

        /* La franja de arriba en el crema de la cabecera, con su línea, y el
           resto en blanco: una sola caja, sin piezas sueltas que coordinar. */
        background:
            linear-gradient(to bottom,
                var(--sh-fondo) 0, var(--sh-fondo) 59px,
                var(--sh-linea) 59px, var(--sh-linea) 60px,
                #fff 60px);
    }

    .sh.es-buscando .sh-busca-volver{ display: inline-grid; margin: 0; }

    .sh.es-buscando .sh-buscador{
        visibility: visible;
        height: 44px;
        margin: 0;
        border-color: var(--sh-verde);
        box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
    }

    .sh.es-buscando .tps-popup{
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Cada resultado: nombre en DOS líneas --lo que distingue un aceite de
       otro está al final del nombre-- y el precio con su €/kg a la derecha. */
    .sh.es-buscando .tps-item{ align-items: flex-start; padding: 10px 16px; }
    .sh.es-buscando .tps-foto{ width: 44px; height: 44px; }
    .sh.es-buscando .tps-texto b{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        font-size: 13.5px;
        line-height: 1.35;
    }
    .sh.es-buscando .tps-todos{ min-height: 48px; padding: 0 16px; font-size: 13px; }

    /* ── EL PANEL DEL MENÚ ──────────────────────────────────────────── */
    .sh .shm-velo{
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1100;

        background: rgba(15, 23, 42, .45);

        opacity: 0;
        visibility: hidden;
        transition: opacity .22s ease, visibility 0s linear .22s;
    }

    .sh .shm-panel{
        display: flex;
        flex-direction: column;

        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1101;

        width: 320px;
        max-width: 86%;

        background: #fff;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .18);

        /* El panel SÍ se mueve con `transform`: es la hoja, no el marco de
           nadie. `visibility` además, para que cerrado no se enfoque. */
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    .sh.es-menu .shm-velo{
        opacity: 1;
        visibility: visible;
        transition: opacity .22s ease;
    }

    .sh.es-menu .shm-panel{
        transform: none;
        visibility: visible;
        transition: transform .22s ease;
    }

    .shm-panel-cab{
        flex: 0 0 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px 0 16px;
        background: var(--sh-fondo);
        border-bottom: 1px solid var(--sh-linea);
    }
    .sh .shm-panel-marca{ display: block; height: 24px; width: auto; }
    .sh .shm-panel-cab .sh-m-ico{ margin: 0; }

    .shm-panel-cuerpo{
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }

    /* LA CUENTA: icono en su columna y TODO el texto en la segunda. */
    .shm-cuenta{
        display: flex;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sh-linea);
    }
    .sh .shm-cuenta-ico{
        flex: 0 0 auto;
        margin-top: 1px;
        font-size: 22px; width: 22px; height: 22px;
        color: var(--sh-verde-hondo);
    }
    .shm-cuenta-txt{ flex: 1; min-width: 0; }
    .sh .shm-cuenta-txt b{
        display: block;
        font: 600 14px/1.35 'Inter', sans-serif;
        color: var(--sh-tinta);
    }
    .sh .shm-cuenta-txt small{
        display: block;
        margin-top: 2px;
        font: 400 12px/1.4 'Inter', sans-serif;
        color: var(--sh-tinta-suave);
    }

    .shm-botones{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    .sh .shm-btn{
        flex: 1 1 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        padding: 0 14px;
        border-radius: 9px;
        font: 600 14px 'Inter', sans-serif;
        text-decoration: none;
        white-space: nowrap;
    }
    .sh .shm-btn-primario,
    .sh .shm-btn-primario:visited{ background: var(--sh-verde-hondo); color: #fff; border: 1px solid var(--sh-verde-hondo); }
    .sh .shm-btn-primario:hover{ background: #166534; text-decoration: none; }
    .sh .shm-btn-secundario,
    .sh .shm-btn-secundario:visited{ background: #fff; color: var(--sh-verde-hondo); border: 1px solid var(--sh-verde); }
    .sh .shm-btn-secundario:hover{ background: var(--sh-verde-suave); text-decoration: none; }

    /* EL RÓTULO DE CADA GRUPO: la regla global de `h2` le pone 18 px y relleno. */
    .sh .shm-tit{
        margin: 14px 16px 4px;
        padding: 0;
        font: 600 11px/1.3 'Inter', sans-serif;
        letter-spacing: .4px;
        text-transform: uppercase;
        color: #5f6b7a;
    }

    /* LAS LISTAS: la de la cuenta, la navegación (la pinta `NavigationRender`,
       con su marcado de zona) y las categorías. Filas de 44 px. */
    .sh .shm-lista,
    .sh .shm-panel .nav-zona-lista{
        display: block;
        margin: 0;
        padding: 0 8px;
        list-style: none;
    }
    .sh .shm-lista > li,
    .sh .shm-panel .nav-zona-item{ display: block; position: static; }

    .sh .shm-lista a,
    .sh .shm-lista button.shm-avisos,
    .sh .shm-panel .nav-zona-item > a{
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 0 8px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--sh-tinta);
        text-decoration: none;
        white-space: normal;
        text-align: left;
        cursor: pointer;
    }
    .sh .shm-lista a:hover,
    .sh .shm-lista button.shm-avisos:hover,
    .sh .shm-panel .nav-zona-item > a:hover{ background: var(--sh-verde-suave); text-decoration: none; }

    /* ── Y EL `<span>` DE DENTRO, QUE SALÍA MAGENTA ──────────────────
     *
     * La regla de arriba le da color al `<a>`, pero el rótulo va dentro de un
     * `<span>` y `boot.css` declara `a, .link, a:active, a:focus, a:visited,
     * a span { color: #910C88 }`. Ese `a span` (0,0,2) le gana al color
     * HEREDADO, que no tiene especificidad ninguna, así que «Mis pedidos»,
     * «Favoritos», «Mi cuenta», «Cerrar sesión» y las entradas del menú de
     * categorías salían en magenta en cuanto se abría el panel.
     *
     * No se ve con el menú cerrado --y por eso llevaba ahí sin que nadie lo
     * dijera-- pero `getComputedStyle` del span lo canta igual: `display:none`
     * no cambia el color calculado. Medido el 26/09/2026.
     *
     * Misma familia que las otras trampas de `boot.css`; ver
     * `Documentacion/Memoria/boot-css-pisa-color-heredado.md`. */
    .sh .shm-lista a span,
    .sh .shm-lista button.shm-avisos span,
    .sh .shm-panel .nav-zona-item > a span{ color: inherit; }

    .sh .shm-lista iconify-icon,
    .sh .shm-panel .nav-zona-item iconify-icon{
        flex: 0 0 auto;
        font-size: 19px; width: 19px; height: 19px;
        color: var(--sh-tinta-suave);
    }

    /* EL TEXTO VA EN SU `<span>`, y el tamaño en el span: la regla global
       `div, span, p, li { font: 12px }` le gana a cualquier herencia. */
    .sh .shm-lista a > span,
    .sh .shm-lista button > span,
    .sh .shm-panel .nav-zona-item > a > span{
        flex: 1;
        min-width: 0;
        font: 500 14.5px/1.3 'Inter', sans-serif;
        color: var(--sh-tinta);
    }

    /* La entrada de la página en la que se está (la marca `_marcarActivo`). */
    .sh .shm-panel .nav-zona-item > a.es-activo{
        background: var(--sh-verde-suave);
        text-decoration: none;
    }
    .sh .shm-panel .nav-zona-item > a.es-activo > span{ color: var(--sh-verde-hondo); font-weight: 600; }
    .sh .shm-panel .nav-zona-item > a.es-activo iconify-icon{ color: var(--sh-verde-hondo); }

    /* El número de avisos, a la derecha de su fila. */
    .sh .shm-lista .shm-avisos-num{
        flex: 0 0 auto;
        display: none;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #c2410c;
        font: 700 11px/20px 'Inter', sans-serif;
        color: #fff;
        text-align: center;
    }
    .sh .shm-lista .shm-avisos-num.es-visible{ display: inline-block; }

    /* CATEGORÍAS: el enlace a la familia y, al lado, la flecha que abre sus
       hijas dentro del panel. Dos blancos táctiles, cada uno con lo suyo. */
    .shm-cat-fila{ display: flex; align-items: center; }
    .sh .shm-cat-fila > a{ flex: 1; min-width: 0; }
    .sh .shm-cat-fila .sh-m-ico{ margin: 0; flex-basis: 44px; }
    .sh .shm-cat-fila .sh-m-ico iconify-icon{ font-size: 18px; width: 18px; height: 18px; color: var(--sh-tenue); transition: transform .15s ease; }
    .sh .shm-cat-abrir[aria-expanded="true"] iconify-icon{ transform: rotate(180deg); }

    .sh .shm-subs{
        display: none;
        margin: 0 0 6px 39px;
        padding: 0;
        list-style: none;
        border-left: 1px solid var(--sh-linea);
    }
    .sh .shm-subs.es-abierta{ display: block; }
    .sh .shm-subs a{
        min-height: 40px;
        padding-left: 12px;
    }
    .sh .shm-subs a > span{ font-size: 14px; font-weight: 400; }

    .shm-panel-pie{
        flex: 0 0 auto;
        padding: 8px;
        border-top: 1px solid var(--sh-linea);
    }
    .sh .shm-panel-pie .shm-lista{ padding: 0; }
    .sh .shm-panel-pie .shm-lista a > span{ color: var(--sh-tinta-suave); }

    /* ── MIENTRAS HAY ALGO ABIERTO ──────────────────────────────────── */
    /* El fondo no se desplaza y el chat de soporte (z-index 9000, por encima
       de la cabecera) no tapa el panel ni la búsqueda. */
    html.sh-bloqueo,
    html.sh-bloqueo body{ overflow: hidden; }

    html.sh-bloqueo #sopChat{ visibility: hidden; }
}

/* SIN ANIMACIÓN PARA QUIEN LA HA PEDIDO QUITAR en su sistema: la fila, el panel
   y el velo cambian de golpe. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce){
    .sh .sh-barra,
    .sh .sh-fila2,
    .sh .shm-panel,
    .sh .shm-velo,
    .sh.es-menu .shm-panel,
    .sh.es-menu .shm-velo,
    .sh .shm-cat-fila .sh-m-ico iconify-icon{ transition: none; }
}

/*
 * EL PIE, POR EL MISMO CAMINO Y POR EL MISMO MOTIVO.
 *
 * Es el pie de TODAS las paginas --el de la portada--, asi que su hoja tiene
 * que estar en todas. Vivia dentro de `TLanding.css` colgando de `.lp`, y por
 * eso solo existia donde habia landing: la tienda se quedaba sin pie y el
 * resto del sitio arrastraba otro distinto (`footer.php`).
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  EL PIE DEL SITIO   ·   uno solo, para todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * El pie bueno --el de la portada-- vivía dentro de la hoja del landing y
 * colgaba de `.lp`, así que solo existía donde había un landing. El resto del
 * sitio arrastraba OTRO pie (`www_oneway/footer.php`), y la tienda no tenía
 * ninguno. Tres pies para un sitio son tres sitios donde cambiar un enlace
 * legal, y ya se veía: el de la portada llevaba las columnas del gestor de
 * zonas y el otro no.
 *
 * Aquí está el único, autocontenido: declara sus propias variables y no
 * depende de que alguien haya cargado la hoja del landing. Lo pinta `base.php`
 * para toda la web.
 *
 * ── SE COLGABA DE `.lp` Y AHORA DE `.ac-pie` ───────────────────────
 *
 * `pie.php` envuelve el pie en `.ac-pie`, así que las páginas de plataforma
 * --que ya viven dentro de un `.lp`-- siguen viéndose igual y el resto lo
 * hereda sin tener que envolverse en nada.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * La hoja del landing usa consultas de contenedor porque su raíz declara un
 * `container-type`. Fuera de ahí no hay contenedor que consultar y esas reglas
 * NO SE APLICAN NUNCA -- sin error, y en un pie no se nota hasta que alguien
 * abre el sitio en un móvil.
 */

.ac-pie{
    --acp-verde:      #2f7d3f;
    --acp-tinta:      #16241a;
    --acp-texto:      #3f4a43;
    --acp-suave:      #6b7a70;
    --acp-borde:      #e6ebe6;
    --acp-crema:      #f6f9f4;
    --acp-verde-borde:#bcdcc4;
    --acp-fondo:      #faf8f2;
}

.ac-pie .lp-pie{
    padding: 46px 0 0;
    background: var(--acp-fondo);
    color: var(--acp-texto);
    border-top: 1px solid var(--acp-borde);
}

/* La única medida de página del pie. Se declara aquí y no se hereda del
   landing: fuera de él, `.lp-ancho` no existe. */
.ac-pie .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-pie .lp-pie-rejilla{
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 34px;
}

/* ── LA MARCA ───────────────────────────────────────────────────── */

.ac-pie .lp-marca{
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--acp-tinta);
    text-decoration: none;
    font-size: 19px; font-weight: 800; letter-spacing: -.3px;
    margin-bottom: 12px;
}
.ac-pie .lp-marca img{ height: 40px; width: auto; }

/* El `<b>` se lo llevaba la regla global `b,strong{color:#000}`, y el color no
   se hereda cuando alguien lo declara por debajo: hay que decirlo aquí. */
.ac-pie .lp-pie-marca .lp-marca b{ color: var(--acp-tinta); font-size: 19px; letter-spacing: -.2px; }
.ac-pie .lp-pie-marca .lp-marca b em{ color: var(--acp-verde); font-style: normal; }
.ac-pie .lp-pie-marca .lp-marca-ico{ display: flex; color: var(--acp-verde); font-size: 26px; }

.ac-pie .lp-pie-marca p{
    margin: 0 0 16px;
    font-size: 12.5px; line-height: 1.55;
    max-width: 260px; color: var(--acp-suave);
}

/* ── LOS DOS `<nav>` ────────────────────────────────────────────────
   `base.php` declara `nav{ background:#FFF; border-bottom:1px solid #bbb;
   z-index:1 }` para la barra de categorías, y eso dibujaba un rectángulo
   blanco con una raya gris debajo de los iconos sociales y de los legales.
   Medido, no supuesto. */
.ac-pie nav{ background: transparent; border: 0; z-index: auto; padding: 0; }

/* Y SUS ENLACES NO SON LOS DEL MENÚ. `base.php` declara además
   `nav a{ font: bold 15px Arial; color:#808080; padding:8px }` para la barra de
   categorías: sin desdecirlo, los enlaces del pie salen en Arial gris con ocho
   píxeles de relleno cada uno, y las columnas se separan como si fueran
   botones. */
.ac-pie nav a{ font: inherit; padding: 0; color: inherit; }

.ac-pie .lp-social{ display: flex; gap: 10px; }
.ac-pie .lp-social a{
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--acp-borde);
    color: var(--acp-verde);
    font-size: 15px;
    text-decoration: none;
}
.ac-pie .lp-social a:hover{ background: var(--acp-crema); border-color: var(--acp-verde-borde); }

/* ── LAS COLUMNAS ───────────────────────────────────────────────── */

/* ── EL TITULO DE LA COLUMNA ESTA FUERA DE LA COLUMNA ───────────────
 *
 * El gestor de zonas monta
 * `div.nav-zona-col > b.nav-zona-titulo + nav.lp-pie-col > ul > li > a > span`,
 * o sea que el rotulo **es hermano** del `<nav>`, no hijo. Vestirlo con
 * `.lp-pie-col b` --que es lo que parecia natural-- no aplicaba a nada: el
 * titulo se quedaba con la letra heredada y, sobre todo, PEGADO a su primer
 * enlace, mientras entre enlaces si habia 9px. Se leia como si «Plataforma» y
 * «Como funciona» fueran la misma cosa.
 *
 * Quien manda la separacion es el contenedor `.nav-zona-col`, y el titulo
 * necesita MAS aire que el que hay entre items: si tiene el mismo, deja de
 * parecer un titulo. */
.ac-pie .nav-zona-col{ display: flex; flex-direction: column; }
.ac-pie .nav-zona-titulo{
    display: block;
    color: var(--acp-tinta);
    font-size: 13px; font-weight: 700;
    margin-bottom: 14px;
}

.ac-pie .lp-pie-col{ display: flex; flex-direction: column; gap: 9px; }
/* EL COLOR VA TAMBIÉN AL `<span>` DE DENTRO, Y NO ES UN DETALLE.
   El gestor de zonas envuelve cada rótulo en un `<span>`, y la regla global es
   `a, .link, a:active, a:focus, a:visited, a span { color:#910c88 }` -- con
   `a span` dentro. Vestir solo el `<a>` deja el enlace del color correcto y el
   texto que se lee, magenta: el color lo pone el hijo, que es quien pinta. Es
   la misma trampa de la cabecera. */
.ac-pie .lp-pie-col a,
.ac-pie .lp-pie-col a span{ color: var(--acp-texto); font-size: 12.5px; text-decoration: none; font-weight: 400; }
.ac-pie .lp-pie-col a:hover,
.ac-pie .lp-pie-col a:hover span{ color: var(--acp-verde); text-decoration: underline; }
.ac-pie .lp-pie-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ac-pie .lp-pie-col li{ margin: 0; padding: 0; }

/* ── LA LÍNEA DE LEGALES ────────────────────────────────────────── */

.ac-pie .lp-pie-legal{
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding-block: 16px;
    border-top: 1px solid var(--acp-borde);
    font-size: 11.5px;
    color: var(--acp-suave);
}
.ac-pie .lp-pie-legal nav{ display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal ul{ list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.ac-pie .lp-pie-legal li{ margin: 0; padding: 0; }
.ac-pie .lp-pie-legal a,
.ac-pie .lp-pie-legal a span{ color: var(--acp-suave); text-decoration: none; font-weight: 400; font-size: 11.5px; }
.ac-pie .lp-pie-legal a:hover,
.ac-pie .lp-pie-legal a:hover span{ color: var(--acp-verde); text-decoration: underline; }

/* ── LO YA VISITADO ─────────────────────────────────────────────────
   La regla global `a:visited{ color:#910c88; border:0 !important }` pinta de
   magenta los enlaces del pie --que es justo lo que se visita-- y deja el
   `border-color` en `currentColor`. Se dice aquí, como en las tarjetas. */
/* CON EL COLOR LITERAL, NO CON `var()`: el navegador no resuelve variables
   dentro de una regla `:visited` --limita a propósito lo que ahí se puede
   cambiar, para que una página no pueda deducir tu historial-- y la regla se
   queda sin efecto, sin error y sin aviso. Son los valores de `--acp-texto` y
   `--acp-suave`. */
.ac-pie a:visited,
.ac-pie a:visited span{ color: inherit; border-color: inherit; }
.ac-pie .lp-pie-col a:visited,
.ac-pie .lp-pie-col a:visited span{ color: #3f4a43; }
.ac-pie .lp-pie-legal a:visited,
.ac-pie .lp-pie-legal a:visited span{ color: #6b7a70; }
.ac-pie .lp-pie-marca .lp-marca:visited b{ color: #16241a; }

/* ── ESTRECHO ───────────────────────────────────────────────────── */

@media (max-width: 1020px){
    .ac-pie .lp-pie-rejilla{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px){
    .ac-pie .lp-ancho{ padding-inline: 18px; }
    .ac-pie .lp-pie-rejilla{ grid-template-columns: 1fr; }
}

/*
 * Y LA FRANJA DE GARANTIAS QUE VA ENCIMA DEL PIE, POR LO MISMO.
 *
 * Vivia dentro de `TLanding.css` colgando de `.lp`, asi que las cuatro
 * promesas que sostienen la confianza --pago protegido, comisiones a la vista,
 * soporte y logistica-- solo se leian en la portada, y no donde se decide
 * comprar. Ahora sale en todas las paginas, con el pie.
 */
/* ═══════════════════════════════════════════════════════════════════════════
 *  LA FRANJA DE GARANTÍAS   ·   una sola, encima del pie de todas las páginas
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * ── POR QUÉ SALE DE `TLanding.css` ─────────────────────────────────
 *
 * Colgaba de `.lp`, así que solo existía en la portada: las cuatro promesas
 * que hacen que alguien se atreva a pagar --dinero protegido, comisiones a la
 * vista, soporte y logística-- no se leían en la ficha ni en la cesta, que es
 * donde se decide. Es el mismo camino que hizo el pie hacia `TPie.css`.
 *
 * Aquí está la única, autocontenida: declara sus propias variables y no depende
 * de que alguien haya cargado la hoja del landing. La pinta `base.php`.
 *
 * ── Y CON `@media`, NO CON `@container` ────────────────────────────
 *
 * Igual que en el pie: la hoja del landing usa consultas de contenedor porque
 * su raíz declara un `container-type`. Fuera de ahí no hay contenedor que
 * consultar y esas reglas NO SE APLICAN NUNCA, sin error.
 */

.ac-garantias{
    /* ── AIRE ENCIMA, EN TODAS LAS PÁGINAS ───────────────────────────
       La franja se pegaba al contenido: el papel blanco de una ficha de la
       cuenta --o el último bloque de cualquier página-- terminaba y sin un
       píxel de separación empezaba la franja, que se leía como parte del mismo
       bloque. Va en la franja y no en cada página porque la pinta `base.php`
       debajo de TODO: así el hueco es el mismo en la ficha, en la cesta y en la
       portada. Ajustarlo es tocar esta sola propiedad. */
    margin-top: 40px;

    --acg-verde:       #2f7d3f;
    --acg-verde-claro: #eaf4ec;
    --acg-tinta:       #16241a;
    --acg-suave:       #6b7a70;
    --acg-borde:       #e6ebe6;
}

.ac-garantias .lp-garantias{
    padding: 26px 0;
    background: #fff;
    border-top: 1px solid var(--acg-borde);
}

/* La única medida de página de la franja, la MISMA que la del pie: van pegadas
   una encima de otra y con dos carriles distintos el corte se ve. Se declara
   aquí y no se hereda del landing: fuera de él, `.lp-ancho` no existe. */
.ac-garantias .lp-ancho{
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.ac-garantias .lp-garantias-rejilla{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
}

/* LAS DOS COLUMNAS DE SIEMPRE: el icono en la suya y TODO el texto en la otra,
   para que el titular y su línea de debajo arranquen en la misma vertical. */
.ac-garantias .lp-garantias-rejilla > div{
    display: flex;
    align-items: center;
    gap: 11px;
}

.ac-garantias .lp-garantias-rejilla span{
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--acg-verde-claro);
    color: var(--acg-verde);
    font-size: 17px;
}

/* El tamaño se le dice AL ICONO, no a su caja: `iconify-icon` no hereda el
   `font-size` del padre y todos saldrían al defecto de 20px. */
.ac-garantias .lp-garantias-rejilla span iconify-icon{ font-size: 17px; }

.ac-garantias .lp-garantias-rejilla > div > div{
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}

/* El color se dice aquí porque la regla global `b,strong{color:#000}` se lo
   lleva, y el color no se hereda cuando alguien lo declara por debajo. */
.ac-garantias .lp-garantias-rejilla b{ font-size: 12.5px; color: var(--acg-tinta); }
.ac-garantias .lp-garantias-rejilla small{ font-size: 11.5px; color: var(--acg-suave); }

@media (max-width: 620px){
    .ac-garantias .lp-garantias{ padding: 20px 0; }
    .ac-garantias .lp-garantias-rejilla{ gap: 14px; }
}



	.usermenu a img
	{
		position: relative;
		top: 7px;
	}

	.cart_counter{

    padding: 3px;
    border-radius: 50%;
    background-color: var(--btn_color);
    color: #fff;
    width: 14px;
    height: 14px;

    visibility: hidden;
    position: absolute;
    text-align: center;
    left: 16px;
    top: 10px;
    z-index: 1000;

	}