/**
 * Accesibilidad de CUME: panel lateral y efectos de cada opción.
 *
 * Colores: solo globales del kit (y los «CUME - Accesibilidad · …» que genera
 * Core en línea). El ámbar de marca se usa tal cual, sin oscurecer.
 *
 * Capas (z-index): botones flotantes ≤ 1 000 000 · guía de lectura
 * 2 147 481 000 · panel 2 147 482 000 · chat de Kommo abierto 2 147 483 000.
 *
 * @package CUME_Core
 */

/* ==================================================================
 * Panel
 * ================================================================== */

.cume-a11y {
	--a11y-fondo: var(--e-global-color-dcd60da);
	--a11y-card: var(--e-global-color-92c8497);
	--a11y-card-hover: var(--e-global-color-811010f);
	--a11y-borde: var(--e-global-color-8297c8e);
	--a11y-divisor: var(--e-global-color-408e771);
	--a11y-titulo: var(--e-global-color-6517dcc);
	--a11y-texto: var(--e-global-color-text);
	--a11y-tenue: var(--e-global-color-3d710af);
	--a11y-marca: var(--e-global-color-secondary);
	--a11y-activo: var(--e-global-color-2ad6942);

	position: fixed;
	inset: 0;
	z-index: 2147482000;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

.cume-a11y[hidden] {
	display: none;
}

.cume-a11y__velo {
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var(--e-global-color-f9f2957) 62%, transparent );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.cume-a11y__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min( 400px, 100vw );
	border-left: 1px solid var(--a11y-borde);
	background: var(--a11y-fondo);
	color: var(--a11y-texto);
	box-shadow: -12px 0 40px color-mix( in srgb, var(--e-global-color-88eae25) 55%, transparent );
	transform: translateX( 100% );
	transition: transform 0.26s ease;
	outline: none;
}

.cume-a11y.is-abierto .cume-a11y__velo {
	opacity: 1;
}

.cume-a11y.is-abierto .cume-a11y__panel {
	transform: none;
}

html.cume-a11y-abierto {
	overflow: hidden;
}

/* El botón y el globo de bienvenida de Kommo usan la capa más alta posible:
   mientras el panel está abierto se ocultan para no taparlo. */
html.cume-a11y-abierto .amo-button-holder,
html.cume-a11y-abierto #amo-livechat:not(.amo-livechat_opened) {
	visibility: hidden !important;
}

/* Cabecera. */
.cume-a11y__cabeza {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--a11y-divisor);
	background: var(--a11y-card);
}

.cume-a11y__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 4px;
	background: var(--a11y-marca);
	color: var(--e-global-color-f299341);
}

.cume-a11y__logo svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cume-a11y__logo svg circle {
	fill: currentColor;
	stroke: none;
}

.cume-a11y .cume-a11y__titulo {
	flex: 1;
	margin: 0;
	color: var(--a11y-titulo);
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
}

.cume-a11y .cume-a11y__cerrar,
.cume-a11y .cume-a11y__cerrar:hover,
.cume-a11y .cume-a11y__cerrar:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--a11y-borde);
	border-radius: 50%;
	background: transparent;
	color: var(--a11y-titulo);
	cursor: pointer;
}

.cume-a11y .cume-a11y__cerrar:hover {
	border-color: var(--a11y-marca);
	color: var(--a11y-marca);
}

.cume-a11y__cerrar svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* Cuerpo con scroll. */
.cume-a11y__cuerpo {
	flex: 1;
	padding: 6px 20px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cume-a11y__grupo {
	padding: 16px 0;
	border-bottom: 1px solid var(--a11y-divisor);
}

.cume-a11y__grupo:last-child {
	border-bottom: 0;
}

.cume-a11y .cume-a11y__seccion {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
	color: var(--a11y-titulo);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.cume-a11y__seccion-icono {
	display: inline-flex;
	color: var(--a11y-marca);
}

.cume-a11y__seccion-icono svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cume-a11y__seccion-desc {
	margin: 0 0 10px 30px;
	color: var(--a11y-tenue);
	font-size: 13px;
}

/* Opciones (interruptores y lista). */
.cume-a11y .cume-a11y__opcion,
.cume-a11y .cume-a11y__opcion:hover,
.cume-a11y .cume-a11y__opcion:focus {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 8px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--a11y-borde);
	border-radius: 4px;
	background: var(--a11y-card);
	color: var(--a11y-texto);
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.cume-a11y .cume-a11y__opcion:hover {
	border-color: var(--a11y-activo);
	background: var(--a11y-card-hover);
}

.cume-a11y__opcion-texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
}

.cume-a11y__opcion-texto strong {
	color: var(--a11y-titulo);
	font-size: 15px;
	font-weight: 600;
}

.cume-a11y__opcion-texto span {
	color: var(--a11y-tenue);
	font-size: 13px;
}

/* Elegida (lista de daltonismo). */
.cume-a11y .cume-a11y__opcion[aria-pressed="true"] {
	border-color: var(--a11y-marca);
	background: color-mix( in srgb, var(--a11y-marca) 12%, var(--a11y-card) );
}

.cume-a11y .cume-a11y__opcion[aria-pressed="true"] strong {
	color: var(--a11y-marca);
}

/* Interruptor: apagado gris, encendido ámbar de marca. */
.cume-a11y__switch {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 28px;
	border: 1px solid var(--a11y-borde);
	border-radius: 999px;
	background: var(--a11y-fondo);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.cume-a11y__switch span {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--a11y-tenue);
	transition: transform 0.2s ease, background 0.2s ease;
}

.cume-a11y [aria-checked="true"] .cume-a11y__switch {
	border-color: var(--a11y-marca);
	background: var(--a11y-marca);
}

.cume-a11y [aria-checked="true"] .cume-a11y__switch span {
	background: var(--e-global-color-f299341);
	transform: translateX( 20px );
}

/* Botones de elección (tamaño de texto, tema). */
.cume-a11y__botones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.cume-a11y .cume-a11y__boton,
.cume-a11y .cume-a11y__boton:hover,
.cume-a11y .cume-a11y__boton:focus {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 50px;
	padding: 8px;
	border: 1px solid var(--a11y-borde);
	border-radius: 4px;
	background: var(--a11y-card);
	color: var(--a11y-titulo);
	font: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.cume-a11y .cume-a11y__boton small {
	color: var(--a11y-tenue);
	font-size: 11px;
	font-weight: 400;
}

.cume-a11y .cume-a11y__boton:hover {
	border-color: var(--a11y-activo);
	background: var(--a11y-card-hover);
}

.cume-a11y .cume-a11y__boton[aria-pressed="true"] {
	border-color: var(--a11y-marca);
	background: color-mix( in srgb, var(--a11y-marca) 12%, var(--a11y-card) );
	color: var(--a11y-marca);
}

/* Pie. */
.cume-a11y__pie {
	padding: 14px 20px 18px;
	border-top: 1px solid var(--a11y-divisor);
	background: var(--a11y-card);
}

.cume-a11y .cume-a11y__restablecer,
.cume-a11y .cume-a11y__restablecer:hover,
.cume-a11y .cume-a11y__restablecer:focus {
	width: 100%;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid var(--a11y-titulo);
	border-radius: 4px;
	background: transparent;
	color: var(--a11y-titulo);
	font: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.cume-a11y .cume-a11y__restablecer:hover {
	border-color: var(--a11y-marca);
	color: var(--a11y-marca);
}

.cume-a11y__nota {
	margin: 10px 0 0;
	color: var(--a11y-tenue);
	font-size: 12px;
	text-align: center;
}

/* Foco visible dentro del panel. */
.cume-a11y :focus-visible {
	outline: 3px solid var(--cume-a11y-foco, var(--a11y-marca));
	outline-offset: 2px;
}

/* En celular y tableta no hay puntero: sin cursor ni guía. */
@media (hover: none), (pointer: coarse) {
	.cume-a11y__solo-puntero {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cume-a11y__panel,
	.cume-a11y__velo,
	.cume-a11y__switch,
	.cume-a11y__switch span {
		transition: none;
	}
}

/* ==================================================================
 * Botón flotante de accesibilidad (#cume-a11y-flot). Usa la forma del de
 * tema (.cume-tema-flot) y va encima de él en la misma columna; lo coloca
 * cume-theme.js. El id fija el fondo en todos los estados (Astra pinta
 * button:hover/:focus de ámbar).
 * ================================================================== */

#cume-a11y-flot,
#cume-a11y-flot:hover,
#cume-a11y-flot:focus,
#cume-a11y-flot:active {
	background: var(--e-global-color-92c8497);
	color: var(--e-global-color-secondary);
	-webkit-tap-highlight-color: transparent;
}

#cume-a11y-flot:focus:not(:focus-visible) {
	border-color: var(--e-global-color-8297c8e);
	outline: none;
}

#cume-a11y-flot:hover,
#cume-a11y-flot:focus-visible {
	transform: scale( 1.08 );
	border-color: var(--e-global-color-2ad6942);
}

#cume-a11y-flot:active {
	transform: scale( 0.96 );
}

#cume-a11y-flot svg circle {
	fill: currentColor;
	stroke: none;
}

/* ==================================================================
 * Efectos de cada opción
 * ================================================================== */

/* Foco del teclado: siempre visible y con el color del kit. */
html :focus-visible {
	outline-color: var(--cume-a11y-foco);
}

/* Subrayar enlaces de texto: no botones, menús, íconos, logos ni miniaturas
   (por patrón de clase, así también los widgets nuevos que usen esos nombres). */
html[data-cume-subrayar="1"] body a:not([role="button"]):not([class*="button"]):not([class*="btn"]):not([class*="boton"]):not([class*="cta"]):not([class*="menu-item"]):not([class*="icon"]):not([class*="logo"]):not([class*="thumbnail"]):not([class*="cal-option"]) {
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Acromatopsia: escala de grises en todo el sitio. En el elemento raíz el
   filtro no rompe el header fijo ni los botones flotantes. */
html[data-cume-dalton="acro"] {
	filter: grayscale( 1 );
}

/* Reducir animaciones. */
html[data-cume-movimiento="reducido"] *,
html[data-cume-movimiento="reducido"] *::before,
html[data-cume-movimiento="reducido"] *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* Elementor oculta lo que espera su animación de entrada: se muestra ya. */
html[data-cume-movimiento="reducido"] .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

html[data-cume-movimiento="reducido"] .e-page-transition {
	display: none !important;
}

/* Contador de Elementor con el texto agrandado: el título se parte en dos
   renglones y quedaba alineado al inicio bajo un número centrado. */
html[data-cume-texto] .elementor-widget-counter .elementor-counter-title {
	text-align: center !important;
}

/* Mientras cume-a11y.js mide los tamaños originales (un instante, sin pintar). */
html.cume-a11y-midiendo *,
html.cume-a11y-midiendo *::before,
html.cume-a11y-midiendo *::after {
	transition: none !important;
}

/* Guía de lectura. */
.cume-a11y-guia {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2147481000;
	display: none;
	height: 44px;
	border-top: 2px solid var(--cume-a11y-guia);
	border-bottom: 2px solid var(--cume-a11y-guia);
	background: color-mix( in srgb, var(--cume-a11y-guia) 14%, transparent );
	pointer-events: none;
	will-change: transform;
}

html[data-cume-guia="1"] .cume-a11y-guia {
	display: block;
}

html.cume-a11y-abierto .cume-a11y-guia {
	display: none;
}