/* ==========================================================================
   Base Grupo Nexo
   Reglas que no se alcanzan desde el arbol de Elementor porque actuan sobre
   marcado que el propio Elementor imprime alrededor de las plantillas.
   Se carga en todas las vistas del sitio.
   Documentado en el proyecto: NexoCap / 16 - Estado de la web.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabecera fija en todas las vistas.

   El contenedor .cabecera ya declaraba position:sticky con top:0, pero no se
   pegaba en ninguna vista. El motivo: un elemento pegajoso solo puede
   desplazarse dentro de la caja de su padre, y su padre -el envoltorio
   .elementor-location-header que imprime Elementor para la ubicacion de
   cabecera- mide exactamente lo mismo que el. Con cero recorrido disponible,
   sticky no hace nada y la cabecera se va con el scroll.

   La regla correcta va sobre el envoltorio, cuyo padre es el body.
   -------------------------------------------------------------------------- */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Con sesion iniciada la barra de WordPress ocupa el borde superior. */
.admin-bar .elementor-location-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .elementor-location-header {
		top: 46px;
	}
}

/* Bajo 600 px la barra de WordPress deja de ser fija. */
@media screen and (max-width: 600px) {
	.admin-bar .elementor-location-header {
		top: 0;
	}
}


/* --------------------------------------------------------------------------
   2. Menu movil: un panel desplegable, no una cabecera que crece.

   El widget de menu de Elementor deja el desplegable en el flujo normal,
   dentro de la caja estrecha que comparte con el boton de aula virtual. Al
   abrirlo, la cabecera se estiraba y los renglones se partian en dos lineas.
   Aqui el panel pasa a estar posicionado contra la cabecera completa.
   -------------------------------------------------------------------------- */

/* El enlace «Aula virtual» del menu de WordPress existe solo para el panel
   movil. En escritorio ya esta el boton de la barra. */
.elementor-nav-menu--main .nx-menu-cta {
	display: none !important;
}

@media (max-width: 1024px) {

	/* Para que el panel se mida contra la cabecera y no contra la caja del
	   menu, los contenedores intermedios dejan de ser bloque de referencia.
	   El unico posicionado que queda es .cabecera, que es sticky y ocupa
	   todo el ancho. */
	.elementor-element-cabecerabarra,
	.elementor-element-cabeceraderecha,
	.elementor-element-cabeceramenu {
		position: static !important;
	}

	/* El boton de la barra desaparece: su lugar esta dentro del panel. */
	/* El widget de boton es atomico y NO lleva la clase
	   elementor-element-<id>; se le alcanza por su clase de estilo local. */
	.cabecerabotonaula {
		display: none !important;
	}

	/* El conmutador, a la derecha y sin la caja gris de Elementor. */
	.elementor-element-cabeceramenu {
		margin-inline-start: auto;
	}

	.elementor-element-cabeceramenu .elementor-menu-toggle {
		background: transparent;
		color: var(--nx-ink);
		padding: 6px;
	}

	/* El panel. */
	.elementor-element-cabeceramenu .elementor-menu-toggle + .elementor-nav-menu--dropdown {
		position: absolute !important;
		inset-inline: 0;
		inset-block-start: 100%;
		width: 100%;
		margin: 0 !important;
		background: var(--nx-ink);
		border-block-start: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow: 0 24px 48px rgba(14, 42, 46, 0.28);
		transform-origin: top center;
		z-index: 90;
	}

	.elementor-element-cabeceramenu .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
		max-height: calc(100vh - 140px) !important;
		overflow-y: auto !important;
	}

	/* Los renglones. */
	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .elementor-nav-menu a {
		color: #FFFFFF !important;
		background: transparent !important;
		font-family: var(--nx-texto), sans-serif;
		font-size: 1.0625rem;
		font-weight: 500;
		line-height: 1.3;
		padding: 18px 22px;
		border-block-end: 1px solid rgba(255, 255, 255, 0.08);
	}

	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .elementor-nav-menu a:focus,
	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item-active {
		color: #F2822C !important;
		background: rgba(255, 255, 255, 0.05) !important;
	}

	/* El aula virtual va dentro del panel, con forma de boton. */
	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .nx-menu-cta {
		padding: 18px 22px 24px;
	}

	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .nx-menu-cta a,
	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .nx-menu-cta a:hover,
	.elementor-element-cabeceramenu .elementor-nav-menu--dropdown .nx-menu-cta a.elementor-item-active {
		display: flex;
		justify-content: center;
		background: var(--nx-accent) !important;
		color: #FFFFFF !important;
		border: 0 !important;
		border-radius: var(--nx-radio-pill);
		padding: 15px 24px;
		font-weight: 600;
	}
}


/* --------------------------------------------------------------------------
   3. Vista movil: todo centrado.

   Excepcion: las tres paginas legales. Son parrafos largos, listas y tablas,
   y centrar esa prosa la vuelve incomoda de leer. Se dejan fuera con la clase
   nx-legal que pone el bloque 9 del mu-plugin.

   La cabecera tampoco entra: el logotipo va a la izquierda y el conmutador a
   la derecha, como corresponde a una barra.

   Se excluye nx-rejilla porque es una cuadricula, no una caja flexible, y
   align-items ahi cambia la altura de las tarjetas en vez de su alineacion.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	body:not(.nx-legal) .elementor:not(.elementor-location-header) .e-con:not(.nx-rejilla) {
		align-items: center !important;
		text-align: center !important;
	}

	/* align-items solo alinea el eje transversal. En las cajas que siguen
	   siendo fila en movil -los pares de botones, por ejemplo- lo que centra
	   de verdad es justify-content. */
	body:not(.nx-legal) .elementor:not(.elementor-location-header) .e-con:not(.nx-rejilla) {
		justify-content: center !important;
	}

	/* Los titulos y parrafos llevan ancho maximo en caracteres: sin margen
	   automatico quedarian centrados por dentro pero pegados a la izquierda. */
	body:not(.nx-legal) .elementor:not(.elementor-location-header) .e-heading-base,
	body:not(.nx-legal) .elementor:not(.elementor-location-header) .e-paragraph-base {
		margin-inline: auto;
	}

	/* Las miniaturas de la galeria de la ficha, tambien al centro. */
	.woocommerce div.product div.images .flex-control-thumbs {
		justify-content: center;
	}

	/* Las pantallas de tienda no son documentos de Elementor: su titulo y el
	   bloque de agradecimiento se centran aparte. */
	.nexo-titulo-tienda,
	.nexo-gracias,
	.nexo-gracias-acciones {
		text-align: center;
	}

	.nexo-gracias-acciones {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Tablas y formularios de WooCommerce se quedan alineados al inicio: son
	   datos y campos, no texto de presentacion. */
	.woocommerce table,
	.woocommerce table th,
	.woocommerce table td,
	.woocommerce form .form-row,
	.woocommerce .woocommerce-tabs .panel {
		text-align: start;
	}
}

/* ---------------------------------------------------------------------------
   nexo-aviso-cookies-20260821
   El aviso de cookies usa la maqueta compacta de Complianz -la de las esquinas,
   que apila mensaje y botones en una tarjeta angosta- pero centrada abajo.

   Se llega ahi eligiendo la posicion "bottom-right", que es la que dibuja esa
   maqueta, y corrigiendo solo su anclaje: left y right a cero con margenes
   automaticos centran una caja de ancho fijo sin tocar su rejilla interna.

   No se usa la posicion "bottom" de Complianz: esa dibuja una barra de borde a
   borde, y acotarla con un ancho maximo rompe su rejilla -el mensaje se parte
   en ocho lineas y los botones se estiran hasta esa altura-.
   --------------------------------------------------------------------------- */
.cmplz-cookiebanner.cmplz-bottom-right {
	left: 0 !important;
	right: 0 !important;
	width: min(460px, calc(100vw - 24px)) !important;
	margin-inline: auto !important;
	bottom: 20px !important;
}

@media (max-width: 767px) {
	.cmplz-cookiebanner.cmplz-bottom-right {
		bottom: 12px !important;
	}
}

/* ---------------------------------------------------------------------------
   nexo-whatsapp-bajo-el-aviso-20260821
   El boton flotante de WhatsApp viene con z-index 999999999 y se montaba
   encima del aviso de cookies, tapando "Ver preferencias" y los enlaces a las
   politicas justo en la vista movil, que es donde el aviso ocupa casi todo el
   ancho.

   No se oculta ni se mueve: se le baja la altura de apilado por debajo del
   aviso. Donde no hay solape -escritorio- se ve igual que siempre; donde lo
   hay, el aviso queda delante y la persona responde antes de escribir.
   --------------------------------------------------------------------------- */
.wa__widget_container,
.wa__btn_popup,
.wa__popup_chat_box {
	z-index: 9998 !important;
}