/* Marca APrueba (Rulas 2026-11-03): lo único que cambia entre sitios. piensa.css es igual en APrueba, MiGuía y Dx. */
/* --- APrueba (Rulas 2026-11-02): índigo noche, magenta y el degradado amarillo > magenta > índigo del logo; logo Lottie en la barra --- */
html[data-tema="oscuro"] { --primario-texto: color-mix(in srgb, var(--primario) 30%, #fff); }
html[data-tema="claro"] { --primario-texto: var(--primario); }
.franja, .materias-intro .franja { background: linear-gradient(90deg, #f4df23, #eb296d 50%, #333e94); }
.materias-intro .franja { width: 50px; }
.cuenta .avatar { background: linear-gradient(135deg, #f4df23, #eb296d 50%, #333e94); }
.logo-texto { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em;
              color: var(--texto); text-decoration: none; white-space: nowrap; }
.logo-icono { width: 30px; height: 30px; border-radius: 7px; }
.entrada .logo .logo-icono { width: 52px; height: 52px; border-radius: 12px; }
.logo-grande { font-size: 2.2rem; margin-bottom: .5rem; }
.logo-grande .logo-icono { width: 64px; height: 64px; border-radius: 14px; }
.resalta, html[data-tema="claro"] .resalta { background: linear-gradient(90deg, #f4df23, #eb296d 55%, #8b7cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="claro"] .resalta { background-image: linear-gradient(90deg, #c98a00, #eb296d 50%, #333e94); }
.pildora { color: var(--primario-texto); background: color-mix(in srgb, var(--primario) 22%, transparent); border-color: color-mix(in srgb, var(--primario) 55%, transparent); }
.portada::before { background: radial-gradient(60% 60% at 80% 15%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 70%),
                                radial-gradient(50% 50% at 0% 90%, rgba(244,223,35,.08), transparent 70%); }
.pantalla { background: radial-gradient(120% 80% at 50% 0%, #eb296d, #333e94 55%, var(--fondo)); }
.nivel svg { stroke: var(--acento); }
.pasos-portada li::before { background: linear-gradient(135deg, #f4df23, #eb296d 50%, #333e94); }
.filtro.activo, .boton:not(.secundario):not(.google):not(.apple):not(.peligro) { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); }

/* APrueba: lo activo y "Ver curso" en el magenta del logo (el índigo se pierde sobre el fondo oscuro). */
.pildora-filtro:hover { border-color: color-mix(in srgb, var(--acento) 60%, transparent); }
.pildora-filtro.activa { color: #fff; background: color-mix(in srgb, var(--acento) 28%, transparent); border-color: var(--acento);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent) inset; }
html[data-tema="claro"] .pildora-filtro.activa { color: color-mix(in srgb, var(--acento) 80%, #000); }
.chip-area { color: color-mix(in srgb, var(--acento) 45%, #fff); background: color-mix(in srgb, var(--acento) 22%, transparent); }
html[data-tema="claro"] .chip-area { color: color-mix(in srgb, var(--acento) 80%, #000); background: color-mix(in srgb, var(--acento) 12%, #fff); }
.curso-tarjeta .ver { color: var(--acento); }