/* ==========================================================================
   Unibac — Cumplimiento ITA
   Correcciones de accesibilidad visual. Todos los valores de color de este
   archivo fueron calculados y verificados contra WCAG 2.1 AA (4.5:1 para
   texto normal, 3:1 para texto grande). El ratio resultante va en cada
   comentario para que sea auditable sin volver a medir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foco visible  (Certificado 6 · WCAG 2.4.7 AA)
   En el sitio hay 42 reglas `:focus { outline: none }` procedentes de
   plugins y del editor de WordPress. Estas reglas las revierten.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #012237 !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* Fondo claro detrás del foco cuando el elemento está sobre el rojo institucional. */
.elementor-social-icon:focus-visible,
[style*="B20D15"] a:focus-visible,
[style*="AE282C"] a:focus-visible {
	outline-color: #FFFFFF !important;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, .45) !important;
}

/* Navegadores sin :focus-visible. */
@supports not selector(:focus-visible) {
	a:focus, button:focus, input:focus, select:focus, textarea:focus {
		outline: 3px solid #012237 !important;
		outline-offset: 2px !important;
	}
}

/* --------------------------------------------------------------------------
   2. Enlace de salto al contenido  (Certificado 6 · WCAG 2.4.1 A)
   Debe ser invisible hasta recibir el foco, y entonces plenamente visible.
   -------------------------------------------------------------------------- */

.ubc-ita-ancla {
	display: block;
	position: relative;
	top: -80px;      /* compensa la cabecera fija al saltar */
	height: 0;
	overflow: hidden;
}

.pojo-skip-link:focus,
.pojo-skip-content:focus {
	position: fixed !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 100000 !important;
	width: auto !important;
	height: auto !important;
	padding: 12px 20px !important;
	clip: auto !important;
	clip-path: none !important;
	background: #012237 !important;
	color: #FFFFFF !important;   /* 14.6:1 */
	font-size: 16px !important;
	text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   3. Contraste  (Certificado 3 · WCAG 1.4.3 AA)
   13 combinaciones únicas de color fallan hoy en la página de inicio.
   -------------------------------------------------------------------------- */

/* 3.1  Pie de página: dorado #C4AE7C sobre rojo #B20D15 → 3.27:1.
        Se aclara el dorado manteniendo la identidad visual. */
.text-pie-2,
.text-pie-2 strong,
[style*="B20D15"] .elementor-icon-list-text,
[style*="B20D15"] .elementor-button-text {
	color: #F2E4C4 !important;   /* 5.63:1 sobre #B20D15 */
}

/* 3.2  Barra superior roja: texto oscuro sobre #AE282C → 2.44:1 y 2.73:1. */
[style*="AE282C"],
[style*="AE282C"] a,
[style*="AE282C"] span {
	color: #FFFFFF !important;   /* 6.69:1 */
}

/* 3.3  Pie sobre blanco: gris #B3BBC6 → 1.94:1. Es el peor del sitio. */
.elementor-widget-container a[href*="horalegal"],
.site-footer a,
footer a:not(.elementor-button):not(.elementor-social-icon) {
	color: #5F6A78 !important;   /* 5.5:1 sobre blanco */
}

/* 3.4  Tarjetas de programas académicos: texto blanco sobre fondos claros.
        Se oscurece el fondo en lugar de cambiar el texto, para conservar
        el diseño. Sustituir los valores si Comunicaciones define otros. */
.ubc-ita-tarjeta-teatro   { background-color: #926F4B !important; } /* era #C19363 → blanco 4.57:1 */
.ubc-ita-tarjeta-diseno   { background-color: #777669 !important; } /* era #B0AE9B → blanco 4.59:1 */
.ubc-ita-tarjeta-musica   { background-color: #83755D !important; } /* era #A69576 → blanco 4.50:1 */

/* 3.5  Fecha de las noticias: #7A7A7A sobre blanco → 4.29:1, por debajo del mínimo. */
time,
.elementor-post-date,
.post-date {
	color: #6B7480 !important;   /* 4.74:1 */
}

/* 3.6  Botón «ver más» en rosa claro sobre fondo claro → 2.52:1. */
.elementor-button-text {
	color: inherit;
}
a.elementor-button[class*="size-sm"] .elementor-button-text {
	color: #B20D15;              /* 6.4:1 sobre blanco */
}

/* --------------------------------------------------------------------------
   4. h1 inyectada cuando la página no tiene ninguna  (Certificado 4)
   No es decorativa: es la estructura que un lector de pantalla necesita.
   Se muestra solo si el diseño no aporta ya un título visible.
   -------------------------------------------------------------------------- */

.ubc-ita-h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Utilitaria para texto solo para lectores de pantalla. */
.ubc-ita-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   5. Control del carrusel  (Certificado 7 · WCAG 2.2.2 A)
   El botón lo crea ita-a11y.js; aquí solo su presentación.
   -------------------------------------------------------------------------- */

.ubc-ita-pausa {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 2px solid #FFFFFF;
	border-radius: 3px;
	background: rgba(1, 34, 55, .88);
	color: #FFFFFF;              /* 12.9:1 sobre el fondo del botón */
	font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	cursor: pointer;
}

.ubc-ita-pausa:hover {
	background: #012237;
}

/* --------------------------------------------------------------------------
   6. Movimiento reducido  (WCAG 2.3.3 AAA, buena práctica)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   7. Tamaño mínimo del área táctil  (WCAG 2.5.8 AA en 2.2)
   -------------------------------------------------------------------------- */

.elementor-social-icon,
.pojo-a11y-toolbar-link,
.slick-prev,
.slick-next {
	min-width: 24px;
	min-height: 24px;
}