/* =====================================================================
   Kalos Accesibilidad — estilos del widget + efectos.
   Plugin standalone de Kalos MK (desarrollado por Xavier Labanda).
   Pensado para funcionar en CUALQUIER sitio: los efectos usan reglas
   genéricas; se suman selectores específicos del tema Kalos que en otros
   sitios simplemente no matchean.
   ===================================================================== */

/* ---------- Efectos ---------- */

/* Tamaño de letra (escala la tipografía basada en rem) */
html.a11y-fs1 { font-size: 18px !important; }
html.a11y-fs2 { font-size: 21px !important; }

/* Alto contraste (genérico: fondo negro, texto blanco, links amarillos) */
html.a11y-contrast body { background: #000 !important; color: #fff !important; }
html.a11y-contrast body :not(img):not(video):not(iframe):not(svg):not(path):not(circle):not(rect) {
	background-color: transparent !important;
	color: #fff !important;
	border-color: #767676 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
/* Enlaces en un dorado cálido (#ffd400): sigue teniendo contraste AAA sobre
   negro (~15:1) pero se ve más elegante y menos estridente que el amarillo puro. */
html.a11y-contrast a, html.a11y-contrast a * { color: #ffd400 !important; }
html.a11y-contrast button, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea {
	background-color: #000 !important; outline: 1px solid #767676 !important;
}
/* Tema Kalos: además pisa sus variables de color */
html.a11y-contrast body {
	--bg: #000; --bg-2: #0a0a0a; --bg-3: #111;
	--fg: #fff; --muted: #e6e6e6; --muted-2: #cfcfcf;
	--line: #6f6f6f; --line-2: #9a9a9a; --acid: #ffd400;
}

/* Alto contraste, ELEGANCIA: apagar los degradés/glows decorativos que ensucian
   el negro plano. El acid en glow daba un verde-oliva; los destellos de la
   tablet y los halos rompían la sobriedad. (Selectores del tema Kalos: en otros
   sitios no matchean.) El background:none pisa el `background` shorthand con
   gradiente, que el corte genérico de arriba —solo background-color— no alcanza. */
/* Pseudo-elementos puramente decorativos (sin contenido): se ocultan. */
html.a11y-contrast .cl-pin::before,       /* halo de la luz que sigue el scroll */
html.a11y-contrast .cine-final::before,   /* halo detrás del titular de cierre */
html.a11y-contrast .tb-screen::after {    /* destellos diagonales de la tablet */
	background: none !important;
	opacity: 0 !important;
	filter: none !important;
}
/* Elementos con contenido: sólo se les quita el degradé (el texto queda). */
html.a11y-contrast .mb-web-hero,          /* mockup "web terminada" */
html.a11y-contrast .tb-body,
html.a11y-contrast .tb-back {
	background: #000 !important;
	box-shadow: inset 0 0 0 1px #767676 !important;
}

/* OVERLAYS: en alto contraste, el corte genérico (background-color:transparent)
   deja los overlays TRANSPARENTES → abren pero se ve la página detrás y parecen
   no funcionar. Les devolvemos un fondo sólido para que SIEMPRE se vean.
   Nuestra especificidad (2 clases) le gana al corte genérico (1 clase). */
html.a11y-contrast .mobile-menu,          /* menú fullscreen del tema */
html.a11y-contrast .modal-overlay,        /* backdrop del login */
html.a11y-contrast .modal,                /* diálogo del login */
html.a11y-contrast .kalos-cookies .kc-inner, /* banner de cookies */
html.a11y-contrast .cine-dim {            /* oscurecedor del juego */
	background-color: #000 !important;
}

/* El propio widget de accesibilidad también quedaba transparente/ilegible en
   alto contraste: le restauramos fondos y colores de sus controles. */
html.a11y-contrast .kalos-a11y-panel { background-color: #0d0d0f !important; }
html.a11y-contrast .kalos-a11y-toggle .sw { background-color: #555 !important; }
html.a11y-contrast .kalos-a11y-toggle[aria-pressed="true"] .sw { background-color: #2e7d32 !important; }
html.a11y-contrast .kalos-a11y-toggle .sw::after { background-color: #fff !important; }
html.a11y-contrast .kalos-a11y-panel .fs-btn[aria-pressed="true"] { background-color: #fff !important; color: #000 !important; }

/* Escala de grises / apoyo daltonismo (medios; no rompe position:fixed) */
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-slide,
html.a11y-gray .proj-card .thumb,
html.a11y-gray .wc-media, html.a11y-gray .pc-media, html.a11y-gray .wf-media {
	filter: grayscale(1) contrast(1.05) !important;
}

/* Tipografía legible (sans simple, más aire) */
html.a11y-font body, html.a11y-font body * {
	font-family: Verdana, 'Segoe UI', Arial, sans-serif !important;
	letter-spacing: .015em !important;
}
html.a11y-font body { line-height: 1.7; word-spacing: .06em; }

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

/* 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 [data-reveal], html.a11y-motion [data-reveal-line], html.a11y-motion [data-mask],
html.a11y-motion .mask-img, html.a11y-motion .draw-line { opacity: 1 !important; transform: none !important; clip-path: none !important; }
/* Tema Kalos: cursor custom, grano y dots del snap */
html.a11y-motion .cursor, html.a11y-motion .noise { display: none !important; }
html.a11y-motion .hero h1 .line > span { transform: none !important; }
html.a11y-motion .snap-dots { display: none !important; }

/* Guía de lectura (línea horizontal que sigue el mouse) */
#kalosReadline {
	position: fixed; left: 0; right: 0; height: 3px;
	background: rgba(255,230,0,.85);
	z-index: 99990; pointer-events: none; display: none;
}
html.a11y-readline #kalosReadline { display: block; }

/* ---------- Widget (botón flotante + panel) ---------- */

.kalos-a11y-btn {
	position: fixed; right: clamp(1rem, 2.5vw, 1.8rem); bottom: clamp(1rem, 2.5vw, 1.8rem);
	z-index: 99980; width: 52px; height: 52px; border-radius: 50%;
	background: #ef4056; color: #fff; border: 2px solid rgba(255,255,255,.13);
	display: grid; place-items: center; cursor: pointer;
	box-shadow: 0 8px 24px rgba(0,0,0,.45);
	transition: transform .2s ease;
	padding: 0; line-height: 0;
}
.kalos-a11y-btn:hover { transform: scale(1.07); }
.kalos-a11y-btn svg { width: 28px; height: 28px; fill: #fff; }

.kalos-a11y-panel {
	position: fixed; right: clamp(1rem, 2.5vw, 1.8rem); bottom: calc(clamp(1rem, 2.5vw, 1.8rem) + 64px);
	z-index: 99981; width: 300px; max-height: 74vh; overflow-y: auto;
	background: #101013; color: #f4f4f0; border: 1px solid #3a3a40; border-radius: 14px;
	padding: 1.1rem; box-shadow: 0 20px 60px rgba(0,0,0,.55);
	font-family: 'Space Grotesk', Verdana, sans-serif; display: none;
	text-align: left;
}
.kalos-a11y-panel.open { display: block; }
.kalos-a11y-panel h3 { font: 800 .82rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .9rem; color: #fff; }
.kalos-a11y-panel .row-fs { display: flex; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.kalos-a11y-panel .row-fs span { font-size: .8rem; color: #b8b8b2; flex: 1; }
.kalos-a11y-panel .fs-btn { width: 38px; height: 34px; border: 1px solid #4a4a50; border-radius: 8px; background: none; color: #fff; font: 700 .9rem 'Space Mono', monospace; cursor: pointer; }
.kalos-a11y-panel .fs-btn[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }

.kalos-a11y-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: .8rem;
	width: 100%; padding: .55rem 0; border: none; background: none; cursor: pointer;
	color: #f4f4f0; font: 400 .86rem 'Space Grotesk', Verdana, sans-serif; text-align: left;
	border-bottom: 1px solid #232327;
}
.kalos-a11y-toggle .sw { flex-shrink: 0; width: 36px; height: 20px; border-radius: 100px; background: #3a3a40; position: relative; transition: background .2s; }
.kalos-a11y-toggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.kalos-a11y-toggle[aria-pressed="true"] .sw { background: #46d17f; }
.kalos-a11y-toggle[aria-pressed="true"] .sw::after { left: 18px; }

.kalos-a11y-reset { width: 100%; margin-top: .9rem; border: 1px solid #4a4a50; background: none; color: #b8b8b2; border-radius: 100px; padding: .55rem; font: .74rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.kalos-a11y-reset:hover { color: #fff; border-color: #fff; }

/* Crédito de autoría */
.kalos-a11y-credit {
	display: block; margin-top: .8rem; text-align: center;
	font: 400 .68rem 'Space Mono', monospace; letter-spacing: .04em;
	color: #8a8a92 !important; text-decoration: none;
}
.kalos-a11y-credit:hover { color: #fff !important; text-decoration: underline; }

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