/**
 * Estilos del frontend de la aplicación de Formación RGPD (XeriDat):
 * página de acceso, panel del alumno (módulos, visor, aceptación, test) y página pública de
 * verificación de certificados.
 *
 * Marca: los colores salen del propio logotipo de XeriDat. Están definidos UNA sola vez, en
 * el bloque de variables de la sección 1; el resto del archivo solo usa esas variables, así
 * que cambiar la identidad visual es tocar únicamente ese bloque.
 *
 * Accesibilidad: el naranja de marca sobre blanco solo da ~3:1 de contraste, por debajo de lo
 * recomendado para texto. Por eso el naranja se usa solo en elementos gráficos (barra de
 * progreso, bordes, anillo de foco) y NUNCA para texto pequeño; botones y títulos van en azul
 * (contraste ~11:1 sobre blanco).
 *
 * Todo está acotado a las páginas de la aplicación (clase rgpd-pagina-sin-chrome en <body> y
 * contenedor .rgpd-app), para no tocar el resto del sitio. Sin fuentes externas: se usa la
 * tipografía del sistema, así no se envía ninguna petición a servidores de terceros (RGPD).
 */

/* ==========================================================================
   1. Variables de marca
   ========================================================================== */
body.rgpd-pagina-sin-chrome {
	--rgpd-azul: #004064;            /* Azul de las letras "DAT" del logotipo */
	--rgpd-azul-oscuro: #002f4b;     /* Hover de los botones */
	--rgpd-azul-claro: #e8f0f5;      /* Fondos suaves */
	--rgpd-naranja: #d77f12;         /* Naranja del escudo y de las letras "XERI" */
	--rgpd-naranja-claro: #fdf2e2;
	--rgpd-texto: #1d2b36;
	--rgpd-texto-suave: #51606b;
	--rgpd-fondo: #f3f6f8;
	--rgpd-tarjeta: #ffffff;
	--rgpd-borde: #d5dee5;
	--rgpd-ok: #1e7b3a;
	--rgpd-ok-claro: #e6f4ea;
	--rgpd-error: #b3261e;
	--rgpd-error-claro: #fdeceb;
	--rgpd-radio: 12px;
	--rgpd-sombra: 0 1px 2px rgba(0, 64, 100, 0.08), 0 4px 14px rgba(0, 64, 100, 0.06);
}

/* ==========================================================================
   2. Temas (GeneratePress y Divi): ocultar cabecera/pie/barra lateral/título de página según el tema
      y aprovechar todo el ancho. (Específico de cada tema: si se usa otro tema, revisar esta sección.)
   ========================================================================== */
body.rgpd-pagina-sin-chrome {
	background: var(--rgpd-fondo);
}

body.rgpd-pagina-sin-chrome .site-header,
body.rgpd-pagina-sin-chrome .site-footer,
body.rgpd-pagina-sin-chrome #footer-widgets,
body.rgpd-pagina-sin-chrome .entry-header,
body.rgpd-pagina-sin-chrome #right-sidebar,
body.rgpd-pagina-sin-chrome #left-sidebar {
	display: none !important;
}

/* Tema Divi: oculta la cabecera (menú superior) y el pie, tanto los clásicos como los creados con
   el Theme Builder, y quita el hueco que Divi reserva arriba para la cabecera fija. */
body.rgpd-pagina-sin-chrome #top-header,
body.rgpd-pagina-sin-chrome #main-header,
body.rgpd-pagina-sin-chrome #main-footer,
body.rgpd-pagina-sin-chrome .et-l--header,
body.rgpd-pagina-sin-chrome .et-l--footer {
	display: none !important;
}

body.rgpd-pagina-sin-chrome #page-container {
	padding-top: 0 !important;
}

body.rgpd-pagina-sin-chrome .site-content {
	display: block;
}

body.rgpd-pagina-sin-chrome .content-area,
body.rgpd-pagina-sin-chrome #primary {
	width: 100%;
	max-width: none;
}

body.rgpd-pagina-sin-chrome .inside-article,
body.rgpd-pagina-sin-chrome .site-main > article {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0;
}

body.rgpd-pagina-sin-chrome .site-main {
	margin: 0;
}

/* GeneratePress limita el contenido a 1200 px (.grid-container): en nuestras páginas se amplía
   para aprovechar las pantallas grandes. El ancho real lo marca .rgpd-app (sección 3). */
body.rgpd-pagina-sin-chrome .grid-container {
	max-width: 1480px;
}

/* Tema Divi: oculta el título de la página y usa todo el ancho (en móvil Divi deja el contenedor
   #main-content .container al 80 %, lo que sumaba márgenes de más a cada lado). */
body.rgpd-pagina-sin-chrome .entry-title.main_title {
	display: none !important;
}

body.rgpd-pagina-sin-chrome #main-content .container {
	width: 100%;
	max-width: none;
}

/* ==========================================================================
   3. Contenedor general y elementos básicos
   ========================================================================== */
.rgpd-app {
	box-sizing: border-box;
	max-width: 1360px;
	margin: 0 auto;
	padding: clamp(18px, 3vw, 40px) clamp(12px, 3vw, 32px) 56px;
	color: var(--rgpd-texto);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
}

.rgpd-app *,
.rgpd-app *::before,
.rgpd-app *::after {
	box-sizing: border-box;
}

/* Reglas genéricas de texto dentro de :where(), que tiene especificidad cero: así cualquier
   clase concreta de más abajo (por ejemplo .rgpd-visor-contador) las supera sin discusión. */
:where(.rgpd-app) h1,
:where(.rgpd-app) h2,
:where(.rgpd-app) h3 {
	color: var(--rgpd-azul);
	line-height: 1.25;
	margin: 0 0 0.6rem;
}

:where(.rgpd-app) h2 { font-size: 1.6rem; }
:where(.rgpd-app) h3 { font-size: 1.2rem; }

:where(.rgpd-app) p { margin: 0 0 0.9rem; }

:where(.rgpd-app) a {
	color: var(--rgpd-azul);
	text-decoration: underline;
	text-underline-offset: 2px;
}

:where(.rgpd-app) a:hover { color: var(--rgpd-azul-oscuro); }

/* Los enlaces con aspecto de botón conservan su texto blanco */
.rgpd-app a.rgpd-boton,
.rgpd-app a.rgpd-boton:hover { color: #ffffff; text-decoration: none; }

/* Atributo "hidden": lo usa el JavaScript para mostrar y ocultar las vistas. El !important
   evita que cualquier regla de "display" del tema lo anule. */
.rgpd-app [hidden] { display: none !important; }

/* Texto solo para lectores de pantalla */
.rgpd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Anillo de foco visible para el teclado, en el naranja de marca */
.rgpd-app a:focus-visible,
.rgpd-app button:focus-visible,
.rgpd-app input:focus-visible,
.rgpd-app select:focus-visible {
	outline: 3px solid var(--rgpd-naranja);
	outline-offset: 2px;
}

/* ==========================================================================
   4. Cabecera con el logotipo
   ========================================================================== */
.rgpd-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding-bottom: 16px;
	margin-bottom: 24px;
	border-bottom: 3px solid var(--rgpd-naranja);
}

.rgpd-cabecera-centrada {
	justify-content: center;
}

.rgpd-logo {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
}

.rgpd-usuario {
	margin: 0;
	font-size: 0.95rem;
	color: var(--rgpd-texto-suave);
	text-align: right;
}

.rgpd-usuario strong { color: var(--rgpd-texto); }

/* ==========================================================================
   5. Tarjetas y avisos
   ========================================================================== */
.rgpd-tarjeta {
	background: var(--rgpd-tarjeta);
	border: 1px solid var(--rgpd-borde);
	border-radius: var(--rgpd-radio);
	box-shadow: var(--rgpd-sombra);
	padding: 22px;
	margin-bottom: 20px;
}

.rgpd-aviso {
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 5px solid var(--rgpd-azul);
	background: var(--rgpd-azul-claro);
	margin-bottom: 16px;
}

.rgpd-aviso-error {
	border-left-color: var(--rgpd-error);
	background: var(--rgpd-error-claro);
	color: var(--rgpd-error);
	font-weight: 600;
}

.rgpd-login-ayuda {
	margin: 16px 0 0 0;
	font-size: 0.95rem;
}

/* ==========================================================================
   6. Botones y formularios
   ========================================================================== */
.rgpd-boton {
	display: inline-block;
	padding: 0.65rem 1.3rem;
	border: 2px solid var(--rgpd-azul);
	border-radius: 8px;
	background: var(--rgpd-azul);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rgpd-boton:hover:not(:disabled) {
	background: var(--rgpd-azul-oscuro);
	border-color: var(--rgpd-azul-oscuro);
	color: #ffffff;
}

.rgpd-boton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.rgpd-boton-secundario {
	background: transparent;
	color: var(--rgpd-azul);
}

.rgpd-boton-secundario:hover:not(:disabled) {
	background: var(--rgpd-azul-claro);
	border-color: var(--rgpd-azul);
	color: var(--rgpd-azul-oscuro);
}

.rgpd-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.rgpd-campo { margin-bottom: 16px; }

.rgpd-campo label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.rgpd-app input[type="text"],
.rgpd-app input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 2px solid var(--rgpd-borde);
	border-radius: 8px;
	background: #ffffff;
	color: var(--rgpd-texto);
	font: inherit;
}

.rgpd-app input[type="text"]:focus,
.rgpd-app input[type="password"]:focus {
	border-color: var(--rgpd-azul);
}

/* ==========================================================================
   7. Página de acceso
   ========================================================================== */
.rgpd-app-acceso { max-width: 460px; }

.rgpd-app-acceso .rgpd-boton { width: 100%; }

.rgpd-acceso-titulo {
	text-align: center;
	font-size: 1.4rem;
}

/* ==========================================================================
   8. Panel del alumno: curso y progreso
   ========================================================================== */
.rgpd-curso-titulo { font-size: 1.55rem; }

.rgpd-curso-meta {
	margin: 0 0 14px;
	color: var(--rgpd-texto-suave);
}

.rgpd-progreso-etiqueta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--rgpd-azul);
}

.rgpd-app progress {
	display: block;
	width: 100%;
	height: 14px;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	background: var(--rgpd-azul-claro);
}

.rgpd-app progress::-webkit-progress-bar {
	background: var(--rgpd-azul-claro);
	border-radius: 999px;
}

.rgpd-app progress::-webkit-progress-value {
	background: var(--rgpd-naranja);
	border-radius: 999px;
	transition: width 0.3s ease;
}

.rgpd-app progress::-moz-progress-bar {
	background: var(--rgpd-naranja);
	border-radius: 999px;
}

/* ==========================================================================
   9. Lista de módulos
   ========================================================================== */
.rgpd-modulos {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 10px;
	counter-reset: rgpd-modulo;
}

.rgpd-modulo {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var(--rgpd-borde);
	border-radius: 10px;
	background: #ffffff;
	counter-increment: rgpd-modulo;
}

.rgpd-modulo-icono {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--rgpd-azul-claro);
	color: var(--rgpd-azul);
	font-weight: 700;
}

.rgpd-modulo-icono::before { content: counter(rgpd-modulo); }

.rgpd-modulo[data-estado="completado"] .rgpd-modulo-icono {
	background: var(--rgpd-ok);
	color: #ffffff;
}

.rgpd-modulo[data-estado="completado"] .rgpd-modulo-icono::before { content: "\2713"; }

.rgpd-modulo-titulo {
	/* flex-basis 0: el título ocupa el espacio que sobra junto al icono, sin forzar nunca un
	   salto de línea (en pantallas pequeñas solo el botón pasa a la línea de abajo). */
	flex: 1 1 0;
	min-width: 0;
	font-weight: 600;
}

.rgpd-modulo[data-estado="completado"] .rgpd-modulo-titulo { color: var(--rgpd-texto-suave); }

/* ==========================================================================
   10. Visor de pantallas de un módulo
   ========================================================================== */
.rgpd-visor-barra { margin-bottom: 18px; }

.rgpd-visor-imagen:empty { display: none; }

.rgpd-visor-imagen { text-align: center; margin-bottom: 16px; }

.rgpd-visor-imagen img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.rgpd-visor-texto {
	font-size: 1.25rem;
	line-height: 1.65;
	min-height: 6rem;
}

.rgpd-visor-titulo {
	margin: 0 0 12px;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--rgpd-azul);
}

.rgpd-visor-texto p { margin: 0 0 14px; }
.rgpd-visor-texto p:last-child { margin-bottom: 0; }

.rgpd-visor-texto ul {
	margin: 0 0 14px;
	padding-left: 1.4em;
}

.rgpd-visor-texto li { margin-bottom: 8px; }
.rgpd-visor-texto li::marker { color: var(--rgpd-naranja); }

/* Recuadro destacado (líneas que empiezan por "> "): ejemplo, aviso o idea clave. */
.rgpd-recuadro {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-left: 5px solid var(--rgpd-naranja);
	border-radius: 8px;
	background: var(--rgpd-naranja-claro);
}

.rgpd-recuadro p { margin: 0 0 8px; }
.rgpd-recuadro p:last-child { margin-bottom: 0; }

/* Comprobaciones por módulo (pregunta de comprobación y caso práctico) */
.rgpd-comp-opciones {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.rgpd-comp-enunciado {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1.55;
}

.rgpd-comp-opcion {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px;
	padding: 12px 14px;
	border: 2px solid var(--rgpd-borde);
	border-radius: 10px;
	background: var(--rgpd-tarjeta);
	font-size: 1.05rem;
	line-height: 1.5;
	cursor: pointer;
}

.rgpd-comp-opcion:hover { border-color: var(--rgpd-azul); }
.rgpd-comp-opcion:focus-within { outline: 3px solid var(--rgpd-naranja); outline-offset: 2px; }
.rgpd-comp-opcion input { margin-top: 0.3em; flex: 0 0 auto; accent-color: var(--rgpd-azul); }

/* Tras responder: la correcta en verde y, si falló, la elegida en rojo. */
.rgpd-comp-opcion-correcta { border-color: var(--rgpd-ok); background: var(--rgpd-ok-claro); }
.rgpd-comp-opcion-fallo { border-color: var(--rgpd-error); background: var(--rgpd-error-claro); }

.rgpd-feedback {
	margin-top: 16px;
	padding: 12px 16px;
	border-left: 5px solid var(--rgpd-azul);
	border-radius: 8px;
	background: var(--rgpd-azul-claro);
}

.rgpd-feedback p { margin: 0 0 8px; }
.rgpd-feedback p:last-child { margin-bottom: 0; }
.rgpd-feedback-ok { border-left-color: var(--rgpd-ok); background: var(--rgpd-ok-claro); }
.rgpd-feedback-ko { border-left-color: var(--rgpd-error); background: var(--rgpd-error-claro); }

.rgpd-visor-contador {
	margin: 14px 0 0;
	color: var(--rgpd-texto-suave);
	font-size: 0.9rem;
	font-weight: 600;
}

/* ==========================================================================
   11. Aceptación de compromisos y test final
   ========================================================================== */
.rgpd-compromiso {
	border-left: 5px solid var(--rgpd-naranja);
	background: var(--rgpd-naranja-claro);
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 16px;
}

.rgpd-compromiso p:last-child { margin-bottom: 0; }

.rgpd-casilla {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-weight: 600;
	cursor: pointer;
}

.rgpd-casilla input {
	width: 22px;
	height: 22px;
	accent-color: var(--rgpd-azul);
}

.rgpd-pregunta {
	min-width: 0;
	margin: 0 0 16px;
	padding: 0 18px 12px;
	border: 1px solid var(--rgpd-borde);
	border-radius: 10px;
	background: #ffffff;
}

/* Por defecto un <legend> se dibuja "montado" sobre el borde del <fieldset> y deja un hueco
   enorme debajo. Al hacerlo flotar a todo el ancho se comporta como un encabezado normal
   dentro de la tarjeta (y sigue siendo el nombre accesible del grupo de respuestas). */
.rgpd-pregunta legend {
	float: left;
	width: 100%;
	margin: 0 0 6px;
	padding: 16px 0 4px;
	font-weight: 700;
	color: var(--rgpd-azul);
}

.rgpd-pregunta legend + * { clear: both; }

.rgpd-opcion {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 6px;
	padding: 10px 12px;
	border: 2px solid transparent;
	border-radius: 8px;
	cursor: pointer;
}

.rgpd-opcion:hover { background: var(--rgpd-azul-claro); }

.rgpd-opcion:has(input:checked) {
	background: var(--rgpd-azul-claro);
	border-color: var(--rgpd-azul);
}

.rgpd-opcion input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--rgpd-azul);
}

.rgpd-resultado {
	border-radius: var(--rgpd-radio);
	padding: 20px 22px;
	border: 2px solid var(--rgpd-borde);
	background: #ffffff;
}

.rgpd-resultado-aprobado {
	border-color: var(--rgpd-ok);
	background: var(--rgpd-ok-claro);
}

.rgpd-resultado-suspenso {
	border-color: var(--rgpd-error);
	background: var(--rgpd-error-claro);
}

.rgpd-resultado-puntuacion {
	font-size: 2rem;
	font-weight: 800;
	color: var(--rgpd-azul);
	margin: 0 0 4px;
}

.rgpd-formacion-completada {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
	padding: 14px 18px;
	border-radius: 10px;
	border: 2px solid var(--rgpd-ok);
	background: var(--rgpd-ok-claro);
	font-weight: 600;
}

.rgpd-formacion-completada p { margin: 0; }

/* ==========================================================================
   12. Verificación pública de certificados
   ========================================================================== */
.rgpd-verificacion-formulario {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}

.rgpd-verificacion-formulario .rgpd-campo {
	flex: 1 1 220px;
	margin: 0;
}

.rgpd-sello {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 1.05rem;
	color: #ffffff;
	margin-bottom: 14px;
}

.rgpd-sello-valido { background: var(--rgpd-ok); }
.rgpd-sello-anulado { background: var(--rgpd-error); }

.rgpd-datos {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 18px;
	margin: 0 0 14px;
}

.rgpd-datos dt {
	font-weight: 700;
	color: var(--rgpd-azul);
}

.rgpd-datos dd { margin: 0; }

.rgpd-nota-legal {
	font-size: 0.85rem;
	color: var(--rgpd-texto-suave);
	margin: 0;
}

/* ==========================================================================
   13. Pantallas pequeñas
   ========================================================================== */
@media (max-width: 600px) {
	.rgpd-app { padding: 18px 12px 40px; }

	.rgpd-cabecera { justify-content: center; text-align: center; }

	.rgpd-usuario { text-align: center; }

	.rgpd-tarjeta { padding: 16px; }

	.rgpd-modulo { flex-wrap: wrap; }

	.rgpd-modulo .rgpd-boton { flex: 1 1 100%; }

	.rgpd-acciones .rgpd-boton { flex: 1 1 100%; }

	.rgpd-visor-texto { font-size: 1.1rem; }

	.rgpd-datos { grid-template-columns: 1fr; gap: 0; }
	.rgpd-datos dd { margin-bottom: 10px; }
}

/* ==========================================================================
   14. Pantallas grandes y tabletas
   Diseño fluido: el contenido usa el ancho disponible (hasta 1360 px) y se reorganiza en
   tres tramos: móvil (hasta 600 px, sección 13), tableta (601-899 px) y ordenador (900 px
   en adelante). Tamaños de letra y espacios con clamp() para que crezcan suavemente.
   ========================================================================== */

/* Texto del visor: crece con la pantalla, sin pasar de un ancho cómodo de lectura. */
.rgpd-visor-texto {
	font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem);
	max-width: 62rem;
}

.rgpd-visor-titulo { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); }

.rgpd-comp-enunciado { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
.rgpd-comp-opcion { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }

/* Zonas táctiles cómodas (mínimo ~48 px) en opciones y botones */
.rgpd-comp-opcion { min-height: 48px; align-items: center; }
.rgpd-boton { min-height: 44px; }

/* Tableta: tarjetas con más aire y botones de acción repartidos */
@media (min-width: 601px) and (max-width: 899px) {
	.rgpd-tarjeta { padding: 26px; }
	.rgpd-acciones .rgpd-boton { flex: 1 1 auto; }
}

/* Ordenador: más espacio, módulos en dos columnas y visor con imagen al lado del texto */
@media (min-width: 900px) {
	.rgpd-tarjeta { padding: 32px 36px; }

	.rgpd-modulos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 20px;
	}

	/* Si la pantalla tiene imagen: imagen a la izquierda, texto y botones a la derecha.
	   Sin imagen, el texto ocupa todo el ancho como antes. */
	#rgpd-vista-modulo:has(.rgpd-visor-imagen:not(:empty)) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: 40px;
		align-items: start;
	}

	#rgpd-vista-modulo:has(.rgpd-visor-imagen:not(:empty)) .rgpd-visor-barra { grid-column: 1 / -1; }
	#rgpd-vista-modulo:has(.rgpd-visor-imagen:not(:empty)) .rgpd-visor-imagen { grid-column: 1; grid-row: 2 / span 3; margin-bottom: 0; position: sticky; top: 24px; }
	#rgpd-vista-modulo:has(.rgpd-visor-imagen:not(:empty)) .rgpd-visor-texto { grid-column: 2; grid-row: 2; }
	#rgpd-vista-modulo:has(.rgpd-visor-imagen:not(:empty)) .rgpd-visor-contador { grid-column: 2; grid-row: 3; }
	#rgpd-vista-modulo:has(.rgpd-visor-imagen:not(:empty)) .rgpd-acciones { grid-column: 2; grid-row: 4; }
}

/* Pantallas muy grandes: algo más de letra en el cuerpo general */
@media (min-width: 1400px) {
	.rgpd-app { font-size: 1.05rem; }
}

/* Móviles pequeños: botones a todo el ancho y márgenes mínimos */
@media (max-width: 400px) {
	.rgpd-app { padding-left: 10px; padding-right: 10px; }
	.rgpd-tarjeta { padding: 14px; }
	.rgpd-boton { width: 100%; }
	.rgpd-comp-opcion { padding: 12px; gap: 10px; }
}

/* Vista previa de administrador (franja de aviso y notas) */
.rgpd-vista-previa {
	margin: 0 0 18px;
	padding: 12px 16px;
	border: 2px solid var(--rgpd-naranja);
	border-radius: 10px;
	background: var(--rgpd-naranja-claro);
	line-height: 1.5;
}

.rgpd-vista-previa a { margin-left: 8px; font-weight: 600; }
.rgpd-vista-previa-nota { color: var(--rgpd-texto-suave); font-size: 0.95rem; }
.rgpd-resultado .rgpd-boton + .rgpd-boton { margin-left: 8px; }

/* Respetar a quien tiene desactivadas las animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
	.rgpd-app *,
	.rgpd-app *::before,
	.rgpd-app *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   Repaso del test (fallos y respuestas correctas, tras enviar el test)
   ========================================================================== */
.rgpd-resultado-acciones { margin-top: 14px; }
.rgpd-resultado .rgpd-resultado-acciones .rgpd-boton + .rgpd-boton { margin-left: 0; }

.rgpd-repaso {
	margin-top: 22px;
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid var(--rgpd-borde);
	border-radius: var(--rgpd-radio);
	color: var(--rgpd-texto);
}

.rgpd-repaso h4 { margin: 0 0 4px; color: var(--rgpd-azul); }
.rgpd-repaso-resumen { margin: 0 0 16px; color: var(--rgpd-texto-suave); }

.rgpd-repaso-lista {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rgpd-repaso-pregunta {
	padding: 14px 16px;
	border: 1px solid var(--rgpd-borde);
	border-left-width: 6px;
	border-radius: 10px;
}

.rgpd-repaso-acierto { border-left-color: var(--rgpd-ok); }
.rgpd-repaso-fallo { border-left-color: var(--rgpd-error); }

.rgpd-repaso-enunciado {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--rgpd-azul);
}

.rgpd-repaso-estado {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.85rem;
	white-space: nowrap;
}

.rgpd-repaso-acierto .rgpd-repaso-estado { color: var(--rgpd-ok); }
.rgpd-repaso-fallo .rgpd-repaso-estado { color: var(--rgpd-error); }

.rgpd-repaso-respuestas {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rgpd-repaso-respuesta {
	padding: 8px 12px;
	border: 2px solid transparent;
	border-radius: 8px;
}

.rgpd-repaso-correcta {
	background: var(--rgpd-ok-claro);
	border-color: var(--rgpd-ok);
}

/* La respuesta elegida que NO era la correcta (el fallo). */
.rgpd-repaso-elegida:not(.rgpd-repaso-correcta) {
	background: var(--rgpd-error-claro);
	border-color: var(--rgpd-error);
}

.rgpd-repaso-etiqueta {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 9px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}

.rgpd-repaso-etiqueta-correcta { color: var(--rgpd-ok); }
.rgpd-repaso-etiqueta-elegida { color: var(--rgpd-azul); }
.rgpd-repaso-elegida:not(.rgpd-repaso-correcta) .rgpd-repaso-etiqueta-elegida { color: var(--rgpd-error); }

/* ==========================================================================
   Mis cursos (pantalla principal del alumno)
   ========================================================================== */
.rgpd-lista-cursos-titulo { margin: 0 0 16px; color: var(--rgpd-azul); }

.rgpd-lista-cursos {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.rgpd-curso-tarjeta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.rgpd-curso-tarjeta .rgpd-curso-titulo { margin: 0; font-size: 1.25rem; }
.rgpd-curso-tarjeta .rgpd-acciones { margin-top: auto; padding-top: 14px; }

.rgpd-curso-estado { margin: 4px 0 0; font-size: 0.9rem; font-weight: 700; }
.rgpd-estado-pendiente { color: var(--rgpd-texto-suave); }
.rgpd-estado-en_curso { color: var(--rgpd-azul); }
.rgpd-estado-completado { color: var(--rgpd-ok); }

.rgpd-volver-cursos { margin: 0 0 12px; }
.rgpd-volver-cursos a { font-weight: 700; }

/* Un enlace <a> con aspecto de botón SECUNDARIO: la regla ".rgpd-app a.rgpd-boton" (texto blanco)
   pesa más que ".rgpd-boton-secundario" y dejaba el texto blanco sobre fondo transparente. */
.rgpd-app a.rgpd-boton.rgpd-boton-secundario { color: var(--rgpd-azul); }
.rgpd-app a.rgpd-boton.rgpd-boton-secundario:hover { color: var(--rgpd-azul-oscuro); }