/* =====================================================================
   Cultura Milei Accesibilidad — Estilos del Widget y Modos A11y.
   Plugin Oficial para CulturaMilei.com (Desarrollado por Xavier Labanda).
   Garantiza que cualquier usuario, independiente de su capacidad visual
   o motriz, pueda acceder, leer y auditar los contenidos del sitio.
   ===================================================================== */

/* ---------- EFECTOS DE ACCESIBILIDAD ---------- */

/* 1. Tamaños de letra (Escala proporcional) */
html.a11y-fs1 { font-size: 18px !important; }
html.a11y-fs2 { font-size: 21px !important; }

/* 2. Alto Contraste (Fondo Negro Puro, Textos Blanco Reluciente, Enlaces Oro Reluciente #ffd700) */
html.a11y-contrast body {
	background-color: #000000 !important;
	color: #ffffff !important;
	--bg-main: #000000 !important;
	--bg-secondary: #0a0a0d !important;
	--bg-card: #0c0c0e !important;
	--bg-recessed: #141418 !important;
	--text-primary: #ffffff !important;
	--text-secondary: #e6e6e6 !important;
	--text-tertiary: #b8b8b8 !important;
	--gold: #ffd700 !important;
	--gold-bright: #ffff00 !important;
	--border-subtle: #444444 !important;
	--border-strong: #777777 !important;
	--border-gold: #ffd700 !important;
}

html.a11y-contrast body :not(img):not(video):not(iframe):not(svg):not(path):not(circle):not(rect):not(.cm-a11y-btn):not(.cm-a11y-panel *) {
	background-color: transparent !important;
	color: #ffffff !important;
	border-color: #767676 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Enlaces en Oro Brillante (#ffd700) con Contraste AAA (>16:1 sobre negro) */
html.a11y-contrast a, 
html.a11y-contrast a *,
html.a11y-contrast .apple-link-btn {
	color: #ffd700 !important;
	text-decoration: underline !important;
}

html.a11y-contrast button, 
html.a11y-contrast input, 
html.a11y-contrast select, 
html.a11y-contrast textarea {
	background-color: #0a0a0d !important;
	color: #ffffff !important;
	outline: 2px solid #ffd700 !important;
	border-color: #ffd700 !important;
}

/* 3. Escala de grises / Apoyo Daltonismo */
html.a11y-gray img,
html.a11y-gray video,
html.a11y-gray iframe,
html.a11y-gray svg,
html.a11y-gray canvas,
html.a11y-gray [style*="background-image"],
html.a11y-gray .hero-bg-photo,
html.a11y-gray .logo-batalla-wrapper {
	filter: grayscale(1) contrast(1.08) !important;
}

/* 4. Tipografía Legible (Sans pura con espaciado optimizado para dislexia) */
html.a11y-font body, 
html.a11y-font body * {
	font-family: Verdana, 'Segoe UI', Arial, sans-serif !important;
	letter-spacing: .02em !important;
}
html.a11y-font body {
	line-height: 1.75 !important;
	word-spacing: .06em !important;
}

/* 5. Subrayar Enlaces */
html.a11y-links a {
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
}

/* 6. Detener Animaciones / Sin Movimiento */
html.a11y-motion *, 
html.a11y-motion *::before, 
html.a11y-motion *::after {
	animation: none !important;
	transition: none !important;
}
html.a11y-motion {
	scroll-behavior: auto !important;
}
html.a11y-motion .pulse-dot {
	box-shadow: none !important;
	animation: none !important;
}

/* 7. Guía de Lectura (Línea Amarilla de Seguimiento) */
#cmReadline {
	position: fixed;
	left: 0;
	right: 0;
	height: 4px;
	background: #ffd700;
	box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
	z-index: 99990;
	pointer-events: none;
	display: none;
}
html.a11y-readline #cmReadline {
	display: block;
}

/* ---------- WIDGET (BOTÓN FLOTANTE + PANEL APPLE DESIGN) ---------- */

.cm-a11y-btn {
	position: fixed;
	right: clamp(1rem, 2.5vw, 1.8rem);
	bottom: clamp(1rem, 2.5vw, 1.8rem);
	z-index: 99980;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #ffd700;
	color: #0c0c0e;
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
	transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 0;
	line-height: 0;
}

.cm-a11y-btn:hover {
	transform: scale(1.08);
}

.cm-a11y-btn svg {
	width: 28px;
	height: 28px;
	fill: #0c0c0e;
}

.cm-a11y-panel {
	position: fixed;
	right: clamp(1rem, 2.5vw, 1.8rem);
	bottom: calc(clamp(1rem, 2.5vw, 1.8rem) + 66px);
	z-index: 99981;
	width: 320px;
	max-height: 78vh;
	overflow-y: auto;
	background: rgba(12, 12, 16, 0.95);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	color: #f4f4f0;
	border: 1px solid rgba(255, 215, 0, 0.35);
	border-radius: 18px;
	padding: 1.25rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.15);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", sans-serif;
	display: none;
	text-align: left;
}

.cm-a11y-panel.open {
	display: block;
	animation: cmPanelSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cmPanelSlideUp {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.cm-a11y-panel h3 {
	font-size: 0.88rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 1rem;
	color: #ffd700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cm-a11y-panel .row-fs {
	display: flex;
	gap: .5rem;
	align-items: center;
	margin-bottom: 1rem;
	background: rgba(255, 255, 255, 0.05);
	padding: 8px 12px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.cm-a11y-panel .row-fs span {
	font-size: .84rem;
	color: #e0e0e0;
	flex: 1;
	font-weight: 600;
}

.cm-a11y-panel .fs-btn {
	width: 36px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font: 700 .9rem var(--font-apple);
	cursor: pointer;
	transition: all 0.2s ease;
}

.cm-a11y-panel .fs-btn[aria-pressed="true"] {
	background: #ffd700 !important;
	color: #0c0c0e !important;
	border-color: #ffd700 !important;
	font-weight: 800 !important;
}

.cm-a11y-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	width: 100%;
	padding: .65rem 0;
	border: none;
	background: none;
	cursor: pointer;
	color: #f4f4f0;
	font-size: .88rem;
	font-weight: 500;
	font-family: inherit;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: color 0.2s ease;
}

.cm-a11y-toggle:hover {
	color: #ffd700;
}

.cm-a11y-toggle .sw {
	flex-shrink: 0;
	width: 38px;
	height: 22px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.18);
	position: relative;
	transition: background .25s ease;
}

.cm-a11y-toggle .sw::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	transition: left .25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cm-a11y-toggle[aria-pressed="true"] .sw {
	background: #ffd700;
}

.cm-a11y-toggle[aria-pressed="true"] .sw::after {
	left: 19px;
	background: #0c0c0e;
}

.cm-a11y-reset {
	width: 100%;
	margin-top: 1rem;
	border: 1px solid rgba(255, 215, 0, 0.4);
	background: rgba(255, 215, 0, 0.08);
	color: #ffd700;
	border-radius: 100px;
	padding: .6rem;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cm-a11y-reset:hover {
	background: #ffd700;
	color: #0c0c0e;
	border-color: #ffd700;
}

/* Crédito de autoría */
.cm-a11y-credit {
	display: block;
	margin-top: .85rem;
	text-align: center;
	font-size: .72rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55) !important;
	text-decoration: none;
}

.cm-a11y-credit:hover {
	color: #ffd700 !important;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.cm-a11y-panel {
		width: calc(100vw - 2rem);
	}
}

/* ---------- FOCUS VISIBLE — WCAG 2.4.7 ---------- */
.cm-a11y-btn:focus-visible {
	outline: 3px solid #0c0c0e;
	outline-offset: 3px;
}

.cm-a11y-toggle:focus-visible,
.fs-btn:focus-visible,
.cm-a11y-reset:focus-visible,
.cm-a11y-credit:focus-visible {
	outline: 2px solid #ffd700;
	outline-offset: 2px;
	border-radius: 4px;
}