/**
 * Pistis Accessibility Focus Fix - Estilos Frontend
 * Optimizado para temas de Elementor (Hello Elementor, Astra, OceanWP, etc.)
 */

:root {
	--pistis-focus-color: #005fcc;
	--pistis-focus-width: 2px;
	--pistis-focus-offset: 2px;
	--pistis-focus-shadow: rgba(0, 95, 204, 0.3);
}

/* =========================================================================
   1. INDICADOR GLOBAL DE FOCO VISIBLE
   Asegura que cualquier navegación por teclado tenga un foco nítido y visible.
   Se utiliza box-shadow como refuerzo para evitar que contenedores de Elementor
   con "overflow: hidden" recorten el outline exterior.
   ========================================================================= */
:focus-visible {
	outline: var(--pistis-focus-width) solid var(--pistis-focus-color) !important;
	outline-offset: var(--pistis-focus-offset) !important;
	box-shadow: 0 0 0 calc(var(--pistis-focus-width) + 1px) var(--pistis-focus-shadow) !important;
}

/* Evitar que clics del ratón dejen el outline pegado en navegadores modernos */
:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* =========================================================================
   2. ELEMENTOS ESPECÍFICOS DE ELEMENTOR Y TEMAS DERIVADOS
   Aumentar especificidad para superar los resets agresivos de temas y widgets.
   ========================================================================= */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor select:focus-visible,
.elementor textarea:focus-visible,
.elementor [role="button"]:focus-visible,
.elementor [tabindex="0"]:focus-visible,
.elementor-button:focus-visible,
.elementor-tab-title:focus-visible,
.elementor-accordion-title:focus-visible,
.elementor-toggle-title:focus-visible,
.elementor-swiper-button:focus-visible,
.elementor-nav-menu a:focus-visible,
.elementor-menu-toggle:focus-visible,
.elementor-pagination a:focus-visible,
.elementor-search-form__submit:focus-visible,
.elementor-icon:focus-visible,
.dialog-close-button:focus-visible {
	outline: var(--pistis-focus-width) solid var(--pistis-focus-color) !important;
	outline-offset: var(--pistis-focus-offset) !important;
	box-shadow: 0 0 0 calc(var(--pistis-focus-width) + 1px) var(--pistis-focus-shadow) !important;
}

/* =========================================================================
   3. COMPATIBILIDAD CON ELEMENTOR NAV MENU (SUBMENÚS ACCESIBLES)
   En Elementor los submenús solo se abren en :hover por defecto. Con esto,
   al navegar con la tecla Tab los submenús se mantienen visibles mientras
   cualquier elemento hijo tenga el foco.
   ========================================================================= */
.elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu,
.elementor-nav-menu--main .menu-item-has-children:focus-within > .elementor-nav-menu--dropdown,
.elementor-nav-menu--dropdown .menu-item-has-children:focus-within > .sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	transform: none !important;
	clip: auto !important;
	height: auto !important;
	max-height: none !important;
}

/* Mejorar visualización del enlace padre cuando el submenú tiene foco */
.elementor-nav-menu .menu-item-has-children:focus-within > a {
	opacity: 1 !important;
}

/* =========================================================================
   4. SALTO AL CONTENIDO (SKIP-TO-CONTENT) PARA HELLO ELEMENTOR Y THEME BUILDER
   Asegura que los enlaces para lectores de pantalla se hagan visibles al recibir foco.
   ========================================================================= */
.elementor-screen-only:focus,
.screen-reader-text:focus,
.skip-link:focus,
a.skip-to-content:focus {
	background-color: #ffffff !important;
	color: #111111 !important;
	border: 2px solid var(--pistis-focus-color) !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
	clip: auto !important;
	clip-path: none !important;
	display: inline-block !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	height: auto !important;
	left: 12px !important;
	top: 12px !important;
	line-height: normal !important;
	padding: 12px 22px !important;
	position: fixed !important;
	text-decoration: none !important;
	width: auto !important;
	z-index: 999999 !important;
}

/* =========================================================================
   5. SOPORTE DE MODO DE ALTO CONTRASTE (WINDOWS / ACCESIBILIDAD SO)
   ========================================================================= */
@media (forced-colors: active) {
	:focus-visible,
	.elementor a:focus-visible,
	.elementor button:focus-visible,
	.elementor-button:focus-visible {
		outline: 3px solid Highlight !important;
		outline-offset: 3px !important;
	}
}