/* Aula multi-curso de dreomar.com (24-oct-2026). Estética iOS (Dre UI): suelo plano, widgets que flotan, poco texto.
   SOLO tokens globales del tema (--suelo, --widget, --widget-2, --linea, --sombra, --texto, --texto-2, --texto-3, --acento, --ok,
   --urgente, --degradado-boton, --radio-widget, --radio-panel, --relleno-widget, --hueco, --margen, --letra, --curva): aquí no hay paleta
   propia. Las piezas generales (.widget, .btn, .fila, .insignia, .icono, .anillo, .barra-progreso, .reproductor, .aula-barra) son del tema. */

/* ── Tipografía ─────────────────────────────────────────────────────── */
.au-h1 { font-family: var(--letra-display, var(--letra)); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
@media (min-width: 768px) { .au-h1 { font-size: 40px; letter-spacing: -0.035em; } }
.au-h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.022em; margin: 28px 0 12px; }
@media (min-width: 768px) { .au-h2 { font-size: 24px; margin-top: 36px; } }
.au-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.au-etiqueta { display: block; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.au-meta { margin: 8px 0 0; font-size: 12.5px; color: var(--texto-3); }
.au-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto-2); white-space: pre-line; }
.num { font-variant-numeric: tabular-nums; }

/* ── Armazón ────────────────────────────────────────────────────────── */
.au-main { padding-top: 20px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .au-main { padding-top: 32px; padding-bottom: 80px; } }
.au-angosto { max-width: 760px; }
.au-saludo { margin-bottom: 16px; }
.au-centro-titulo { overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.au-atras { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--acento); text-decoration: none; }
.au-atras svg { width: 20px; height: 20px; }
.au-atras span { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-duena { white-space: nowrap; }
@media (max-width: 520px) { .au-duena { display: none; } }
.au-avatar { background: var(--degradado-boton) !important; color: #fff !important; }
.au-estado { margin-top: 8px; }

/* Pestañas de abajo (celular) */
.au-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(var(--tabs, 2), minmax(0, 1fr));
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--widget) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 var(--linea); }
.au-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; justify-content: center; font-size: 11px; font-weight: 600; color: var(--texto-3); text-decoration: none; }
.au-tabbar a svg { width: 24px; height: 24px; }
.au-tabbar a[aria-current="page"] { color: var(--acento); }

/* Instalar la app */
.au-app { display: flex; align-items: center; gap: 12px; margin-bottom: var(--hueco); }
.au-app img { border-radius: 10px; flex-shrink: 0; }
.au-app-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-app-txt b { font-size: 15px; }
.au-app-txt span { font-size: 13px; color: var(--texto-2); }
.au-app-cerrar { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--widget-2); color: var(--texto-2); display: grid; place-items: center; cursor: pointer; }
.au-app-cerrar svg { width: 16px; height: 16px; }

/* Fila con ícono (pausa, avisos) */
.au-fila-ico { display: flex; align-items: center; gap: 12px; }
.au-fila-ico > div { display: flex; flex-direction: column; min-width: 0; }
.au-fila-ico b { font-size: 15px; }
.au-fila-ico span { font-size: 13.5px; color: var(--texto-2); }
.au-pausa { display: grid; gap: 14px; margin-bottom: var(--hueco); }


/* ══ 25-oct-2026: el aula vuelve a verse como la de la dreomar.com de hoy (panel-biblioteca, VistaCurso, VistaLeccion, ios-panel.css) ══ */
/* Anchos de la vieja: «Mis cursos» max-w-6xl, el curso 1240 px y la clase 1680 px (la barra de arriba usa el mismo). */
.contenedor.au-ancho-6xl { max-width: calc(1152px + 2 * var(--margen)); }
.contenedor.au-ancho-curso { max-width: calc(1240px + 2 * var(--margen)); }
.contenedor.au-ancho-clase { max-width: calc(1680px + 2 * var(--margen)); }
@media (min-width: 768px) { .au-ancho-6xl, .au-ancho-curso, .au-ancho-clase { --margen: 32px; } }
.au-main.sin-tabs { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .au-main.sin-tabs { padding-bottom: 64px; } }
.au-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.au-etq { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.au-gris { color: var(--texto-2); font-weight: 500; }
.au-barra-ico { border-radius: 7px; }
.au-barra-ico > svg { width: 60%; height: 60%; }
.aula-barra .centro-barra { gap: 8px; font-size: 16px; letter-spacing: -0.01em; }
.au-centro-titulo { overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
@media (max-width: 767px) { .aula-barra .centro-barra .au-barra-ico { display: none; } .au-centro-titulo { max-width: 38vw; font-size: 15px; } }
.au-demo-insignia { align-self: center; background: var(--acento-suave); color: var(--acento); }
html[data-theme="dark"] .au-demo-insignia { background: rgba(61, 155, 255, .16); color: var(--luz); }
@media (max-width: 520px) { .centro-barra .au-demo-insignia { display: none; } }
/* El «Obtener» de la App Store: píldora azul clara, se toca pero no le gana al botón azul */
.au-obtener { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; flex-shrink: 0;
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); text-decoration: none; white-space: nowrap; }
.au-obtener svg { width: 16px; height: 16px; stroke-width: 2.6; }
.au-obtener.grande { height: 44px; padding: 0 18px; font-size: 15px; }
.au-obtener.apagado { color: var(--texto-2); background: var(--widget-2); cursor: default; }
a.au-obtener:hover { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.au-cerrar { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--texto-2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.au-cerrar:hover { background: var(--widget-2); color: var(--texto); }
.au-cerrar svg { width: 18px; height: 18px; }
.au-emoji-app { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 28%; font-family: var(--letra-emoji); font-size: 22px; line-height: 1;
  background: linear-gradient(160deg, #FFFFFF, #F2F2F7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--linea), 0 10px 22px -12px var(--sombra); }
.au-emoji-app.lg { width: 48px; height: 48px; font-size: 26px; }
.au-emoji-app.xl { width: 60px; height: 60px; font-size: 32px; }
html[data-theme="dark"] .au-emoji-app { background: linear-gradient(160deg, #3A3A3C, #2C2C2E); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px var(--linea); }
.icono.md { width: 40px; height: 40px; }
/* Anillo de progreso: pista gris, arco azul; al terminar, verde con su check */
.au-aro { position: relative; width: var(--t); height: var(--t); flex-shrink: 0; display: grid; place-items: center; }
.au-aro svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.au-aro-pista { fill: none; stroke: var(--widget-2); }
.au-aro-arco { fill: none; stroke: var(--acento); stroke-linecap: round; transition: stroke-dashoffset .6s var(--curva); }
.au-aro.lleno .au-aro-arco { stroke: #34C759; }
.au-aro b { position: relative; font-size: calc(var(--t) * .24); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--texto); }
.au-aro b small { font-size: .62em; font-weight: 700; }
.au-aro-check { position: relative; width: 45%; height: 45%; color: #34C759; stroke-width: 2.6; }
/* Barra de progreso con el degradado de la vieja */
.au-barra > span { background: linear-gradient(90deg, #62B6FF 0%, #1A7BFF 55%, #3D4BFF 100%); }
.au-barra.lleno > span { background: linear-gradient(90deg, #74E8A0 0%, #34C759 55%, #1F9E48 100%); }
.au-pct { font-size: 13px; font-weight: 600; color: var(--texto); flex-shrink: 0; }

/* ── Entrar (CursoLogin.tsx) ──────────────────────────────────────── */
.au-entrar { position: relative; min-height: calc(100svh - var(--alto-cinta, 0px)); display: flex; flex-direction: column; background: var(--suelo); }
.au-entrar-arriba { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: calc(1120px + 2 * var(--margen)); margin: 0 auto; padding: 6px var(--margen) 0; }
.au-entrar-caja { flex: 1; width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px var(--margen) 64px; }
.au-entrar-logo { display: inline-flex; margin-bottom: 22px; text-decoration: none; }
.au-app-d { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; color: #fff; font-size: 38px; font-weight: 800; letter-spacing: -0.04em;
  background: linear-gradient(150deg, #62B6FF 0%, #1A7BFF 50%, #2F4BFF 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 3px rgba(0,0,0,.14), 0 18px 32px -14px rgba(26,123,255,.75); }
.au-entrar .au-h1 { font-size: 30px; letter-spacing: -0.035em; }
@media (min-width: 768px) { .au-entrar .au-h1 { font-size: 34px; } }
.au-entrar .au-sub { max-width: 34ch; }
.au-entrar-form { width: 100%; margin-top: 24px; display: grid; gap: 10px; padding: 10px; text-align: left; }
.au-entrar-campo { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px; border-radius: 16px; background: var(--widget-2); cursor: text; }
.au-entrar-campo:focus-within { box-shadow: inset 0 0 0 2px var(--acento); }
.au-entrar-campo input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--texto); outline: none; }
.au-entrar-campo input::placeholder { color: var(--texto-3); }
.au-entrar-form .btn { min-height: 54px; border-radius: 16px; font-size: 16px; }
.au-entrar-pila { width: 100%; margin-top: 22px; text-align: left; }
.au-entrar-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.au-entrar-pie { margin: 20px 0 0; font-size: 14px; color: var(--texto-2); }
.au-entrar-pie a, .au-entrar-pie .enlace { color: var(--acento); font-weight: 600; }
.au-entrar-pie .enlace:disabled { color: var(--texto-3); cursor: default; font-variant-numeric: tabular-nums; }
.au-entrar-motivo { color: var(--texto); font-weight: 600; }
.au-entrar-correo { color: var(--texto); overflow-wrap: anywhere; }
.au-codigo { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.au-sello { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 18px; background: var(--degradado-boton); color: #fff; box-shadow: 0 14px 28px -14px var(--acento); }
.au-sello svg { width: 28px; height: 28px; }
.au-sello.au-girando { background: none; box-shadow: none; width: 44px; height: 44px; border-radius: 999px; border: 3px solid var(--linea); border-top-color: var(--acento); animation: au-gira .8s linear infinite; }
@keyframes au-gira { to { transform: rotate(360deg); } }

/* ── Mis cursos (panel-biblioteca.tsx) ────────────────────────────── */
.au-titulo-grande { margin-bottom: 20px; }
@media (min-width: 768px) { .au-titulo-grande { margin-bottom: 28px; } }
.au-saludo { margin: 0; font-size: 15px; font-weight: 600; color: var(--texto-2); }
@media (min-width: 768px) { .au-saludo { font-size: 17px; } }
.au-h1-grande { margin-top: 2px; font-size: 28px; line-height: 1.05; letter-spacing: -0.035em; }
@media (min-width: 768px) { .au-h1-grande { font-size: 48px; } }
.au-biblio { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .au-biblio { gap: 16px; } }
@media (min-width: 1024px) { .au-biblio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.au-biblio > li { display: flex; min-width: 0; }
.au-curso, .au-faltan { width: 100%; min-height: 176px; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
@media (min-width: 768px) { .au-curso, .au-faltan { min-height: 200px; } }
.au-curso.con-foto { padding: 0; overflow: hidden; }
.au-curso-foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.au-curso-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--curva); }
.au-curso:hover .au-curso-foto img { transform: scale(1.03); }
.au-curso-foto-ico { position: absolute; left: 10px; bottom: 10px; }
.au-curso-abrir { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.au-curso-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.au-curso-cabeza .icono.xl, .au-pila .icono.xl { width: 64px; height: 64px; }
@media (min-width: 768px) { .au-curso-cabeza .icono.xl, .au-pila .icono.xl { width: 80px; height: 80px; } }
.au-curso-cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.au-curso.con-foto .au-curso-cuerpo { padding: 14px 16px 16px; }
@media (min-width: 768px) { .au-curso.con-foto .au-curso-cuerpo { padding: 16px 20px 20px; } }
.au-curso:not(.con-foto) .au-curso-cuerpo, .au-faltan .au-curso-cuerpo { padding-top: 20px; }
.au-curso-t, .au-faltan-t { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 768px) { .au-curso-t, .au-faltan-t { font-size: 21px; } }
.au-curso-s { margin: 4px 0 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--texto-2); }
@media (min-width: 768px) { .au-curso-s { font-size: 15px; } }
.au-curso-pie { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.au-curso-pie .barra-progreso { flex: 1; height: 7px; }
.au-pila { display: flex; align-items: center; }
.au-pila .icono { box-shadow: 0 0 0 3px var(--widget), 0 10px 22px -10px var(--brillo); }
.au-pila .icono + .icono { margin-left: -20px; }
@media (min-width: 768px) { .au-pila .icono + .icono { margin-left: -24px; } }
@media (max-width: 767px) { .au-curso-cabeza .icono.xl, .au-pila .icono.xl { width: 56px; height: 56px; } .au-pila .icono + .icono { margin-left: -18px; } .au-curso, .au-faltan { padding: 14px; } .au-curso.con-foto { padding: 0; } }
@media (max-width: 480px) { .au-curso-cabeza .au-obtener { display: none; } }
.au-seguir { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.au-seguir-txt { flex: 1; min-width: 0; }
.au-seguir-t { margin: 2px 0 0; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
@media (min-width: 768px) { .au-seguir { padding: 20px; } .au-seguir-t { font-size: 22px; } }
.au-seguir-btn { flex-shrink: 0; min-height: 52px; padding: 0 26px; font-size: 16px; }
@media (max-width: 639px) { .au-seguir { flex-wrap: wrap; } .au-seguir-btn { width: 100%; } }
.au-regalo { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; background-image: radial-gradient(120% 90% at 50% -30%, rgba(61, 155, 255, .14), transparent 62%); }
.au-regalo-txt { flex: 1; min-width: 0; }
.au-regalo h3 { margin: 2px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.au-regalo-txt > p:not(.au-etq) { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--texto-2); }
@media (min-width: 768px) { .au-regalo { padding: 20px; } }
@media (max-width: 639px) { .au-regalo { flex-wrap: wrap; } .au-regalo-txt { flex-basis: calc(100% - 80px); } .au-regalo .au-obtener { margin-left: 76px; } }
.au-grupo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 12px 8px 12px 14px; background-image: radial-gradient(120% 90% at 50% -30%, rgba(61, 155, 255, .12), transparent 62%); }
@media (min-width: 768px) { .au-grupo { padding: 16px 12px 16px 20px; } }
.au-grupo-txt { flex: 1; min-width: 0; }
.au-grupo-t { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.au-grupo-s { margin: 2px 0 0; font-size: 14px; color: var(--texto-2); }
@media (max-width: 639px) { .au-grupo-s { display: none; } }

/* ── Un curso: «Módulos del curso» (VistaCurso.tsx) ───────────────── */
.au-abriendo { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.au-abriendo .icono { width: 80px; height: 80px; animation: au-respira 1.6s ease-in-out infinite; }
.au-abriendo p { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto-2); }
@keyframes au-respira { 50% { opacity: .55; } }
.au-franja { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-bottom: 20px; }
@media (min-width: 768px) { .au-franja { gap: 20px; margin-bottom: 28px; } }
.au-franja-item { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: var(--radio-widget); color: #fff; text-decoration: none;
  background: linear-gradient(120deg, #3D9BFF 0%, #1A7BFF 55%, #2F4BFF 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 34px -18px rgba(26, 123, 255, .8); transition: transform .18s var(--curva); }
.au-franja-item.clips { background: linear-gradient(120deg, #8E8CF5 0%, #5E5CE6 55%, #3F3DBD 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 34px -18px rgba(94, 92, 230, .8); }
a.au-franja-item:hover { transform: translateY(-1px); }
a.au-franja-item:active { transform: scale(.985); }
.au-franja-item.apagado { cursor: default; }
.au-franja-ico { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; background: #fff; color: #1A7BFF; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); }
.au-franja-item.clips .au-franja-ico { color: #5E5CE6; }
.au-franja-ico svg { width: 24px; height: 24px; }
.au-franja-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.au-franja-txt b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.au-franja-txt > span { font-size: 13.5px; color: rgba(255,255,255,.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-franja-muestra { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 11.5px; font-weight: 700; }
.au-franja-accion { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 14px; font-weight: 700; white-space: nowrap; }
.au-franja-accion svg { width: 16px; height: 16px; stroke-width: 2.6; }
.au-franja-item.apagado .au-franja-accion { height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 13px; }
/* 28-oct (Omar): lo que ya se puede descargar se ve claro: tarjeta del color de la página, ícono en verde y botón verde sólido.
   (Antes, toda la tarjeta en verde con letra blanca: no se leía.) */
.au-franja-item.listo, .au-franja-item.clips.listo { background: var(--widget); color: var(--texto); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #0F7D3C 45%, transparent), 0 14px 30px -20px rgba(15, 125, 60, .6); }
.au-franja-item.listo .au-franja-ico, .au-franja-item.clips.listo .au-franja-ico { background: #0F7D3C; color: #fff; box-shadow: none; }
.au-franja-item.listo .au-franja-txt > span { color: var(--texto-2); }
.au-franja-item.listo .au-franja-accion { height: 38px; padding: 0 16px; border-radius: 999px; background: #0F7D3C; color: #fff; }
@media (max-width: 480px) { .au-franja-item.listo .au-franja-accion { width: 42px; height: 42px; padding: 0; justify-content: center; } .au-franja-txt > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .au-franja-accion { font-size: 0; gap: 0; } .au-franja-accion svg { width: 20px; height: 20px; } .au-franja-item.apagado .au-franja-accion { font-size: 12px; } }
.au-curso-rejilla { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .au-curso-rejilla { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; } .au-lado { position: sticky; top: calc(72px + var(--alto-cinta, 0px)); } }
@media (min-width: 1280px) { .au-curso-rejilla { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 1023px) { .au-lado { order: -1; } }
.au-mods-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
@media (min-width: 768px) { .au-mods-cab { margin-bottom: 20px; } }
.au-mods-tit { min-width: 0; }
.au-h2-grande { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
@media (min-width: 768px) { .au-h2-grande { font-size: 32px; } }
.au-chips { list-style: none; display: flex; gap: 8px; margin: 10px 0 0; padding: 4px 0; overflow-x: auto; scrollbar-width: none; }
.au-chips::-webkit-scrollbar { display: none; }
.au-chips .chip { flex-shrink: 0; }
@media (max-width: 639px) { .au-chips { margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); } }
.au-filtro { width: 100%; }
@media (min-width: 640px) { .au-filtro { width: auto; min-width: 300px; } }
.au-filtro button { min-height: 40px; }
.au-lista-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.au-mod-li[hidden] { display: none; }
.au-modulo { display: flex; align-items: center; gap: 14px; padding: 12px; color: inherit; text-decoration: none; }
@media (min-width: 768px) { .au-modulo { gap: 16px; padding: 16px; } .au-mod-ico.icono.lg { width: 64px; height: 64px; } }
.au-modulo.en-curso { background-image: radial-gradient(120% 90% at 50% -40%, rgba(61, 155, 255, .16), transparent 62%); }
.au-modulo.apagado { opacity: .62; }
.au-mod-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-mod-etq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.au-mod-etq .insignia svg { width: 11px; height: 11px; }
.au-mod-t { margin-top: 2px; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
@media (min-width: 768px) { .au-mod-t { font-size: 18px; } }
.au-mod-d { margin-top: 2px; font-size: 14px; line-height: 1.35; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .au-mod-d { font-size: 15px; } }
@media (max-width: 639px) { .au-mod-d { display: none; } }
.au-mod-meta { margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
@media (min-width: 768px) { .au-mod-meta { font-size: 14px; } }
.au-mod-flecha { width: 20px; height: 20px; color: var(--texto-3); flex-shrink: 0; stroke-width: 2.4; }
@media (max-width: 767px) { .au-mod-flecha { display: none; } }
.au-mods-vacio { display: flex; align-items: center; gap: 16px; }
.au-mods-vacio[hidden] { display: none; }
.au-mods-vacio > div { display: flex; flex-direction: column; gap: 2px; }
.au-mods-vacio b { font-size: 17px; }
.au-mods-vacio span:not(.au-emoji-app) { font-size: 15px; color: var(--texto-2); }
.au-lado { display: flex; flex-direction: column; gap: 12px; }
.au-tarjeta { padding: 12px; overflow: hidden; }
.au-tarjeta-foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000; }
@media (min-width: 768px) { .au-tarjeta-foto { border-radius: 16px; } }
.au-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-tarjeta-relleno { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(90% 90% at 30% 20%, #3D9BFF, #0B2A66 70%, #050B1A); }
.au-tarjeta-nivel { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.au-tarjeta-cuerpo { padding: 16px 4px 4px; }
.au-tarjeta-cab { display: flex; align-items: center; gap: 12px; }
.au-tarjeta-t { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.au-tarjeta-cab p { margin: 2px 0 0; font-size: 14px; line-height: 1.35; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-preventa { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--texto-2); }
.au-preventa svg { width: 18px; height: 18px; color: var(--acento); flex-shrink: 0; margin-top: 1px; }
.au-progreso { margin-top: 16px; padding: 16px; }
.au-progreso-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.au-progreso-n { margin: 4px 0 0; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.au-progreso-n span { font-size: 20px; }
@media (min-width: 768px) { .au-progreso-n { font-size: 34px; } .au-progreso-n span { font-size: 22px; } }
.au-progreso-de { margin: 0; padding-bottom: 2px; text-align: right; font-size: 14px; line-height: 1.35; color: var(--texto-2); }
.au-progreso-de b { color: var(--texto); }
.au-btn-grande { margin-top: 12px; min-height: 54px; font-size: 16px; }
.au-btn-grande svg { width: 18px; height: 18px; }
.au-btn-apagado { margin-top: 12px; min-height: 54px; opacity: .55; cursor: default; }
.au-cert-fila { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.au-cert-fila > div { flex: 1; display: flex; flex-direction: column; }
.au-cert-fila span { font-size: 13.5px; color: var(--texto-2); }
.au-cert-fila > svg { width: 18px; height: 18px; color: var(--texto-3); flex-shrink: 0; }
.au-pronto .insignia { flex-shrink: 0; }
/* El cupón de alumno: rojo solo el −15 % y el reloj (lo que se acaba), verde solo el precio nuevo (lo que gana) */
.au-oferta { padding: 12px; }
.au-oferta-cab { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.au-oferta-cab > div { flex: 1; min-width: 0; }
.au-oferta-cab h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.au-oferta-cab p { margin: 1px 0 0; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.au-menos { background: var(--urgente) !important; color: #fff !important; flex-shrink: 0; }
.au-oferta-reloj { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.au-oferta-reloj > span { font-size: 14px; font-weight: 600; color: var(--texto-2); }
.au-oferta-reloj b { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--urgente); }
.au-oferta-lista { list-style: none; margin: 4px 0 0; padding: 0 4px; }
.au-oferta-lista li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.au-oferta-lista li + li { box-shadow: 0 -1px 0 var(--linea); }
.au-oferta-lista li > div { flex: 1; min-width: 0; }
.au-oferta-t { margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-precios { margin: 2px 0 0; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.au-ahora { font-size: 15px; font-weight: 700; color: var(--ok); }
.au-precios del { font-size: 13px; color: var(--texto-2); }
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) { .au-oferta .au-solo-ancho { display: none; } }
.au-oferta-duena { display: flex; align-items: center; gap: 12px; }
.au-oferta-duena > div { display: flex; flex-direction: column; min-width: 0; }
.au-oferta-duena b { font-size: 14.5px; }
.au-oferta-duena span { font-size: 13px; color: var(--texto-2); }
.au-profesor { display: flex; align-items: center; gap: 14px; padding: 12px; }
.au-profesor img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px var(--widget), 0 0 0 3.5px #1A7BFF; }
.au-profesor > div { min-width: 0; }
.au-profesor-n { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.au-verificado { width: 18px; height: 18px; flex-shrink: 0; }
.au-profesor-s { margin: 1px 0 0; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.au-demo-aviso > div { flex: 1; }
.au-demo-aviso .btn { flex-shrink: 0; }
@media (max-width: 420px) { .au-demo-aviso { flex-wrap: wrap; } .au-demo-aviso .btn { width: 100%; justify-content: center; } }

/* ── Una clase: el aula (VistaLeccion.tsx · ios-panel.css) ─────────── */
.au-main-clase { padding-top: 16px; }
@media (min-width: 768px) { .au-main-clase { padding-top: 20px; } }
.au-barra-clase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; margin-bottom: 16px; border-radius: 22px; }
@media (min-width: 1024px) { .au-barra-clase { flex-wrap: nowrap; margin-bottom: 20px; } }
.au-volver { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px 0 4px; border-radius: 14px; flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--acento); text-decoration: none; }
.au-volver:hover { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.au-volver svg { width: 20px; height: 20px; stroke-width: 2.6; }
.au-barra-prog { flex: 1; min-width: 130px; display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.au-barra-prog .barra-progreso { flex: 1; }
.au-barra-prog > span { flex-shrink: 0; font-size: 14px; font-weight: 600; }
.au-solo-angosto { display: none; }
@media (max-width: 400px) { .au-solo-ancho { display: none; } .au-solo-angosto { display: inline; } }
.au-pildoras { display: flex; gap: 8px; flex-basis: 100%; }
@media (min-width: 1024px) { .au-pildoras { flex-basis: auto; flex-shrink: 0; } .au-pildoras .au-pildora { flex: 0 0 auto; } .au-barra-prog { min-width: 160px; } }
.au-pildora { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--widget-2);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--texto); text-decoration: none; white-space: nowrap; cursor: pointer; }
.au-pildora:hover { filter: brightness(.97); }
.au-pildora > svg { width: 16px; height: 16px; color: var(--acento); stroke-width: 2.6; }
.au-pildora.apagado { color: var(--texto-2); }
.au-pildora-pronto { font-size: 12px; font-weight: 600; color: var(--texto-3); }
.au-pil-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.au-pil-corto { display: none; }
.au-pildora { min-width: 0; }
@media (max-width: 560px) { .au-pil-largo { display: none; } .au-pil-corto { display: inline; } }
@media (max-width: 480px) { .au-pildora { font-size: 14px; padding: 0 10px; } .au-pildora-pronto { display: none; } }
.au-leccion-rejilla { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .au-leccion-rejilla { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 1280px) { .au-leccion-rejilla { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; } }
.au-leccion-main { min-width: 0; }
/* El reproductor manda: marco de 28 px; en el celular, a sangre como en YouTube; nunca más alto que la pantalla */
.au-marco { border-radius: 28px; box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -34px var(--sombra); }
@media (min-width: 1024px) { .au-marco { max-height: calc(100vh - 220px); max-width: calc((100vh - 220px) * 16 / 9); margin-inline: auto; } }
@media (max-width: 1023px) { .au-marco { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; box-shadow: none; } }
.au-reproductor { position: relative; }
.au-reproductor .pantalla { position: absolute; inset: 0; }
.au-tapa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: #fff;
  background: radial-gradient(120% 120% at 30% 10%, #3D9BFF 0%, #1A5FE0 38%, #3B2E9E 78%, #4A2A7A 100%); background-size: cover; background-position: center; }
.au-tapa.con-foto::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.62)); }
.au-tapa > * { position: relative; }
.au-tapa.toque { cursor: pointer; }
.au-tapa b { font-size: 15px; font-weight: 600; max-width: 34ch; line-height: 1.35; text-wrap: balance; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.au-tapa-ico { width: 72px; height: 72px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); transition: transform .16s var(--curva); }
.au-tapa-ico.play { background: var(--degradado-boton); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 30px -12px rgba(20,115,255,.8); }
.au-tapa-ico svg { width: 28px; height: 28px; }
.au-tapa-ico.play svg { margin-left: 4px; }
.au-tapa.toque:hover .au-tapa-ico { transform: scale(1.06); }
.au-tapa.toque:active .au-tapa-ico { transform: scale(.94); }
.au-tapa .giro { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
.au-tapa-demo .au-tapa-btn { margin-top: 2px; }
/* Marca de agua con el correo: encima del video, sin tapar los controles */
.au-marca-agua { position: absolute; top: 12px; right: 12px; z-index: 5; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .78); font-size: 11.5px; font-weight: 600; pointer-events: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-marca-deriva { position: absolute; z-index: 5; left: 8%; top: 68%; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .16); pointer-events: none; white-space: nowrap; animation: au-deriva 48s ease-in-out infinite alternate; }
@keyframes au-deriva { 0% { transform: translate(0, 0); } 33% { transform: translate(30vw, -34vh); } 66% { transform: translate(8vw, -12vh); } 100% { transform: translate(38vw, 4vh); } }
@media (prefers-reduced-motion: reduce) { .au-marca-deriva { animation: none; } }
.au-reproductor:has(.au-tapa) :is(.au-marca-agua, .au-marca-deriva) { display: none; } /* 24-oct: con la tapa a la vista no se cruza con el texto; sale con el video */
.au-leccion-info { margin-top: 16px; }
@media (min-width: 768px) { .au-leccion-info { margin-top: 20px; } }
.au-chips-clase { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au-titulo-clase { margin: 10px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.12; text-wrap: balance; }
@media (min-width: 768px) { .au-titulo-clase { font-size: 30px; } }
.au-desc { margin: 8px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.45; color: var(--texto-2); text-wrap: pretty; }
@media (min-width: 768px) { .au-desc { font-size: 17px; } }
.au-puntos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-width: 72ch; }
.au-puntos li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--texto-2); }
.au-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.au-controles:empty { display: none; }
.au-ctl { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--widget-2); font: inherit; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.au-ctl svg { width: 15px; height: 15px; }
button.au-ctl { cursor: pointer; font-weight: 600; color: var(--texto); }
.au-ctl.enlace { background: transparent; color: var(--acento); padding: 0 10px; }
.au-ctl.visto { background: transparent; color: var(--ok); }
.au-ctl.visto svg { stroke-width: 2.6; }
.au-oferta-linea { margin-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 8px; border-radius: 22px; }
.au-oferta-l-txt { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 15px; min-width: 0; }
.au-oferta-l-txt b { font-weight: 600; letter-spacing: -0.01em; }
.au-reloj { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--urgente); }
.au-reloj svg { width: 16px; height: 16px; stroke-width: 2.4; }
.au-oferta-linea .au-cerrar { grid-column: 3; grid-row: 1; }
.au-oferta-linea .au-reloj { grid-column: 2; grid-row: 2; padding-left: 0; }
.au-oferta-linea .au-obtener { grid-column: 3; grid-row: 2; height: 36px; }
@media (min-width: 640px) {
  .au-oferta-linea { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
  .au-oferta-linea .au-reloj { grid-column: 3; grid-row: 1; }
  .au-oferta-linea .au-obtener { grid-column: 4; grid-row: 1; }
  .au-oferta-linea .au-cerrar { grid-column: 5; grid-row: 1; }
}
.au-material { margin-top: 16px; padding: 12px; }
@media (min-width: 768px) { .au-material { margin-top: 20px; } }
.au-seg { width: 100%; }
@media (min-width: 640px) { .au-seg { width: auto; min-width: 420px; } }
.au-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.au-seg button[aria-selected="true"] { color: var(--texto); background: var(--perilla); box-shadow: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.14); }
.au-seg button svg { width: 16px; height: 16px; }
@media (max-width: 370px) { .au-seg button svg { display: none; } }
.au-material-cuerpo { min-height: 150px; padding: 16px 4px 4px; }
.au-panel[hidden] { display: none; }
.au-nota { min-height: 170px; resize: vertical; padding: 16px; border: 0; border-radius: var(--radio-panel); background: var(--widget-2); font-size: 16px; line-height: 1.55; box-shadow: none; }
.au-nota-pie { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.au-nota-pie [data-nota-estado]:empty { display: none; }
.au-archivos .fila { padding-inline: 4px; }
.au-vacio-chico { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--texto-2); }
.au-navclase { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .au-navclase { grid-template-columns: 1fr 1fr; } }
.au-ant, .au-sig-grande { min-height: 72px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; color: inherit; text-decoration: none; }
.au-ant.apagado { opacity: .6; cursor: default; }
.au-ant:not(:first-child) { justify-content: space-between; padding: 12px 12px 12px 20px; }
.au-sig-grande { justify-content: space-between; padding: 12px 12px 12px 20px; border-radius: 28px; text-align: left; border: 0; cursor: pointer; font: inherit; color: #fff; }
.au-nav-txt { min-width: 0; display: flex; flex-direction: column; }
.au-nav-txt > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.au-sig-grande .au-nav-txt > span { color: rgba(255,255,255,.82); }
.au-nav-txt b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-nav-circulo { width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; background: var(--widget-2); color: var(--texto); }
.au-sig-grande .au-nav-circulo { background: rgba(255,255,255,.2); color: #fff; }
.au-nav-circulo svg { width: 20px; height: 20px; stroke-width: 2.6; }
/* El contenido del curso: riel pegado a la derecha en escritorio; en el celular, una hoja que sube desde abajo */
.au-hoja { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.au-hoja-cab { flex-shrink: 0; padding: 8px 16px 12px; }
@media (min-width: 1024px) { .au-hoja-cab { padding-top: 16px; } }
.au-tirador { display: block; width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 20%, transparent); }
.au-hoja-fila { display: flex; align-items: center; gap: 12px; }
.au-hoja-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-hoja-tit strong { font-size: 17px; letter-spacing: -0.02em; }
.au-hoja-tit span { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.au-hoja-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }
.au-hmod { padding: 2px 0; }
.au-hmod summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; border-radius: 20px; cursor: pointer; transition: background-color .15s; }
.au-hmod summary::-webkit-details-marker { display: none; }
.au-hmod summary:hover { background: var(--widget-2); }
.au-hmod-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-hmod-etq { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.au-hmod-nuevo { color: var(--acento); font-weight: 700; }
.au-hmod-t { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-hmod-flecha { width: 18px; height: 18px; color: var(--texto-2); flex-shrink: 0; transform: rotate(-90deg); transition: transform .2s var(--curva); stroke-width: 2.4; }
.au-hmod[open] .au-hmod-flecha { transform: none; }
.au-hclases { list-style: none; margin: 4px 4px 8px; padding: 4px; border-radius: var(--radio-panel); background: var(--widget-2); }
.au-clase { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 12px; color: var(--texto); text-decoration: none; font-size: 14px; line-height: 1.35; }
.au-clase:hover { background: var(--widget); }
.au-clase.actual { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); font-weight: 600; }
.au-clase .marca { width: 22px; height: 22px; }
.au-clase-t { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-clase .dur { font-size: 13px; color: var(--texto-2); flex-shrink: 0; }
.au-clase.actual .dur { color: inherit; }
.au-hvacio { padding: 10px 12px; font-size: 14px; color: var(--texto-2); }
.au-pildora-contenido, .au-velo { display: none; }
@media (min-width: 1024px) {
  /* 3-nov (Omar): un solo scroll con la página; el riel ya no se queda pegado con su propia barra y se llega al último módulo bajando la página */
  .au-hoja { position: static; max-height: none; overflow: visible; }
  .au-hoja-lista { overflow: visible; }
  .au-hoja-cerrar, .au-tirador { display: none; }
}
@media (max-width: 1023px) {
  .au-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 57; max-height: 82dvh; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .36s var(--curva), visibility 0s linear .36s; }
  .au-hoja[data-abierto="true"] { transform: none; visibility: visible; transition: transform .36s var(--curva), visibility 0s; }
  .au-hoja-cerrar { width: 36px; height: 36px; }
  .au-pildora-contenido { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 8px;
    border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; color: var(--texto); cursor: pointer; }
  .au-pildora-contenido .icono { border-radius: 999px; }
  .au-pildora-contenido:active { transform: scale(.95); }
  .au-velo { display: block; position: fixed; inset: 0; z-index: 56; background: rgb(0 0 0 / .4); animation: au-velo .28s var(--curva) both; }
  .au-velo[hidden] { display: none; }
  html.au-hoja-abierta, html.au-hoja-abierta body { overflow: hidden; }
}
@keyframes au-velo { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .au-hoja, .au-hoja[data-abierto="true"] { transform: none; }
  .au-hoja { opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .au-hoja[data-abierto="true"] { opacity: 1; transition: opacity .2s ease, visibility 0s; }
  .au-velo { animation: none; }
}

/* Comentarios de la lección (moderados: entran «En revisión») */
.au-duda-form textarea { resize: vertical; }
.au-duda-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.au-dudas { display: grid; margin-top: 8px; }
.au-duda { padding: 12px 0; display: grid; gap: 6px; }
.au-duda + .au-duda { box-shadow: 0 -1px 0 var(--linea); }
.au-duda.pendiente { opacity: .8; }
.au-duda-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.au-duda-cab .au-meta { margin: 0; }
.au-duda p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto-2); white-space: pre-line; }
.au-respuesta { margin-left: 16px; padding: 10px 12px; border-radius: var(--radio-panel); background: var(--widget-2); display: grid; gap: 2px; }
.au-respuesta b { font-size: 13px; color: var(--acento); }

/* Hitos (MilestoneCelebration.tsx): velo, confeti de CSS en los azules, el verde y blanco */
.au-celebra { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: au-velo .25s var(--curva) both; }
.au-confeti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.au-confeti span { position: absolute; top: 0; border-radius: 2px; animation: au-confeti linear infinite; }
@keyframes au-confeti { 0% { transform: translateY(-8vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .au-confeti { display: none; } .au-celebra { animation: none; } }
.au-celebra-caja { position: relative; width: 100%; max-width: 420px; padding: 32px 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.au-celebra-x { position: absolute; top: 8px; right: 8px; }
.au-celebra-emoji { font-family: var(--letra-emoji); font-size: 60px; line-height: 1; margin-bottom: 14px; }
.au-celebra h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
.au-celebra p { margin: 8px 0 20px; font-size: 15px; line-height: 1.5; color: var(--texto-2); }
.au-celebra-seguir { margin-top: 12px; min-height: 44px; color: var(--texto-2); }

/* ── Certificado (se imprime en A4 apaisado) ────────────────────────── */
.au-cert-acciones { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.au-cert-marco { position: relative; margin-top: 16px; border-radius: var(--radio-widget); overflow: hidden; box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -36px var(--sombra); }
.au-cert-marco.borrador { opacity: .7; }
.au-cert { position: relative; aspect-ratio: 1.414 / 1; background: #fff; color: #0B0B0F; padding: 3%; container-type: inline-size; }
.au-cert-borde { height: 100%; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, .12); border-radius: 2cqw; padding: 5cqw 6cqw; display: flex; flex-direction: column; }
.au-cert-cabeza { display: flex; align-items: center; justify-content: space-between; font-size: 1.6cqw; color: rgba(0, 0, 0, .55); }
.au-cert-k { margin: auto 0 0; font-size: 1.8cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(0, 0, 0, .55); }
.au-cert-nombre { color: #0B0B0F; margin: 1.4cqw 0 0; font-size: 6.4cqw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.au-cert-texto { margin: 2cqw 0 auto; font-size: 2.2cqw; line-height: 1.45; color: rgba(0, 0, 0, .7); max-width: 70cqw; }
.au-cert-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqw; font-size: 1.5cqw; color: rgba(0, 0, 0, .55); }
.au-cert-pie > div { display: flex; flex-direction: column; gap: .4cqw; }
.au-cert-pie > div:last-child { text-align: right; }
.au-cert-firma { font-family: var(--letra-firma, var(--letra)); font-size: 3.4cqw; color: #0B0B0F; }
.au-cert-sello { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 1cqw 3cqw; border: 2px solid currentColor; border-radius: 1cqw; font-size: 3cqw; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .25); }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden !important; }
  .au-cert, .au-cert * { visibility: visible !important; }
  .au-cert { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; padding: 8mm; }
  .au-cert-marco { box-shadow: none; }
}


/* ── Perfil (PerfilEstudiante.tsx) ────────────────────────────────── */
.au-perfil-cab { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.au-perfil-avatar { flex-shrink: 0; width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #fff;
  background: linear-gradient(150deg, #62B6FF 0%, #1A7BFF 50%, #0B57D0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 28px -14px rgba(26,123,255,.75); }
.au-perfil-quien { min-width: 0; }
.au-perfil-quien .au-h1 { font-size: 26px; }
.au-perfil-quien p { margin: 4px 0 0; font-size: 14px; color: var(--texto-2); }
.au-perfil-correo { display: block; margin-top: 2px; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.au-datos { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 16px; }
@media (min-width: 768px) { .au-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.au-dato { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.au-dato .icono { margin-bottom: 8px; }
.au-dato-etq { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.au-dato-val { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.au-dato-pie { font-size: 12.5px; line-height: 1.4; color: var(--texto-2); }
.au-mapa-caja { margin-bottom: 8px; }
.au-mapa-cab h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.au-mapa-cab span { display: block; margin: 3px 0 16px; font-size: 13px; color: var(--texto-2); }
.au-mapa { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); grid-auto-columns: 14px; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.au-mapa span { border-radius: 4px; background: color-mix(in srgb, var(--texto) 7%, transparent); }
.au-mapa span[data-nivel="1"] { background: color-mix(in srgb, var(--acento) 25%, transparent); }
.au-mapa span[data-nivel="2"] { background: color-mix(in srgb, var(--acento) 48%, transparent); }
.au-mapa span[data-nivel="3"] { background: color-mix(in srgb, var(--acento) 72%, transparent); }
.au-mapa span[data-nivel="4"] { background: var(--acento); }
@media (max-width: 640px) { .au-mapa { grid-template-rows: repeat(7, 12px); grid-auto-columns: 12px; } }
.au-mapa-vacio { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.au-salir { color: var(--urgente); }
.au-compra-portada { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin: 4px 0 18px; }
.au-compra-foto { width: 96px; height: 96px; border-radius: 22px; object-fit: cover; }

/* ── Panel → «Cursos» (assets/js/admin-cursos.js) ──────────────────── */
.ac-seg { margin-bottom: var(--hueco); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ac-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--urgente); color: #fff; font-size: 11px; }
.ac-kpis { display: grid; gap: var(--hueco); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--hueco); }
@media (min-width: 1024px) { .ac-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ac-bunny { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--hueco); }
.ac-bunny > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.ac-bunny span { font-size: 13px; color: var(--texto-2); }
.ac-dos { display: grid; gap: var(--hueco); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ac-dos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; } }
.ac-curso .campo > span, .hoja .campo > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.ac-interruptores { display: flex; gap: 10px 20px; flex-wrap: wrap; }
.ac-int { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.ac-int input { width: 20px; height: 20px; accent-color: var(--acento); }
.ac-guardar { justify-self: start; }
.ac-nota { margin: 0; font-size: 13px; color: var(--texto-2); }
.ac-h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ac-cuenta { font-size: 13px; font-weight: 500; color: var(--texto-3); }
.ac-modulos { gap: 10px; }
.ac-modulo { padding: 0; overflow: hidden; }
.ac-modulo summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px var(--relleno-widget); cursor: pointer; }
.ac-modulo summary::-webkit-details-marker { display: none; }
.ac-mod-n { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--widget-2); color: var(--texto-2); }
.ac-mod-n svg { width: 16px; height: 16px; color: var(--acento); }
.ac-mod-txt, .ac-clase-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-mod-txt b { font-size: 15px; line-height: 1.25; }
.ac-mod-txt span, .ac-clase-txt span { font-size: 12.5px; color: var(--texto-3); }
.ac-mod-acc { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ac-modulo .redondo.chico, .ac-clase .redondo.chico { width: 32px; height: 32px; }
.ac-modulo .redondo.chico svg, .ac-clase .redondo.chico svg { width: 15px; height: 15px; }
.ac-modulo .redondo:disabled, .ac-clase .redondo:disabled { opacity: .3; cursor: default; }
.ac-clases { padding: 0 8px 8px; display: grid; gap: 2px; }
.ac-clase { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--radio-panel); }
.ac-clase:hover { background: var(--widget-2); }
.ac-clase-n { width: 22px; text-align: right; font-size: 12px; color: var(--texto-3); flex-shrink: 0; }
.ac-clase-txt b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.ac-oculto { opacity: .62; }
.ac-falta { color: var(--urgente); font-weight: 600; }
@media (max-width: 640px) { .ac-clase { flex-wrap: wrap; } .ac-clase-txt { flex-basis: calc(100% - 40px); } .ac-clase .icono.xs { display: none; } .ac-mod-acc .redondo { display: none; } }
.ac-seg-dudas { margin-bottom: var(--hueco); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ac-dudas { gap: 10px; }
.ac-duda { display: grid; gap: 8px; }
.ac-duda-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-meta { font-size: 12.5px; color: var(--texto-3); }
.ac-duda-donde { text-decoration: none; }
.ac-duda-donde:hover { color: var(--acento); }
.ac-duda-cuerpo { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.ac-respuesta { padding: 10px 12px; border-radius: var(--radio-panel); background: var(--widget-2); display: grid; gap: 2px; }
.ac-respuesta b { font-size: 12.5px; color: var(--acento); }
.ac-respuesta p { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.ac-duda-acc { gap: 8px; }
.ac-quitar { color: var(--urgente); }


/* 28-oct (Omar): píldora verde de «Recursos del curso» en la barra de la clase y pop-up de los recursos */
.au-pildora.verde { background: #0F7D3C; color: #fff; }
.au-pildora.verde > svg { color: #fff; }
.au-pildora.verde .icono { background: transparent; color: #fff; }
.au-pildora.verde:hover { filter: brightness(1.06); }
.hoja.pop-rec { position: relative; width: 100%; max-width: 400px; padding: 0; border-radius: 28px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.55); }
.hoja.pop-rec .asa { display: none; }
.pr-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; }
.pr-x svg { width: 16px; height: 16px; }
.pr-cuerpo { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 12px; text-align: center; }
.pr-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, #1FA855 16%, transparent); color: #1FA855; }
.pr-ico svg { width: 28px; height: 28px; stroke-width: 2.4; }
.pr-t { margin: 14px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.pr-texto { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--texto-2); }
.pr-botones { width: 100%; display: grid; gap: 10px; margin-top: 18px; }
.pr-btn { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; border-radius: 16px; background: #0F7D3C; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; text-align: left; box-shadow: 0 12px 24px -14px rgba(15,125,60,.9); }
.pr-btn span { flex: 1; min-width: 0; }
.pr-btn svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2.4; }
.pr-btn:hover { filter: brightness(1.06); }
.pr-btn:active { transform: scale(.985); }
.pr-ahora-no { margin-top: 6px; padding: 10px 16px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-2); cursor: pointer; }
/* 29-oct: pop-up de los módulos que vienen (aula.js · popNovedades), con las piezas del de recursos en azul */
.pn-ico { background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.pn-lista { width: 100%; display: grid; gap: 8px; margin-top: 18px; text-align: left; }
.pn-mod { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--acento-suave); border: 1px solid transparent; }
.pn-mod b { font-size: 15px; line-height: 1.3; }
.pn-mod span { font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.pn-mod .pn-dia { font-weight: 600; color: var(--acento); }
.pn-ok { justify-content: center; margin-top: 18px; width: 100%; border: 0; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--acento-boton); box-shadow: 0 12px 24px -14px rgba(11,99,217,.9); }
.pn-ok span { flex: 0 1 auto; text-align: center; }
/* 30-oct: enlace fijo a la comunidad en la barra (computadora) y tutorial para instalar la app */
.au-barra-com { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--widget-2); color: var(--texto); font-size: 14px; font-weight: 600; text-decoration: none; }
.au-barra-com svg { width: 18px; height: 18px; }
.au-app-guia { margin-bottom: 18px; }
.au-app-guia-t { font-size: 13px; font-weight: 700; color: var(--texto-2); margin-bottom: 8px; }
.au-app-guia ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; }
.au-app-aviso { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--widget-2); font-size: 14px; line-height: 1.45; }

/* Portadas de los módulos (aula.js · portadaModulo): escena sobre grafito y el logo de la herramienta de sello */
.au-portada { position: relative; background: linear-gradient(150deg, #3A3A3C 0%, #1C1C1E 60%, #0B0B0C 100%); --brillo: rgba(0, 0, 0, .55); }
.au-portada > svg { width: 100%; height: 100%; filter: none; stroke: #F2F2F7; }
.au-portada .az { fill: #3D9BFF; } .au-portada .bl { fill: #F2F2F7; } .au-portada .rj { fill: #FF453A; }
.au-portada .tz { stroke: #3D9BFF; } .au-portada .tr { stroke: #FF453A; }
.au-port-sello { position: absolute; right: -4px; bottom: -4px; width: 44%; height: 44%; border-radius: 30%; object-fit: cover; box-shadow: 0 0 0 2px var(--widget); }
/* Módulos sin lecciones (3-nov, Omar): todo en gris y «Próximamente» — lista del curso, hoja «Contenido del curso» y temario de la vitrina */
.au-port-gris { filter: grayscale(1); opacity: .55; }
.au-modulo.apagado .au-mod-t, .au-modulo.apagado .au-mod-d { color: var(--texto-2); }
.au-hmod-fila { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 8px; }
.au-hmod-pronto .au-hmod-t { color: var(--texto-2); }
.dw-mod-pronto .dw-mod-t b { color: var(--texto-2); }