/* Retoques del tema oscuro (F1 A1 G2/G3). Solo reglas de pieza bajo html[data-tutor-theme="dark"]; el bloque @media lo genera tools/puerta-frontend/oscuro_generar.py.
   Usa solo variables de la paleta (tokens-oscuro.css). El claro no cambia: nada fuera de los dos guardias. */

/* obs 20: migas de la lección: fondo y enlaces escritos en línea (style="background:#F5F3EC", style="color:#0E5B55") => !important */
html[data-tutor-theme="dark"] .ap:has(> .gta-migas-leccion) {
	background: var(--surface) !important;
}
html[data-tutor-theme="dark"] .gta-migas-leccion,
html[data-tutor-theme="dark"] .gta-migas-leccion a {
	color: var(--teal-700) !important;
}
html[data-tutor-theme="dark"] .gta-migas-leccion__actual {
	color: var(--ink-700) !important;
}

/* obs 20/21: textos atenuados de Tutor (Lectura, Video, Resumen, fechas): su variable en oscuro queda a 2,9-3,4:1 */
html[data-tutor-theme="dark"] {
	--tutor-text-subdued: var(--ink-400);
	/* obs 20/21/31: pestañas activas y «Marcar como vista» usan el azul de marca de Tutor (3,25:1) */
	--tutor-text-brand: var(--teal-700);
}

/* obs 21: insignia «en línea» del chat: texto blanco fijo sobre verde claro */
html[data-tutor-theme="dark"] .gta-chat-badge {
	color: var(--ground);
}

/* obs 21: icono del mensaje «Mira el video…»: cuadro blanco (44 px, bajo el umbral de isla del medidor) en tarjeta oscura */
html[data-tutor-theme="dark"] .ap-gate-video__ico {
	background: var(--surface-2);
}

/* obs 24/26/28/30: opciones del examen: fondo #fff escrito a mano (gta-examen-pregunta.css:48) con texto claro => ilegibles */
html[data-tutor-theme="dark"] .gta-ex__op.tutor-quiz-question-option {
	background: var(--surface);
}
html[data-tutor-theme="dark"] .gta-ex__op.tutor-quiz-question-option:has(input:checked) {
	background: var(--teal-50);
}
/* obs 24/28: botones primarios de la pantalla del examen (Siguiente, Empezar, Reintentar, Ver detalle, Enviar): fondo --teal-700 (claro en oscuro) con texto #fff fijo */
html[data-tutor-theme="dark"] body.tutor_quiz-template-default .tutor-btn-primary {
	color: var(--teal-950);
}
/* obs 28: pie del examen (Reintentar): caja blanca escrita a mano */
html[data-tutor-theme="dark"] .gta-exf .tutor-learning-area-footer {
	background: transparent;
}
/* obs 28: insignia «No aprobado» de Tutor: rojo oscuro sobre fondo oscuro (2,46:1) */
html[data-tutor-theme="dark"] .gta-exf .tutor-badge-error {
	color: var(--error);
}
/* obs 28: «Reintentar el examen» (ghost con fondo #fff escrito a mano) */
html[data-tutor-theme="dark"] .gta-exf .tutor-learning-area-footer > .tutor-btn-ghost[\@click*="quiz-retry-modal"] {
	background: var(--surface);
}
/* obs 28: «Repasar» (btn-soft: texto --teal-800, oscuro, sobre --teal-50 oscuro: 1,17:1) */
html[data-tutor-theme="dark"] .gta-exf .btn-soft {
	color: var(--teal-700);
}

/* obs 28: «Revisa antes de enviar»: tarjetas de cifras y filas del resumen con fondo #fff escrito a mano (gta-examen.css:38 y :323) */
html[data-tutor-theme="dark"] .gta-ex__dato,
html[data-tutor-theme="dark"] .gta-ex__fila {
	background: var(--surface);
}
html[data-tutor-theme="dark"] .gta-ex__fila {
	color: var(--ink-900);
}

/* obs 16: pestana activa de la barra (texto teal-800 oscuro sobre fondo teal-50 oscuro = 1,2:1) y contador de la campana (blanco fijo sobre coral claro) */
html[data-tutor-theme="dark"] .ap .ap-nav-link.is-active {
	color: var(--teal-700);
}
html[data-tutor-theme="dark"] .ap .ap-badge-dot,
html[data-tutor-theme="dark"] .gta-campana__contador {
	color: var(--ground);
}

/* A4 · causa 1: «Saltar al contenido» (style.css:181): texto #fff fijo sobre --teal-700 (claro en oscuro) = 1,89:1, y su anillo #fff */
html[data-tutor-theme="dark"] .gta-skip-link {
	background: var(--teal-600);
	color: var(--teal-950);
}
html[data-tutor-theme="dark"] .gta-skip-link:focus-visible {
	outline-color: var(--teal-950);
}

/* A4 · causa 2: botón primario y suave del aula (aula-premium.css:224 y :229): texto #fff fijo sobre --teal-700 (claro en oscuro) = 1,89:1; suave con texto teal-800 oscuro sobre teal-50 oscuro = 1,17:1. Sin «.ap» delante: en la ficha de Tutor los botones van fuera de .ap */
html[data-tutor-theme="dark"] .ap-btn-primary {
	background: var(--teal-600);
	color: var(--teal-950);
}
html[data-tutor-theme="dark"] .ap-btn-primary:hover {
	background: var(--teal-500);
}
html[data-tutor-theme="dark"] .ap-btn-soft {
	color: var(--teal-700);
}

/* A4 · causa 3: botón primario `.btn-pri` (style.css:455): texto #fff fijo sobre --v1-teal-600 (claro en oscuro) = 2,5:1; incluye «Empieza aquí» y «Pedir la pausa» */
html[data-tutor-theme="dark"] .btn-pri {
	background: var(--teal-600);
	color: var(--teal-950);
}
html[data-tutor-theme="dark"] .btn-pri:hover {
	background: var(--teal-500);
}

/* F2 P102 · página actual de la paginación: texto #fff fijo sobre teal-600 claro en oscuro = 2,5:1; mismo par que .btn-pri */
html[data-tutor-theme="dark"] .gta-paginacion__item--actual {
	background: var(--teal-600);
	border-color: var(--teal-600);
	color: var(--teal-950);
}

/* A4 · causa 4: pestaña activa `.gta-tabs a.activo` (style.css:915): texto #fff fijo sobre --v1-teal-600 = 2,5:1 */
html[data-tutor-theme="dark"] .gta-tabs a.activo {
	background: var(--teal-600);
	color: var(--teal-950);
}
/* P102 P0e · el número de la pestaña activa: en claro la pastilla es más oscura (style.css:921); aquí el texto es oscuro, así que la pastilla vuelve a ser más clara (8,99:1 medido). */
html[data-tutor-theme="dark"] .gta-tabs a.activo .chip__conteo {
	background: rgba(255, 255, 255, .25);
}

/* A4 · causa 5: tarjetas de /cursos/ (views/cursos.php:~478-500): chip de estado, chip «curso abierto» y círculo del anillo llevan `background:#fff` en línea con texto var(--ap-ink-900) (claro en oscuro) = 1,16:1 e isla blanca; hace falta !important porque el fondo es de marcado */
html[data-tutor-theme="dark"] .gta-ap-curso .ap-chip[style*="background:#fff"],
html[data-tutor-theme="dark"] .gta-ap-curso span[style*="background:#fff"] {
	background: var(--surface-2) !important;
}
/* A4 · causa 5: ficha de hito «Primera semana» de «Tu racha abre premios» (views/cursos.php:~585): `background:#fff` en línea; los textos b y .ap-meta heredan tinta clara (1,16:1 y 2,05:1) */
html[data-tutor-theme="dark"] section.ap-card div[style*="width:108px"][style*="background:#fff"] {
	background: var(--surface-2) !important;
}

/* A4 · causa 6: GTA_UI::boton primario (class-gta-ui.php:429): fondo var(--teal-700) (claro en oscuro) con color:#fff en línea = 1,89:1; p. ej. «Enviarle el enlace a …» del apoderado; A4b G2: también `button` en línea («Editar periodos», «Aprobar», «Publicar al mural») */
html[data-tutor-theme="dark"] a[style*="background:var(--teal-700);color:#fff"],
html[data-tutor-theme="dark"] button[style*="background:var(--teal-700);color:#fff"] {
	background: var(--teal-600) !important;
	border-color: var(--teal-600) !important;
	color: var(--teal-950) !important;
}
/* A4b G2 causa 2: (a) «Fijar a mi aula» (mi-grupo/biblioteca, .gg .btn-soft: texto --teal-800 sobre --teal-50 oscuro = 1,17:1); (b) chips de leyenda de agenda/calendario con `background:#fff` en línea (colegio-agenda.php:378, mi-grupo-calendario.php:185) y texto claro = 1,41:1; hace falta !important porque el fondo es de marcado (deuda: selector por estilo en línea) */
html[data-tutor-theme="dark"] .gg .btn-soft {
	color: var(--teal-700);
}
html[data-tutor-theme="dark"] a[style*="border-radius:100px"][style*="background:#fff"],
html[data-tutor-theme="dark"] span[style*="border-radius:100px"][style*="background:#fff"] {
	background: var(--surface-2) !important;
}
/* A4b G2 causa 3: en oscuro --teal-700 y --teal-600 son claros; los rótulos fijos en blanco/tinta del marcado quedaban en 1,2-2,5:1 («PRÓXIMA SESIÓN» mi-grupo/sesiones; pastilla de sesión del calendario del colegio; contador de la pestaña activa de Personas; medallas del cuadro de honor; chip activo «Todas»; el «—» vacío usaba --ink-300 = 3,88:1). !important porque el color es de marcado en línea (deuda: selector por estilo en línea) */
html[data-tutor-theme="dark"] div[style*="background:var(--teal-700);color:#fff"],
html[data-tutor-theme="dark"] span.num[style*="rgba(255,255,255,.22)"] {
	color: var(--teal-950) !important;
}
html[data-tutor-theme="dark"] div[style*="background:var(--teal-700);color:#fff"] {
	background: var(--teal-600) !important;
}
html[data-tutor-theme="dark"] span.num[style*="border-radius:50%"][style*="color:var(--ink-900)"],
html[data-tutor-theme="dark"] span.num[style*="border-radius:50%"][style*="background:var(--gold-400)"],
html[data-tutor-theme="dark"] .chip.activo {
	color: var(--teal-950) !important;
}
html[data-tutor-theme="dark"] span[style*="color:var(--ink-300)"] {
	color: var(--ink-400) !important;
}
/* A4 · causa 7: GTA_UI::avatar_iniciales por defecto (class-gta-ui.php:353): color var(--teal-800) sobre fondo var(--teal-100), ambos oscuros = 1,03:1 */
html[data-tutor-theme="dark"] span.avatar[style*="color:var(--teal-800)"] {
	color: var(--teal-700) !important;
}

/* A4 · causa 8: tarjetas de Tutor (tutor-front.min.css: `.tutor-card{background-color:#fff}`): isla blanca en el archivo; el texto atenuado `.tutor-text-subdued` (tutor-tiny-2) queda 4,16:1 sobre ella */
html[data-tutor-theme="dark"] .tutor-card {
	background-color: var(--surface);
}
html[data-tutor-theme="dark"] .tutor-card .tutor-text-subdued,
html[data-tutor-theme="dark"] .tutor-card .tutor-tiny-2 {
	color: var(--ink-500);
}

/* A4 · causa 8: títulos, datos y autor de la tarjeta llevan tinta oscura fija de Tutor; el botón «Enroll Course» (outline-primary) conserva su fondo claro */
html[data-tutor-theme="dark"] .tutor-card .tutor-course-name a,
html[data-tutor-theme="dark"] .tutor-card .tutor-meta-value,
html[data-tutor-theme="dark"] .tutor-card .tutor-meta,
html[data-tutor-theme="dark"] .tutor-card .tutor-meta > div {
	color: var(--ink-900);
}
html[data-tutor-theme="dark"] .tutor-card .tutor-btn-outline-primary {
	background-color: transparent;
	color: var(--teal-600);
	border-color: var(--teal-600);
}

/* A4 · causa 9: pestañas de la ficha del curso (tutor.min.css: `.tutor-nav-link{color:var(--tutor-color-secondary)}`, tinta oscura fija = 1,72:1; también «Más»); la activa y el hover conservan el verde de ficha-curso.css */
html[data-tutor-theme="dark"] .tutor-course-details-page .tutor-nav-link:not(.is-active):not(:hover) {
	color: var(--ink-500);
}
/* A4 · causa 9: número del módulo abierto en «Ruta del curso» (ruta-del-curso.php:99): fondo dorado vivo con `color:var(--ap-ink-900)` en línea, claro en oscuro = 1,47:1 */
html[data-tutor-theme="dark"] .gta-ruta__cabecera > span[style*="--ap-gold-400"] {
	color: var(--teal-950) !important;
}

/* A4 · causa 10: biblioteca (aula-premium.css:940, :972, :532) — colecciones, plantillas y «Material de tus cursos» llevan `background:#fff` fijo: isla blanca con tinta clara = 1,16:1 */
html[data-tutor-theme="dark"] .ap .gta-vg-coleccion,
html[data-tutor-theme="dark"] .ap .gta-vg-plantilla,
html[data-tutor-theme="dark"] .ap .gta-vg-estantes {
	background: var(--surface);
}
/* A4 · causa 10: insignia del tipo de pieza (aula-premium.css:532, `background:#fff`) */
html[data-tutor-theme="dark"] .ap .ap-biblio-badge {
	background: var(--surface-2);
}
/* A4 · causa 10: nombre del curso sobre cada pieza (aula-premium.css:933, `#8A5A0F` fijo = 2,8:1) */
html[data-tutor-theme="dark"] .ap .gta-vg-curso {
	color: var(--gold-700);
}
/* A4 · causa 10: pestaña activa de la biblioteca (aula-premium.css:261, fondo teal-700 que en oscuro es claro, texto `#fff` = 1,89:1) */
html[data-tutor-theme="dark"] .ap .ap-chip.is-activo {
	color: var(--teal-950);
}
/* A4 · causa 10: chip sin variante (aula-premium.css:248, `color:teal-800` sobre `teal-50`, ambos oscuros en oscuro = 1,17:1; «Publicado por tu tutor», biblioteca.php:1017) */
html[data-tutor-theme="dark"] .ap .ap-chip:not([class*="ap-chip-"]) {
	color: var(--teal-700);
}
/* A4 · causa 11: distintivo «Con Bekis o con S/» de la tienda del aula (style.css:2222, `#A87C34` sobre `#F7EDDA` fijos = 3,23:1) */
html[data-tutor-theme="dark"] .gta-premio__distintivo--mixto {
	color: var(--gold-700);
	background: var(--gold-50);
	border-color: var(--gold-100);
}

/* A4 · causa 12: botón dorado `.btn-sol` (style.css:459, fondo `--sol-400` vivo con `color:var(--tinta)`, claro en oscuro = 1,44:1) */
html[data-tutor-theme="dark"] .btn-sol {
	color: var(--teal-950);
}
/* A4 · causa 12: iniciales del avatar (aula-premium.css:301, fondo teal-700 que en oscuro es claro, texto `#fff` = 1,89:1) */
html[data-tutor-theme="dark"] .ap .ap-avatar--iniciales {
	color: var(--teal-950);
}
/* A4 · causa 12: paso activo de «bienvenida» (style.css:635, fondo teal-600 vivo, texto `#fff` = 2,5:1) */
html[data-tutor-theme="dark"] .gta-pasos li.activo {
	color: var(--teal-950);
}
/* A4 · causa 12: aviso informativo (style.css:543, fondo `#E9F1FA` fijo con texto `--info` claro en oscuro = 1,85:1) */
html[data-tutor-theme="dark"] .gta-alerta--info {
	background: var(--info-100);
}

/* A7 H3: el anillo global (style.css:175, teal al 35 %) casi no se ve en oscuro (1,25:1); el color pleno de la paleta da ≥ 3:1 */
html[data-tutor-theme="dark"] :focus-visible {
	outline-color: var(--teal-700);
}
html[data-tutor-theme="dark"] input:focus,
html[data-tutor-theme="dark"] select:focus,
html[data-tutor-theme="dark"] textarea:focus {
	box-shadow: 0 0 0 3px var(--teal-700);
}

/* A4b G3: conmutador «Mi aula | Mi colegio» (style.css:387-396, aula-premium.css:115-116): píldora --teal-700 (clara en oscuro) con texto #fff = 1,89:1 y activo en #fff con texto teal claro = 1,89:1. Clase repetida para ganar a `.ap .ap-nav …` sin !important */
html[data-tutor-theme="dark"] .gta-navbar__conmutador.gta-navbar__conmutador a {
	color: var(--teal-950);
}
html[data-tutor-theme="dark"] .gta-navbar__conmutador.gta-navbar__conmutador a.activo {
	background: var(--teal-950);
	color: var(--teal-700);
}

/* P114B C1: bandas públicas (teal-700 claro + #fff = 1,89:1) */
html[data-tutor-theme="dark"] :is(.gta-pie-publico, .lp-pie, .lp-seccion--oscura, .lp-saltar, .lp-pasos li:not(:nth-child(3)) .lp-pasos__num, body:not(.logged-in) .gta-navbar, .lp-hero .lp-btn--pri, .lp-btn--sec) {
	background: var(--teal-800);
}
html[data-tutor-theme="dark"] :is(.lp-pasos li:nth-child(3) .lp-pasos__num, .lp-btn--pri:not(.lp-hero *)) {
	color: var(--teal-950);
}
html[data-tutor-theme="dark"] .lp-campo :is(input, select, textarea) {
	background: var(--surface);
}

/* === sistema oscuro (generado por oscuro_generar.py: no editar a mano) === */
@media (prefers-color-scheme: dark) {
	/* Retoques del tema oscuro (F1 A1 G2/G3). Solo reglas de pieza bajo html[data-tutor-theme="system"]; el bloque @media lo genera tools/puerta-frontend/oscuro_generar.py.
	   Usa solo variables de la paleta (tokens-oscuro.css). El claro no cambia: nada fuera de los dos guardias. */
	
	/* obs 20: migas de la lección: fondo y enlaces escritos en línea (style="background:#F5F3EC", style="color:#0E5B55") => !important */
	html[data-tutor-theme="system"] .ap:has(> .gta-migas-leccion) {
		background: var(--surface) !important;
	}
	html[data-tutor-theme="system"] .gta-migas-leccion,
	html[data-tutor-theme="system"] .gta-migas-leccion a {
		color: var(--teal-700) !important;
	}
	html[data-tutor-theme="system"] .gta-migas-leccion__actual {
		color: var(--ink-700) !important;
	}
	/* obs 20/21: textos atenuados de Tutor (Lectura, Video, Resumen, fechas): su variable en oscuro queda a 2,9-3,4:1 */
	html[data-tutor-theme="system"] {
		--tutor-text-subdued: var(--ink-400);
		/* obs 20/21/31: pestañas activas y «Marcar como vista» usan el azul de marca de Tutor (3,25:1) */
		--tutor-text-brand: var(--teal-700);
	}
	/* obs 21: insignia «en línea» del chat: texto blanco fijo sobre verde claro */
	html[data-tutor-theme="system"] .gta-chat-badge {
		color: var(--ground);
	}
	/* obs 21: icono del mensaje «Mira el video…»: cuadro blanco (44 px, bajo el umbral de isla del medidor) en tarjeta oscura */
	html[data-tutor-theme="system"] .ap-gate-video__ico {
		background: var(--surface-2);
	}
	/* obs 24/26/28/30: opciones del examen: fondo #fff escrito a mano (gta-examen-pregunta.css:48) con texto claro => ilegibles */
	html[data-tutor-theme="system"] .gta-ex__op.tutor-quiz-question-option {
		background: var(--surface);
	}
	html[data-tutor-theme="system"] .gta-ex__op.tutor-quiz-question-option:has(input:checked) {
		background: var(--teal-50);
	}
	/* obs 24/28: botones primarios de la pantalla del examen (Siguiente, Empezar, Reintentar, Ver detalle, Enviar): fondo --teal-700 (claro en oscuro) con texto #fff fijo */
	html[data-tutor-theme="system"] body.tutor_quiz-template-default .tutor-btn-primary {
		color: var(--teal-950);
	}
	/* obs 28: pie del examen (Reintentar): caja blanca escrita a mano */
	html[data-tutor-theme="system"] .gta-exf .tutor-learning-area-footer {
		background: transparent;
	}
	/* obs 28: insignia «No aprobado» de Tutor: rojo oscuro sobre fondo oscuro (2,46:1) */
	html[data-tutor-theme="system"] .gta-exf .tutor-badge-error {
		color: var(--error);
	}
	/* obs 28: «Reintentar el examen» (ghost con fondo #fff escrito a mano) */
	html[data-tutor-theme="system"] .gta-exf .tutor-learning-area-footer > .tutor-btn-ghost[\@click*="quiz-retry-modal"] {
		background: var(--surface);
	}
	/* obs 28: «Repasar» (btn-soft: texto --teal-800, oscuro, sobre --teal-50 oscuro: 1,17:1) */
	html[data-tutor-theme="system"] .gta-exf .btn-soft {
		color: var(--teal-700);
	}
	/* obs 28: «Revisa antes de enviar»: tarjetas de cifras y filas del resumen con fondo #fff escrito a mano (gta-examen.css:38 y :323) */
	html[data-tutor-theme="system"] .gta-ex__dato,
	html[data-tutor-theme="system"] .gta-ex__fila {
		background: var(--surface);
	}
	html[data-tutor-theme="system"] .gta-ex__fila {
		color: var(--ink-900);
	}
	/* obs 16: pestana activa de la barra (texto teal-800 oscuro sobre fondo teal-50 oscuro = 1,2:1) y contador de la campana (blanco fijo sobre coral claro) */
	html[data-tutor-theme="system"] .ap .ap-nav-link.is-active {
		color: var(--teal-700);
	}
	html[data-tutor-theme="system"] .ap .ap-badge-dot,
	html[data-tutor-theme="system"] .gta-campana__contador {
		color: var(--ground);
	}
	/* A4 · causa 1: «Saltar al contenido» (style.css:181): texto #fff fijo sobre --teal-700 (claro en oscuro) = 1,89:1, y su anillo #fff */
	html[data-tutor-theme="system"] .gta-skip-link {
		background: var(--teal-600);
		color: var(--teal-950);
	}
	html[data-tutor-theme="system"] .gta-skip-link:focus-visible {
		outline-color: var(--teal-950);
	}
	/* A4 · causa 2: botón primario y suave del aula (aula-premium.css:224 y :229): texto #fff fijo sobre --teal-700 (claro en oscuro) = 1,89:1; suave con texto teal-800 oscuro sobre teal-50 oscuro = 1,17:1. Sin «.ap» delante: en la ficha de Tutor los botones van fuera de .ap */
	html[data-tutor-theme="system"] .ap-btn-primary {
		background: var(--teal-600);
		color: var(--teal-950);
	}
	html[data-tutor-theme="system"] .ap-btn-primary:hover {
		background: var(--teal-500);
	}
	html[data-tutor-theme="system"] .ap-btn-soft {
		color: var(--teal-700);
	}
	/* A4 · causa 3: botón primario `.btn-pri` (style.css:455): texto #fff fijo sobre --v1-teal-600 (claro en oscuro) = 2,5:1; incluye «Empieza aquí» y «Pedir la pausa» */
	html[data-tutor-theme="system"] .btn-pri {
		background: var(--teal-600);
		color: var(--teal-950);
	}
	html[data-tutor-theme="system"] .btn-pri:hover {
		background: var(--teal-500);
	}
	/* F2 P102 · página actual de la paginación: texto #fff fijo sobre teal-600 claro en oscuro = 2,5:1; mismo par que .btn-pri */
	html[data-tutor-theme="system"] .gta-paginacion__item--actual {
		background: var(--teal-600);
		border-color: var(--teal-600);
		color: var(--teal-950);
	}
	/* A4 · causa 4: pestaña activa `.gta-tabs a.activo` (style.css:915): texto #fff fijo sobre --v1-teal-600 = 2,5:1 */
	html[data-tutor-theme="system"] .gta-tabs a.activo {
		background: var(--teal-600);
		color: var(--teal-950);
	}
	/* P102 P0e · el número de la pestaña activa: en claro la pastilla es más oscura (style.css:921); aquí el texto es oscuro, así que la pastilla vuelve a ser más clara (8,99:1 medido). */
	html[data-tutor-theme="system"] .gta-tabs a.activo .chip__conteo {
		background: rgba(255, 255, 255, .25);
	}
	/* A4 · causa 5: tarjetas de /cursos/ (views/cursos.php:~478-500): chip de estado, chip «curso abierto» y círculo del anillo llevan `background:#fff` en línea con texto var(--ap-ink-900) (claro en oscuro) = 1,16:1 e isla blanca; hace falta !important porque el fondo es de marcado */
	html[data-tutor-theme="system"] .gta-ap-curso .ap-chip[style*="background:#fff"],
	html[data-tutor-theme="system"] .gta-ap-curso span[style*="background:#fff"] {
		background: var(--surface-2) !important;
	}
	/* A4 · causa 5: ficha de hito «Primera semana» de «Tu racha abre premios» (views/cursos.php:~585): `background:#fff` en línea; los textos b y .ap-meta heredan tinta clara (1,16:1 y 2,05:1) */
	html[data-tutor-theme="system"] section.ap-card div[style*="width:108px"][style*="background:#fff"] {
		background: var(--surface-2) !important;
	}
	/* A4 · causa 6: GTA_UI::boton primario (class-gta-ui.php:429): fondo var(--teal-700) (claro en oscuro) con color:#fff en línea = 1,89:1; p. ej. «Enviarle el enlace a …» del apoderado; A4b G2: también `button` en línea («Editar periodos», «Aprobar», «Publicar al mural») */
	html[data-tutor-theme="system"] a[style*="background:var(--teal-700);color:#fff"],
	html[data-tutor-theme="system"] button[style*="background:var(--teal-700);color:#fff"] {
		background: var(--teal-600) !important;
		border-color: var(--teal-600) !important;
		color: var(--teal-950) !important;
	}
	/* A4b G2 causa 2: (a) «Fijar a mi aula» (mi-grupo/biblioteca, .gg .btn-soft: texto --teal-800 sobre --teal-50 oscuro = 1,17:1); (b) chips de leyenda de agenda/calendario con `background:#fff` en línea (colegio-agenda.php:378, mi-grupo-calendario.php:185) y texto claro = 1,41:1; hace falta !important porque el fondo es de marcado (deuda: selector por estilo en línea) */
	html[data-tutor-theme="system"] .gg .btn-soft {
		color: var(--teal-700);
	}
	html[data-tutor-theme="system"] a[style*="border-radius:100px"][style*="background:#fff"],
	html[data-tutor-theme="system"] span[style*="border-radius:100px"][style*="background:#fff"] {
		background: var(--surface-2) !important;
	}
	/* A4b G2 causa 3: en oscuro --teal-700 y --teal-600 son claros; los rótulos fijos en blanco/tinta del marcado quedaban en 1,2-2,5:1 («PRÓXIMA SESIÓN» mi-grupo/sesiones; pastilla de sesión del calendario del colegio; contador de la pestaña activa de Personas; medallas del cuadro de honor; chip activo «Todas»; el «—» vacío usaba --ink-300 = 3,88:1). !important porque el color es de marcado en línea (deuda: selector por estilo en línea) */
	html[data-tutor-theme="system"] div[style*="background:var(--teal-700);color:#fff"],
	html[data-tutor-theme="system"] span.num[style*="rgba(255,255,255,.22)"] {
		color: var(--teal-950) !important;
	}
	html[data-tutor-theme="system"] div[style*="background:var(--teal-700);color:#fff"] {
		background: var(--teal-600) !important;
	}
	html[data-tutor-theme="system"] span.num[style*="border-radius:50%"][style*="color:var(--ink-900)"],
	html[data-tutor-theme="system"] span.num[style*="border-radius:50%"][style*="background:var(--gold-400)"],
	html[data-tutor-theme="system"] .chip.activo {
		color: var(--teal-950) !important;
	}
	html[data-tutor-theme="system"] span[style*="color:var(--ink-300)"] {
		color: var(--ink-400) !important;
	}
	/* A4 · causa 7: GTA_UI::avatar_iniciales por defecto (class-gta-ui.php:353): color var(--teal-800) sobre fondo var(--teal-100), ambos oscuros = 1,03:1 */
	html[data-tutor-theme="system"] span.avatar[style*="color:var(--teal-800)"] {
		color: var(--teal-700) !important;
	}
	/* A4 · causa 8: tarjetas de Tutor (tutor-front.min.css: `.tutor-card{background-color:#fff}`): isla blanca en el archivo; el texto atenuado `.tutor-text-subdued` (tutor-tiny-2) queda 4,16:1 sobre ella */
	html[data-tutor-theme="system"] .tutor-card {
		background-color: var(--surface);
	}
	html[data-tutor-theme="system"] .tutor-card .tutor-text-subdued,
	html[data-tutor-theme="system"] .tutor-card .tutor-tiny-2 {
		color: var(--ink-500);
	}
	/* A4 · causa 8: títulos, datos y autor de la tarjeta llevan tinta oscura fija de Tutor; el botón «Enroll Course» (outline-primary) conserva su fondo claro */
	html[data-tutor-theme="system"] .tutor-card .tutor-course-name a,
	html[data-tutor-theme="system"] .tutor-card .tutor-meta-value,
	html[data-tutor-theme="system"] .tutor-card .tutor-meta,
	html[data-tutor-theme="system"] .tutor-card .tutor-meta > div {
		color: var(--ink-900);
	}
	html[data-tutor-theme="system"] .tutor-card .tutor-btn-outline-primary {
		background-color: transparent;
		color: var(--teal-600);
		border-color: var(--teal-600);
	}
	/* A4 · causa 9: pestañas de la ficha del curso (tutor.min.css: `.tutor-nav-link{color:var(--tutor-color-secondary)}`, tinta oscura fija = 1,72:1; también «Más»); la activa y el hover conservan el verde de ficha-curso.css */
	html[data-tutor-theme="system"] .tutor-course-details-page .tutor-nav-link:not(.is-active):not(:hover) {
		color: var(--ink-500);
	}
	/* A4 · causa 9: número del módulo abierto en «Ruta del curso» (ruta-del-curso.php:99): fondo dorado vivo con `color:var(--ap-ink-900)` en línea, claro en oscuro = 1,47:1 */
	html[data-tutor-theme="system"] .gta-ruta__cabecera > span[style*="--ap-gold-400"] {
		color: var(--teal-950) !important;
	}
	/* A4 · causa 10: biblioteca (aula-premium.css:940, :972, :532) — colecciones, plantillas y «Material de tus cursos» llevan `background:#fff` fijo: isla blanca con tinta clara = 1,16:1 */
	html[data-tutor-theme="system"] .ap .gta-vg-coleccion,
	html[data-tutor-theme="system"] .ap .gta-vg-plantilla,
	html[data-tutor-theme="system"] .ap .gta-vg-estantes {
		background: var(--surface);
	}
	/* A4 · causa 10: insignia del tipo de pieza (aula-premium.css:532, `background:#fff`) */
	html[data-tutor-theme="system"] .ap .ap-biblio-badge {
		background: var(--surface-2);
	}
	/* A4 · causa 10: nombre del curso sobre cada pieza (aula-premium.css:933, `#8A5A0F` fijo = 2,8:1) */
	html[data-tutor-theme="system"] .ap .gta-vg-curso {
		color: var(--gold-700);
	}
	/* A4 · causa 10: pestaña activa de la biblioteca (aula-premium.css:261, fondo teal-700 que en oscuro es claro, texto `#fff` = 1,89:1) */
	html[data-tutor-theme="system"] .ap .ap-chip.is-activo {
		color: var(--teal-950);
	}
	/* A4 · causa 10: chip sin variante (aula-premium.css:248, `color:teal-800` sobre `teal-50`, ambos oscuros en oscuro = 1,17:1; «Publicado por tu tutor», biblioteca.php:1017) */
	html[data-tutor-theme="system"] .ap .ap-chip:not([class*="ap-chip-"]) {
		color: var(--teal-700);
	}
	/* A4 · causa 11: distintivo «Con Bekis o con S/» de la tienda del aula (style.css:2222, `#A87C34` sobre `#F7EDDA` fijos = 3,23:1) */
	html[data-tutor-theme="system"] .gta-premio__distintivo--mixto {
		color: var(--gold-700);
		background: var(--gold-50);
		border-color: var(--gold-100);
	}
	/* A4 · causa 12: botón dorado `.btn-sol` (style.css:459, fondo `--sol-400` vivo con `color:var(--tinta)`, claro en oscuro = 1,44:1) */
	html[data-tutor-theme="system"] .btn-sol {
		color: var(--teal-950);
	}
	/* A4 · causa 12: iniciales del avatar (aula-premium.css:301, fondo teal-700 que en oscuro es claro, texto `#fff` = 1,89:1) */
	html[data-tutor-theme="system"] .ap .ap-avatar--iniciales {
		color: var(--teal-950);
	}
	/* A4 · causa 12: paso activo de «bienvenida» (style.css:635, fondo teal-600 vivo, texto `#fff` = 2,5:1) */
	html[data-tutor-theme="system"] .gta-pasos li.activo {
		color: var(--teal-950);
	}
	/* A4 · causa 12: aviso informativo (style.css:543, fondo `#E9F1FA` fijo con texto `--info` claro en oscuro = 1,85:1) */
	html[data-tutor-theme="system"] .gta-alerta--info {
		background: var(--info-100);
	}
	/* A7 H3: el anillo global (style.css:175, teal al 35 %) casi no se ve en oscuro (1,25:1); el color pleno de la paleta da ≥ 3:1 */
	html[data-tutor-theme="system"] :focus-visible {
		outline-color: var(--teal-700);
	}
	html[data-tutor-theme="system"] input:focus,
	html[data-tutor-theme="system"] select:focus,
	html[data-tutor-theme="system"] textarea:focus {
		box-shadow: 0 0 0 3px var(--teal-700);
	}
	/* A4b G3: conmutador «Mi aula | Mi colegio» (style.css:387-396, aula-premium.css:115-116): píldora --teal-700 (clara en oscuro) con texto #fff = 1,89:1 y activo en #fff con texto teal claro = 1,89:1. Clase repetida para ganar a `.ap .ap-nav …` sin !important */
	html[data-tutor-theme="system"] .gta-navbar__conmutador.gta-navbar__conmutador a {
		color: var(--teal-950);
	}
	html[data-tutor-theme="system"] .gta-navbar__conmutador.gta-navbar__conmutador a.activo {
		background: var(--teal-950);
		color: var(--teal-700);
	}
	/* P114B C1: bandas públicas (teal-700 claro + #fff = 1,89:1) */
	html[data-tutor-theme="system"] :is(.gta-pie-publico, .lp-pie, .lp-seccion--oscura, .lp-saltar, .lp-pasos li:not(:nth-child(3)) .lp-pasos__num, body:not(.logged-in) .gta-navbar, .lp-hero .lp-btn--pri, .lp-btn--sec) {
		background: var(--teal-800);
	}
	html[data-tutor-theme="system"] :is(.lp-pasos li:nth-child(3) .lp-pasos__num, .lp-btn--pri:not(.lp-hero *)) {
		color: var(--teal-950);
	}
	html[data-tutor-theme="system"] .lp-campo :is(input, select, textarea) {
		background: var(--surface);
	}
}