/*
 * Accesium Suite Global Positioning & Core Overrides Stylesheet
 * This file is loaded in the main DOM. All widget elements, buttons, and card
 * styling will live inside the isolated Shadow DOM to prevent style bleeding.
 */

#accesium-suite-root {
	position: fixed !important;
	z-index: 2147483647 !important; /* Highest possible z-index to stay on top of everything */
	pointer-events: none !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Host Positioning based on Settings */
#accesium-suite-root.bottom-right {
	bottom: 24px !important;
	right: 24px !important;
}

#accesium-suite-root.bottom-left {
	bottom: 24px !important;
	left: 24px !important;
}

#accesium-suite-root.top-right {
	top: 24px !important;
	right: 24px !important;
}

#accesium-suite-root.top-left {
	top: 24px !important;
	left: 24px !important;
}

#accesium-suite-root.middle-right {
	top: 50% !important;
	right: 24px !important;
	transform: translateY(-50%) !important;
}

#accesium-suite-root.middle-left {
	top: 50% !important;
	left: 24px !important;
	transform: translateY(-50%) !important;
}

/* Global cursor overrides */
.accesium-large-cursor-active,
.accesium-large-cursor-active * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M0,0 L32,24 L16,28 L32,56 L24,60 L8,32 L0,40 Z' fill='%23000000' stroke='%23ffffff' stroke-width='4'/%3E%3C/svg%3E"), auto !important;
}

/* Reading Mask overlays */
.accesium-reading-mask-overlay {
	position: fixed;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 2147483645;
	pointer-events: none;
	transition: height 0.05s linear, top 0.05s linear;
}

/* Reading Line */
.accesium-reading-line {
	position: fixed;
	left: 0;
	height: 6px;
	background: linear-gradient(90deg, #0052FF, #7000FF);
	width: 100%;
	z-index: 2147483646;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(0, 82, 255, 0.5);
	transition: top 0.05s linear;
}

/* Keyboard navigation & hover focus outline enhancement */
.accesium-keyboard-focus-active :focus-visible,
.accesium-keyboard-focus-active :focus,
.accesium-keyboard-focus-active a:not(#accesium-suite-root *):hover,
.accesium-keyboard-focus-active button:not(#accesium-suite-root *):hover,
.accesium-keyboard-focus-active input:not(#accesium-suite-root *):hover,
.accesium-keyboard-focus-active select:not(#accesium-suite-root *):hover,
.accesium-keyboard-focus-active textarea:not(#accesium-suite-root *):hover,
.accesium-keyboard-focus-active [role="button"]:not(#accesium-suite-root *):hover {
	outline: 4px solid var(--accesium-primary, #0052FF) !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 15px var(--accesium-primary, #0052FF) !important;
}

/* Global Font Overrides (excluding the widget root) */
.accesium-font-opendyslexic *:not(#accesium-suite-root *),
.accesium-font-opendyslexic {
	font-family: 'OpenDyslexic', sans-serif !important;
}
.accesium-font-lexend *:not(#accesium-suite-root *),
.accesium-font-lexend {
	font-family: 'Lexend', sans-serif !important;
}
.accesium-font-atkinson *:not(#accesium-suite-root *),
.accesium-font-atkinson {
	font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

/* Global Letter Spacing / Line Height modifiers (excluding the widget root) */
.accesium-spacing-low *:not(#accesium-suite-root *),
.accesium-spacing-low {
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}
.accesium-spacing-medium *:not(#accesium-suite-root *),
.accesium-spacing-medium {
	letter-spacing: 0.16em !important;
	word-spacing: 0.20em !important;
}
.accesium-spacing-high *:not(#accesium-suite-root *),
.accesium-spacing-high {
	letter-spacing: 0.24em !important;
	word-spacing: 0.30em !important;
}

.accesium-lineheight-low *:not(#accesium-suite-root *),
.accesium-lineheight-low {
	line-height: 1.5 !important;
}
.accesium-lineheight-medium *:not(#accesium-suite-root *),
.accesium-lineheight-medium {
	line-height: 1.8 !important;
}
.accesium-lineheight-high *:not(#accesium-suite-root *),
.accesium-lineheight-high {
	line-height: 2.2 !important;
}

/* Stop animations */
body.accesium-stop-animations-active,
.accesium-stop-animations-active *,
.accesium-stop-animations-active *::before,
.accesium-stop-animations-active *::after {
	animation: none !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
	animation-play-state: paused !important;
	animation-iteration-count: 1 !important;
	transition: none !important;
	transition-property: none !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
	will-change: auto !important;
}

/* ==========================================================================
   VISUAL CONTRAST & COLOR FILTERS (WCAG COMPLIANT)
   ========================================================================== */

/* 1. Grayscale (Escala de Grises) */
body.accesium-grayscale {
	filter: grayscale(100%) !important;
}

/* 2. Color Inversion (Inversión Cromática completa) */
body.accesium-invert {
	filter: invert(100%) !important;
}

/* 3. High Contrast (Alto Contraste Estricto - Amarillo sobre Negro)
   Strategy: Body gets black background, ALL descendants become transparent
   so overlays/positioned elements can't create opaque layers that hide content.
   This works universally across Elementor, Bricks, Divi, Oxygen, WPBakery, etc.
 */
body.accesium-high-contrast {
	background-color: #000000 !important;
	background-image: none !important;
	color: #FFFF00 !important;
}

body.accesium-high-contrast * {
	background-color: transparent !important;
	background-image: none !important;
	color: #FFFF00 !important;
	border-color: #FFFF00 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

body.accesium-high-contrast *::before,
body.accesium-high-contrast *::after {
	background-color: transparent !important;
	background-image: none !important;
}

body.accesium-high-contrast img,
body.accesium-high-contrast video,
body.accesium-high-contrast canvas,
body.accesium-high-contrast svg {
	background-color: transparent !important;
}

body.accesium-high-contrast a,
body.accesium-high-contrast a * {
	color: #00FFFF !important;
	text-decoration: underline !important;
}

body.accesium-high-contrast button,
body.accesium-high-contrast input,
body.accesium-high-contrast select {
	border: 2px solid #FFFF00 !important;
}

/* Exclude our widget container from being visually ruined by high contrast */
body.accesium-high-contrast #accesium-suite-root,
body.accesium-high-contrast #accesium-suite-root * {
	background-color: transparent !important;
	color: unset !important;
	border-color: transparent !important;
	filter: none !important;
}

/* 4. Dark Contrast (Premium Smart Dark Mode)
   Inverts the page theme but protects photos, videos and graphics from being inverted.
 */
body.accesium-dark-contrast {
	filter: invert(100%) hue-rotate(180deg) !important;
	background: #000000 !important;
}

/* Double-invert media tags and graphics to restore their original colors */
body.accesium-dark-contrast img,
body.accesium-dark-contrast video,
body.accesium-dark-contrast iframe,
body.accesium-dark-contrast svg:not(#accesium-suite-root *),
body.accesium-dark-contrast canvas,
body.accesium-dark-contrast picture,
body.accesium-dark-contrast [role="img"],
body.accesium-dark-contrast [style*="background-image"],
body.accesium-dark-contrast .elementor-background-overlay,
body.accesium-dark-contrast [class*="bg-image"],
body.accesium-dark-contrast [class*="background-image"],
body.accesium-dark-contrast .accesium-orb,
body.accesium-dark-contrast .accesium-panel,
body.accesium-dark-contrast .accesium-double-invert {
	filter: invert(100%) hue-rotate(180deg) !important;
}

/* ==========================================================================
   SMART TTS HIGHLIGHTS AND FLOATING SELECTION READER
   ========================================================================== */

/* Active TTS Hover Outline */
.accesium-tts-highlight {
	outline: 3px solid var(--accesium-primary, #0052FF) !important;
	outline-offset: 4px !important;
	background-color: rgba(0, 82, 255, 0.08) !important;
	border-radius: 6px !important;
	transition: outline 0.15s ease, background-color 0.15s ease !important;
	box-shadow: 0 0 15px rgba(0, 82, 255, 0.2) !important;
}

/* Floating Selection Play Button */
.accesium-selection-btn {
	position: fixed;
	z-index: 2147483647;
	background: linear-gradient(135deg, var(--accesium-primary, #0052FF), #7000FF);
	color: #ffffff !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 8px 16px !important;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	box-shadow: 0 10px 25px rgba(0, 82, 255, 0.35) !important;
	transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.15s ease !important;
	opacity: 0;
	transform: scale(0.8) translateY(10px);
	pointer-events: none;
	line-height: 1 !important;
}

.accesium-selection-btn.visible {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

.accesium-selection-btn:hover {
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 82, 255, 0.45) !important;
}

.accesium-selection-btn:active {
	transform: scale(0.95);
}

.accesium-selection-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}

/* ==========================================================================
   SAFE CORRECTIVE ZOOM LAYOUTS (PREVENTS RIGID CONTAINER HEIGHT CLIPPING)
   ========================================================================== */

html.accesium-zoom-active h1,
html.accesium-zoom-active h2,
html.accesium-zoom-active h3,
html.accesium-zoom-active h4,
html.accesium-zoom-active h5,
html.accesium-zoom-active h6,
html.accesium-zoom-active p,
html.accesium-zoom-active li,
html.accesium-zoom-active a,
html.accesium-zoom-active .elementor-widget-container,
html.accesium-zoom-active .elementor-heading-title,
html.accesium-zoom-active [class*="card"],
html.accesium-zoom-active [class*="box"],
html.accesium-zoom-active [class*="item"],
html.accesium-zoom-active [class*="container"] {
	height: auto !important; /* Force rigid heights to stretch and wrap text gracefully */
	min-height: auto !important;
	max-height: none !important;
}

/* Ensure no outer scroll on mobile screens while scrolling zoomed layout */
@media (max-width: 480px) {
	html, body {
		overflow-x: hidden !important; /* Block horizontal viewport shaking entirely */
	}
}

/* ==========================================================================
   RESPECT PREFERS-REDUCED-MOTION FOR ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.accesium-reading-line {
		transition: none !important;
	}
	.accesium-reading-mask-overlay {
		transition: none !important;
	}
	.accesium-tts-highlight {
		transition: none !important;
	}
	.accesium-selection-btn {
		transition: none !important;
	}
}

/* ==========================================================================
   SPRINT 1 — GLOBAL FEATURE CLASSES
   ========================================================================== */

/* #4: Resaltar Enlaces */
body.accesium-link-highlight a,
body.accesium-link-highlight a:visited {
	outline: 2px solid var(--accesium-primary, #0052FF) !important;
	outline-offset: 2px !important;
	background-color: rgba(0, 82, 255, 0.06) !important;
	border-radius: 3px !important;
	text-decoration: underline !important;
}

/* #5: Ocultar Imágenes — Refined to catch all background images and dynamic elements */
body.accesium-hide-images img,
body.accesium-hide-images picture,
body.accesium-hide-images figure,
body.accesium-hide-images video,
body.accesium-hide-images canvas,
body.accesium-hide-images svg:not(#accesium-suite-root *),
body.accesium-hide-images [role="img"] {
	visibility: hidden !important;
	opacity: 0 !important;
}

/* Force hide all background images, including those from external CSS files */
body.accesium-hide-images *:not(#accesium-suite-root *):not(.accesium-orb):not(.accesium-panel *) {
	background-image: none !important;
}

/* #8: Badge en el Orb */
.accesium-orb-badge {
	position: absolute !important;
	top: -6px !important;
	right: -6px !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 4px !important;
	background: #EF4444 !important;
	color: #FFFFFF !important;
	border-radius: 9px !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	font-family: system-ui, sans-serif !important;
	line-height: 18px !important;
	text-align: center !important;
	pointer-events: none !important;
	border: 2px solid #FFFFFF !important;
	box-shadow: 0 2px 4px rgba(239,68,68,0.4) !important;
	animation: accesium-badge-pop 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}

@keyframes accesium-badge-pop {
	from { transform: scale(0); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   SPRINT 2 — GLOBAL FEATURE CLASSES
   ========================================================================== */

/* #10: Night Shift */
html.accesium-night-shift {
	filter: sepia(0.4) brightness(0.9) !important;
}

/* #6: Color Saturation */
html.accesium-saturation-active {
	filter: saturate(var(--accesium-saturation, 100%)) !important;
}

/* Combined filters if both active */
html.accesium-night-shift.accesium-saturation-active {
	filter: sepia(0.4) brightness(0.9) saturate(var(--accesium-saturation, 100%)) !important;
}

/* ==========================================================================
   SPRINT 3 — ALT TEXT CHECKER
   ========================================================================== */

/* Images missing alt text — red dashed border + pulsing outline */
body.accesium-alt-checker .accesium-missing-alt {
	outline: 3px dashed #EF4444 !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 12px rgba(239, 68, 68, 0.35) !important;
	position: relative !important;
}

/* Green subtle border for images WITH proper alt text */
body.accesium-alt-checker .accesium-has-alt {
	outline: 2px solid #22C55E !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   SPRINT 3 — SMART READING MODE OVERLAY (PRO)
   ========================================================================== */
#accesium-smart-reading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 2147483646;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

#accesium-smart-reading-overlay.visible {
	opacity: 1;
	pointer-events: auto;
}

.accesium-sr-container {
	background: #FFFFFF;
	border-radius: 20px;
	width: 90%;
	max-width: 720px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
	transform: translateY(20px) scale(0.95);
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#accesium-smart-reading-overlay.visible .accesium-sr-container {
	transform: translateY(0) scale(1);
}

.accesium-sr-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	border-bottom: 1px solid #E2E8F0;
	flex-shrink: 0;
}

.accesium-sr-header h2 {
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #1E293B;
	margin: 0;
}

.accesium-sr-close {
	background: #F1F5F9;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 22px;
	color: #64748B;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.accesium-sr-close:hover {
	background: #EF4444;
	color: #FFFFFF;
	transform: rotate(90deg);
}

.accesium-sr-body {
	padding: 32px 28px;
	overflow-y: auto;
	flex: 1;
	font-family: 'Georgia', 'Times New Roman', serif;
	font-size: 18px;
	line-height: 1.8;
	color: #334155;
	word-spacing: 0.05em;
}

.accesium-sr-body h1,
.accesium-sr-body h2,
.accesium-sr-body h3,
.accesium-sr-body h4 {
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #0F172A;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.accesium-sr-body p {
	margin-bottom: 1.2em;
}

.accesium-sr-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 16px 0;
}

.accesium-sr-body a {
	color: #0052FF;
	text-decoration: underline;
}

/* Scrollbar styling */
.accesium-sr-body::-webkit-scrollbar {
	width: 6px;
}

.accesium-sr-body::-webkit-scrollbar-track {
	background: transparent;
}

.accesium-sr-body::-webkit-scrollbar-thumb {
	background: #CBD5E1;
	border-radius: 3px;
}

@media (max-width: 600px) {
	.accesium-sr-container {
		width: 100%;
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}
	.accesium-sr-body {
		font-size: 16px;
		padding: 20px 18px;
	}
}