/*
 * UGC Accesibilidad — barra flotante, panel y modos visuales.
 * Todos los componentes usan los tokens del proyecto (tokens.css).
 * Iconos: Material Symbols Rounded (Google Fonts).
 */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0');

/* --- Icono Material Symbols --- */
.ugc-acc-root .ugc-msi,
.ugc-acc-skip .ugc-msi {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

/* --- Skip link --- */
.ugc-acc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ugc-color-primary-dark);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 var(--ugc-radius-sm) 0;
	font-weight: 700;
	text-decoration: none;
}

.ugc-acc-skip:focus {
	left: 8px;
	top: 8px;
	outline: 3px solid var(--ugc-color-secondary);
	outline-offset: 2px;
}

/* --- Botón flotante (esquina inferior) --- */
#ugc-acc-toggle {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--ugc-color-primary-dark);
	color: #fff;
	box-shadow: var(--ugc-shadow-md);
	cursor: pointer;
	transition: background var(--ugc-transition-fast), box-shadow var(--ugc-transition-fast), transform var(--ugc-transition-fast);
}

#ugc-acc-toggle:hover {
	background: var(--ugc-color-primary);
	box-shadow: var(--ugc-shadow-lg);
}

#ugc-acc-toggle:focus-visible {
	outline: 3px solid var(--ugc-color-primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px #fff;
}

#ugc-acc-toggle .ugc-msi {
	font-size: 28px;
}

#ugc-acc-root[data-position="bottom-left"] #ugc-acc-toggle {
	left: 24px;
	right: auto;
}

/* --- Panel de preferencias --- */
#ugc-acc-panel {
	position: fixed;
	bottom: 88px;
	right: 24px;
	z-index: 999991;
	width: min(360px, calc(100vw - 32px));
	max-height: calc(100vh - 120px);
	overflow: auto;
	background: var(--ugc-surface);
	color: var(--ugc-text-primary);
	border: 1px solid var(--ugc-border);
	border-radius: var(--ugc-radius-lg);
	box-shadow: var(--ugc-shadow-lg);
	padding: 16px;
	font-family: var(--ugc-font-sans);
}

#ugc-acc-root[data-position="bottom-left"] #ugc-acc-panel {
	left: 24px;
	right: auto;
}

.ugc-acc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ugc-border);
}

.ugc-acc-header h2 {
	margin: 0;
	font-size: 1.05rem;
	color: var(--ugc-text-primary);
}

#ugc-acc-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ugc-border);
	border-radius: var(--ugc-radius-sm);
	background: var(--ugc-surface-soft);
	color: var(--ugc-text-primary);
	cursor: pointer;
}

#ugc-acc-close:hover {
	background: var(--ugc-surface-muted);
}

#ugc-acc-close .ugc-msi {
	font-size: 20px;
}

.ugc-acc-desc {
	margin: 10px 0 4px;
	color: var(--ugc-text-secondary);
	font-size: 0.9rem;
	line-height: 1.45;
}

/* --- Secciones y botones --- */
.ugc-acc-sections {
	display: grid;
	gap: 14px;
	margin-top: 12px;
}

.ugc-acc-section h3 {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ugc-text-muted);
}

.ugc-acc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.ugc-acc-grid button {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 10px;
	border: 1px solid var(--ugc-border);
	border-radius: var(--ugc-radius-sm);
	background: var(--ugc-surface-soft);
	color: var(--ugc-text-primary);
	font: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: background var(--ugc-transition-fast), border-color var(--ugc-transition-fast), color var(--ugc-transition-fast);
}

.ugc-acc-grid button .ugc-msi {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--ugc-color-primary-dark);
}

.ugc-acc-grid button:hover {
	background: var(--ugc-surface-muted);
	border-color: var(--ugc-color-secondary);
}

.ugc-acc-grid button[aria-pressed="true"] {
	background: var(--ugc-color-primary-dark);
	border-color: var(--ugc-color-primary-dark);
	color: #fff;
}

.ugc-acc-grid button[aria-pressed="true"] .ugc-msi {
	color: #fff;
}

.ugc-acc-grid button:focus-visible {
	outline: 3px solid var(--ugc-color-primary);
	outline-offset: 2px;
}

.ugc-acc-grid button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.ugc-acc-grid button.ugc-acc-reset {
	grid-column: 1 / -1;
	justify-content: center;
	background: var(--ugc-color-primary);
	border-color: var(--ugc-color-primary);
	color: #fff;
}

.ugc-acc-grid button.ugc-acc-reset .ugc-msi {
	color: #fff;
}

.ugc-acc-footer {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--ugc-border);
	font-size: 0.82rem;
}

.ugc-acc-footer a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ugc-color-primary-dark);
	font-weight: 700;
}

/* --- Estado del tamaño de texto --- */
.ugc-acc-font-status {
	margin: 8px 0 0;
	color: var(--ugc-text-secondary);
	font-size: 0.82rem;
}

.ugc-acc-font-status output {
	font-weight: 700;
	color: var(--ugc-color-primary-dark);
}

/* =========================================================
   MODOS VISUALES
   ========================================================= */

/* Alto contraste (negro/blanco/amarillo) */
html.ugc-acc-contrast,
html.ugc-acc-contrast body {
	background: #000 !important;
}

html.ugc-acc-contrast *:not(img):not(video):not(canvas):not(svg):not(use):not(path):not(source) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html.ugc-acc-contrast a,
html.ugc-acc-contrast a span {
	color: #ff0 !important;
	text-decoration: underline !important;
}

html.ugc-acc-contrast img,
html.ugc-acc-contrast video,
html.ugc-acc-contrast canvas {
	filter: contrast(1.2);
}

/* Amarillo sobre negro */
html.ugc-acc-yellowblack,
html.ugc-acc-yellowblack body {
	background: #000 !important;
}

html.ugc-acc-yellowblack *:not(img):not(video):not(canvas):not(svg):not(use):not(path):not(source) {
	background-color: #000 !important;
	background-image: none !important;
	color: #ffd400 !important;
	border-color: #ffd400 !important;
}

html.ugc-acc-yellowblack a {
	color: #fff !important;
	text-decoration: underline !important;
}

/* Invertir */
html.ugc-acc-invert {
	filter: invert(1) hue-rotate(180deg);
}

/* Escala de grises */
html.ugc-acc-grayscale {
	filter: grayscale(1);
}

/* Daltonismo (simulación aproximada) */
html.ugc-acc-protanopia {
	filter: url(#ugc-acc-protanopia);
}

html.ugc-acc-deuteranopia {
	filter: url(#ugc-acc-deuteranopia);
}

html.ugc-acc-tritanopia {
	filter: url(#ugc-acc-tritanopia);
}

/* Resaltar enlaces: señal no cromática (subrayado + negrita) */
html.ugc-acc-links a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	font-weight: 700 !important;
}

/* Espaciado de texto (1.4.12) */
html.ugc-acc-spacing body,
html.ugc-acc-spacing body * {
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
	line-height: 1.8 !important;
}

html.ugc-acc-spacing p,
html.ugc-acc-spacing li {
	line-height: 2 !important;
}

/* Foco reforzado */
html.ugc-acc-focus a:focus,
html.ugc-acc-focus button:focus,
html.ugc-acc-focus input:focus,
html.ugc-acc-focus select:focus,
html.ugc-acc-focus textarea:focus,
html.ugc-acc-focus [tabindex]:focus,
html.ugc-acc-focus :focus-visible {
	outline: 4px solid var(--ugc-color-secondary) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px #000 !important;
	border-radius: 4px;
}

/* Pausar animaciones: terminan de inmediato y no se repiten.
   No se usa animation:none porque YOOtheme revela contenido con animaciones
   de entrada y quedaría invisible. */
html.ugc-acc-motion {
	scroll-behavior: auto !important;
}

html.ugc-acc-motion *,
html.ugc-acc-motion *::before,
html.ugc-acc-motion *::after {
	animation-duration: 0.001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}

html.ugc-acc-motion img[src*=".gif" i] {
	image-rendering: auto;
}

/* Fuente legible: solo elementos de texto. No usar `body *` porque pisa
   las fuentes de iconos (Material Symbols, UIkit, Font Awesome). */
html.ugc-acc-dyslexia body,
html.ugc-acc-dyslexia h1,
html.ugc-acc-dyslexia h2,
html.ugc-acc-dyslexia h3,
html.ugc-acc-dyslexia h4,
html.ugc-acc-dyslexia h5,
html.ugc-acc-dyslexia h6,
html.ugc-acc-dyslexia p,
html.ugc-acc-dyslexia li,
html.ugc-acc-dyslexia blockquote,
html.ugc-acc-dyslexia td,
html.ugc-acc-dyslexia th,
html.ugc-acc-dyslexia label,
html.ugc-acc-dyslexia button,
html.ugc-acc-dyslexia input,
html.ugc-acc-dyslexia select,
html.ugc-acc-dyslexia textarea,
html.ugc-acc-dyslexia a {
	font-family: Verdana, Tahoma, Arial, sans-serif !important;
	letter-spacing: 0.02em !important;
	word-spacing: 0.08em !important;
}

html.ugc-acc-dyslexia .ugc-msi,
html.ugc-acc-dyslexia [class*="material-symbols"] {
	font-family: 'Material Symbols Rounded' !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
}

/* Cursor grande */
html.ugc-acc-cursor,
html.ugc-acc-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 4l26 20-15 3-5 15z' fill='%23000' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") 12 4, auto !important;
}

/* Resaltar títulos */
html.ugc-acc-titles h1,
html.ugc-acc-titles h2,
html.ugc-acc-titles h3,
html.ugc-acc-titles h4,
html.ugc-acc-titles h5,
html.ugc-acc-titles h6 {
	background: rgba(0, 145, 61, 0.12) !important;
	box-shadow: 0 0 0 3px rgba(0, 145, 61, 0.12);
	border-radius: 4px;
}

/* Quitar justificado */
html.ugc-acc-alignleft p,
html.ugc-acc-alignleft li,
html.ugc-acc-alignleft blockquote {
	text-align: left !important;
}

/* Ocultar imágenes (solo imágenes/medios, no iconos SVG) */
html.ugc-acc-hideimages img,
html.ugc-acc-hideimages picture,
html.ugc-acc-hideimages video,
html.ugc-acc-hideimages iframe {
	display: none !important;
}

/* Resaltar párrafo al pasar el cursor */
html.ugc-acc-paragraph p:hover {
	background: rgba(0, 145, 61, 0.10) !important;
	box-shadow: 0 0 0 4px rgba(0, 145, 61, 0.10);
	border-radius: 4px;
}

/* A+/A-: el tema define el menú principal en px (18px/19px). Sin esta
   compensación, el tamaño de raíz no lo escala. A 100% los valores rem
   equivalen exactamente al diseño original. */
html[data-ugc-acc-font] .uk-navbar-nav > li > a,
html[data-ugc-acc-font] .uk-navbar-item,
html[data-ugc-acc-font] .uk-navbar-toggle {
	font-size: 1.125rem !important;
}

html[data-ugc-acc-font] .uk-navbar-primary .uk-navbar-nav > li > a {
	font-size: 1.1875rem !important;
}