/* Página «Trabajos»: filtros que funcionan sin JavaScript, lista de muestras y visor ampliado.
   Parte de base.css (tokens, .tarjeta-muestra, .cartel, visor) y solo añade lo propio de esta página.
   Índice: 1 portada · 2 filtros · 3 cabecera de la lista · 4 filtrado sin JavaScript · 5 rejilla y tarjetas anchas ·
   6 tarjetas · 7 texto de las láminas · 8 visor ampliado · 9 plataforma SCORM simulada · 10 pantallas táctiles,
   movimiento reducido, colores forzados e impresión */

/* 1. Portada: más corta que la de las páginas de servicio, para que los filtros se vean sin desplazarse */
.portada-trabajos { padding-block: clamp(40px, 7vw, 88px) clamp(4px, 1.5vw, 12px); }
.portada-trabajos h1 { max-width: 20ch; }
.seccion.trabajos { padding-top: clamp(24px, 4vw, 40px); }

/* 2. Filtros: botones de opción que cubren cada píldora. El grupo es un <fieldset> con su <legend>, así que el
   teclado y los lectores de pantalla lo tratan como un grupo de opciones normal (Tab entra, las flechas cambian). */
.filtros { margin: 0; padding: 0; border: 0; min-width: 0; }
.filtros legend { padding: 0; margin-bottom: 10px; }
/* Las nueve píldoras no caben en una fila de 72rem: con este ancho máximo quedan seis arriba y tres abajo, en lugar
   de una sola en la segunda fila */
.filtros-opciones { display: flex; flex-wrap: wrap; gap: 6px; max-width: 48rem; }
.filtro-opcion { position: relative; display: inline-flex; }
.filtro-radio { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* El cambio de filtro es instantáneo: con las flechas se recorren seguidos y un fundido en cada uno se haría lento.
   Solo el paso del ratón se suaviza (y se quita al instante). Al pulsar con el ratón o el dedo, la píldora se encoge
   un 3 %, como los botones y los selectores de base.css (§9). Con el teclado no: las flechas no la pulsan, y el
   Espacio, que sí la activa, llega con :focus-visible. user-select: una pulsación larga no selecciona el nombre. */
.filtro {
  display: inline-flex; align-items: center; min-height: 36px; padding: 7px 10px; border-radius: var(--radio);
  font: 400 .74rem/1.2 var(--font-rotulo); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--control); -webkit-user-select: none; user-select: none;
  transition: transform var(--dur-pulsar) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .filtro-opcion:hover .filtro { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); transition: color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, transform var(--dur-pulsar) var(--ease-out); }
}
/* Al apoyar el dedo o pulsar, el borde oscuro responde. Va antes de :checked, que tiene la misma especificidad y gana */
.filtro-radio:active + .filtro { box-shadow: inset 0 0 0 1px var(--ink); }
.filtro-radio:active:not(:focus-visible) + .filtro { transform: scale(.97); }
/* El filtro elegido cambia de color al instante; solo el tamaño vuelve con su transición al soltar, como
   button.pildora[aria-pressed] en base.css */
.filtro-radio:checked + .filtro { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); transition: transform var(--dur-pulsar) var(--ease-out); }
.filtro-radio:focus-visible + .filtro { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 3. Cabecera de la lista: el título del grupo (el tipo elegido), el contador y la línea del tipo */
.lista-cabecera {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px;
  margin-top: clamp(24px, 3.4vw, 36px); padding-top: 18px; border-top: 1px solid var(--rule);
}
.lista-titulo { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); }
.contador { font: 600 .92rem/1.4 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.filtro-linea { margin-top: 6px; max-width: 44rem; color: var(--ink-2); }
.sin-resultados { display: grid; gap: 12px; justify-items: start; margin-top: 24px; }
.pie-lista { margin-top: clamp(32px, 5vw, 48px); padding-top: 16px; border-top: 1px solid var(--rule); }

/* 4. Filtrado sin JavaScript. Con JavaScript, trabajos.js marca la sección con .filtra-js y hace lo mismo con el
   atributo hidden, así que estas reglas dejan de aplicarse. Sin :has() (navegadores anteriores a 2023) se ven
   todas las tarjetas y solo los rótulos de «Todos». */
.trabajos:not(.filtra-js) [data-para]:not([data-para="todos"]) { display: none; }
.trabajos:not(.filtra-js):has(.filtro-radio:not(#f-todos):checked) [data-para="todos"] { display: none; }
.trabajos:not(.filtra-js):has(#f-campus-virtual:checked) span[data-para="campus-virtual"],
.trabajos:not(.filtra-js):has(#f-videos-animados:checked) span[data-para="videos-animados"],
.trabajos:not(.filtra-js):has(#f-capsulas-interactivas:checked) span[data-para="capsulas-interactivas"],
.trabajos:not(.filtra-js):has(#f-casos-decision:checked) span[data-para="casos-decision"],
.trabajos:not(.filtra-js):has(#f-simuladores:checked) span[data-para="simuladores"],
.trabajos:not(.filtra-js):has(#f-tutoriales-software:checked) span[data-para="tutoriales-software"],
.trabajos:not(.filtra-js):has(#f-infografias:checked) span[data-para="infografias"],
.trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) span[data-para="lecturas-enriquecidas"],
.trabajos:not(.filtra-js):has(#f-podcasts:checked) span[data-para="podcasts"] { display: inline; }
.trabajos:not(.filtra-js):has(#f-campus-virtual:checked) p[data-para="campus-virtual"],
.trabajos:not(.filtra-js):has(#f-videos-animados:checked) p[data-para="videos-animados"],
.trabajos:not(.filtra-js):has(#f-capsulas-interactivas:checked) p[data-para="capsulas-interactivas"],
.trabajos:not(.filtra-js):has(#f-casos-decision:checked) p[data-para="casos-decision"],
.trabajos:not(.filtra-js):has(#f-simuladores:checked) p[data-para="simuladores"],
.trabajos:not(.filtra-js):has(#f-tutoriales-software:checked) p[data-para="tutoriales-software"],
.trabajos:not(.filtra-js):has(#f-infografias:checked) p[data-para="infografias"],
.trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) p[data-para="lecturas-enriquecidas"],
.trabajos:not(.filtra-js):has(#f-podcasts:checked) p[data-para="podcasts"] { display: block; }
.trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo:not([data-tipos~="campus-virtual"]),
.trabajos:not(.filtra-js):has(#f-videos-animados:checked) .trabajo:not([data-tipos~="videos-animados"]),
.trabajos:not(.filtra-js):has(#f-capsulas-interactivas:checked) .trabajo:not([data-tipos~="capsulas-interactivas"]),
.trabajos:not(.filtra-js):has(#f-casos-decision:checked) .trabajo:not([data-tipos~="casos-decision"]),
.trabajos:not(.filtra-js):has(#f-simuladores:checked) .trabajo:not([data-tipos~="simuladores"]),
.trabajos:not(.filtra-js):has(#f-tutoriales-software:checked) .trabajo:not([data-tipos~="tutoriales-software"]),
.trabajos:not(.filtra-js):has(#f-infografias:checked) .trabajo:not([data-tipos~="infografias"]),
.trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo:not([data-tipos~="lecturas-enriquecidas"]),
.trabajos:not(.filtra-js):has(#f-podcasts:checked) .trabajo:not([data-tipos~="podcasts"]) { display: none; }

/* 5. Rejilla. Ninguna tarjeta se queda sola en su fila: en tres columnas (una rejilla de 6 en la que cada tarjeta
   ocupa 2) las primeras tarjetas ocupan 3, la mitad de la fila, y abren con dos por fila. Con un resto de 1, las
   cuatro primeras (22 tarjetas: 2 + 2 + 6 filas de 3); con un resto de 2, las dos primeras (11: 2 + 3 filas de 3).
   En dos columnas, con un número impar, la primera ocupa la fila entera.
   trabajos.js calcula las anchas para el tipo elegido (data-ancha="m" en dos columnas, "g" en tres). Las reglas
   de :nth-child solo valen sin JavaScript y siguen los recuentos de hoy: si cambian las tarjetas, hay que revisarlas. */
.lista-trabajos {
  list-style: none; margin: clamp(20px, 3vw, 28px) 0 0; padding: 0;
  display: grid; gap: clamp(30px, 4vw, 44px) clamp(14px, 2vw, 22px); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) and (max-width: 979.98px) {
  .lista-trabajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trabajo[data-ancha~="m"] { grid-column: span 2; }
  .trabajos:not(.filtra-js):has(#f-videos-animados:checked) .trabajo:nth-child(1 of [data-tipos~="videos-animados"]),
  .trabajos:not(.filtra-js):has(#f-capsulas-interactivas:checked) .trabajo:nth-child(1 of [data-tipos~="capsulas-interactivas"]) { grid-column: span 2; }
}
@media (min-width: 980px) {
  .lista-trabajos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trabajo { grid-column: span 2; }
  .trabajo[data-ancha~="g"] { grid-column: span 3; }
  .trabajos:not(.filtra-js):has(#f-todos:checked) .trabajo:nth-child(-n + 2),
  .trabajos:not(.filtra-js):has(#f-videos-animados:checked) .trabajo:nth-child(-n + 4 of [data-tipos~="videos-animados"]),
  .trabajos:not(.filtra-js):has(#f-capsulas-interactivas:checked) .trabajo:nth-child(-n + 2 of [data-tipos~="capsulas-interactivas"]),
  .trabajos:not(.filtra-js):has(#f-infografias:checked) .trabajo:nth-child(-n + 4 of [data-tipos~="infografias"]),
  .trabajos:not(.filtra-js):has(#f-casos-decision:checked) .trabajo:nth-child(-n + 2 of [data-tipos~="casos-decision"]),
  .trabajos:not(.filtra-js):has(#f-simuladores:checked) .trabajo:nth-child(-n + 2 of [data-tipos~="simuladores"]),
  .trabajos:not(.filtra-js):has(#f-tutoriales-software:checked) .trabajo:nth-child(-n + 2 of [data-tipos~="tutoriales-software"]),
  .trabajos:not(.filtra-js):has(#f-podcasts:checked) .trabajo:nth-child(-n + 2 of [data-tipos~="podcasts"]) { grid-column: span 3; }
}
/* Una tarjeta sola en la lista (hoy, con los filtros «Campus virtual» y «Lecturas enriquecidas») ocupa la fila entera,
   con el cartel a la izquierda y el texto a su lado, centrado en vertical: el cartel abarca todas las filas y las dos
   filas 1fr de los extremos se reparten lo que sobra. Sin JavaScript, las reglas con :has() hacen lo mismo con esos
   dos filtros. */
@media (min-width: 640px) {
  .trabajo[data-ancha~="sola"],
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"],
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"] {
    grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr repeat(6, auto) 1fr;
    column-gap: clamp(24px, 3.4vw, 48px); row-gap: 0;
  }
  .trabajo[data-ancha~="sola"] > .cartel,
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"] > .cartel,
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"] > .cartel { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .trabajo[data-ancha~="sola"] > :not(.cartel),
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"] > :not(.cartel),
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"] > :not(.cartel) { grid-column: 2; margin-top: 10px; }
  /* La primera fila 1fr de la columna del texto la ocupa un pseudoelemento vacío: así el texto empieza en la segunda */
  .trabajo[data-ancha~="sola"]::before,
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"]::before,
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"]::before { content: ""; grid-column: 2; grid-row: 1; }
  .trabajo[data-ancha~="sola"] > .cartel + *,
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"] > .cartel + *,
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"] > .cartel + * { margin-top: 0; }
  .trabajo[data-ancha~="sola"] > .tarjeta-tipo + h3,
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"] > .tarjeta-tipo + h3,
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"] > .tarjeta-tipo + h3 { margin-top: 4px; }
  .trabajo[data-ancha~="sola"] h3,
  .trabajos:not(.filtra-js):has(#f-campus-virtual:checked) .trabajo[data-tipos~="campus-virtual"] h3,
  .trabajos:not(.filtra-js):has(#f-lecturas-enriquecidas:checked) .trabajo[data-tipos~="lecturas-enriquecidas"] h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); }
}

/* 6. Tarjetas: cartel, tipo, título (el enlace cubre la tarjeta), datos y texto */
.trabajo .tarjeta-texto { font-size: .97rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.trabajo .tarjeta-meta { margin-top: -4px; }
.cartel-lamina img { object-position: top; }
/* Lo que se pulsa dentro de la tarjeta va por encima del enlace que la cubre */
.tarjeta-enlaces, .texto-lamina { position: relative; z-index: 1; }
.tarjeta-enlaces { display: flex; flex-wrap: wrap; gap: 0 18px; }
.trabajo.resaltada .cartel { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Al filtrar con el ratón o el dedo, trabajos.js pone .cambia a la lista. Aquí es solo un fundido corto, sin el
   desplazamiento del .cambia de base.css: la rejilla mide unos 3.000 px y se filtra decenas de veces por visita, y si
   se moviera entera parecería un salto de la página. Con el teclado no se pone. */
.lista-trabajos.cambia { animation: aparece-quieto 180ms var(--ease-out) both; }

/* 7. Texto de las láminas (alternativa en HTML de las infografías), plegado */
/* El resumen se ve como los enlaces «Ver…» de las tarjetas, con la flecha hacia abajo (hacia arriba si está abierto) */
.trabajo .tarjeta-enlaces + .texto-lamina { margin-top: -8px; }
.texto-lamina summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none;
  font: 700 .92rem/1.2 var(--font-display); color: var(--ink);
}
.texto-lamina summary::-webkit-details-marker { display: none; }
/* Al abrir, la flecha gira y baja 4 px en un solo movimiento: el desplazamiento va en el transform, no en el margen.
   Las dos listas de funciones coinciden (translateY y rotate) para que se interpolen una a una */
.texto-lamina summary::after {
  content: ""; width: 7px; height: 7px; flex: none; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(0) rotate(45deg);
  transition: transform 200ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
.texto-lamina[open] summary::after { transform: translateY(4px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .texto-lamina summary:hover { color: var(--accent-ink); }
}
.texto-lamina summary:active { color: var(--accent-ink); }
.texto-lamina-cuerpo {
  display: grid; gap: 8px; margin-top: 10px; padding: 16px 18px; border-radius: var(--radio); background: var(--surface);
  font: 500 .9rem/1.5 var(--font-display); color: var(--ink-2);
}
.texto-lamina-cuerpo h4 { font-size: 1.04rem; line-height: 1.3; }
.texto-lamina-cuerpo h5 { margin-top: 8px; font: 700 .94rem/1.3 var(--font-display); color: var(--ink); }
.texto-lamina-cuerpo ul, .texto-lamina-cuerpo ol { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; }
.texto-lamina-cuerpo b { color: var(--ink); }
.texto-lamina-unidad { font-weight: 700; color: var(--muted); }
.texto-lamina-cierre { font: italic 400 .95rem/1.5 var(--font-body); }

/* 8. Visor ampliado. trabajos.js añade al <dialog> de base.js la navegación, la instrucción de la figura, el
   panel de la plataforma y la ficha, sin mover el cuerpo (un <iframe> que se mueve se vuelve a cargar). El diálogo
   pasa a ser una rejilla que se desplaza entera, con la barra fija arriba. --alto-util es el alto que queda debajo
   de la barra; lo calcula el script. */
dialog.visor.visor-trabajos { width: min(96vw, 68rem); }
dialog.visor.visor-trabajos[data-tipo="imagen"] { width: min(96vw, 60rem); }
dialog.visor.visor-trabajos.con-plataforma { width: min(96vw, 92rem); }
/* Filas a la altura de su contenido: con el alto fijo del móvil, una fila «auto» con un elemento que se desplaza
   (el cuerpo) se encogía hasta 0 */
dialog.visor.visor-trabajos[open] {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.visor-trabajos > * { grid-column: 1 / -1; }
.visor-trabajos .visor-barra { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; row-gap: 8px; background: var(--bg); }
.visor-trabajos .visor-titulo { flex: 1 1 14rem; }
.visor-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.visor-posicion { min-width: 4.6em; text-align: center; font: 600 .86rem/1.2 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.visor-instruccion { padding: 10px 18px; font: 600 .9rem/1.45 var(--font-display); color: var(--ink-2); background: var(--surface); border-bottom: 1px solid var(--rule); }
.visor-herramientas {
  position: sticky; top: var(--alto-barra, 57px); z-index: 2; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 18px; background: var(--bg); border-bottom: 1px solid var(--rule);
}
.visor-trabajos .visor-cuerpo { container-type: inline-size; }
.visor-trabajos .visor-cuerpo video { max-height: var(--alto-util, calc(94dvh - 62px)); }
.visor-trabajos .visor-cuerpo iframe { height: min(var(--alto-util, calc(94dvh - 62px)), 900px); }
/* Las actividades en risografía son un video 16:9 con un margen de 16 px: el marco toma ese alto. En un marco estrecho
   la actividad pone su panel debajo del video, y trabajos.js (seguirAlto) le da el alto de su contenido */
.visor-trabajos .visor-cuerpo iframe[data-forma="video"] { height: min(calc(56.25cqi + 16px), var(--alto-util, calc(94dvh - 62px))); }
/* Lámina: ajustada a la pantalla, al ancho del visor o ampliada. Al llegar al borde de la lámina ampliada, el gesto
   horizontal no pasa a la página ni a la navegación por gestos del navegador */
.visor-trabajos .visor-cuerpo[data-zoom] { overscroll-behavior-x: contain; }
.visor-trabajos .visor-cuerpo[data-zoom="0"] img { width: auto; max-width: 100%; max-height: var(--alto-util, calc(94dvh - 62px)); }
.visor-trabajos .visor-cuerpo[data-zoom="1"] img { width: 100%; max-width: none; max-height: none; }
.visor-trabajos .visor-cuerpo[data-zoom="2"] img { width: 180%; max-width: none; max-height: none; }
@media (min-width: 1000px) {
  dialog.visor.visor-trabajos.con-plataforma[open] { grid-template-columns: minmax(0, 1fr) 21rem; }
  .visor-trabajos.con-plataforma .visor-cuerpo { grid-column: 1; align-self: start; }
  .visor-trabajos.con-plataforma .visor-plataforma { grid-column: 2; border-left: 1px solid var(--rule); }
}
/* El mismo corte que el visor de base.css: teléfono en vertical o en horizontal */
@media (max-width: 600px), (max-height: 500px) {
  dialog.visor.visor-trabajos, dialog.visor.visor-trabajos[data-tipo="imagen"], dialog.visor.visor-trabajos.con-plataforma { width: 100vw; }
  .visor-trabajos .visor-barra { padding-left: 14px; }
  /* El video queda arriba, con la ficha debajo, y la figura alta deja ver el principio de lo que sigue */
  dialog.visor.visor-trabajos[data-tipo="video"] .visor-cuerpo { display: block; }
  .visor-trabajos .visor-cuerpo iframe[data-forma="alta"] { height: calc(var(--alto-util, 80dvh) - 3.5rem); }
}

.visor-ficha { display: grid; gap: 10px; align-content: start; padding: 18px clamp(16px, 2.4vw, 24px) 24px; border-top: 1px solid var(--rule); }
.visor-ficha .tarjeta-meta { margin: 0; }
.ficha-texto { max-width: 46rem; color: var(--ink-2); text-wrap: pretty; }
.ficha-uso, .ficha-calificacion { max-width: 46rem; font: 500 .92rem/1.5 var(--font-display); color: var(--ink-2); }
.ficha-uso b { color: var(--ink); }
.ficha-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ficha-aviso { font: 600 .86rem/1.4 var(--font-display); color: var(--muted); overflow-wrap: anywhere; }
.ficha-aviso:empty { display: none; }
.visor-ficha .texto-lamina { margin-top: 4px; }

/* 9. Plataforma SCORM simulada: lo que la actividad envía con el evento «scorm» de base.js */
.visor-plataforma {
  display: grid; gap: 14px; align-content: start; min-width: 0; padding: 18px clamp(16px, 2.4vw, 20px) 20px;
  background: var(--bg); border-top: 1px solid var(--rule); font: 500 .9rem/1.5 var(--font-display); color: var(--ink-2);
}
/* El título es un h2 (trabajos.js) con el tamaño de un h3, y el del registro, un h3 con el de un h4 */
.visor-plataforma h2 { font-size: 1.04rem; line-height: 1.25; letter-spacing: -.004em; }
.plataforma-nota { font-size: .84rem; color: var(--muted); }
.plataforma-datos { display: grid; margin: 0; border-top: 1px solid var(--rule); }
.plataforma-datos > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.plataforma-datos dt { font-weight: 600; color: var(--muted); }
.plataforma-datos dd { margin: 0; min-width: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.plataforma-datos dd[data-estado]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--control); vertical-align: .08em; }
.plataforma-datos dd[data-estado="incomplete"]::before { background: var(--ink-2); }
.plataforma-datos dd[data-estado="passed"]::before, .plataforma-datos dd[data-estado="completed"]::before { background: var(--teal); }
.plataforma-datos dd[data-estado="failed"]::before { background: var(--accent); }
.plataforma-datos .dato-nuevo { animation: dato-nuevo 1.4s ease; border-radius: 4px; }
@keyframes dato-nuevo { from { background: var(--tint); } }
.respuestas-lista { list-style: none; display: grid; gap: 6px; margin: 6px 0 0; padding: 0; font: 500 .8rem/1.4 var(--font-display); color: var(--ink-2); }
.respuestas-lista li { display: grid; justify-items: start; gap: 1px; }
.respuestas-lista code { max-width: 100%; font-size: .9em; padding: 0 .3em; overflow-wrap: anywhere; }
.plataforma-registro { display: grid; gap: 8px; min-width: 0; }
.plataforma-registro h3 { font: 700 .9rem/1.3 var(--font-display); letter-spacing: normal; }
/* contain: al llegar al final de la lista, el gesto no pasa al visor ni se lleva la actividad fuera de la vista */
.registro {
  list-style: none; display: grid; gap: 3px; margin: 0; padding: 10px 12px; max-height: 13rem; overflow: auto; overscroll-behavior: contain;
  border-radius: var(--radio); background: var(--surface); font: 500 .74rem/1.5 var(--font-mono); color: var(--ink-2);
}
.registro li { overflow-wrap: anywhere; }
.registro b { font-weight: 700; color: var(--ink); }
.registro-vacio { font-size: .84rem; color: var(--muted); }
.visor-plataforma .boton { justify-self: start; }

/* 10. Pantallas táctiles, movimiento reducido, colores forzados e impresión */
@media (pointer: coarse) {
  .filtro, .texto-lamina summary, .tarjeta-enlaces .enlace-mas { min-height: 44px; }
}
/* Como los botones de base.css (§17): sin encogerse al pulsar; el borde oscuro sigue respondiendo. base.css deja
   en las transiciones solo las propiedades de color, con la duración que tenían: la del encogido convertiría el
   cambio de filtro en un fundido, y aquí tiene que ser instantáneo, también con las flechas */
@media (prefers-reduced-motion: reduce) {
  .filtro, .filtro-radio:checked + .filtro { transition-duration: 0s; }
  .filtro-radio:active:not(:focus-visible) + .filtro { transform: none; }
}
@media (forced-colors: active) {
  .filtro { border: 1px solid ButtonText; }
  .filtro-radio:checked + .filtro { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; border-color: SelectedItem; }
  .plataforma-datos dd[data-estado]::before { forced-color-adjust: none; background: CanvasText; }
  .trabajo.resaltada .cartel { outline-color: Highlight; }
}
@media print {
  .filtros, .sin-resultados, .tarjeta-enlaces, .cartel-reproducir { display: none !important; }
  .lista-trabajos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trabajo { grid-column: auto !important; }
  .texto-lamina-cuerpo { background: none; border: 1px solid var(--rule); }
}