/*
 * Correcciones de accesibilidad de la parte pública (layout pages4).
 * Se carga en último lugar para prevalecer sobre Bootstrap, las hojas de
 * estilo propias y el CSS personalizado del centro.
 *
 * WCAG 2.1 - 2.4.7 Foco visible (y 1.3.4 / 1.3.5 / 2.4.3 del informe IRA).
 * Se usa :focus-visible para que el indicador solo aparezca al navegar con
 * teclado; la interacción con ratón no cambia visualmente.
 */

:root {
	--a11y-foco-color: #0b3d91;
	--a11y-foco-halo: #ffffff;
}

/* Indicador de foco de doble color: contorno oscuro + halo claro, visible
   sobre fondos claros y oscuros. Anula el outline:0 de Bootstrap y los
   box-shadow:none de style_nuevo_login.css / style_catalalgo_nuevo.css /
   slick.css sin modificar esas hojas. En campos de texto los navegadores
   aplican :focus-visible también al hacer clic. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.btn-close:focus-visible,
.form-control:focus-visible,
.formulario_elemento_text:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.navbar-toggler:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.slick-list:focus-visible,
.slick-arrow:focus-visible,
.slick-dots button:focus-visible {
	outline: 3px solid var(--a11y-foco-color) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--a11y-foco-halo) !important;
}

/* Los contenedores de modales/offcanvas reciben el foco por programa al
   abrirse (tabindex="-1"); no se marca el cuadro completo. */
.modal:focus-visible,
.offcanvas:focus-visible,
[tabindex="-1"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Tarjetas del catálogo (cursos, categorías, formadores): el enlace es en
   línea y envuelve bloques, por lo que su contorno no rodea la tarjeta.
   Se dibuja el indicador sobre el bloque interior. */
a:focus-visible > div {
	outline: 3px solid var(--a11y-foco-color) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px var(--a11y-foco-halo) !important;
}

a:has(> div):focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/*
 * WCAG 2.1 - 1.3.1 Información y relaciones (estructura de encabezados).
 * Algunos elementos han dejado de ser encabezados (contadores, subtítulos,
 * botones, fechas) o han cambiado de nivel. Estas reglas conservan su aspecto.
 */

/* Réplica del estilo base de encabezados de Bootstrap 5.3. Se usa
   :is(p, div):where(.clase) para tener la misma especificidad que el selector
   de etiqueta hN original (0,0,1): prevalece sobre las reglas genéricas de
   p/div de Bootstrap y cede ante cualquier regla con clase de la plataforma. */
:is(p, div):where(.a11y-h1, .a11y-h2, .a11y-h3, .a11y-h4, .a11y-h5, .a11y-h6) {
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--bs-heading-color);
}
:is(p, div):where(.a11y-h1) { font-size: calc(1.375rem + 1.5vw); }
:is(p, div):where(.a11y-h2) { font-size: calc(1.325rem + .9vw); }
:is(p, div):where(.a11y-h3) { font-size: calc(1.3rem + .6vw); }
:is(p, div):where(.a11y-h4) { font-size: calc(1.275rem + .3vw); }
:is(p, div):where(.a11y-h5) { font-size: 1.25rem; }
:is(p, div):where(.a11y-h6) { font-size: 1rem; }
@media (min-width: 1200px) {
	:is(p, div):where(.a11y-h1) { font-size: 2.5rem; }
	:is(p, div):where(.a11y-h2) { font-size: 2rem; }
	:is(p, div):where(.a11y-h3) { font-size: 1.75rem; }
	:is(p, div):where(.a11y-h4) { font-size: 1.5rem; }
}

/* Títulos promovidos a H1 (único por página) que mantienen el tamaño de su
   nivel anterior. */
h1.a11y-como-h2 { font-size: calc(1.325rem + .9vw); }
h1.a11y-como-h3 { font-size: calc(1.3rem + .6vw); }
@media (min-width: 1200px) {
	h1.a11y-como-h2 { font-size: 2rem; }
	h1.a11y-como-h3 { font-size: 1.75rem; }
}

/* Tarjetas del catálogo: el título es ahora H2 o H3 según la sección y el
   subtítulo un párrafo. Mismo aspecto que las reglas originales
   (.nuevo_curso_completo_overlay h2/h3, .nueva_categoria_completa_overlay h2). */
.nuevo_curso_completo_overlay .titulo_tarjeta,
.nueva_categoria_completa_overlay .titulo_tarjeta {
	text-align: left;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: #fff;
	margin-top: 0;
	margin-bottom: .5rem;
	line-height: 1.2;
}
.nuevo_curso_completo_overlay .titulo_tarjeta { font-size: 1.3rem; }
.nueva_categoria_completa_overlay .titulo_tarjeta { font-size: 1.5rem; }

/* Tarjeta de curso (2.4.4): el enlace es solo el título (antes toda la
   tarjeta era un enlace con más de 100 caracteres). Con stretched-link toda
   la tarjeta sigue siendo clicable. El título conserva su aspecto aunque el
   centro fuerce un color para todos los enlaces (a { color: … !important }). */
.nuevo_curso_completo_overlay .titulo_tarjeta a.enlace-tarjeta {
	color: inherit !important;
	text-decoration: none;
}
/* Indicador de foco alrededor de toda la tarjeta, no solo del título */
@supports selector(:has(a)) {
	.nuevo_curso_completo_overlay a.enlace-tarjeta:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}
	.nuevo_curso_completo:has(a.enlace-tarjeta:focus-visible) {
		outline: 3px solid var(--a11y-foco-color);
		outline-offset: 2px;
		box-shadow: 0 0 0 2px var(--a11y-foco-halo);
	}
}

.nuevo_curso_completo_overlay .subtitulo_tarjeta {
	font-size: 0.8rem;
	text-align: left;
	color: #fff;
	margin-top: 5px;
	margin-bottom: .5rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	line-height: 1.2;
}

/* Ficha de curso: el rótulo "Módulo:" se separaba con <br>; ahora es un
   bloque. */
.seccion_contenido h3 > .sub-titulo {
	display: block;
	margin-bottom: 0;
}

/*
 * WCAG 2.1 - 1.4.3 Contraste (mínimo). Textos grises de la plantilla que no
 * alcanzaban 4,5:1. Se usa el gris más claro que cumple sobre cada fondo.
 */
/* Píldoras de habilidades: #999 sobre #eee (2,45:1) -> #6c6c6c (4,53:1) */
.nueva_categoria_pildora {
	color: #6c6c6c;
}
/* Rol del formador en la ficha de curso: #999 sobre blanco (2,84:1) -> #767676 (4,54:1).
   Selector reforzado porque style_ext.css se carga después. */
.cuadro-autor .subtituloautor {
	color: #767676;
}
/* Etiqueta "ABIERTO" de las lecciones en abierto: blanco sobre #339900 (3,69:1) -> #2d8800 (4,53:1) */
.c_destacado.f_verde {
	background: #2d8800;
}
/* Rótulo "Módulo:": #777 sobre #eee (3,85:1) -> #6c6c6c (4,53:1) */
.seccion_contenido h3 > .sub-titulo {
	color: #6c6c6c;
}

/*
 * Contenidos editables (páginas legales y otros contenidos del CMS).
 * El contenido corregido se envuelve en <div class="contenido-accesible"> y
 * no necesita estilos en línea ni atributos de presentación.
 */

/* 1.4.1 Uso del color: la plataforma quita el subrayado a los enlaces
   (a { text-decoration: none; }); dentro de un texto deben distinguirse sin
   depender solo del color. */
.contenido-accesible a {
	text-decoration: underline;
}

/* 1.3.1 Tablas de datos con encabezados TH. 1.4.10 Reajuste: la tabla se
   desplaza horizontalmente dentro de su contenedor en pantallas estrechas. */
.contenido-accesible .tabla-responsive {
	overflow-x: auto;
	margin: 1rem 0 1.5rem;
}
.contenido-accesible table {
	border-collapse: collapse;
	width: 100%;
}
.contenido-accesible caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	color: inherit;
	padding: 0 0 .5rem;
}
.contenido-accesible th,
.contenido-accesible td {
	border: 1px solid #000;
	padding: 8px;
	vertical-align: top;
	text-align: left;
}
/* Cabecera con el rojo corporativo original (#d11000) y texto blanco:
   contraste 5,55:1 (el texto negro original sobre ese rojo era 3,79:1). */
.contenido-accesible thead th {
	background-color: #d11000;
	color: #fff;
}
.contenido-accesible tbody th {
	font-weight: 700;
	width: 25%;
}
.contenido-accesible td > :last-child,
.contenido-accesible th > :last-child {
	margin-bottom: 0;
}

/*
 * WCAG 2.1 - 2.4.1 Evitar bloques. Enlace "Ir al contenido": oculto hasta
 * que recibe el foco (clase visually-hidden-focusable de Bootstrap); entonces
 * aparece sobre la cabecera fija.
 */
.enlace-saltar:focus,
.enlace-saltar:focus-visible {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 2000;
	padding: .75rem 1.25rem !important;
	background: #fff;
	color: #0b3d91 !important;
	font-weight: 700;
	text-decoration: underline;
	border-radius: 4px;
}
/* Al saltar, el contenido no queda tapado por la cabecera fija */
#contenido-principal {
	scroll-margin-top: 120px;
}

/*
 * WCAG 2.1 - 2.2.2 Pausar, detener, ocultar. Botón de pausa de los carruseles
 * con movimiento automático, con el mismo aspecto que sus flechas.
 */
.slick-pausa {
	display: inline-block;
	padding: 10px;
	margin-right: 5px;
	border: 0;
	border-radius: 4rem;
	background: #f6f7fb;
	color: inherit;
	font-size: 24px;
	line-height: 1.5;
	vertical-align: baseline;
	cursor: pointer;
	transition: all .2s ease-in-out;
}
.slick-pausa:hover {
	background: #eee;
}
.slick-pausa > i {
	display: inline-block;
	width: 1em;
	text-align: center;
}

/* WCAG 2.1 - 1.4.1 Uso del color. El enlace a la política de cookies del
   banner propio de la plataforma no debe distinguirse solo por el color
   (la plantilla le aplicaba text-decoration-none). */
#zona_cookies a {
	text-decoration: underline !important;
}

/* WCAG 2.1 - 3.2.2 / técnica H32. Botón de envío del buscador de la
   cabecera: lupa dentro del campo, a la derecha. Icono #6c6c6c sobre blanco
   (5,3:1, cumple 1.4.11). */
#busqueda-cabecera {
	padding-right: 2.75rem;
}
.boton-buscar-cabecera {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #6c6c6c;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}
.boton-buscar-cabecera:hover {
	color: #333;
}

/* Elementos no nativos que actúan como botón (p. ej. imagen de la ficha
   del curso que abre la presentación). */
.zona_imagen_curso[role="button"] {
	cursor: pointer;
}

/* WCAG 2.1 - 1.4.1 Uso del color. Mismo caso que `.contenido-accesible a`, pero
   en los bloques de la parte pública que se rellenan desde el gestor: si el
   texto lleva un enlace, debe distinguirse sin depender solo del color.
   Se excluyen los enlaces con aspecto de botón, que ya se distinguen por su
   fondo y su borde. */
.zona_descripcion_curso a:not(.btn),
.zona_de_la_letodologia a:not(.btn),
.cvautor a:not(.btn),
.cv_del_formador a:not(.btn),
.desc-cat a:not(.btn),
#zona_texto_exterior_superior_catalogo_ext a:not(.btn),
#zona_texto_exterior_inferior_catalogo_ext a:not(.btn) {
	text-decoration: underline;
}