/**
 * MSA Accesibilidad — modos aplicados al sitio.
 *
 * Todas las reglas dependen de una clase msa-acc-* en <html> (la agregan el script
 * de inicio del <head> y el JS principal), por lo que sin preferencias activas
 * este archivo no modifica nada.
 *
 * Especificidad: los selectores «html.msa-acc-x body ...» (0,1,2 o más) junto con
 * !important superan los estilos del Kit de Elementor (.elementor-kit-N, 0,1,0)
 * y los de cada widget, que no usan !important.
 *
 * El botón y el panel viven en un Shadow DOM, así que estas reglas no los alcanzan.
 */

/* ==========================================================================
   Contenedor del menú en el DOM principal (anfitrión del Shadow DOM)
   ========================================================================== */

#msa-accesibilidad {
	display: block;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

/* ==========================================================================
   Fuente para dislexia (OpenDyslexic, SIL Open Font License 1.1)
   Solo se descarga cuando el modo está activo.
   ========================================================================== */

@font-face {
	font-family: "msa-acc-opendyslexic";
	src: url("../fonts/OpenDyslexic-Regular.woff2") format("woff2");
	font-weight: 100 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "msa-acc-opendyslexic";
	src: url("../fonts/OpenDyslexic-Bold.woff2") format("woff2");
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "msa-acc-opendyslexic";
	src: url("../fonts/OpenDyslexic-Italic.woff2") format("woff2");
	font-weight: 100 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "msa-acc-opendyslexic";
	src: url("../fonts/OpenDyslexic-Bold-Italic.woff2") format("woff2");
	font-weight: 600 900;
	font-style: italic;
	font-display: swap;
}

/* Se excluyen las fuentes de íconos (Font Awesome, eicons de Elementor, Dashicons,
   Menu Icons, etc.) para no romper los íconos, y el código monoespaciado. */
html.msa-acc-dislexia body,
html.msa-acc-dislexia body *:not(i[class], .fa, .fas, .far, .fab, .fal, .fad, .fat, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"], [class^="eicon"], [class*=" eicon"], .dashicons, [class^="dashicons-"], [class*=" dashicons-"], .genericon, [class^="icon-"], [class*=" icon-"], .material-icons, .material-symbols-outlined, code, kbd, pre, samp) {
	font-family: "msa-acc-opendyslexic", sans-serif !important;
}

/* ==========================================================================
   Alto contraste (fondo oscuro / fondo claro)
   Las variables --e-global-color-* del Kit se sobrescriben con CSS en línea
   generado desde PHP (ver MSA_Accesibilidad_Frontend::css_variables_elementor).
   ========================================================================== */

html.msa-acc-contraste-oscuro {
	--msa-acc-c-fondo: #000;
	--msa-acc-c-texto: #fff;
	--msa-acc-c-enlace: #ff0;
	--msa-acc-c-borde: #fff;
	--msa-acc-c-foco: #0ff;
}

html.msa-acc-contraste-claro {
	--msa-acc-c-fondo: #fff;
	--msa-acc-c-texto: #000;
	--msa-acc-c-enlace: #00009e;
	--msa-acc-c-borde: #000;
	--msa-acc-c-foco: #b30000;
}

html.msa-acc-contraste {
	background: var(--msa-acc-c-fondo) !important;
	color-scheme: normal;
}

html.msa-acc-contraste body,
html.msa-acc-contraste body * {
	background-color: var(--msa-acc-c-fondo) !important;
	color: var(--msa-acc-c-texto) !important;
	border-color: var(--msa-acc-c-borde) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Los pseudoelementos heredan el color, pero conservan su fondo: suelen ser
   superposiciones o adornos, y volverlos opacos podría tapar contenido. */
html.msa-acc-contraste body *::before,
html.msa-acc-contraste body *::after {
	color: inherit !important;
	border-color: var(--msa-acc-c-borde) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Sin imágenes de fondo ni degradados: el texto superpuesto sobre fotos queda legible.
   Las imágenes de contenido (<img>) se mantienen. */
html.msa-acc-contraste body,
html.msa-acc-contraste body *:not(img):not(video),
html.msa-acc-contraste body *::before,
html.msa-acc-contraste body *::after {
	background-image: none !important;
}

html.msa-acc-contraste body .elementor-background-overlay,
html.msa-acc-contraste body .elementor-background-video-container,
html.msa-acc-contraste body .elementor-background-slideshow {
	opacity: 0 !important;
}

/* Íconos SVG de Elementor y textos con degradado (background-clip: text). */
html.msa-acc-contraste body svg:not([fill="none"]),
html.msa-acc-contraste body .e-font-icon-svg,
html.msa-acc-contraste body .elementor-icon svg {
	fill: currentColor !important;
}

html.msa-acc-contraste body * {
	-webkit-text-fill-color: currentColor !important;
}

/* Enlaces y botones. */
html.msa-acc-contraste body a,
html.msa-acc-contraste body a * {
	color: var(--msa-acc-c-enlace) !important;
}

html.msa-acc-contraste body a {
	text-decoration: underline !important;
}

html.msa-acc-contraste body button,
html.msa-acc-contraste body .elementor-button,
html.msa-acc-contraste body input[type="button"],
html.msa-acc-contraste body input[type="submit"],
html.msa-acc-contraste body input[type="reset"],
html.msa-acc-contraste body [role="button"] {
	border: 2px solid var(--msa-acc-c-enlace) !important;
	color: var(--msa-acc-c-enlace) !important;
}

/* Campos de formulario. */
html.msa-acc-contraste body input,
html.msa-acc-contraste body textarea,
html.msa-acc-contraste body select {
	border: 2px solid var(--msa-acc-c-texto) !important;
}

html.msa-acc-contraste body ::placeholder {
	color: var(--msa-acc-c-texto) !important;
	opacity: 0.85 !important;
}

html.msa-acc-contraste body :focus-visible {
	outline: 3px solid var(--msa-acc-c-foco) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   Modo para daltonismo (filtros SVG definidos en el pie de página)
   Se aplican a <html>: es el único elemento donde «filter» no rompe los
   elementos con position: fixed (encabezados fijos, popups, el propio menú).
   ========================================================================== */

html.msa-acc-daltonismo-protanopia {
	filter: url("#msa-accesibilidad-filtro-protanopia") !important;
}

html.msa-acc-daltonismo-deuteranopia {
	filter: url("#msa-accesibilidad-filtro-deuteranopia") !important;
}

html.msa-acc-daltonismo-tritanopia {
	filter: url("#msa-accesibilidad-filtro-tritanopia") !important;
}

/* ==========================================================================
   Cursor ampliado (48 × 48 px)
   ========================================================================== */

html.msa-acc-cursor,
html.msa-acc-cursor body,
html.msa-acc-cursor body * {
	cursor: url("../img/cursor-flecha.svg") 6 3, url("../img/cursor-flecha.png") 6 3, auto !important;
}

html.msa-acc-cursor body a[href],
html.msa-acc-cursor body a[href] *,
html.msa-acc-cursor body button,
html.msa-acc-cursor body button *,
html.msa-acc-cursor body [role="button"],
html.msa-acc-cursor body [role="button"] *,
html.msa-acc-cursor body [role="link"],
html.msa-acc-cursor body label,
html.msa-acc-cursor body select,
html.msa-acc-cursor body summary,
html.msa-acc-cursor body input[type="button"],
html.msa-acc-cursor body input[type="submit"],
html.msa-acc-cursor body input[type="reset"],
html.msa-acc-cursor body input[type="checkbox"],
html.msa-acc-cursor body input[type="radio"],
html.msa-acc-cursor body input[type="image"],
html.msa-acc-cursor body .elementor-button,
html.msa-acc-cursor body .elementor-button *,
html.msa-acc-cursor body [onclick] {
	cursor: url("../img/cursor-mano.svg") 20 4, url("../img/cursor-mano.png") 20 4, pointer !important;
}

/* ==========================================================================
   Resaltado de enlaces
   Subrayado + doble contorno (negro y amarillo) visible sobre fondos claros y oscuros.
   ========================================================================== */

html.msa-acc-enlaces body a[href] {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px solid #000 !important;
	outline-offset: 1px !important;
	box-shadow: 0 0 0 5px #ffd400 !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* El enlace enfocado se distingue de los demás enlaces resaltados (WCAG 2.4.7). */
html.msa-acc-enlaces body a[href]:focus-visible {
	outline: 4px solid #000 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #fff, 0 0 0 10px #ffd400 !important;
	background-color: #ffd400 !important;
	color: #000 !important;
}

/* ==========================================================================
   Ocultar imágenes
   Se usa opacity (y no display/visibility) para que las imágenes sigan en el
   árbol de accesibilidad y los lectores de pantalla anuncien su texto alternativo.
   ========================================================================== */

html.msa-acc-sin-imagenes body img,
html.msa-acc-sin-imagenes body picture,
html.msa-acc-sin-imagenes body video:not([controls]),
html.msa-acc-sin-imagenes body [role="img"],
html.msa-acc-sin-imagenes body .elementor-background-video-container,
html.msa-acc-sin-imagenes body .elementor-background-slideshow {
	opacity: 0 !important;
}

html.msa-acc-sin-imagenes body,
html.msa-acc-sin-imagenes body *,
html.msa-acc-sin-imagenes body *::before,
html.msa-acc-sin-imagenes body *::after {
	background-image: none !important;
}

/* ==========================================================================
   Opciones de texto: espaciado entre letras, entre palabras e interlineado.
   El nivel «Amplio» coincide con los valores del criterio WCAG 1.4.12.
   ========================================================================== */

html.msa-acc-letras-1 body * { letter-spacing: 0.06em !important; }
html.msa-acc-letras-2 body * { letter-spacing: 0.12em !important; }
html.msa-acc-letras-3 body * { letter-spacing: 0.2em !important; }

html.msa-acc-palabras-1 body * { word-spacing: 0.08em !important; }
html.msa-acc-palabras-2 body * { word-spacing: 0.16em !important; }
html.msa-acc-palabras-3 body * { word-spacing: 0.32em !important; }

html.msa-acc-interlineado-1 body * { line-height: 1.5 !important; }
html.msa-acc-interlineado-2 body * { line-height: 1.8 !important; }
html.msa-acc-interlineado-3 body * { line-height: 2.1 !important; }

/* Alineación: solo sobre bloques de texto, para no desarmar la grilla del sitio. */
html[class*="msa-acc-alineacion-"] body :is(p, li, h1, h2, h3, h4, h5, h6, dd, dt, blockquote, figcaption, caption, td, th, label, .elementor-heading-title, .elementor-widget-text-editor, .elementor-icon-box-content, .elementor-image-box-content) {
	text-align: var(--msa-acc-alineacion) !important;
}

html.msa-acc-alineacion-izquierda { --msa-acc-alineacion: left; }
html.msa-acc-alineacion-centro { --msa-acc-alineacion: center; }
html.msa-acc-alineacion-derecha { --msa-acc-alineacion: right; }
html.msa-acc-alineacion-justificado { --msa-acc-alineacion: justify; }

/* ==========================================================================
   Navegación por teclado: indicador de foco reforzado (blanco, negro y amarillo),
   visible sobre cualquier fondo.
   ========================================================================== */

html.msa-acc-teclado body :focus,
html.msa-acc-teclado body :focus-visible,
html.msa-acc-teclado body a[href]:focus {
	outline: 3px solid #000 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 8px #ffd400 !important;
}

/* Con los enlaces resaltados, el enlace enfocado lleva además fondo amarillo para distinguirse. */
html.msa-acc-teclado.msa-acc-enlaces body a[href]:focus {
	background-color: #ffd400 !important;
	color: #000 !important;
}

/* El anfitrión del menú cuenta como enfocado cuando el foco está dentro del panel;
   el indicador ya lo dibuja el propio panel. */
html body #msa-accesibilidad:focus,
html body #msa-accesibilidad:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* El enlace «Ir al contenido» del tema queda visible al recibir el foco. */
html.msa-acc-teclado body .skip-link:focus {
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	z-index: 100000 !important;
}

/* ==========================================================================
   Pausa de animaciones
   Las animaciones se resuelven al instante en su estado final (en lugar de
   anularlas), para que ningún elemento quede invisible a mitad de una entrada.
   ========================================================================== */

html.msa-acc-pausa,
html.msa-acc-pausa *,
html.msa-acc-pausa *::before,
html.msa-acc-pausa *::after {
	animation-duration: 0.01ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

/* Animaciones de entrada de Elementor: el contenido se muestra directamente. */
html.msa-acc-pausa .elementor-invisible {
	visibility: visible !important;
}

/* Videos de fondo de YouTube o Vimeo de Elementor: además de pedirles la pausa por su
   API (JS), se ocultan, y queda visible el fondo o la imagen alternativa de la sección. */
html.msa-acc-pausa .elementor-background-video-container iframe {
	visibility: hidden !important;
}

/* Efectos de movimiento de Elementor Pro (scroll y mouse). */
html.msa-acc-pausa .elementor-motion-effects-element,
html.msa-acc-pausa .elementor-motion-effects-layer {
	transform: none !important;
}