/* Marca MiGuía (Rulas 2026-11-03): lo único que cambia entre sitios. piensa.css es igual en APrueba, MiGuía y Dx. */
/* Letras de miguia.app: Poppins en títulos, Open Sans en el texto (las de su WordPress). */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@500;600;700;800&display=swap");
:root { --titulos: Poppins, "Open Sans", system-ui, sans-serif; }
body { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.boton, .pildora-filtro, .chip-area { font-family: "Open Sans", system-ui, sans-serif; }

/* --- MiGuía (Rulas 2026-11-02): azul noche, títulos azules, botones verdes en mayúsculas, logo en texto --- */
html[data-tema="oscuro"] { --lado: #161616; --tarjeta: #1B2238; --suave: #9AA0AE; --primario-texto: color-mix(in srgb, var(--primario) 80%, #fff); }
html[data-tema="claro"] { --primario-texto: var(--primario); }
.boton.grande { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.boton.grande.secundario { text-transform: none; letter-spacing: 0; }
.logo-texto, .superior .logo-fijo { font-family: Poppins, system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; text-decoration: none; gap: 0; }
.logo-texto { font-size: 1.5rem; }
.superior .logo-fijo { font-size: 1.55rem; padding: 0 .35rem; }
.logo-mi { color: var(--primario-texto); }
.logo-guia { color: var(--acento); }
html[data-tema="claro"] .logo-guia { color: color-mix(in srgb, var(--acento) 75%, #000); }
.entrada .logo.logo-texto { font-size: 2.4rem; }
.logo-grande { font-size: 2.6rem; margin-bottom: .5rem; }
.pildora { color: var(--primario-texto); background: color-mix(in srgb, var(--primario) 16%, transparent); border-color: color-mix(in srgb, var(--primario) 45%, transparent); }
.portada::before { background: radial-gradient(60% 60% at 80% 15%, color-mix(in srgb, var(--primario) 22%, transparent), transparent 70%),
                                radial-gradient(50% 50% at 0% 90%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%); }
.pantalla { background: radial-gradient(120% 80% at 50% 0%, #7b3fe4, #2a1a5e 55%, var(--fondo)); }
.materias-intro .franja { width: 50px; }
.nivel svg { stroke: var(--primario-texto); }
.nivel .ir { color: var(--acento); }
.pasos-portada li::before { background: var(--primario); }
.filtro.activo, .boton:not(.secundario):not(.google):not(.apple):not(.peligro) { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); }

/* Lo activo y "Ver curso" en el verde de MiGuía. */
.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) 55%, #000); }
.chip-area { color: color-mix(in srgb, var(--primario) 45%, #fff); background: color-mix(in srgb, var(--primario) 22%, transparent); }
html[data-tema="claro"] .chip-area { color: color-mix(in srgb, var(--primario) 80%, #000); background: color-mix(in srgb, var(--primario) 12%, #fff); }
.curso-tarjeta .ver { color: var(--acento); }
html[data-tema="claro"] .curso-tarjeta .ver { color: color-mix(in srgb, var(--acento) 60%, #000); }
/* Barra oscura también en modo claro (Rulas 2026-11-04): el logo usa sus colores del modo oscuro. */
html[data-tema="claro"] .superior .logo-mi { color: color-mix(in srgb, var(--primario) 55%, #fff); }
html[data-tema="claro"] .superior .logo-guia { color: var(--acento); }