/* ---------- 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 ---------- */

/* --- el agente ---
   MIDE LO QUE SE LE DICE, no lo que sobre. La primera versión lo estiraba de
   `top` a `bottom` y el alto salía de la portada: en una pantalla alta el
   muñeco se hacía gigante y no había forma de sujetarlo. Ahora el alto es
   `--opr-pt-agente` y el ancho sale solo de la proporción de la imagen, que es
   700 × 1000. Va centrado a media altura, no apoyado abajo: el dibujo lleva su
   propio aire y pegado a la costura parecía que se caía.

   Y no se pega al borde derecho: `right` es el hueco que queda a su derecha, y
   el `padding-right` de la caja lo reserva a la izquierda para que el titular
   no le pase por debajo. Los dos salen del mismo alto, así que una sola cifra
   mueve las tres cosas a la vez.

   OJO CON OCULTARLO. El núcleo dice `.opr img{display:block !important}`, que pesa (0,1,1):
   una clase suelta empata y pierde por el orden de las hojas. Por eso el
   selector lleva la etiqueta, `img.opr-pt-agente`, y el prefijo de la sección. */
.opr-pt-portada{position:relative !important; --opr-pt-agente:clamp(300px,44vh,430px)}
.opr-pt-portada img.opr-pt-agente{
  display:none !important;
  position:absolute !important; right:clamp(40px,5vw,110px) !important;
  top:50% !important; transform:translateY(-50%) !important;
  height:var(--opr-pt-agente) !important; width:auto !important; max-width:38% !important;
  pointer-events:none !important; -webkit-user-select:none !important; user-select:none !important;
}
/* Por debajo de 1120 px el texto ocupa el ancho entero y el agente lo taparía. */
@media (min-width:1120px){
  .opr-pt-portada img.opr-pt-agente{display:block !important}
  /* 0.7 es el ancho del dibujo por cada punto de alto; más el hueco de la
     derecha, más un respiro para que el texto no lo roce. */
  .opr-pt-portada .opr-caja{
    padding-right:calc(var(--opr-pt-agente) * 0.7 + clamp(40px,5vw,110px) + 20px) !important;
  }
}

.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;
  /* EL RADIO VA A CERO A PROPÓSITO, Y NO ES UN CERO INOCENTE. Astra le da a
     TODO `button` un `border-radius:30px`, y esta cabecera es un botón de
     ancho completo: al pasar el ratón, el fondo del hover salía con las
     esquinas redondeadas por dentro del cajón —una píldora dentro de una caja
     recta—. Lo vio Sergio en la web. Quien recorta aquí es el cajón, que tiene
     su radio y `overflow:hidden` !important; la cabecera no debe poner ninguno.
     **Un botón nuestro que no fija su radio se lo pone el tema.** */
  border-radius:0 !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}
/* Los puntos del cajón (v0.1.75): bajo «Entrenar» y más callados que él. Pesa
   (0,3,0) para ganar a `.opr-pt-lista .opr-pt-sub span`, que es (0,2,1). */
.opr-pt-lista .opr-pt-sub .opr-pt-sub-pts{margin-top:-2px !important; font-size:.75rem !important; line-height:1.4 !important; color:var(--suave) !important}
.opr-pt-lista .opr-pt-sub .opr-pt-sub-pts b{font-size:inherit !important; font-weight:700 !important; letter-spacing:0 !important; line-height:inherit !important; color:var(--tinta) !important; padding-right:0 !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}

/* CERRADO NO ES «PRONTO», Y NO SE PINTA IGUAL. «Pronto» es un ejercicio que no
   existe todavía y se apaga con opacidad; este existe, se puede pulsar y lleva
   al precio. Así que mantiene el texto legible y lo que cambia es el borde
   —discontinuo, la misma señal que usa el panel de progreso para lo que va con
   plan— y el rótulo del pie.

   Sin color: aquí no hay ni acierto, ni fallo, ni aviso. */
.opr-pt-lista .opr-pt-sub.es-cerrado{
  background:var(--superficie) !important;
  box-shadow:none !important;
  border:1px dashed var(--borde2) !important;
  padding:14px 15px !important;
}
.opr-pt-lista .opr-pt-sub.es-cerrado:hover{background:var(--p50) !important; border-color:var(--p400) !important}
.opr-pt-lista .opr-pt-sub.es-cerrado b{color:var(--suave) !important}
.opr-pt-lista .opr-pt-sub.es-cerrado em{color:var(--suave) !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 aviso del borrador ----------
   Una línea, en gris y con un lápiz delante: es lo primero que se lee de la
   sección y no puede pesar más que el simulacro, que va justo debajo en tinta.
   Sin recuadro de color ni icono de aviso: no es una advertencia, es un
   consejo. */
.opr-pt-lista .opr-pt-borrador{
  display:flex !important; align-items:flex-start !important; gap:10px !important; margin:0 0 14px !important;
  font-size:.90625rem !important; line-height:1.5 !important; color:var(--tenue) !important; text-wrap:pretty !important;
}
.opr-pt-lista .opr-pt-borrador b{color:var(--tinta) !important; font-weight:800 !important}
.opr-pt-lista .opr-pt-borrador svg{
  width:18px !important; height:18px !important; flex:none !important; margin-top:2px !important; color:var(--tinta) !important;
}
@media (max-width:640px){
  .opr-pt-lista .opr-pt-borrador{gap:9px !important; font-size:.875rem !important; margin-bottom:12px !important}
  .opr-pt-lista .opr-pt-borrador svg{width:17px !important; height:17px !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}
}

/* ---------- el enlace al progreso ----------
   Una línea, no una tarjeta: aquí no se entra a hacer un ejercicio, se entra a
   mirar lo que ya se ha hecho. Con el tamaño de la tarjeta del simulacro
   parecería un quinto ejercicio. */
/* Y NO A LO ANCHO NI PEGADO A LOS CUATRO. Iba de borde a borde, del tamaño de
   una tarjeta de ejercicio, y con cero de separación del cajón de Razonamiento:
   parecía la cabecera del primero en vez de un enlace suelto. Ahora es una
   línea estrecha y centrada, con aire por abajo. */
.opr-pt-progreso-caja{margin:12px auto 24px !important; max-width:520px !important}
.opr-pt-prog-enlace{
  width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important;
  padding:12px 16px !important; border-radius:var(--radio-s) !important; text-align:left !important; cursor:pointer !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  transition:box-shadow .14s ease, background .14s ease !important;
}
.opr-pt-prog-enlace:hover{box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:#F6FAF7 !important}
.opr-pt-prog-enlace > span{display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important}
.opr-pt-prog-enlace b{font-size:.9375rem !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--tinta) !important}
.opr-pt-prog-enlace > span > span{font-size:.78125rem !important; color:var(--tenue) !important; line-height:1.35 !important}
.opr-pt-prog-enlace em{
  display:inline-flex !important; align-items:center !important; gap:6px !important; flex:none !important;
  font-style:normal !important; font-size:.875rem !important; font-weight:700 !important; color:var(--tinta) !important;
}
.opr-pt-prog-enlace em svg{width:17px !important; height:17px !important; flex:none !important}

@media (max-width:640px){
  .opr-pt-progreso-caja{margin:12px 0 20px !important; max-width:none !important}
  .opr-pt-prog-enlace{padding:12px 14px !important; gap:10px !important}
  .opr-pt-prog-enlace em span{display:none !important}
}

/* ---------- el ojo: un ejemplo del ejercicio ----------
   Lo pidió Sergio: por el nombre, mucha gente no sabe qué ejercicio es. El ojo
   va dentro del cajón, arriba a la derecha, y abre una imagen. */
.opr-pt-lista .opr-pt-ojo{
  position:absolute !important; top:10px !important; right:10px !important;
  width:30px !important; height:30px !important; border-radius:9px !important;
  display:grid !important; place-items:center !important;
  color:var(--p500) !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important;
  cursor:pointer !important; transition:color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.opr-pt-lista .opr-pt-ojo svg{ width:17px !important; height:17px !important; }
.opr-pt-lista .opr-pt-ojo:hover,
.opr-pt-lista .opr-pt-ojo:focus-visible{
  color:var(--p950) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--p400) !important;
}
/* El cajón necesita sitio arriba a la derecha para que el ojo no pise al texto
   ni al rótulo de estado. */
.opr-pt-lista .opr-pt-sub{ position:relative !important; }
.opr-pt-lista .opr-pt-sub b{ padding-right:34px !important; }

.opr-pt-ojo-capa{
  position:fixed !important; inset:0 !important; z-index:99990 !important;
  display:grid !important; place-items:center !important; padding:18px !important;
  background:rgba(5,31,32,.62) !important;
}
.opr-pt-ojo-caja{
  width:min(100%, 360px) !important; background:var(--superficie) !important;
  border-radius:var(--radio) !important; overflow:hidden !important;
  box-shadow:0 18px 50px rgba(5,31,32,.3) !important;
}
.opr-pt-ojo-cab{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important;
  padding:12px 14px !important; border-bottom:1px solid var(--borde) !important;
}
.opr-pt-ojo-cab b{ font-size:1rem !important; font-weight:800 !important; letter-spacing:-.02em !important; }
.opr-pt-ojo-x{
  flex:none !important; width:30px !important; height:30px !important; border-radius:9px !important; border:0 !important;
  background:var(--p100) !important; color:var(--p700) !important; font-size:1.15rem !important; line-height:1 !important;
  cursor:pointer !important;
}
.opr-pt-ojo-x:hover{ background:var(--p200) !important; }
.opr-pt-ojo-img{ display:block !important; width:100% !important; height:auto !important; background:#FFFFFF !important; }
.opr-pt-ojo-pie{
  margin:0 !important; padding:10px 14px 14px !important;
  font-size:.8125rem !important; line-height:1.45 !important; color:var(--suave) !important; text-wrap:pretty !important;
}

/* ---------- lo que dicen las bases (v0.1.76) ----------
   Sección en claro —sin `es-blanca`: el fondo de la página—, debajo de la
   rejilla. Seis bloques de texto en dos columnas desde 900 px y en una por
   debajo. Todo prefijado con `.opr-pt-guia`, por lo mismo que el resto de la
   hoja (manual técnico, punto 11.1). El reset del núcleo quita el subrayado y el
   margen de los párrafos: aquí se devuelven. */
.opr-pt-guia .opr-pt-guia-rejilla{
  display:grid !important; grid-template-columns:minmax(0,1fr) !important;
  gap:clamp(26px,3vw,40px) clamp(28px,4vw,64px) !important;
}
@media (min-width:900px){
  .opr-pt-guia .opr-pt-guia-rejilla{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
.opr-pt-guia .opr-pt-guia-bloque{border-top:1px solid var(--borde) !important; padding-top:18px !important}
.opr-pt-guia .opr-pt-guia-bloque p{
  margin-top:10px !important; max-width:62ch !important;
  font-size:1rem !important; line-height:1.6 !important; color:var(--suave) !important; text-wrap:pretty !important;
}
.opr-pt-guia a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important; text-decoration-thickness:1px !important}
.opr-pt-guia a:hover{text-decoration-thickness:2px !important}
.opr-pt-guia .opr-pt-guia-mas{margin-top:clamp(30px,3.4vw,44px) !important; font-size:1rem !important; font-weight:700 !important}