/* ---------- la portada de psicotécnicos ----------
   Todas las reglas prefijadas con .opr-pt-portada o .opr-pt-lista, por lo mismo
   que la cabecera: el reset del núcleo mide lo mismo que una clase suelta y el
   orden de las hojas no está garantizado. Manual técnico, punto 11.1.

   SON DOS SECCIONES, no una, y por eso hay dos prefijos:

     · `.opr-pt-portada` es la PORTADA y va **de noche**: rótulo, titular,
       entradilla y las cuatro cifras de las bases;
     · `.opr-pt-lista` es la rejilla de los cuatro ejercicios con sus 27
       subtipos, y va **en claro**, como cualquier otra sección de contenido.

   Estuvieron juntas en la v0.1.4 y el resultado fue la página entera oscura.  */

/* ---------- la portada ---------- */
.opr-pt-portada .opr-pt-cifras{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(14px,2vw,26px) !important; margin-bottom:14px !important;
}
.opr-pt-portada .opr-pt-cifras > div{display:flex !important; flex-direction:column !important; gap:3px !important}
.opr-pt-portada .opr-pt-cifras b{
  font-size:clamp(1.6rem,3.2vw,2.2rem) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.035em !important;
}
.opr-pt-portada .opr-pt-cifras span{font-size:.84375rem !important; color:var(--tenue) !important; max-width:18ch !important}

/* De noche, el gris de «tenue» se pierde contra el p950: sube a p400, que sobre
   ese fondo queda en 6,4:1. */
.opr-pt-portada.es-noche .opr-pt-cifras span{color:var(--p400) !important}

/* ---------- los cuatro ejercicios ---------- */
.opr-pt-lista .opr-pt-tipos{display:flex !important; flex-direction:column !important; gap:12px !important}

.opr-pt-lista .opr-pt-tipo{
  background:var(--superficie) !important; border-radius:var(--radio) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
  overflow:hidden !important;
}
.opr-pt-lista .opr-pt-tipo-cab{
  display:flex !important; align-items:center !important; gap:16px !important; width:100% !important; text-align:left !important;
  padding:20px clamp(18px,2.4vw,26px) !important;
  transition:background .16s ease !important;
}
.opr-pt-lista .opr-pt-tipo-cab:hover{background:var(--p50) !important}
.opr-pt-lista .opr-pt-letra{
  flex:none !important; width:38px !important; height:38px !important; border-radius:11px !important;
  display:grid !important; place-items:center !important; background:var(--p100) !important; color:var(--p700) !important;
  font-size:1.0625rem !important; font-weight:800 !important;
}
.opr-pt-lista .opr-pt-tipo[data-abierto="1"] .opr-pt-letra{background:var(--p950) !important; color:#fff !important}
.opr-pt-lista .opr-pt-tipo-txt{flex:1 !important; min-width:0 !important}
.opr-pt-lista .opr-pt-tipo-txt b{display:block !important; font-size:1.1875rem !important; font-weight:800 !important; letter-spacing:-.024em !important; line-height:1.2 !important}
.opr-pt-lista .opr-pt-tipo-txt span{display:block !important; margin-top:4px !important; font-size:.90625rem !important; line-height:1.5 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-pt-lista .opr-pt-tipo-cuenta{flex:none !important; font-size:.8125rem !important; color:var(--tenue) !important; white-space:nowrap !important}
.opr-pt-lista .opr-pt-flecha{flex:none !important; width:20px !important; height:20px !important; color:var(--p500) !important; transition:transform .28s cubic-bezier(.32,.72,.16,1) !important}
.opr-pt-lista .opr-pt-tipo[data-abierto="1"] .opr-pt-flecha{transform:rotate(180deg) !important}

.opr-pt-lista .opr-pt-rejilla{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important;
  padding:0 clamp(18px,2.4vw,26px) 22px !important;
}
.opr-pt-lista .opr-pt-tipo[data-abierto="0"] .opr-pt-rejilla{display:none !important}

.opr-pt-lista .opr-pt-sub{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:5px !important;
  width:100% !important; text-align:left !important; padding:15px 16px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
  transition:box-shadow .15s ease, background .15s ease, transform .1s ease !important;
}
.opr-pt-lista .opr-pt-sub.es-listo:hover{background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--p950), var(--sombra-s) !important}
.opr-pt-lista .opr-pt-sub.es-listo:active{transform:translateY(1px) !important}
.opr-pt-lista .opr-pt-sub b{font-size:.96875rem !important; font-weight:700 !important; letter-spacing:-.014em !important; line-height:1.25 !important}
.opr-pt-lista .opr-pt-sub span{font-size:.8125rem !important; line-height:1.45 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-pt-lista .opr-pt-sub em{
  display:inline-flex !important; align-items:center !important; gap:5px !important; margin-top:4px !important;
  font-size:.75rem !important; font-weight:700 !important; color:var(--tenue) !important;
}
.opr-pt-lista .opr-pt-sub.es-listo em{color:var(--tinta) !important}
.opr-pt-lista .opr-pt-sub em svg{width:13px !important; height:13px !important}
.opr-pt-lista .opr-pt-sub.es-pronto{opacity:.62 !important}
.opr-pt-lista .opr-pt-sub.es-pronto:hover{background:var(--p50) !important}

@media (max-width:900px){
  .opr-pt-lista .opr-pt-rejilla{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .opr-pt-portada .opr-pt-cifras{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:560px){
  .opr-pt-lista .opr-pt-rejilla{grid-template-columns:1fr !important}
  .opr-pt-lista .opr-pt-tipo-cab{gap:12px !important; padding:16px 16px !important}
  .opr-pt-lista .opr-pt-tipo-cuenta{display:none !important}
  .opr-pt-lista .opr-pt-tipo-txt b{font-size:1.0625rem !important}
}

/* ---------- el simulacro ----------
   Va arriba de los cuatro y con otra pinta a propósito: en tinta, no en blanco,
   porque no es un quinto ejercicio, es la prueba entera. */
.opr-pt-lista .opr-pt-simulacro{margin-bottom:18px !important}

.opr-pt-lista .opr-pt-sim{
  display:flex !important; align-items:center !important; gap:clamp(16px,3vw,34px) !important; width:100% !important; text-align:left !important;
  padding:clamp(20px,2.6vw,28px) clamp(18px,2.4vw,28px) !important;
  border-radius:var(--radio) !important; background:var(--p950) !important; color:#fff !important;
  box-shadow:var(--sombra) !important;
  transition:transform .1s ease, box-shadow .16s ease !important;
}
.opr-pt-lista .opr-pt-sim:hover{background:#1B2229 !important}
.opr-pt-lista .opr-pt-sim:active{transform:translateY(1px) !important}

.opr-pt-lista .opr-pt-sim-izq{flex:1 !important; min-width:0 !important; display:block !important}
.opr-pt-lista .opr-pt-sim-rot{
  display:block !important; font-size:.75rem !important; font-weight:700 !important; color:var(--p400) !important; margin-bottom:6px !important;
}
.opr-pt-lista .opr-pt-sim-izq b{
  display:block !important; font-size:clamp(1.1875rem,2.2vw,1.5rem) !important; font-weight:800 !important;
  letter-spacing:-.028em !important; line-height:1.15 !important;
}
.opr-pt-lista .opr-pt-sim-izq > span:last-child{
  display:block !important; margin-top:7px !important; font-size:.90625rem !important; line-height:1.5 !important;
  color:var(--p300) !important; max-width:52ch !important; text-wrap:pretty !important;
}

.opr-pt-lista .opr-pt-sim-der{
  flex:none !important; display:flex !important; align-items:center !important; gap:clamp(14px,2vw,26px) !important;
}
.opr-pt-lista .opr-pt-sim-cifra{display:flex !important; flex-direction:column !important; gap:2px !important}
.opr-pt-lista .opr-pt-sim-cifra b{font-size:1.5rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.035em !important}
.opr-pt-lista .opr-pt-sim-cifra span{font-size:.75rem !important; color:var(--p400) !important; white-space:nowrap !important}
.opr-pt-lista .opr-pt-sim em{
  display:inline-flex !important; align-items:center !important; gap:7px !important; white-space:nowrap !important;
  padding:11px 16px !important; border-radius:999px !important; background:#fff !important; color:var(--p950) !important;
  font-size:.875rem !important; font-weight:700 !important;
}
.opr-pt-lista .opr-pt-sim em svg{width:16px !important; height:16px !important}
.opr-pt-lista .opr-pt-sim.es-cerrado em{background:var(--p800) !important; color:var(--p200) !important}

@media (max-width:900px){
  .opr-pt-lista .opr-pt-sim{flex-direction:column !important; align-items:flex-start !important; gap:18px !important}
  .opr-pt-lista .opr-pt-sim-der{width:100% !important; justify-content:space-between !important}
}
@media (max-width:560px){
  .opr-pt-lista .opr-pt-sim-der{flex-wrap:wrap !important; gap:14px !important}
  .opr-pt-lista .opr-pt-sim em{width:100% !important; justify-content:center !important}
}