/* 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); }


/* Tarjetas de /cursos/ como en apprueba.app (Rulas 2026-11-08; a todas las webs 2026-11-09): más chicas, más por renglón,
   franja e icono menores, nivel en texto, sin unidades, botón "Ver curso" a la derecha e icono de la materia a la derecha. */
.cursos-rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.curso-tarjeta .vista { height: 96px; justify-content: space-between; padding: 0 1.1rem; }
.curso-tarjeta .patron { background-size: 120px; }
.curso-tarjeta .vista img { width: 60px; height: 60px; border-radius: 15px; }
.curso-tarjeta .cuerpo { gap: .55rem; padding: .9rem 1rem 1rem; }
.curso-tarjeta .cabeza { gap: .6rem; padding-bottom: .6rem; align-items: center; }
.curso-tarjeta h3 { font-size: 1.08rem; }
.curso-tarjeta .chip-area { font-size: .64rem; padding: .25rem .6rem; margin-top: 0; }
.curso-tarjeta .datos { font-size: .82rem; gap: .5rem; flex-wrap: nowrap; }
.curso-tarjeta .frase { font-size: .9rem; line-height: 1.5; }
.curso-tarjeta .icono-materia { position: relative; width: 62px; height: 62px; padding: 13px; border-radius: 50%; fill: none;
  stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
html[data-tema="claro"] .curso-tarjeta .icono-materia { stroke: var(--primario); background: rgba(255,255,255,.7); }
.curso-tarjeta .nivel-texto { color: var(--suave); font-weight: 600; font-size: .85rem; }
.curso-tarjeta .ver-boton { margin-left: auto; white-space: nowrap; padding: .45rem 1rem; font-size: .85rem; }
.curso-tarjeta .chip-tuyo { margin-left: 0; }

/* Rulas 2026-11-09: "Ver curso" del color del icono del curso; la prueba gratis como texto con flecha. */
.curso-tarjeta .ver-boton { background: var(--color-curso, var(--primario)); border-color: transparent; color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.curso-tarjeta .ver-boton:hover { filter: brightness(1.12); }
.curso-tarjeta form.probar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.curso-tarjeta .probar-texto { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--acento); text-align: left; }
.curso-tarjeta .probar-texto span { display: inline-block; transition: transform .15s; }
.curso-tarjeta .probar-texto:hover span { transform: translateX(4px); }