/**
 * Global site styles.
 *
 * The site-wide CSS that used to live in the kadence-child theme's style.css,
 * moved here so all the styling is versioned and deployed with this plugin. It
 * is enqueued on both the front end and the block editor by WP\Theme_Styles.
 * Font and image URLs are relative to this file (../fonts, ../images), pointing
 * at the copies bundled under assets/.
 *
 * The DM Mono @font-face below is what the plugin's feature stylesheets
 * (tag.css, updated-date.css, ...) rely on for their monospace type.
 */

html {
	font-size: 112.5%; /* 16px × 112.5% = 18px */
}

@font-face {
	font-family: 'DM Mono';
	src: url('../fonts/DMMono-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--fs-sm: 0.778rem;   /* 14px */
	--fs-md: 1rem;       /* 18px */
	--fs-lg: 1.111rem;   /* 20px */
	--fs-xl: 1.556rem;   /* 28px */
	--fs-xxl: 2rem;      /* 36px */
	--fs-xxxl: 2.667rem; /* 48px */
}

@media (min-width: 1024px) {
	:root {
		--fs-sm: 0.889rem;   /* 16px */
		--fs-md: 1.111rem;   /* 20px */
		--fs-lg: 1.333rem;   /* 24px */
		--fs-xl: 2rem;       /* 36px */
		--fs-xxl: 2.667rem;  /* 48px */
		--fs-xxxl: 3.556rem; /* 64px */
	}
}

/* bg */
.bg-cuadriculado {
	background-image: linear-gradient(#F6F6F7 1px, transparent 1px), linear-gradient(to right, #F6F6F7 1px, transparent 1px);
	background-size: 40px 40px;
}

/* ancho responsive */

.ancho-800-responsive {
	width: 800px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	.ancho-800-responsive {
		width: 100%;
	}
}

/* Ocultar elementos (.ecomt-hide)

   Oculta en el front cualquier bloque o ítem de menú que lleve la clase
   (Avanzado → Clase(s) CSS adicional(es), o Menús → "Clases CSS"). Solo lo
   oculta visualmente: el contenido sigue en el HTML. En el editor de bloques no
   se oculta, se muestra atenuado y con borde discontinuo para poder editarlo. */
body:not(.wp-admin):not(.editor-styles-wrapper) .ecomt-hide {
	display: none !important;
}

.editor-styles-wrapper .ecomt-hide {
	opacity: 0.4;
	outline: 2px dashed #e0245e;
	outline-offset: 2px;
}

/* CTA Agendar Demo - Home */

.cta-agenda-demo {
	position: relative;
	overflow: hidden;
}

.cta-agenda-demo::before,
.cta-agenda-demo::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1000px;
	height: 1000px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 0;
}

.cta-agenda-demo::before {
	left: -600px;
	background-image: url("../images/cta-pedir-demo-iz.svg");
}

.cta-agenda-demo::after {
	right: -600px;
	background-image: url("../images/cta-pedir-demo-de.svg");
}

.cta-agenda-demo > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.cta-agenda-demo::after {
		width: 360px;
		right: -250px;
		top: 90%;
	}

	.cta-agenda-demo::before {
		width: 360px;
		left: -250px;
		top: 90%;
	}
}

/* Audience Card - Home */

.audience-card {
	overflow: hidden;
	clip-path: inset(0 round 16px);
}

.audience-card .audience-visual {
	max-width: none;
	margin-bottom: 1.5rem !important;
}

.audience-card .audience-visual img {
	width: 100%;
	height: auto;
	display: block;
	margin-top: -190px;
	margin-left: -120px;
}

@media (max-width: 768px) {
	.audience-card .audience-visual {
		width: 300px;
	}

	.audience-card .audience-visual img {
		margin-top: -150px;
		margin-left: -110px;
	}
}

/* Footer links */

.footer a {
	text-decoration: none;
}

.footer ul {
	margin: 0;
	list-style: none;
}

.footer ul li {
	padding-bottom: .5rem;
}

/* Paginación (global) */

.navigation.pagination .nav-links,
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

.navigation.pagination .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 16px;
	line-height: 1;
	color: #1a1a1a;
	background: #fff;
	border: 1px solid #cccccc;
	border-radius: 4px;
	text-decoration: none;
}

.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers[aria-current],
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers[aria-current] {
	color: #fff;
	background: #000;
	border-color: #000;
}

.navigation.pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.navigation.pagination .page-numbers:not(.current):hover,
.wp-block-query-pagination .page-numbers:not(.current):hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: #1a1a1a;
}

/* Blog archive cards: equal height, con autor y "Leer artículo" alineados */

.post-archive .custom-archive-loop-item {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.post-archive .custom-archive-loop-item > .wp-block-kadence-column,
.post-archive .custom-archive-loop-item > .wp-block-kadence-column > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* La fila de autor (y el "Leer artículo" que va detrás) se van al fondo, así
   ambas quedan alineadas entre tarjetas sin importar cuántas líneas ocupe el
   título. Es el penúltimo bloque del cuerpo (el último es "Leer artículo"). */
.post-archive .custom-archive-loop-item > .wp-block-kadence-column > .kt-inside-inner-col > .wp-block-kadence-column:nth-last-child(2) {
	margin-top: auto;
}

/* blog single - heading scale

   Los encabezados del cuerpo de las entradas usan la misma escala de tamaños
   (--fs-*) que el resto del sitio, en vez de los tamaños globales de tipografía
   del personalizador de Kadence, que quedan demasiado grandes aquí. Acotado a
   .entry-content para no tocar el título de la entrada ni nada fuera del cuerpo. */
.single-post .entry-content h2 { font-size: var(--fs-xl); }
.single-post .entry-content h3 { font-size: var(--fs-lg); }
.single-post .entry-content h4 { font-size: var(--fs-md); }
.single-post .entry-content h5 { font-size: var(--fs-sm); }
.single-post .entry-content h6 { font-size: var(--fs-sm); }

/* blog single author box */
.author-image {
	position: absolute;
	left: 0;
	margin-left: -60px;
}

/* blog single - table of contents */
#ez-toc-container {
	padding-top: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 0px !important;
	border-radius: 8px !important;
	overflow: hidden;
}

.ez-toc-title-container {
	background: black;
	color: white;
	padding: 10px;
}

div#ez-toc-container .ez-toc-title {
	font-family: "DM Mono", monospace;
	text-transform: uppercase;
	font-size: 1rem !important;
}

#ez-toc-container:not(.toc_close) nav {
	padding: 30px 20px;
	background: white;
}

#ez-toc-container .ez-toc-js-icon-con {
	border: 1px solid #ffffff !important;
}

.ez-toc-icon-toggle-span svg {
	color: white !important;
	fill: white !important;
}

.ez-toc-pull-right {
	margin-right: 10px;
}

/* ==========================================================================
   Cabecera — menú principal (desktop)
   ========================================================================== */

/* Ítems de primer nivel: tipografía mono en mayúsculas y separación entre
   letras. DM Mono es la del @font-face de arriba. Acotado a los hijos directos
   de #primary-menu para no afectar al submenú. También sirve de ancla de
   posición (::after) para el indicador verde. */
.header-navigation #primary-menu > li.menu-item > a {
	position: relative;
	font-family: "DM Mono", monospace;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	font-size: 0.9rem !important;
}

/* Separación entre ítems de primer nivel */
.header-navigation #primary-menu > li.menu-item {
	margin: 0 12px;
}

/* Indicador de ítem activo: cuadradito verde con las esquinas superiores
   redondeadas, apoyado sobre la línea inferior de la cabecera. Aparece en el
   ítem seleccionado (o su ancestro, si estás en una página hija) y en el
   rollover. Anclado al <a> —no al <li>— para que caiga a la misma altura en
   todos los ítems, tengan submenú o no. */
.header-navigation #primary-menu > li.current-menu-item > a::after,
.header-navigation #primary-menu > li.current-menu-ancestor > a::after,
.header-navigation #primary-menu > li.menu-item:hover > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	background: #6BE5A0;
	border-radius: 2px 2px 0 0;
	pointer-events: none;
}

/* --- Desplegable (submenú / mega menu) ------------------------------------ */

/* Panel: tarjeta blanca redondeada */
.header-navigation ul.sub-menu {
	background: #fff;
	border: none;
	border-radius: 24px;
	padding: 12px !important;
	min-width: 280px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .18);
}

/* Filas: icono + texto */
.header-navigation .header-menu-container ul ul li.menu-item > a {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
	padding: 12px;
	border-radius: 12px !important;
	color: #000 !important;
	font-weight: 500;
	font-size: 0.9rem !important;
	transition: background .15s ease;
}

/* Filas del mega menu a todo el ancho. Kadence Pro las pone al 100% con la misma
   especificidad que el ancho fijo del desplegable (200px) de Kadence, así que
   ganaba la que cargara después (WP Rocket cambia ese orden). El
   .header-navigation extra desempata siempre a favor del 100%. */
.header-navigation .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul a {
	width: 100%;
}

/* Rollover de fila */
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	background: #E6EDFF !important;
	color: #000 !important;
}

/* Icono de cada fila. El SVG ya incluye el cuadrado de color de fondo, así que
   solo se pinta como fondo del ::before; cada ítem define su icono en la
   variable --mi-icon (más abajo). */
.header-navigation .header-menu-container ul ul li.menu-item > a::before {
	content: "";
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	background-image: var(--mi-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Icono por ítem. La clase se asigna en Menús → campo "Clases CSS". */
.mi-sistema    { --mi-icon: url("../images/menu/icon-sistema.svg"); }  /* Productos → El Sistema */
.mi-bms        { --mi-icon: url("../images/menu/icon-bms.svg"); }      /* Productos → BMS */
.mi-otea       { --mi-icon: url("../images/menu/icon-otea.svg"); }     /* Productos → OTEA Software */
.mi-csc        { --mi-icon: url("../images/menu/icon-csc.svg"); }      /* Productos → Centro de Control */
.mi-blog       { --mi-icon: url("../images/menu/icon-blog.svg"); }     /* Recursos → Blog */
.mi-glosario   { --mi-icon: url("../images/menu/icon-glosario.svg"); } /* Recursos → Glosario */
.mi-biblioteca { --mi-icon: url("../images/menu/icon-library.svg"); }  /* Recursos → Guías y descargables */

/* --- Selector de idioma del header ([ecomt_lang_switcher]) ----------------- */

/* Muestra solo el otro idioma (ES/EN). Enlace en blanco, sin subrayado, con la
   misma tipografía mono/mayúsculas que los ítems del menú. */
.ecomt-lang-switcher .ecomt-lang,
.ecomt-lang-switcher .ecomt-lang:hover,
.ecomt-lang-switcher .ecomt-lang:focus,
.ecomt-lang-switcher .ecomt-lang:visited {
	color: #fff;
	text-decoration: none !important;
	font-family: "DM Mono", monospace;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	font-size: 0.9rem !important;
}

/* ==========================================================================
   Cabecera — menú móvil (drawer)
   ========================================================================== */

/* Ítems de primer nivel: misma tipografía mono/mayúsculas que en desktop. En
   los ítems con submenú el enlace va dentro de .drawer-nav-drop-wrap, por eso
   se contemplan las dos rutas. La flecha desplegable la pinta Kadence. */
#mobile-menu > li.menu-item > a,
#mobile-menu > li.menu-item > .drawer-nav-drop-wrap > a {
	font-family: "DM Mono", monospace;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	font-size: 0.9rem;
}

/* --- Submenú desplegado --------------------------------------------------- */

#mobile-menu .sub-menu {
	padding-left: 0!important;
	padding-top: 12px;
}

/* Filas: icono + texto + flecha derecha. Reutiliza las variables --mi-icon y
   las clases .mi-* definidas en la sección de desktop. */
#mobile-menu .sub-menu li.menu-item > a {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 4px;
	padding: 10px 12px;
	border-radius: 12px;
	color: #000;
	font-weight: 500;
	font-size: 0.9rem;
	border-bottom: none !important;
}

/* Icono de la fila (el SVG ya incluye el cuadrado de color de fondo) */
#mobile-menu .sub-menu li.menu-item > a::before {
	content: "";
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	background-image: var(--mi-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Fila activa / rollover: resaltado */
#mobile-menu .sub-menu li.menu-item > a:hover,
#mobile-menu .sub-menu li.menu-item.current-menu-item > a {
	background: #E6EDFF !important;
	color: #000;
}

.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
	border-left: 0 !important;
}

/* Abrir el submenú tocando TODO el ítem (no solo la flecha). Se estira el botón
   de toggle de Kadence para que cubra la fila entera; la flecha se mantiene a la
   derecha con justify-content. Los ítems padre no tienen href, así que el <a>
   que queda debajo no pierde ningún enlace. Acotado a :not(...-toggle-true) para
   que, si activas el toggle nativo de Kadence, esto no interfiera. */
.mobile-navigation:not(.drawer-navigation-parent-toggle-true) .drawer-nav-drop-wrap {
	position: relative;
}

.mobile-navigation:not(.drawer-navigation-parent-toggle-true) .drawer-nav-drop-wrap .drawer-sub-toggle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: transparent;
	border: 0;
}