/*
 * elementor.css
 * Integración y overrides de Elementor con el sistema de diseño O Tinglado.
 * Fuerza el uso de las variables del tema en el editor y en el frontend.
 * Depende de: variables.css
 */

/* -------------------------------------------------- */
/* VARIABLES ELEMENTOR → TOKENS DEL TEMA               */
/* Mapea las custom properties de Elementor a las nuestras
   para que los colores del editor sean coherentes.      */
/* -------------------------------------------------- */

:root {
	--e-global-color-primary:    var(--ot-blue);
	--e-global-color-secondary:  var(--ot-blue-dark);
	--e-global-color-text:       var(--ot-blue);
	--e-global-color-accent:     var(--ot-blue-light);

	--e-global-typography-primary-font-family:    'XuntaSans';
	--e-global-typography-primary-font-weight:    700;
	--e-global-typography-secondary-font-family:  'XuntaSans';
	--e-global-typography-secondary-font-weight:  700;
	--e-global-typography-text-font-family:       'XuntaSans';
	--e-global-typography-text-font-weight:       400;
	--e-global-typography-accent-font-family:     'XuntaSans';
	--e-global-typography-accent-font-weight:     400;
}

/*
 * Tipografía base no canvas de Elementor (herdan widgets sen familia propia).
 * Os iconos (.elementor-icon, eicons, Font Awesome) levan font-family propia e non se tocan.
 */
body.elementor-page .elementor {
	font-family: var(--ot-font-sans);
}

/* -------------------------------------------------- */
/* LAYOUT Y CONTENEDORES                                */
/* -------------------------------------------------- */

/*
 * O ancho global dos .e-con débao a Elementor; aquí só se afinan as caixas
 * baixo .contenedor--elementor-full para alinear co --contenedor-width do tema.
 */

/* Páxinas/entradas do tema editadas con Elementor: o wrapper .contenedor non recorta o viewport */
.contenedor.contenedor--elementor-full {
	width:          100%;
	max-width:      none;
	margin-inline:  0;
	padding-inline: 0;
}

/*
 * Dentro deste wrapper só: contido «en caixa» alíñase ao ancho de .contenedor
 * (--contenedor-width). Os contenedores a ancho completo (.e-con-full) seguen
 * coas variables de Elementor e non se limitan aquí.
 */
.contenedor.contenedor--elementor-full .e-con-boxed {
	--container-max-width: var(--contenedor-width);
	--content-width:       min(100%, var(--contenedor-width));
}

.contenedor.contenedor--elementor-full .elementor-section.elementor-section-boxed > .elementor-container {
	max-width:     min(100%, var(--contenedor-width));
	margin-inline: auto;
}

/* -------------------------------------------------- */
/* TIPOGRAFÍA EN WIDGETS                                */
/* -------------------------------------------------- */

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--ot-font-sans);
	color:       var(--ot-color-text);
}

.elementor-widget-text-editor {
	font-family: var(--ot-font-sans);
	font-size:   var(--ot-text-base);
	line-height: var(--ot-leading-normal);
	color:       var(--ot-color-text);
}

/* -------------------------------------------------- */
/* BOTONES DE ELEMENTOR                                 */
/* -------------------------------------------------- */

.elementor-button {
	font-family:    var(--ot-font-sans);
	font-weight:    var(--ot-weight-semibold);
	letter-spacing: var(--ot-tracking-wide);
	text-transform: uppercase;
	border-radius:  var(--ot-radius-sm);
	transition:     background var(--ot-transition), color var(--ot-transition), border-color var(--ot-transition);
}

/* Botón primario: fondo azul, texto blanco */
.elementor-button.elementor-button-primary,
.elementor-widget-button .elementor-button[class*="elementor-button"] {
	background:   var(--ot-blue);
	color:        var(--ot-white);
	border:       2px solid var(--ot-blue);
}

.elementor-button.elementor-button-primary:hover {
	background:   var(--ot-blue-dark);
	border-color: var(--ot-blue-dark);
}

/* -------------------------------------------------- */
/* SECCIONES CON FONDO AZUL (clase .ot-section-blue)   */
/* Para usar en Elementor: añadir clase CSS a la sección */
/* -------------------------------------------------- */

.elementor-section.ot-section-blue,
.e-con.ot-section-blue {
	background-color: var(--ot-blue);
}

.elementor-section.ot-section-blue .elementor-heading-title,
.elementor-section.ot-section-blue .elementor-widget-text-editor,
.elementor-section.ot-section-blue p,
.elementor-section.ot-section-blue a,
.elementor-section.ot-section-blue span,
.e-con.ot-section-blue .elementor-heading-title,
.e-con.ot-section-blue p,
.e-con.ot-section-blue a,
.e-con.ot-section-blue span {
	color: var(--ot-white);
}

.elementor-section.ot-section-blue svg,
.e-con.ot-section-blue svg {
	fill:   var(--ot-white);
	stroke: var(--ot-white);
	color:  var(--ot-white);
}

/* Sección de fondo suave azul */
.elementor-section.ot-section-light,
.e-con.ot-section-light {
	background-color: var(--ot-blue-lighter);
}

/* -------------------------------------------------- */
/* ICONOS / SVG DENTRO DE ELEMENTOR                     */
/* -------------------------------------------------- */

/* Por defecto, iconos heredan el color azul del tema */
.elementor-icon,
.elementor-icon svg {
	color:  var(--ot-blue);
	fill:   currentColor;
	stroke: currentColor;
}

/* -------------------------------------------------- */
/* FORMULARIOS (si se usa Elementor Forms)             */
/* -------------------------------------------------- */

.elementor-field-group .elementor-field {
	border:        1px solid var(--ot-border-color);
	border-radius: var(--ot-radius-md);
	font-family:   var(--ot-font-sans);
	color:         var(--ot-color-text);
	transition:    border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.elementor-field-group .elementor-field:focus {
	border-color: var(--ot-blue);
	box-shadow:   0 0 0 3px rgba(0, 123, 196, 0.15);
	outline:      none;
}

/* -------------------------------------------------- */
/* EDITOR BACKEND — BARRA DE ADMIN                      */
/* -------------------------------------------------- */

.admin-bar .ot-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ot-header {
		top: 46px;
	}
}