/* Aislamiento frente al CSS de la plantilla de WordPress: todo lo que hay
   dentro de .tra-aeat vuelve primero a los valores por defecto del propio
   navegador (ignorando lo que traiga el tema activo) y luego se reconstruye
   aquí mismo, para que el plugin se vea siempre igual pase lo que pase en la
   web donde esté instalado. Debe ser la primera regla del fichero: el resto
   de reglas de aquí abajo tienen la misma "importancia" que esta, así que
   ganan por ir después en el propio fichero.

   Los iconos SVG (":not(svg):not(svg *)") se dejan fuera a propósito: los
   iconos del plugin (el de "Descargar tema en PDF", el nuevo del marcador de
   página...) fijan su forma y su color con atributos propios de SVG
   (d/fill/stroke/stroke-width) directamente en el <path>, y "all: revert"
   los trata igual que cualquier otro estilo y los borra por completo —en
   Chrome, el navegador incluso trata "d" (la forma del icono) como una
   propiedad más, así que con el reseteo el icono no se queda solo mal
   coloreado: desaparece del todo, sin dejar ni rastro. Al dejar fuera el
   propio <svg> y todo lo que hay dentro, esos iconos vuelven a dibujarse tal
   cual se pidieron.

   El ":not(...)" va envuelto en ":where(...)": ":where()" cuenta siempre
   como especificidad cero, así que esta regla sigue teniendo exactamente la
   misma especificidad que antes (una clase). Si no fuera así, esta regla
   pasaría a ganar (por especificidad, no por orden) a CUALQUIER otra regla
   de aquí abajo que solo use una clase para reconstruir un estilo -que es
   como está escrito todo el resto del fichero-, y todo el plugin volvería a
   verse sin estilos (justo lo que pasó al probar esto sin ":where()"). */
.tra-aeat,
.tra-aeat *:not(:where(svg, svg *)) {
	all: revert;
	box-sizing: border-box;
}

.tra-aeat {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #1d2228;
	/* Evita que Safari/Chrome en móvil "hinchen" automáticamente el tamaño
	   de letra en columnas estrechas (es la causa real de los títulos
	   desproporcionados en smartphone/tablet, más allá del tamaño que fije
	   aquí abajo cada h2). */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.tra-aeat button,
.tra-aeat input,
.tra-aeat select,
.tra-aeat textarea {
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	line-height: inherit;
}

.tra-aeat button {
	-webkit-appearance: none;
	appearance: none;
}

/* Todo el texto corrido (párrafos de preguntas, del temario, avisos, etc.) se
   justifica en vez de quedar en bandera, para una lectura más "de libro". Los
   textos cortos de un solo renglón no se ven afectados en la práctica. */
.tra-aeat p {
	text-align: justify;
}

.tra-aeat .tra-card {
	background: #fff;
	border: 1px solid #e2e4e8;
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tra-aeat h2 {
	margin-top: 0;
}

.tra-muted {
	color: #6b7280;
	font-size: 0.9em;
}

.tra-aviso-error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #7a271a;
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 16px;
}

/* Selección de modo */
.tra-modos {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.tra-modo-opcion {
	flex: 1 1 260px;
	border: 2px solid #e2e4e8;
	border-radius: 10px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.tra-modo-opcion:has(input:checked) {
	border-color: #960a25;
	background: #fbeaed;
}

.tra-modo-opcion input[type="radio"] {
	margin-bottom: 4px;
}

.tra-modo-titulo {
	font-weight: 600;
	font-size: 1.05em;
}

.tra-modo-desc {
	color: #6b7280;
	font-size: 0.9em;
}

.tra-select-anio {
	margin-top: 8px;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid #d1d5db;
	max-width: 160px;
}

.tra-btn {
	display: inline-block;
	border: none;
	border-radius: 8px;
	padding: 12px 22px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
}

/* Con .tra-aeat delante para ganar en especificidad a ".tra-aeat button"
   (que fija "color: inherit" a todos los botones como reinicio general):
   sin esto, un <button class="tra-btn tra-btn-primario"> perdía su texto
   blanco y heredaba el color de texto normal, ilegible sobre el fondo
   granate. Todo botón "de color" (fondo no neutro) lleva texto blanco. */
.tra-aeat .tra-btn-primario {
	background: #960a25;
	color: #fff;
}

.tra-aeat .tra-btn-primario:hover {
	background: #7a0820;
	color: #fff;
}

.tra-aeat .tra-btn-secundario {
	background: #e5e7eb;
	color: #1d2228;
}

.tra-aeat .tra-btn-secundario:hover {
	background: #d1d5db;
	color: #1d2228;
}

/* Examen */
.tra-examen-cabecera {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 5;
	padding-bottom: 8px;
}

.tra-cronometro {
	font-variant-numeric: tabular-nums;
	font-size: 1.4em;
	font-weight: 700;
	background: #1d2228;
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
}

.tra-cronometro.tra-tiempo-critico {
	background: #b91c1c;
}

.tra-lista-preguntas {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tra-pregunta {
	border-top: 1px solid #e2e4e8;
	padding: 20px 0;
}

.tra-pregunta:first-child {
	border-top: none;
	padding-top: 8px;
}

.tra-enunciado {
	font-weight: 600;
	margin: 0 0 12px;
}

.tra-num {
	color: #960a25;
	margin-right: 4px;
}

.tra-opciones {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tra-opcion {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid #e2e4e8;
	border-radius: 8px;
	padding: 10px 14px;
	cursor: pointer;
}

.tra-opcion:has(input:checked) {
	border-color: #960a25;
	background: #fbeaed;
}

.tra-opcion input[type="radio"] {
	margin-top: 3px;
}

.tra-letra {
	font-weight: 700;
	min-width: 18px;
}

.tra-examen-pie {
	margin-top: 24px;
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 12px 0;
	border-top: 1px solid #e2e4e8;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Examen en pausa (tarjeta en la pantalla de selección) */
.tra-examen-pausado h3 {
	margin-top: 0;
}

.tra-examen-pausado-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.tra-examen-pausado-acciones form {
	margin: 0;
}

.tra-aviso-pausado {
	text-align: center;
}

.tra-aviso-pausado .tra-btn {
	margin-top: 10px;
}

/* Resultados */
.tra-resultado-resumen {
	text-align: center;
}

.tra-nota-final {
	font-size: 2.4em;
	font-weight: 800;
	margin: 8px 0 16px;
}

.tra-apto .tra-nota-final {
	color: #15803d;
}

.tra-no-apto .tra-nota-final {
	color: #b91c1c;
}

/* Examen por tema: no hay Apto/No apto, así que la nota se muestra en un tono
   neutro (igual que la de la autoevaluación por tema) en vez de verde/rojo. */
.tra-nota-final-tema {
	color: #1d2228;
}

.tra-stats {
	display: flex;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.tra-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tra-stat-num {
	font-size: 1.6em;
	font-weight: 700;
}

.tra-stat-label {
	color: #6b7280;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.tra-revision-titulo {
	margin-top: 8px;
}

.tra-lista-revision .tra-pregunta {
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	border: 1px solid #e2e4e8;
}

.tra-pregunta-ok {
	border-color: #bbf7d0;
	background: #f0fdf4;
}

.tra-pregunta-mal {
	border-color: #fecaca;
	background: #fef2f2;
}

.tra-pregunta-blanco {
	border-color: #e5e7eb;
	background: #f9fafb;
}

.tra-pregunta-obsoleta {
	border-color: #fde68a;
	background: #fffbeb;
}

.tra-aviso-obsoleta {
	color: #92400e;
	background: #fef3c7;
	border: 1px solid #fde68a;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.85em;
	margin: 8px 0;
}

.tra-pregunta-anulada {
	border-color: #bfdbfe;
	background: #eff6ff;
}

.tra-aviso-anulada {
	color: #1e3a8a;
	background: #dbeafe;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 0.85em;
	margin: 8px 0;
}

.tra-badge-anio {
	display: inline-block;
	background: #e5e7eb;
	color: #374151;
	font-size: 0.75em;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: middle;
}

.tra-opciones-revision .tra-opcion-revision {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid #e2e4e8;
	border-radius: 8px;
	padding: 8px 12px;
	background: #fff;
}

.tra-opciones-revision .tra-opcion-revision.tra-es-correcta {
	border-color: #22c55e;
	background: #f0fdf4;
}

.tra-opciones-revision .tra-opcion-revision.tra-es-marcada-mal {
	border-color: #ef4444;
	background: #fef2f2;
}

.tra-opciones-revision .tra-opcion-revision.tra-es-marcada-bien {
	border-color: #22c55e;
	background: #dcfce7;
}

.tra-nota-respuesta {
	color: #6b7280;
	font-size: 0.85em;
	margin: 8px 0 0;
}

.tra-etiqueta-correcta,
.tra-etiqueta-marcada {
	flex-basis: 100%;
	margin-top: 4px;
	margin-left: 28px;
	font-size: 0.78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.tra-etiqueta-correcta {
	color: #16803c;
}

.tra-etiqueta-marcada {
	color: #b91c1c;
}

/* Responsive: tablet */
@media (max-width: 782px) {
	.tra-tabla-historial {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.tra-tabla-historial thead,
	.tra-tabla-historial tbody,
	.tra-tabla-historial tr {
		white-space: normal;
	}

	/* Las tablas dentro del contenido de un tema llevan texto largo en las
	   celdas (no datos cortos como la de historial), así que NO se
	   convierten en una tira horizontal con scroll: eso dejaba la columna
	   "Contenido" cortada y fuera de la pantalla sin que se notase que
	   había que arrastrar el dedo. Se quedan a ancho fijo (100%, columnas
	   repartidas a partes iguales) y el texto hace salto de línea dentro de
	   cada celda, igual que el resto de la lectura. */
	.tra-tema-texto table {
		table-layout: fixed;
		width: 100%;
	}

	.tra-tema-texto th,
	.tra-tema-texto td {
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Todos los títulos de pantalla (h2) del plugin, no solo los del
	   contenido de un tema: "Test Representante Aduanero (AEAT)", "Examen
	   por tema · Tema X...", "Mi historial", "Temario", etc. Con
	   !important porque algunas plantillas (p. ej. Avada) fijan el tamaño
	   de los encabezados globalmente con esa misma prioridad; esto solo
	   afecta a los títulos dentro de nuestro propio contenedor .tra-aeat,
	   nunca al resto de la página. */
	.tra-aeat h2 {
		font-size: 1.3em !important;
		line-height: 1.3 !important;
	}

	/* "Modo lectura" en tablet/móvil para el contenido de un tema (Encuadre,
	   desarrollo, Ideas clave, Normativa, Resumen, Casos prácticos): letra
	   de "libro" (serif), algo más grande y con más interlineado, para que
	   se lea como un ebook. Fondo papel blanco muy suave, casi
	   imperceptible, en vez de blanco puro: mantiene el contraste y encaja
	   con el resto del plugin. En escritorio no cambia nada. */
	.tra-tema-texto {
		font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		font-size: 1.05em;
		line-height: 1.85;
		background: #fffdfa;
		border-radius: 10px;
		padding: 18px 16px;
	}
	.tra-tema-texto h1,
	.tra-tema-texto h2,
	.tra-tema-texto h3 {
		font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	}
	.tra-caja-idea,
	.tra-caja-regla,
	.tra-caja-encuadre {
		font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
		line-height: 1.75;
	}
}

/* Responsive: móvil */
@media (max-width: 600px) {
	.tra-aeat .tra-card {
		padding: 16px;
	}
	/* El texto justificado (v6.3) queda bien en columnas anchas, pero en un
	   móvil estrecho crea "ríos" de espacio feos entre palabras al no haber
	   guionado automático; en bandera se lee mejor a este ancho. */
	.tra-aeat p {
		text-align: left;
	}
	.tra-stats {
		gap: 16px;
	}
	.tra-modo-opcion {
		flex: 1 1 100%;
	}
	.tra-examen-cabecera {
		flex-direction: column;
		align-items: stretch;
	}
	.tra-cronometro {
		text-align: center;
	}
	.tra-eval-tema-cabecera {
		flex-direction: column;
		align-items: stretch;
	}
	.tra-eval-tema-cabecera form,
	.tra-eval-tema-cabecera button {
		width: 100%;
	}
	.tra-resultado-resumen .tra-stats,
	.tra-eval-resumen .tra-stats {
		gap: 12px;
	}
}

/* Responsive: móvil pequeño */
@media (max-width: 420px) {
	.tra-aeat {
		font-size: 15px;
		padding: 0 12px;
	}
	.tra-cabecera-usuario {
		flex-direction: column;
		align-items: stretch;
	}
	.tra-nav {
		width: 100%;
	}
	.tra-nav-link {
		flex: 1 1 auto;
		text-align: center;
	}
	.tra-nota-final,
	.tra-eval-nota {
		font-size: 1.7em;
	}
	.tra-btn {
		width: 100%;
		text-align: center;
	}
	.tra-aeat h2 {
		font-size: 1.15em !important;
		line-height: 1.3 !important;
	}
}

/* Login */
.tra-login {
	max-width: 420px;
	margin: 0 auto;
}

.tra-campo {
	display: block;
	margin-bottom: 14px;
}

.tra-campo span {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9em;
}

.tra-campo input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 1em;
	box-sizing: border-box;
}

/* Cabecera con navegación entre pestañas */
.tra-cabecera-usuario {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e4e8;
}

.tra-saludo {
	font-size: 0.95em;
	color: #374151;
}

.tra-nav {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.tra-nav-link {
	padding: 8px 14px;
	border-radius: 6px;
	text-decoration: none;
	color: #374151;
	font-weight: 600;
	font-size: 0.9em;
}

.tra-nav-link:hover {
	background: #f3f4f6;
}

.tra-nav-activo {
	background: #960a25;
	color: #fff;
}

.tra-nav-activo:hover {
	background: #960a25;
	color: #fff;
}

.tra-nav-salir {
	color: #b91c1c;
}

/* Historial */
.tra-tabla-historial {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
}

.tra-tabla-historial th,
.tra-tabla-historial td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid #e2e4e8;
	font-size: 0.92em;
}

.tra-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 700;
}

.tra-badge-apto {
	background: #dcfce7;
	color: #15803d;
}

.tra-badge-no-apto {
	background: #fee2e2;
	color: #b91c1c;
}

/* Temario */
.tra-bloque-temario h3 {
	margin-top: 0;
}

.tra-subbloque {
	color: #6b7280;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.04em;
	margin: 18px 0 6px;
}

.tra-lista-temas {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.tra-tema-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f1f3;
}

.tra-tema-link {
	text-decoration: none;
	color: #1d2228;
}

.tra-tema-link:hover {
	color: #960a25;
}

.tra-tema-num {
	color: #960a25;
	font-weight: 600;
	margin-right: 6px;
}

.tra-tema-completado .tra-tema-titulo {
	color: #15803d;
}

.tra-tema-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.tra-tema-accion {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f3f4f6;
	color: #374151;
	text-decoration: none;
	font-size: 0.8em;
	font-weight: 600;
	border: none;
	cursor: pointer;
}

.tra-tema-accion:hover {
	background: #e5e7eb;
	color: #960a25;
}

.tra-icono-eval {
	width: 13px;
	height: 13px;
	display: inline-block;
	vertical-align: -1px;
}

.tra-tema-finalizado {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-size: 0.8em;
	font-weight: 700;
}

.tra-badge-pendiente {
	background: #f3f4f6;
	color: #6b7280;
	font-size: 0.75em;
	padding: 2px 8px;
	border-radius: 999px;
}

.tra-tema-contenido .tra-tema-texto {
	line-height: 1.7;
	margin-bottom: 20px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.tra-tema-texto h1,
.tra-tema-texto h2,
.tra-tema-texto h3 {
	font-weight: 700;
	line-height: 1.3;
	color: #1d2228;
}

.tra-tema-texto h1 {
	font-size: 1.5em;
	margin: 1.5em 0 0.6em;
}

.tra-tema-texto h2 {
	font-size: 1.2em;
	margin: 1.3em 0 0.5em;
}

.tra-tema-texto h3 {
	font-size: 1.05em;
	margin: 1.1em 0 0.4em;
}

.tra-tema-texto > h1:first-child,
.tra-tema-texto > h2:first-child,
.tra-tema-texto > h3:first-child {
	margin-top: 0;
}

.tra-tema-texto p {
	margin: 0 0 1em;
}

.tra-tema-texto ul,
.tra-tema-texto ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.tra-tema-texto li {
	margin-bottom: 0.35em;
}

.tra-tema-texto a {
	color: #960a25;
	text-decoration: underline;
}

.tra-tema-texto strong {
	font-weight: 700;
}

.tra-tema-texto em {
	font-style: italic;
}

.tra-tema-texto table {
	width: 100%;
	border-collapse: collapse;
	margin: 14px 0;
}

.tra-tema-texto th,
.tra-tema-texto td {
	border: 1px solid #e2e4e8;
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.tra-tema-texto th {
	background: #f9fafb;
}

/* Índice lateral de un tema "comprado" (con encuadre, ideas clave, normativa,
   resumen y/o casos prácticos aparte del desarrollo): un tema que solo tiene el
   desarrollo numerado sigue mostrando el índice, pero solo con esas entradas. */
.tra-tema-layout {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.tra-tema-indice {
	flex: 0 0 230px;
	position: sticky;
	top: 16px;
	background: #f9fafb;
	border: 1px solid #e2e4e8;
	border-radius: 10px;
	padding: 14px 16px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
}

/* "En este tema" es un <summary> (cabecera del <details> desplegable): en
   escritorio se ve como el rótulo fijo de siempre, sin marcador de flecha
   nativo del navegador ni aspecto de botón (ver el bloque "tablet y móvil"
   más abajo para su aspecto de desplegable). */
.tra-tema-indice-cabecera {
	margin: 0 0 10px;
	font-size: 0.78em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	cursor: default;
	list-style: none;
}

.tra-tema-indice-cabecera::-webkit-details-marker,
.tra-tema-indice-cabecera::marker {
	display: none;
	content: '';
}

/* El reseteo ".tra-aeat, .tra-aeat * { all: revert; }" del principio del
   fichero rompe también el comportamiento nativo de <details>: sin esto, la
   lista se queda visible aunque el desplegable esté cerrado (el atributo
   "open" no fuerza "display: none" en el contenido como debería). En
   escritorio no se nota porque el HTML trae "open" siempre puesto, pero en
   tablet/móvil (donde tra-aeat.js lo cierra) sin esta regla el desplegable
   nunca llega a cerrarse de verdad. */
.tra-tema-indice-desplegable:not([open]) > ul {
	display: none;
}

.tra-tema-indice ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tra-tema-indice li {
	margin-bottom: 2px;
}

.tra-tema-indice a {
	display: block;
	padding: 5px 8px;
	border-radius: 6px;
	color: #33383f;
	text-decoration: none;
	font-size: 0.9em;
	line-height: 1.35;
}

.tra-tema-indice a:hover {
	background: #eef0f2;
	color: #960a25;
}

.tra-tema-principal {
	flex: 1 1 auto;
	min-width: 0;
}

.tra-tema-seccion {
	scroll-margin-top: 16px;
	margin: 0 0 28px;
}

.tra-tema-seccion:last-child {
	margin-bottom: 0;
}

.tra-tema-seccion > h3 {
	margin: 0 0 10px;
}

/* Cajas destacadas dentro del contenido de un tema (idea clave puntual,
   resumen "para memorizar", reglas mnemotécnicas y encuadre del tema). */
.tra-caja-idea,
.tra-caja-regla,
.tra-caja-encuadre {
	border-radius: 8px;
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 0.95em;
	line-height: 1.6;
	overflow-wrap: break-word;
	word-break: break-word;
}

.tra-caja-idea {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.tra-caja-regla {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
}

.tra-caja-encuadre {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e3a8a;
	margin: 0 0 20px;
}

@media (max-width: 782px) {
	.tra-tema-layout {
		flex-direction: column;
		/* En escritorio "align-items: flex-start" (definido más arriba) hace
		   que el sidebar no se estire en altura; pero al pasar a columna en
		   tablet/móvil ese mismo valor se aplica al ANCHO (eje cruzado en
		   columna) y hace que el texto calcule su ancho "a su medida" en vez
		   de ocupar el 100%, saliéndose de la pantalla. Con "stretch" cada
		   bloque ocupa todo el ancho disponible y el texto vuelve a hacer
		   salto de línea con normalidad. */
		align-items: stretch;
	}
	.tra-tema-indice {
		position: static;
		width: 100%;
		max-height: none;
		background: none;
		border: none;
		padding: 0;
	}
	/* En tablet y móvil el índice deja de ser un sidebar dentro del propio
	   flujo del contenido: se convierte en un desplegable FIJO, anclado
	   siempre a la parte inferior de la pantalla (mismo patrón que el
	   resumen "Total" de la calculadora de presupuesto DGT), que al abrirse
	   crece hacia arriba dejando su cabecera siempre visible abajo del todo.
	   Arranca cerrado (lo cierra tra-aeat.js al cargar la página) y no ocupa
	   sitio en el documento al ser "fixed". */
	.tra-tema-indice-desplegable {
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 100;
		background: #f9fafb;
		border: 1px solid #e2e4e8;
		border-radius: 10px;
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
		max-height: 70vh;
		overflow: hidden;
	}
	/* Con el desplegable abierto, la cabecera (primer hijo) se ancla abajo y
	   la lista (segundo hijo) se pinta encima gracias a "column-reverse", sin
	   alterar el orden real del HTML (accesibilidad intacta). */
	.tra-tema-indice-desplegable[open] {
		display: flex;
		flex-direction: column-reverse;
		overflow-y: auto;
	}
	.tra-tema-indice-cabecera {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		flex: 0 0 auto;
		margin: 0;
		padding: 14px 16px;
		font-size: 1em;
		text-transform: none;
		letter-spacing: normal;
		font-weight: 600;
		color: #1d2228;
		background: #f9fafb;
		cursor: pointer;
	}
	/* Cerrado: flecha hacia arriba (invita a desplegar hacia arriba).
	   Abierto: flecha hacia abajo (invita a cerrar/recoger). */
	.tra-tema-indice-cabecera::after {
		content: '';
		width: 9px;
		height: 9px;
		flex: 0 0 auto;
		border-right: 2px solid #6b7280;
		border-bottom: 2px solid #6b7280;
		transform: rotate(-135deg);
		transition: transform 0.2s ease;
	}
	.tra-tema-indice-desplegable[open] > .tra-tema-indice-cabecera::after {
		transform: rotate(45deg);
	}
	.tra-tema-indice-desplegable ul {
		margin: 0;
		padding: 4px 16px 14px;
		border-top: 1px solid #e2e4e8;
	}
	/* Hueco al final del contenido para que el desplegable fijo de abajo no
	   tape el último párrafo, el botón de "Marcar como completado" ni la
	   autoevaluación. */
	.tra-tema-principal {
		padding-bottom: 72px;
	}
	/* El título del tema (puede ser largo, p. ej. "La libre circulación de
	   mercancías: La Unión Aduanera. Política Común Agrícola y Pesca") se
	   reduce para que no ocupe toda la pantalla en tablet/móvil. Con
	   !important porque algunas plantillas (p. ej. Avada) fijan el tamaño de
	   los encabezados globalmente con esa misma prioridad; esto solo afecta
	   al título dentro de nuestro propio contenedor .tra-aeat, nunca a los
	   títulos del resto de la página. */
	.tra-aeat .tra-tema-contenido h2 {
		font-size: 1.2em !important;
		line-height: 1.3 !important;
	}
}

@media (max-width: 420px) {
	.tra-aeat .tra-tema-contenido h2 {
		font-size: 1.05em !important;
	}
}

.tra-form-tema {
	margin-top: 10px;
}

/* Evaluación de tema */
.tra-eval-tema {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e2e4e8;
	scroll-margin-top: 16px;
}

.tra-tema-estado {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
	font-weight: 600;
	padding: 8px 12px;
	border-radius: 8px;
	margin: 0 0 16px;
}

.tra-tema-estado-ok {
	background: #dcfce7;
	color: #15803d;
}

.tra-tema-estado-pendiente {
	background: #f3f4f6;
	color: #52514e;
}

.tra-icono-estado {
	font-size: 1.1em;
	line-height: 1;
}

.tra-eval-tema-cabecera {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.tra-eval-ultimo {
	color: #6b7280;
	font-size: 0.9em;
}

.tra-eval-resumen {
	text-align: center;
}

.tra-eval-nota {
	font-size: 2em;
	font-weight: 800;
	margin: 8px 0 4px;
	color: #1d2228;
}

.tra-eval-explicacion {
	color: #6b7280;
	font-size: 0.85em;
	margin: 8px 0 0;
	font-style: italic;
}

/* Gráfico de evolución (Mi historial) */
.tra-card-grafico {
	padding-bottom: 12px;
}

.tra-grafico-evolucion {
	width: 100%;
}

.tra-svg-evolucion {
	width: 100%;
	height: auto;
	display: block;
}

.tra-grafico-grid {
	stroke: #e1e0d9;
	stroke-width: 1;
}

.tra-grafico-eje-y {
	fill: #898781;
	font-size: 10px;
	text-anchor: end;
}

.tra-grafico-linea-apto {
	stroke: #9ca3af;
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
}

.tra-grafico-etiqueta-apto {
	fill: #6b7280;
	font-size: 10px;
	font-weight: 600;
	text-anchor: end;
}

.tra-grafico-linea {
	fill: none;
	stroke: #960a25;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tra-grafico-punto {
	stroke: #fff;
	stroke-width: 1.5;
	cursor: pointer;
}

.tra-grafico-punto-apto {
	fill: #15803d;
}

.tra-grafico-punto-no-apto {
	fill: #b91c1c;
}

.tra-grafico-punto:hover {
	stroke: #1d2228;
}

.tra-grafico-nota-pie {
	margin: 10px 0 0;
}

/* "Modo lectura": lector a pantalla completa, paginado (sin scroll vertical,
   pasas de "página" en página deslizando o con las flechas), igual en
   cualquier tamaño de pantalla. Solo texto de lectura: el índice y la
   autoevaluación se quedan fuera, en la vista normal. Sin librerías: JS
   reparte el HTML en columnas del ancho del visor (ver tra-aeat.js) y cada
   columna hace de "página"; aquí solo se define el aspecto. */
.tra-lector {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: #fffdfa;
	overflow: hidden;
}

/* El reseteo ".tra-aeat, .tra-aeat * { all: revert; }" del principio del
   fichero (necesario para no chocar con el CSS de Avada) rompe el
   comportamiento nativo del atributo "hidden" (Chrome/Firefox lo dejan en
   "display: block" en vez de "none" dentro de ese reseteo), así que hay que
   forzarlo aquí a mano; si no, el lector se ve encima de todo, en blanco,
   desde que se carga la página. */
.tra-lector[hidden] {
	display: none;
}

.tra-lector:not([hidden]) {
	display: flex;
	flex-direction: column;
}

.tra-lector-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid #e2e4e8;
	background: #fff;
}

.tra-lector-salir {
	border: none;
	background: none;
	font-size: 1.6em;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	padding: 2px 8px;
}

.tra-lector-salir:hover {
	color: #1d2228;
}

.tra-lector-paginacion {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tra-lector-flecha {
	border: none;
	background: #f3f4f6;
	color: #1d2228;
	font-size: 1.3em;
	line-height: 1;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 999px;
	cursor: pointer;
}

.tra-lector-flecha:hover {
	background: #e5e7eb;
}

.tra-lector-flecha:disabled {
	opacity: 0.35;
	cursor: default;
}

.tra-lector-contador {
	font-variant-numeric: tabular-nums;
	font-size: 0.9em;
	color: #6b7280;
	min-width: 56px;
	text-align: center;
}

/* Marcador de página: hueco (gris) por defecto, relleno (granate) cuando la
   página que se está viendo es la guardada. El propio SVG no lleva "fill" a
   mano (ver icono_marcador()): así el relleno lo decide este CSS con
   "currentColor", que ya cambia solo con el color del botón. */
.tra-lector-marcador {
	border: none;
	background: none;
	color: #9aa1ab;
	line-height: 1;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	cursor: pointer;
	padding: 0;
}

.tra-lector-marcador .tra-icono-marcador {
	width: 20px;
	height: 20px;
}

.tra-lector-marcador:hover {
	color: #6b7280;
}

.tra-lector-marcador[aria-pressed="true"] {
	color: #960a25;
}

.tra-lector-marcador[aria-pressed="true"] .tra-icono-marcador path {
	fill: currentColor;
}

.tra-lector-viewport {
	flex: 1 1 auto;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 24px 22px;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

/* La letra de "libro" se aplica siempre en el lector, sea cual sea el
   tamaño de pantalla (a diferencia del modo lectura "de serie" en el
   contenido normal, que solo entra en tablet/móvil). */
.tra-lector-contenido {
	height: 100%;
	column-gap: 40px;
	/* "auto" (en vez de la "balance" por defecto) obliga a rellenar cada
	   página del todo antes de pasar a la siguiente; con "balance" el
	   navegador reparte el texto de forma menos previsible y pueden verse
	   restos de otra página asomando por el borde. */
	column-fill: auto;
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
	font-size: 1.05em;
	line-height: 1.85;
}

/* Texto justificado, como en un libro; solo en el lector (la vista normal
   del tema se queda alineada a la izquierda, como hasta ahora). Los títulos
   se excluyen para que no se estiren de forma rara con tan poco texto. */
.tra-lector-contenido p,
.tra-lector-contenido li {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* "break-inside: avoid" solo en piezas que SIEMPRE caben de sobra en una
   página (un título, una fila de tabla): puesto en el propio recuadro de
   idea/regla/encuadre o en la tabla entera, si esa pieza no cabe completa en
   lo que queda de página se empuja entera a la siguiente, dejando una
   página casi en blanco de por medio (le pasaba al encuadre, que puede ser
   largo). Mejor dejarlos partirse con normalidad, como un párrafo más. */
.tra-lector-contenido h1,
.tra-lector-contenido h2,
.tra-lector-contenido h3 {
	break-inside: avoid;
}

.tra-lector-contenido tr {
	break-inside: avoid;
}

/* Tirador del índice del lector: una franja pegada del todo abajo, casi
   invisible (solo se ve una rayita fina) hasta que se toca; al tocarla sube
   el panel de abajo (ver ".tra-lector-indice"). Se queda por encima de todo
   (incluso con el panel abierto) para poder volver a tocarla y cerrarlo. */
.tra-lector-zona-indice {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 22px;
	z-index: 311;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.tra-lector-zona-indice::after {
	content: '';
	width: 36px;
	height: 4px;
	border-radius: 999px;
	background: #d1d5db;
}

/* Panel del índice: hoja que sube desde abajo, oculta por completo
   (trasladada fuera de la pantalla) hasta que ".tra-lector-indice-abierto"
   se añade por JS. */
.tra-lector-indice {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 305;
	background: #fff;
	border-top: 1px solid #e2e4e8;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.14);
	max-height: 60vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	padding: 20px 20px 22px;
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.tra-lector-indice.tra-lector-indice-abierto {
	transform: translateY(0);
}

.tra-lector-indice ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tra-lector-indice a {
	display: block;
	padding: 10px 4px;
	color: #1d2228;
	text-decoration: none;
	border-bottom: 1px solid #f1f2f4;
}

.tra-lector-indice li:last-child a {
	border-bottom: none;
}

@media (max-width: 600px) {
	.tra-lector-viewport {
		padding: 0 16px 20px;
	}
	.tra-lector-contenido {
		column-gap: 28px;
	}
}

/* Vista de impresión de un tema ("Descargar tema en PDF") */
.tra-aeat-imprimir {
	max-width: 760px;
}

.tra-imprimir-barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e2e4e8;
}

@media print {
	.tra-imprimir-barra {
		display: none;
	}
	.tra-aeat-imprimir .tra-card {
		border: none;
		box-shadow: none;
		padding: 0;
	}
	/* Por si alguien imprime directamente (Ctrl+P) desde una pantalla normal
	   del plugin en vez de usar "Descargar tema en PDF": se ocultan la
	   cabecera, la navegación y los controles, dejando solo el contenido. */
	.tra-cabecera-usuario,
	.tra-form-tema,
	.tra-eval-tema,
	.tra-tema-indice,
	.tra-btn,
	.tra-tema-acciones,
	.tra-tema-accion,
	.tra-lector,
	p > .tra-btn {
		display: none !important;
	}
	.tra-tema-layout {
		display: block;
	}
}