/* kbrio Accesibilidad — modos de visualización elegidos por el visitante.
   Las clases se ponen en <html> desde el panel. El panel vive en Shadow DOM,
   así que estas reglas no le afectan. */

/* Mientras se miden los tamaños de letra se anulan las transiciones de Divi. */
html.kba-measuring *,
html.kba-measuring *::before,
html.kba-measuring *::after { transition: none !important; }

/* ---------- Alto contraste ---------- */
html.kba-hc-dark  { --kba-bg: #000; --kba-fg: #fff; --kba-link: #ffff00; --kba-focus: #00e5ff; color-scheme: dark; }
html.kba-hc-light { --kba-bg: #fff; --kba-fg: #000; --kba-link: #0000c8; --kba-focus: #c00000; color-scheme: light; }

html.kba-hc,
html.kba-hc body,
html.kba-hc body *:not(img):not(picture):not(video):not(iframe):not(canvas):not(svg):not(svg *) {
	background-color: var(--kba-bg) !important;
	color: var(--kba-fg) !important;
	border-color: var(--kba-fg) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.kba-hc body *,
html.kba-hc body *::before,
html.kba-hc body *::after { background-image: none !important; }
html.kba-hc body *::before,
html.kba-hc body *::after { background-color: transparent !important; }

/* Capas decorativas de Divi que tapan el texto */
html.kba-hc .et_parallax_bg,
html.kba-hc .et_pb_section_video_bg,
html.kba-hc .et_pb_slide_overlay_container,
html.kba-hc .et_pb_background_mask,
html.kba-hc .et_pb_background_pattern,
html.kba-hc .et_pb_bg_layout_dark .et_pb_slide_overlay_container { display: none !important; }

/* Enlaces y botones */
html.kba-hc a,
html.kba-hc a *:not(img) { color: var(--kba-link) !important; }
html.kba-hc a { text-decoration: underline !important; }
html.kba-hc .et_pb_button,
html.kba-hc button,
html.kba-hc input[type="submit"],
html.kba-hc input[type="button"] {
	color: var(--kba-link) !important;
	border: 2px solid var(--kba-link) !important;
	background-color: var(--kba-bg) !important;
}
html.kba-hc .et_pb_button::after,
html.kba-hc .et_pb_button::before { color: var(--kba-link) !important; }

/* Formularios */
html.kba-hc input,
html.kba-hc select,
html.kba-hc textarea { border: 2px solid var(--kba-fg) !important; }
html.kba-hc ::placeholder { color: var(--kba-fg) !important; opacity: .85 !important; }

/* Iconos de Divi (ETmodules) heredan el color del texto */
html.kba-hc .et-pb-icon,
html.kba-hc .et_pb_social_media_follow a::before,
html.kba-hc .et_pb_toggle_title::before { color: inherit !important; }

/* Cabecera fija de Divi: opaca */
html.kba-hc #main-header,
html.kba-hc #top-header,
html.kba-hc .et-l--header { opacity: 1 !important; }

/* ---------- Colores invertidos y saturación ----------
   El filtro se aplica en el elemento raíz desde JS: según la especificación
   no crea contenedor para elementos fijos, así que la cabecera fija de Divi y
   el botón «volver arriba» siguen funcionando. Las imágenes y vídeos se
   vuelven a invertir para que se vean con sus colores. */
html.kba-invert img,
html.kba-invert picture,
html.kba-invert video,
html.kba-invert iframe,
html.kba-invert [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; }

/* ---------- Alinear a la izquierda ---------- */
html.kba-align body *:not(.et-pb-icon) { text-align: left !important; }

/* ---------- Resaltar títulos ---------- */
html.kba-headings h1, html.kba-headings h2, html.kba-headings h3,
html.kba-headings h4, html.kba-headings h5, html.kba-headings h6,
html.kba-headings .et_pb_module_header {
	outline: 2px dashed currentColor !important;
	outline-offset: 4px !important;
}

/* ---------- Resaltar foco del teclado ---------- */
html.kba-focus body *:focus {
	outline: 4px solid #ff6a00 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 7px #fff, 0 0 0 9px #000 !important;
}

/* ---------- Ocultar imágenes ---------- */
html.kba-noimg body img,
html.kba-noimg body picture,
html.kba-noimg body video,
html.kba-noimg body .et_pb_image_wrap,
html.kba-noimg body .et_parallax_bg,
html.kba-noimg body .et_pb_section_video_bg { visibility: hidden !important; }
html.kba-noimg body *,
html.kba-noimg body *::before,
html.kba-noimg body *::after { background-image: none !important; }

/* ---------- Texto que se está leyendo en voz alta ---------- */
.kba-reading {
	outline: 3px solid #ff6a00 !important;
	outline-offset: 3px !important;
	background-color: rgba(255, 215, 0, .35) !important;
}

/* ---------- Resaltar enlaces ---------- */
html.kba-links a:not(.et_pb_button) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .2em !important;
	font-weight: 700 !important;
}
html.kba-links .et_pb_button,
html.kba-links a.button {
	outline: 2px dashed currentColor !important;
	outline-offset: 3px !important;
}

/* ---------- Espaciado de texto (valores de WCAG 1.4.12) ---------- */
html.kba-spacing body *:not(.et-pb-icon):not([class*="icon"]):not(i) {
	line-height: 1.6 !important;
	letter-spacing: .12em !important;
	word-spacing: .16em !important;
}
html.kba-spacing body p { margin-bottom: 2em !important; }

/* ---------- Fuente legible ----------
   Se excluyen los iconos de Divi (ETmodules / Font Awesome) para no romperlos. */
html.kba-font body *:not(.et-pb-icon):not([class*="icon"]):not([data-icon]):not(i):not(code):not(pre) {
	font-family: Verdana, Tahoma, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* ---------- Cursor grande ---------- */
html.kba-cursor,
html.kba-cursor body * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 21-13 2 8 16-6 3-8-16-11 9z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* ---------- Detener animaciones ---------- */
html.kba-still *,
html.kba-still *::before,
html.kba-still *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}
html.kba-still .et_animated,
html.kba-still .et-waypoint:not(.et_pb_counters) {
	opacity: 1 !important;
	transform: none !important;
}
html.kba-still .et_parallax_bg {
	transform: none !important;
	background-attachment: scroll !important;
}