/* ===================== páginas de preguntas (preguntas/…) =====================
   Se cargan después de estilos.css y usan sus variables y sus piezas
   (.tarjeta, .alt, .explica, .pill, .figura, .opcion, .btn), así se ven como
   el modo «Estudiar» de la app. Aquí va solo lo propio de estas páginas. */

/* encabezado con el logo de la portada */
.pg .marca .logo{background:none; box-shadow:0 1px 2px rgba(10,20,36,.25); overflow:hidden; border-radius:9px}
.pg .marca .logo svg{display:block; width:100%; height:100%}
[data-tema="oscuro"] .pg .marca .logo .lf{fill:#1c2f52}
.pg-nav{display:flex; gap:1rem; margin-left:.8rem}
.pg-nav a{color:var(--txt2); text-decoration:none; font-size:.9rem; font-weight:600}
.pg-nav a:hover{color:var(--acc)}
.pg .top .btn{padding:.48rem 1rem; font-size:.88rem; box-shadow:none}

.pg-main{max-width:860px}
.pg-migas{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; font-size:.84rem; color:var(--txt3); margin:0 0 .9rem}
.pg-migas a{color:var(--txt2); text-decoration:none; font-weight:600}
.pg-migas a:hover{color:var(--acc)}
.pg-main h1{margin-bottom:.5rem}
.pg-main > h2, .pg-ademas h2, .pg-grupo h2{margin:2.2rem 0 .8rem}
.pg-main h2 small, .pg-grupo h2 small{font-size:.8rem; font-weight:600; color:var(--txt3); margin-left:.35rem}
.pg-grupo h2 a{color:inherit; text-decoration:none}
.pg-grupo h2 a:hover{color:var(--acc)}
.pg-grupo .sub{margin-top:-.4rem}

/* licencias del grupo */
.pg-lics{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); margin:1.2rem 0 .4rem}
.pg-lic{display:flex; gap:.8rem; align-items:flex-start; padding:.9rem 1rem}
.pg-lic img{flex:none; width:3.2rem; height:3.2rem; object-fit:contain; background:var(--sup2); border:1px solid var(--linea); border-radius:12px; padding:.25rem}
.pg-lic b{display:block; font-size:1rem; letter-spacing:-.01em}
.pg-lic span{display:block; color:var(--txt2); font-size:.85rem; line-height:1.4}
.pg-lic p{margin:.45rem 0 .5rem; font-size:.84rem; line-height:1.45}
.pg-lic a{font-size:.86rem; font-weight:650; text-decoration:none}
.pg-lic a:hover{text-decoration:underline}
.pg-lic small{color:var(--txt3); font-size:.78rem; margin-left:.3rem}
.pg-nota{color:var(--txt2); font-size:.86rem; line-height:1.6; margin:.8rem 0 0}

/* materias */
.pg-temas{display:grid; gap:.65rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr))}
a.pg-tema{color:inherit; text-decoration:none; padding:.85rem 1rem}
a.pg-tema b{font-size:.96rem}

/* preguntas */
.pg-barra{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:space-between; margin:0 0 .9rem; color:var(--txt2); font-size:.88rem}
.pg-barra .btn{padding:.45rem .9rem; font-size:.85rem}
.pg-bloque{font-size:1.02rem}
.pg-preguntas{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.pg-preguntas .pregunta{animation:none; scroll-margin-top:4.5rem}
.pg-preguntas .cab .pill + .pill{margin-left:.3rem}
.pregunta h3.enunciado{margin:.35rem 0 1rem}
ol.alts{list-style:none; margin:0; padding:0}
ol.alts .alt{cursor:default}
.pg .figura.foto{flex-direction:column; align-items:center}
.pg .figura:empty{min-height:8rem}
.pg .credito{margin:.35rem .25rem 0; font-size:.68rem; line-height:1.35; opacity:.62; text-align:center}
.pg .credito a{color:inherit}

/* la respuesta se ve al abrir «Ver respuesta»; entonces también se marca la alternativa correcta */
.pg-resp{margin-top:.85rem}
.pg-resp summary{
  display:inline-flex; align-items:center; gap:.4rem; list-style:none; user-select:none;
  padding:.45rem .9rem; border-radius:999px; border:1px solid var(--linea); background:var(--sup2);
  color:var(--acc); font-size:.86rem; font-weight:650;
}
.pg-resp summary::-webkit-details-marker{display:none}
.pg-resp summary:hover{border-color:var(--acc); color:var(--acc)}
.pg-resp .pg-ocultar, .pg-resp[open] .pg-ver{display:none}
.pg-resp[open] .pg-ocultar{display:inline}
.pg-resp .explica{margin-top:.7rem}
.pregunta:has(.pg-resp[open]) .alt.es-ok{border-color:var(--ok); background:var(--ok-sup)}
.pregunta:has(.pg-resp[open]) .alt.es-ok .letra{background:var(--ok); color:#fff; border-color:transparent}

/* invitación a practicar */
.pg-cta{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:1.15rem 1.2rem; margin:2rem 0 0;
  border-color:color-mix(in srgb,var(--acc) 30%,var(--linea))}
.pg-cta b{display:block; font-size:1.02rem; letter-spacing:-.01em; margin-bottom:.2rem}
.pg-cta span{display:block; color:var(--txt2); font-size:.88rem; max-width:52ch}
.pg-fuente{color:var(--txt3); font-size:.8rem; margin:1.6rem 0 0}

.pg-pie{border-top:1px solid var(--linea); background:var(--sup); padding:1.6rem 1rem 2rem; text-align:center; color:var(--txt3); font-size:.82rem; line-height:1.7}
.pg-pie p{margin:.2rem auto; max-width:60rem}
.pg-pie a{color:var(--txt2); text-decoration:none; font-weight:600}
.pg-pie a:hover{color:var(--acc)}

@media (max-width:560px){
  .pg-nav{margin-left:.2rem}
  .pg .marca span:last-child{display:none}
  .pg-cta .btn{width:100%}
}
@media print{
  .pg-resp summary, .pg-cta, .pg-barra .btn, .pg-nav{display:none}
  .pg-resp > .explica{display:block}
}