/* Ejercicios interactivos */
.pg-ej-play { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; background: #1c2430 center/cover no-repeat; cursor: pointer; }
.pg-ej-play span { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; }
.pg-ej-play:hover span { background: var(--pg-primario); }
.pg-ej-video { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; background: #000; }
.pg-ej-img { width: 100%; border-radius: 12px; }
.pg-ej-t.hecho { opacity: .85; }
.pg-ej-t .pg-ej-medio { margin-bottom: 8px; }
.pg-ej-ok { color: #1a7f37; font-weight: 600; }
.pg-ej-titulo { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.pg-ej-semana, .pg-ej-cal { display: flex; gap: 6px; margin: 8px 0; }
.pg-ej-semana span { flex: 1; max-width: 44px; text-align: center; border-radius: 10px; padding: 6px 0; background: var(--superficie2); font-size: 13px; }
.pg-ej-semana span b { display: block; font-size: 11px; opacity: .7; }
.pg-ej-semana span.si { background: var(--pg-primario); color: #fff; }
.pg-ej-semana span.hoy { outline: 2px solid var(--pg-primario); outline-offset: 1px; }
.pg-ej-cal span { width: 22px; height: 22px; border-radius: 5px; background: var(--superficie2); font-size: 10px; display: flex; align-items: center; justify-content: center; color: var(--texto2, #667); }
.pg-ej-cal span.si { background: #2da44e; color: #fff; }
.pg-ej-cal span.medio { background: #a6e3b5; }
.pg-ej-seg + .pg-ej-seg { border-top: 1px solid var(--borde); margin-top: 10px; padding-top: 10px; }
.pg-ej-notas { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.pg-rojo { color: #c62828; font-weight: 700; }
.pg-tabla.compacta td, .pg-tabla.compacta th { padding: 4px 6px; font-size: 13px; }
.pg-ej-modo { max-width: 640px; margin: 0 auto; text-align: center; }
.pg-ej-modo h3 { margin: 4px 0 10px; }
.pg-ej-modo details { text-align: left; margin: 8px 0; }
.pg-ej-progreso { height: 6px; border-radius: 3px; background: var(--superficie2); overflow: hidden; }
.pg-ej-progreso span { display: block; height: 100%; background: var(--pg-primario); transition: width .3s; }
.pg-ej-series { display: flex; justify-content: center; gap: 8px; margin: 12px 0; }
.pg-ej-series span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--pg-primario); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pg-ej-series span.si { background: var(--pg-primario); color: #fff; }
.pg-ej-accion { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pg-btn.grande { font-size: 18px; padding: 14px 22px; }
.pg-ej-reloj { position: relative; width: 110px; height: 110px; }
.pg-ej-reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pg-ej-reloj circle { fill: none; stroke-width: 3; }
.pg-ej-reloj .f { stroke: var(--superficie2); }
.pg-ej-reloj .p { stroke: var(--pg-primario); stroke-linecap: round; transition: stroke-dasharray 1s linear; }
.pg-ej-reloj b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.pg-ej-nav { display: flex; justify-content: space-between; margin-top: 12px; }
.pg-ej-valora { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.pg-ej-valora textarea { padding: 8px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); }
.pg-ej-dif { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pg-ej-dif input { position: absolute; opacity: 0; }
.pg-ej-dif span { display: inline-block; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--borde); cursor: pointer; }
.pg-ej-dif input:checked + span { background: var(--pg-primario); color: #fff; border-color: var(--pg-primario); }
.pg-ej-dif input:focus-visible + span { outline: 2px solid var(--pg-primario); outline-offset: 2px; }
.pg-ej-dolor input { width: 100%; accent-color: var(--pg-primario); }
.pg-ej-valora.alto .pg-ej-dolor b { color: #c62828; }
.pg-ej-fin { padding: 20px 0; }
.pg-ej-trofeo { font-size: 56px; }
.pg-fila-botones { display: flex; gap: 6px; flex-wrap: wrap; }

/* En la lista, el vídeo va a lo ancho encima del texto. */
.pg-ej-t.con-video { grid-template-columns: 1fr; }
.pg-ej-t .pg-ej-medio .pg-ej-play, .pg-ej-t .pg-ej-medio .pg-ej-video { width: 100%; height: auto; }
@media (min-width: 760px) { .pg-ej-t.con-video { grid-template-columns: 280px 1fr; } }
