/* =====================================================================
   Composición de páginas de la app (prefijo pg-).
   ---------------------------------------------------------------------
   Todo lo reutilizable (tokens, colores, botones, tarjetas, formularios,
   tablas, pregunta de ensayo, modo oscuro...) vive en ui/sistema.css,
   que se carga antes. Aquí solo va cómo se arma cada página puntual,
   usando las variables --ui-* (así respeta el modo oscuro).
   No redefinir aquí componentes ui-: si algo se repite en dos páginas,
   pasa a sistema.css.
   ===================================================================== */

/* ---------- Comunes ---------- */
.pg-subtitulo { margin: 0; font-size: var(--ui-t-sm); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-texto-2); }
.pg-mensaje, .pg-portada { max-width: 560px; margin: var(--ui-e10) auto; }
.pg-portada .ui-titulo-1 { max-width: 18ch; }

/* ---------- Inicio ---------- */
.pg-continua { padding: var(--ui-e5); padding-left: calc(var(--ui-e5) + 4px); }
.pg-continua .ui-titulo-3 { overflow-wrap: anywhere; }
.pg-acceso { gap: var(--ui-e1); }
.pg-acceso__icono {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: var(--ui-e1);
  background: var(--eje-suave); color: var(--eje-texto);
}
.pg-acceso__icono svg { width: 22px; height: 22px; }

/* ---------- Material: prueba ---------- */
.pg-eje { background: linear-gradient(180deg, var(--eje-suave), var(--ui-superficie) 70%); }
.pg-eje__icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--eje); color: var(--ui-superficie); flex: none; }
.pg-eje__icono svg { width: 24px; height: 24px; }
.pg-eje__titulo { font-size: var(--ui-t-lg); }

/* ---------- Material: eje ---------- */
.pg-hero-eje {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-e6); flex-wrap: wrap;
  background: linear-gradient(135deg, var(--eje-suave), var(--ui-superficie) 75%); border-top: 4px solid var(--eje);
}
.pg-hero-eje__texto { display: grid; gap: var(--ui-e2); flex: 1 1 280px; min-width: 0; justify-items: start; }
.pg-hero-eje__texto p { margin: 0; }
.pg-niveles { list-style: none; margin: 0; padding: 0; }
.pg-temas { list-style: none; margin: 0; padding: 0; }
.pg-tema__numero {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--eje-suave); color: var(--eje-texto); font-weight: 800; font-size: var(--ui-t-sm);
}
.pg-vista-rapida { background: var(--ui-superficie-2); }
.pg-vista-rapida > summary { font-size: var(--ui-t-sm); color: var(--ui-enlace); }

/* ---------- Material: tema ---------- */
.pg-ejemplo { gap: var(--ui-e3); }
.pg-ejemplo + .pg-ejemplo { margin-top: var(--ui-e3); }
.pg-solucion > summary { color: var(--ui-enlace); }
.pg-solucion__texto { margin: 0; overflow-wrap: anywhere; }
.pg-practica { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-e4); flex-wrap: wrap; margin-top: var(--ui-e8); border-left: 4px solid var(--eje); }
.pg-practica > div { flex: 1 1 260px; }
.pg-practica p { margin: var(--ui-e1) 0 0; }
/* Pasos del tema (índice numerado) y «Siguiente» al pie de cada sección (2026-10-07) */
.pg-pasos .pg-pasos__n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: var(--ui-e2); border-radius: 50%; flex: none;
  background: var(--eje-suave); color: var(--eje-texto); font-size: .75rem; font-weight: 800;
}
.ui-app .pg-pasos a.pg-pasos__practicar { border-color: var(--ui-accion); }
.pg-pasos a.pg-pasos__practicar .pg-pasos__n { background: var(--ui-accion); color: var(--ui-sobre-accion); }
.pg-siguiente { display: flex; justify-content: flex-end; margin: var(--ui-e3) 0 0; }

/* ---------- Clases y lección ---------- */
.pg-grupo-clases { display: grid; gap: var(--ui-e3); margin-bottom: var(--ui-e6); }
.pg-grupo-clases__titulo { margin: 0; }
.pg-grupo-clases__titulo .ui-chip { font-size: var(--ui-t-sm); min-height: 30px; padding: 4px 12px; }
.pg-sin-clases { margin: 0; padding: var(--ui-e3) var(--ui-e4); border: 1px dashed var(--ui-borde); border-radius: var(--ui-radio-sm); }
.pg-leccion__video { margin-bottom: var(--ui-e5); }
@media (max-width: 599.98px) {
  /* El video ocupa todo el ancho en celular */
  .pg-leccion__video { margin-inline: calc(var(--ui-e4) * -1); }
  .pg-leccion__video .ui-video { border-radius: 0; }
}
.pg-leccion__descripcion { margin-bottom: var(--ui-e4); }

/* ---------- Ensayos: armado ---------- */
.pg-selector-prueba { margin-bottom: var(--ui-e4); }
.pg-armado__eje { display: grid; gap: var(--ui-e1); align-content: start; }
.pg-armado__temas > summary {
  display: flex; align-items: center; gap: 6px; min-height: var(--ui-tactil); padding: 0 var(--ui-e2);
  cursor: pointer; font-size: var(--ui-t-sm); font-weight: 700; color: var(--ui-enlace);
}
.pg-armado__temas > .ui-opciones { padding: var(--ui-e1) 0 var(--ui-e2) var(--ui-e3); border-left: 3px solid var(--eje); margin-left: var(--ui-e2); }
/* Minutos solo cuando se eligió "Elegir minutos" (el campo deshabilitado no se envía, igual que antes) */
.pg-armado:not(:has(input[name="tiempo"][value="personalizado"]:checked)) .pg-armado__minutos { display: none; }
.pg-armado__minutos { max-width: 240px; }
.pg-armado__resumen {
  position: sticky; bottom: calc(var(--ui-alto-nav) + env(safe-area-inset-bottom, 0px) + var(--ui-e2)); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-e3); flex-wrap: wrap;
  padding: var(--ui-e3) var(--ui-e4); border-radius: var(--ui-radio-lg);
  background: var(--ui-superficie); border: 1px solid var(--ui-borde); box-shadow: var(--ui-sombra-3);
}
@media (min-width: 900px) { .pg-armado__resumen { bottom: var(--ui-e4); } }
.pg-armado__cifras { display: flex; gap: var(--ui-e4); margin: 0; font-size: var(--ui-t-sm); color: var(--ui-texto-2); }
.pg-armado__cifras span { display: inline-flex; align-items: center; gap: 6px; }
.pg-armado__cifras strong { color: var(--ui-texto); font-size: var(--ui-t-md); font-variant-numeric: tabular-nums; }
.pg-armado__resumen .ui-boton { flex: 1 1 200px; }
@media (min-width: 600px) { .pg-armado__resumen .ui-boton { flex: 0 0 auto; } }

/* ---------- Ensayos: rendición ---------- */
.pg-rendicion { padding-top: 0; }
.pg-rendicion .ui-ensayo-barra { margin: 0 calc(var(--ui-e4) * -1) var(--ui-e4); }
@media (min-width: 1072px) { .pg-rendicion .ui-ensayo-barra { margin-inline: 0; border-radius: 0 0 var(--ui-radio) var(--ui-radio); border: 1px solid var(--ui-borde); border-top: 0; } }
.pg-rendicion__anterior { order: -1; }
.pg-rendicion .ui-pregunta__pie .ui-boton { white-space: nowrap; padding: 0 var(--ui-e3); }
.pg-rendicion__lateral { display: grid; gap: var(--ui-e3); }
.pg-rendicion__nota { text-align: center; }
@media (min-width: 1024px) {
  .pg-rendicion__lateral .ui-desplegable > summary { pointer-events: none; }
  .pg-rendicion__lateral .ui-desplegable > summary::after { display: none; }
}

/* ---------- Ensayos: resultado ---------- */
.pg-puntaje { display: flex; align-items: center; gap: var(--ui-e6); flex-wrap: wrap; border-top: 4px solid var(--ui-marca-600); }
.pg-puntaje__texto { display: grid; gap: var(--ui-e1); flex: 1 1 240px; }
.pg-puntaje__texto p { margin: 0; }
.pg-puntaje__texto svg { width: 16px; height: 16px; vertical-align: -3px; }
.pg-puntaje__principal { font-size: var(--ui-t-xl); font-weight: 700; }
.pg-puntaje__principal strong { font-size: var(--ui-t-2xl); }
.pg-eje-resultado { padding: var(--ui-e4); }
.pg-nota-tabla { margin-top: var(--ui-e3); }
.pg-revision { border-left-width: 4px; }
.pg-revision--correcta { border-left-color: var(--ui-exito); }
.pg-revision--incorrecta { border-left-color: var(--ui-peligro); }
.pg-revision__estado { display: inline-flex; gap: var(--ui-e1); flex-wrap: wrap; margin-left: auto; }
.pg-revision > summary { gap: var(--ui-e3); }
.pg-acciones-finales { margin-top: var(--ui-e8); }
.ui-mapa__leyenda svg { width: 14px; height: 14px; }

/* ---------- Mi progreso ---------- */
.pg-graficos { display: grid; gap: var(--ui-e4); margin-block: var(--ui-e6) var(--ui-e4); }
@media (min-width: 960px) { .pg-graficos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.pg-graficos p { margin: var(--ui-e1) 0 0; }
.pg-niveles-barra { display: flex; gap: 3px; height: 12px; border-radius: var(--ui-radio-pill); overflow: hidden; background: var(--ui-pista); }
.pg-niveles-barra__tramo { flex-basis: 0; }
.pg-niveles-barra__tramo--dominado { background: var(--ui-exito); }
.pg-niveles-barra__tramo--competente { background: color-mix(in srgb, var(--ui-exito) 55%, var(--ui-superficie)); }
.pg-niveles-barra__tramo--en_progreso { background: var(--eje); }
.pg-niveles-barra__tramo--sin_practica { background: var(--ui-pista); }

/* ---------- Login ---------- */
.pg-login { display: grid; place-items: center; min-height: calc(100vh - 56px); padding-block: var(--ui-e6); }
.pg-login__marco { display: grid; gap: var(--ui-e6); width: 100%; max-width: 960px; align-items: center; }
.pg-login__formulario { display: grid; gap: var(--ui-e4); width: 100%; max-width: 440px; justify-self: center; box-shadow: var(--ui-sombra-3); }
.pg-login__formulario > p, .pg-login__formulario h1 { margin: 0; }
.pg-login__lado { display: none; }
@media (min-width: 860px) {
  .pg-login__marco { grid-template-columns: 1fr 1fr; gap: var(--ui-e12); }
  .pg-login__lado {
    display: grid; gap: var(--ui-e4); padding: var(--ui-e10); border-radius: var(--ui-radio-lg); color: #fff;
    background: radial-gradient(circle at 85% 15%, rgba(45, 212, 191, .35), transparent 45%), linear-gradient(145deg, #10243e, #1e5fa8);
  }
  .pg-login__lado .ui-antetitulo { color: #b2ccec; }
}
.pg-login__lema { margin: 0; font-family: var(--ui-fuente-titulos); font-size: var(--ui-t-2xl); font-weight: 800; line-height: 1.15; }
.pg-login__puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-e3); }
.pg-login__puntos li { display: flex; align-items: center; gap: var(--ui-e3); font-weight: 600; }
.pg-login__puntos span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 var(--eje); flex: none; }
.pg-login__puntos svg { width: 20px; height: 20px; }

/* ---------- Admin ---------- */
.pg-form-admin { max-width: 640px; }
/* Ficha del alumno: RUT, estado de la contraseña y último ingreso */
.pg-datos-acceso { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; }
.pg-datos-acceso dt { font-weight: 600; }
.pg-datos-acceso dd { margin: 0; overflow-wrap: anywhere; }
.pg-eliminar { margin-top: var(--ui-e6); }

/* ---------- Barra superior en pantallas muy angostas ---------- */
@media (max-width: 400px) {
  .ui-barra-app .ui-marca { font-size: var(--ui-t-sm); }
}

/* ==========================================================================
   Ola de corrección 2026-09-23
   ========================================================================== */

/* ---------- Admin en celular (UX-28) ----------
   La barra superior del admin (marca + tema + Admin + Salir) medía ~400 px y desbordaba
   a 320/375. Bajo 480 px los botones quedan solo con ícono; el texto sigue disponible
   para lectores de pantalla (misma técnica que .ui-sr). */
@media (max-width: 479px) {
  .ui-barra-app .ui-boton__texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .ui-barra-app .ui-boton--chico { min-width: 44px; justify-content: center; }
  .ui-barra-app .ui-marca { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.ui-barra-app { min-width: 0; }
.ui-barra-app__acciones { flex: none; }
/* Listas del admin: las acciones bajan a su propia línea en vez de empujar la página */
.ui-lista__cuerpo { min-width: 0; }
.ui-lista__meta, .pg-correo { overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .ui-lista__item:has(.ui-lista__acciones) { flex-wrap: wrap; }
  .ui-lista__acciones { flex-basis: 100%; }
}

/* ---------- Franja "Estás viendo como estudiante" ---------- */
.pg-franja-estudiante {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: var(--ui-e3); flex-wrap: wrap;
  padding: var(--ui-e2) var(--ui-e4); background: #7a4b00; color: #fff; font-weight: 700; font-size: var(--ui-t-sm);
}
.pg-franja-estudiante p { margin: 0; display: flex; align-items: center; gap: var(--ui-e2); }
.pg-franja-estudiante svg { width: 18px; height: 18px; }
.pg-franja-estudiante__salir, .ui-app .pg-franja-estudiante__salir {
  background: #fff; color: #5c3900; border: 0; min-height: 36px;
}

/* ---------- Doble vista del Material (solo admin; static/js/capas.js) ---------- */
.pg-capas { display: grid; gap: var(--ui-e3); }
.pg-interruptor { justify-self: start; }
.pg-capas[data-vista="profesor"] > [data-capa="alumno"],
.pg-capas[data-vista="alumno"] > [data-capa="profesor"] { display: none; }
.pg-capas > [data-capa="profesor"] { border-left: 4px solid var(--ui-borde-fuerte); padding-left: var(--ui-e3); }

/* ---------- Contenido con Markdown y fórmulas (app/texto.py) ---------- */
.ui-prosa > :first-child { margin-top: 0; }
.ui-prosa > :last-child { margin-bottom: 0; }
.ui-prosa p { margin: 0 0 var(--ui-e3); }
.ui-prosa ul, .ui-prosa ol { margin: 0 0 var(--ui-e3); padding-left: 1.4em; }
/* Tablas: con scroll propio si no caben, nunca la página completa */
.ui-prosa table, .ui-pregunta__enunciado table {
  display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--ui-e3);
  font-variant-numeric: tabular-nums;
}
.ui-prosa th, .ui-prosa td { border: 1px solid var(--ui-borde-fuerte); padding: 6px 10px; text-align: left; }
.ui-prosa th { background: var(--ui-superficie-2); }
.ktx--bloque { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; }



/* ---------- Ensayos ---------- */
.pg-instruccion-sd { margin-bottom: var(--ui-e3); }
/* Revisión en pantallas angostas (UX-23): la etiqueta "Correcta · tu respuesta" va en su
   propia línea bajo el texto, en vez de comerse el ancho de la alternativa. */
.ui-alternativa__estado { display: inline-flex; align-items: center; gap: 4px; }
.ui-alternativa__estado svg { width: 14px; height: 14px; }
@media (max-width: 479px) {
  .ui-alternativas--revision .ui-alternativa { flex-wrap: wrap; }
  .ui-alternativas--revision .ui-alternativa__texto { flex: 1 1 calc(100% - 48px); }
  .ui-alternativas--revision .ui-alternativa__estado { margin-left: calc(36px + var(--ui-e3)); }
}
/* Resultado: "Practicar lo que fallé" y acciones por tema (UX-39) */
.pg-practicar-fallados { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-e3); margin-bottom: var(--ui-e3); }
.pg-practicar-fallados p { margin: 0; }
.pg-tema-acciones { display: flex; flex-wrap: wrap; gap: var(--ui-e2); }
/* Fórmula en línea que no cabe (la marca static/js/matematica.js): scroll propio */
.ktx--ancha { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; }
/* Contenedores de contenido: que una pieza ancha no ensanche la página */
.ui-pregunta, .ui-prosa, .ui-retro, .ui-desplegable, .ui-desplegable__cuerpo, .ui-caja, .ui-tarjeta > * { min-width: 0; }

/* ---------- Mejora continua: "¿Te sirvió?", "Comentar", "Reportar" (templates/_opinar.html) ---------- */
.pg-opinar { display: grid; gap: var(--ui-e1); margin-top: var(--ui-e2); min-width: 0; }
.pg-opinar__fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ui-e1) var(--ui-e2); }
.pg-opinar__votos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-e1); margin: 0; }
.pg-opinar__pregunta { font-size: var(--ui-t-sm); color: var(--ui-texto-2); margin-right: var(--ui-e1); }
.pg-opinar .ui-boton svg { width: 18px; height: 18px; color: currentColor; margin: 0; }
/* Voto elegido: borde + fondo + texto en negrita (no solo color) */
.pg-opinar__voto { border: 2px solid transparent; }
.pg-opinar__voto[aria-pressed="true"], .ui-app .pg-opinar__voto[aria-pressed="true"] {
  background: var(--eje-suave, var(--ui-superficie-2)); border: 2px solid var(--eje, var(--ui-marca-600));
  color: var(--ui-texto); font-weight: 800;
}
.pg-opinar__estado { margin: 0; min-height: 1.2em; color: var(--ui-texto-2); }
.pg-opinar__estado:empty { min-height: 0; }
.pg-opinar__estado--error { color: var(--ui-peligro, #b42318); font-weight: 600; }
.pg-comentar { flex: 1 1 auto; min-width: 0; }
.pg-comentar > summary { list-style: none; cursor: pointer; width: max-content; }
.pg-comentar > summary::-webkit-details-marker { display: none; }
.pg-comentar[open] { flex-basis: 100%; }
.pg-comentar__form {
  gap: var(--ui-e3); margin-top: var(--ui-e2); padding: var(--ui-e3);
  background: var(--ui-superficie); border: 1px solid var(--ui-borde); border-radius: var(--ui-radio-sm);
}
.pg-comentar__leyenda { font-weight: 700; font-size: var(--ui-t-sm); margin-bottom: var(--ui-e1); }
.pg-chips { display: flex; flex-wrap: wrap; gap: var(--ui-e2); }
.pg-chip { flex: 0 1 auto; }
/* Dentro de un error común (fila flex con ícono) el bloque va en su propia línea */
.ui-lista-errores li:has(.pg-opinar) { flex-wrap: wrap; }
.ui-lista-errores li > .pg-opinar { flex-basis: 100%; }
.ui-lista-errores .pg-opinar svg { color: currentColor; }

/* ---------- Panel "Mejora continua" (admin) ---------- */
.pg-periodo { margin-bottom: var(--ui-e4); }
.pg-top { display: grid; gap: var(--ui-e4); }
@media (min-width: 900px) { .pg-top { grid-template-columns: 1fr 1fr; } }
.pg-top ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--ui-e2); }
.pg-top li small { display: block; color: var(--ui-texto-2); }
.pg-tabla-mejora th a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pg-tabla-mejora th a[aria-current] { color: var(--ui-texto); }
.pg-tabla-mejora td { font-variant-numeric: tabular-nums; }
.pg-ordenar { align-items: end; margin-bottom: var(--ui-e3); }
.pg-ordenar .ui-campo { flex: 1 1 200px; }
.pg-desglose > summary { cursor: pointer; font-weight: 700; min-height: var(--ui-tactil); display: inline-flex; align-items: center; }
.pg-desglose ul { margin: var(--ui-e1) 0 0; padding-left: 1.2em; font-size: var(--ui-t-sm); }
.pg-ic { display: block; font-size: var(--ui-t-xs); color: var(--ui-texto-2); }
.pg-lista-comentarios { list-style: none; margin: 0; padding: 0; }
.pg-comentario { display: grid; gap: var(--ui-e2); }
.pg-comentario__meta { display: flex; flex-wrap: wrap; gap: var(--ui-e1) var(--ui-e3); font-size: var(--ui-t-sm); color: var(--ui-texto-2); }
.pg-comentario__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-filtros { display: grid; gap: var(--ui-e3); }
@media (min-width: 700px) { .pg-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pg-filtros__acciones { display: flex; flex-wrap: wrap; gap: var(--ui-e2); align-items: end; }

/* Mejora continua: aviso de uso (alumno) y niveles de gravedad del panel (admin) */
.pg-aviso-uso { margin: var(--ui-e1) 0 0; }
.pg-resumen-niveles ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--ui-e1); }
.pg-lista-nivel { list-style: none; margin: 0; padding: 0; }
.pg-item-nivel { display: grid; gap: var(--ui-e1); min-width: 0; overflow-wrap: anywhere; }
.pg-item-nivel__titulo { margin: 0; font-weight: 600; }
.pg-item-nivel__datos { margin: 0; gap: var(--ui-e1); }
.pg-item-nivel__motivos { margin: 0; padding-left: 1.25rem; font-size: var(--ui-t-sm); }
.pg-nivel--1 .pg-item-nivel { border-left: 4px solid var(--ui-peligro, #b42318); }
.pg-paginas { flex-wrap: wrap; align-items: center; gap: var(--ui-e1); margin-top: var(--ui-e2); }
.pg-paginas [aria-current="page"] { font-weight: 700; text-decoration: underline; }

/* ---------- Registro, términos y activación ---------- */
.pg-casilla { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.pg-casilla input { margin-top: 0.25rem; width: 1.1rem; height: 1.1rem; flex: none; }
.pg-terminos { max-width: 760px; }
.pg-terminos ul { padding-left: 1.2rem; }
.pg-terminos li + li { margin-top: 0.4rem; }
.pg-activar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.pg-datos-pago { white-space: pre-line; font-weight: 600; padding: 0.8rem 1rem; border-radius: 0.6rem; border: 1px dashed currentColor; overflow-wrap: anywhere; }
.pg-codigo { font-family: ui-monospace, monospace; font-weight: 700; letter-spacing: 0.05em; }
.pg-codigo-ajuste label { display: inline-flex; gap: 0.4rem; align-items: center; }
.pg-cupos { width: 5.5rem; padding-block: 0.3rem; }

/* ---------- Tickets del profesor (_tickets.html, static/js/tickets.js; solo admin) ---------- */
/* Botón flotante: sobre la barra inferior en el celular, abajo a la derecha en escritorio. */
.pg-reportar {
  position: fixed; z-index: 55; right: var(--ui-e3);
  bottom: calc(var(--ui-e3) + env(safe-area-inset-bottom, 0px));
  min-height: var(--ui-tactil); border-radius: var(--ui-radio-pill); box-shadow: var(--ui-sombra-3);
}
.ui-con-nav .pg-reportar { bottom: calc(var(--ui-alto-nav) + env(safe-area-inset-bottom, 0px) + var(--ui-e3)); }
/* Armar ensayo: la barra pegajosa con "Crear ensayo" queda abajo; el botón sube sobre ella */
.ui-con-nav:has(.pg-armado__resumen) .pg-reportar { bottom: calc(var(--ui-alto-nav) + env(safe-area-inset-bottom, 0px) + 96px); }
@media (max-width: 599px) {
  .pg-reportar { width: var(--ui-tactil); padding: 0; justify-content: center; }
  .pg-reportar span { display: none; }
}
@media (min-width: 900px) {
  .pg-reportar, .ui-con-nav .pg-reportar { right: var(--ui-e6); bottom: var(--ui-e6); }
}
.pg-ticket-dialogo {
  width: min(560px, calc(100vw - 2 * var(--ui-e3))); max-height: calc(100dvh - 2 * var(--ui-e3));
  padding: var(--ui-e4); border: 1px solid var(--ui-borde); border-radius: var(--ui-radio-lg);
  background: var(--ui-superficie); color: var(--ui-texto); box-shadow: var(--ui-sombra-3);
}
.pg-ticket-dialogo::backdrop { background: rgba(16, 36, 62, .45); }
.pg-ticket-dialogo__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-e2); }
.pg-ticket-dialogo__cabecera h2 { margin: 0; }
.pg-ticket-dialogo__texto { display: flex; gap: var(--ui-e2); align-items: flex-start; }
.pg-ticket-dialogo__texto textarea { flex: 1; min-width: 0; }
.pg-ticket-dialogo__micro[aria-pressed="true"] { background: var(--ui-peligro); color: #fff; }
.pg-ticket-dialogo__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-e3); }
.pg-ticket-dialogo__zona { border: 1px dashed var(--ui-borde-fuerte); border-radius: var(--ui-radio); padding: var(--ui-e2); }
.pg-arrastrando .pg-ticket-dialogo__zona { background: var(--ui-info-suave); border-color: var(--ui-info); }
.pg-ticket-dialogo__miniaturas { list-style: none; margin: var(--ui-e2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ui-e2); }
.pg-ticket-dialogo__miniatura { display: grid; gap: var(--ui-e1); justify-items: center; max-width: 96px; font-size: var(--ui-t-xs); overflow-wrap: anywhere; }
.pg-ticket-dialogo__miniatura img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--ui-radio-sm); border: 1px solid var(--ui-borde); }
.pg-oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-tickets-conteos { list-style: none; padding: 0; flex-wrap: wrap; }
.pg-ticket__id { font-weight: 700; font-family: var(--ui-mono); }
.pg-ticket__texto { white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.pg-ticket__datos { display: grid; grid-template-columns: max-content 1fr; gap: var(--ui-e1) var(--ui-e4); margin: 0; }
.pg-ticket__datos dt { font-weight: 600; color: var(--ui-texto-2); }
.pg-ticket__datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pg-ticket__adjuntos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ui-e4); }
.pg-ticket__adjuntos img { max-width: 100%; height: auto; border: 1px solid var(--ui-borde); border-radius: var(--ui-radio-sm); }
.pg-ticket__anclas { margin: 0; padding-left: 1.1rem; }

/* Botón ⓘ (boton_info en app/plantillas.py): se ve de ~24 px, pero el área táctil es de 44 px.
   Los márgenes negativos evitan que agrande la línea del título. */
.pg-info {
  display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle;
  width: var(--ui-tactil); height: var(--ui-tactil); margin: -10px -10px -10px -4px; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--ui-texto-2); cursor: pointer;
}
.pg-info > span {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border: 1.5px solid currentColor; border-radius: 50%;
  font: italic 700 13px/1 Georgia, "Times New Roman", serif;
}
.pg-info:hover, .pg-info[aria-expanded="true"] { color: var(--ui-foco); }
.pg-info:focus-visible { outline: 3px solid var(--ui-foco); outline-offset: -6px; }
/* ⓘ de un ítem: arriba a la derecha de la tarjeta (fórmula, error común); en las cabeceras de
   ejemplos y preguntas va al final de la fila */
.ui-formula:has(> .pg-info--item), .ui-lista-errores li:has(> .pg-info--item) { position: relative; }
.ui-formula > .pg-info--item, .ui-lista-errores li > .pg-info--item { position: absolute; top: 0; right: 0; margin: 0; }
.ui-formula:has(> .pg-info--item) > :first-child { padding-right: 28px; }
.ui-lista-errores li:has(> .pg-info--item) { padding-right: var(--ui-tactil); }
.ui-pregunta__cabecera > .pg-info--item { margin: -10px -10px -10px auto; }
.ui-pregunta__cabecera .ui-marcar + .pg-info--item { margin-left: 0; }
.pg-revision > summary > .pg-info--item { margin: -10px 0; }
/* Menú de opciones del ⓘ (una sola instancia en _tickets.html) */
.pg-info-menu {
  position: fixed; z-index: 60; min-width: 200px; padding: var(--ui-e1);
  background: var(--ui-superficie); border: 1px solid var(--ui-borde); border-radius: var(--ui-radio); box-shadow: var(--ui-sombra-3);
}
.pg-info-menu[hidden] { display: none; }
.pg-info-menu__item {
  display: flex; align-items: center; gap: var(--ui-e2); width: 100%; min-height: var(--ui-tactil); padding: 0 var(--ui-e3);
  background: none; border: 0; border-radius: var(--ui-radio-sm); color: var(--ui-texto); font: inherit; text-align: left; cursor: pointer;
}
.pg-info-menu__item svg { width: 18px; height: 18px; }
.pg-info-menu__item:hover, .pg-info-menu__item:focus-visible { background: var(--ui-info-suave); outline: none; }
/* Casillas del diálogo: una por ítem de la sección */
.pg-ticket-dialogo__contexto { margin: 0; }
.pg-ticket-dialogo__casillas { border: 0; margin: 0; padding: 0; min-width: 0; }
.pg-ticket-dialogo__casillas[hidden] { display: none; }
.pg-ticket-dialogo__lista { display: grid; max-height: 40vh; overflow-y: auto; }
.pg-ticket-dialogo__casilla { display: flex; align-items: center; gap: var(--ui-e2); min-height: var(--ui-tactil); overflow-wrap: anywhere; }
.pg-ticket-dialogo__casilla input { width: 20px; height: 20px; flex: none; }
.pg-ticket-dialogo__casilla--toda { font-weight: 600; border-bottom: 1px solid var(--ui-borde); }