/* ---------- Diccionario del opositor ----------
   Dos secciones y no una. La portada va de noche y la lista va en blanco: si
   fueran la misma, `es-noche` teñiría también las fichas. Es la lección de la
   portada de psicotécnicos, donde una sola sección tiñó la página entera.

   Y OJO CON LA ESPECIFICIDAD: el reset del núcleo es `.opr *{margin:0 !important;
   padding:0 !important; max-width:none !important; ...}`, (0,1,0), lo mismo que una clase suelta.
   Mientras las hojas se sirvan en orden gana la nuestra, pero LiteSpeed puede
   combinarlas y reordenarlas. Por eso todo lo que pueda pelearse con el reset
   va prefijado con `.opr-dc-portada` o `.opr-dc-lista`.

   SIN COLOR. Las tres secciones de una ficha —clave, ejemplo y truco— se
   distinguen por su icono y por su rótulo, no por un color de fondo. El verde,
   el rojo y el ámbar significan acierto, fallo y aviso, y no decoran nada
   (documento 01, punto 2.3). Una ficha con tres colores sería bonita y
   dejaría de significar nada.
   ---------------------------------------------------------------------- */

/* =====================  portada  ===================== */

.opr-dc-portada{position:relative !important; overflow:hidden !important}
.opr-dc-portada::before{
  content:'' !important; position:absolute !important; left:50% !important; top:-58% !important; width:min(1000px,130%) !important; aspect-ratio:1 !important;
  transform:translateX(-50%) !important; pointer-events:none !important;
  background:radial-gradient(circle at center, rgba(127,142,159,.30), transparent 63%) !important;
}
.opr-dc-portada .opr-caja{position:relative !important}
.opr-dc-portada .opr-h2{color:#fff !important}
.opr-dc-portada .opr-entradilla{max-width:56ch !important}

/* --- la agente ---
   MIDE LO QUE SE LE DICE. El alto sale de `--opr-dc-agente` y el ancho de la
   proporción de la imagen, 245 × 386. SI SE CAMBIA EL DIBUJO HAY QUE MIRAR SU
   PROPORCIÓN: la cifra de abajo y el `width`/`height` del marcado salen de ella,
   y si no cuadran, o el titular pasa por debajo del muñeco o sobra un hueco.
   Van ya tres dibujos distintos en esta portada y las tres veces ha habido que
   tocar esas dos cifras: no es un olvido, es parte del cambio. Con un alto deducido de `top` y
   `bottom` el dibujo crece con la pantalla y en un monitor alto sale un muñeco
   gigante: pasó en psicotécnicos y costó una versión.

   Y no se pega al borde derecho: `right` es el hueco que le queda a la derecha
   y el `padding-right` de la caja lo reserva a la izquierda, para que el
   titular y el buscador no le pasen por debajo. Las dos cifras salen del mismo
   alto, así que se mueve todo con un solo número.

   OJO CON OCULTARLA. 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-dc-agente`, y el prefijo de la sección. */
.opr-dc-portada{--opr-dc-agente:clamp(300px,44vh,430px)}
.opr-dc-portada img.opr-dc-agente{
  display:none !important;
  /* Más adentro que en psicotécnicos y en los temas —allí es
     `clamp(40px,5vw,110px)`—: aquí el buscador es una píldora ancha y con la
     agente pegada al borde la portada quedaba descosida por el medio.
     Petición de Sergio, 5 de septiembre. */
  position:absolute !important; right:clamp(72px,8vw,180px) !important;
  top:50% !important; transform:translateY(-50%) !important;
  height:var(--opr-dc-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 buscador ocupa el ancho entero y la agente lo
   taparía. En móvil no se ve, que es lo pedido. */
@media (min-width:1120px){
  .opr-dc-portada img.opr-dc-agente{display:block !important}
  /* 0.635 es el ancho del dibujo por cada punto de alto; más el hueco de la
     derecha —el mismo `clamp` de arriba, y si se cambia uno se cambian los dos—,
     más un respiro para que el texto no lo roce. */
  .opr-dc-portada .opr-caja{
    padding-right:calc(var(--opr-dc-agente) * 0.635 + clamp(72px,8vw,180px) + 20px) !important;
  }
}

/* --- el buscador --- */
.opr-dc-portada .opr-dc-buscador{position:relative !important; margin-top:clamp(24px,3vw,34px) !important; max-width:640px !important; z-index:5 !important}
.opr-dc-portada .opr-dc-campo{
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:6px 6px 6px 18px !important; border-radius:999px !important;
  background:var(--p900) !important; box-shadow:inset 0 0 0 1.5px var(--p700) !important;
  transition:box-shadow .16s ease, background .16s ease !important;
}
.opr-dc-portada .opr-dc-campo:focus-within{background:var(--p800) !important; box-shadow:inset 0 0 0 1.5px var(--p500) !important}
/* El foco se enseña en la píldora entera, no en el `input`: el aro del núcleo
   es `--tinta`, que sobre el fondo de noche no se ve, y además dibujaba un
   segundo rectángulo dentro de la píldora. Aquí es un aro claro y alrededor. */
.opr-dc-portada .opr-dc-input:focus-visible{outline:none !important}
.opr-dc-portada .opr-dc-campo:focus-within{outline:2px solid var(--p400) !important; outline-offset:3px !important}
.opr-dc-portada .opr-dc-lupa{width:20px !important; height:20px !important; flex:none !important; color:var(--p400) !important}
.opr-dc-portada .opr-dc-input{
  flex:1 !important; min-width:0 !important; padding:14px 0 !important; background:transparent !important;
  font-size:1.0625rem !important; font-weight:500 !important; letter-spacing:-.012em !important; color:#fff !important;
}
.opr-dc-portada .opr-dc-input::placeholder{color:var(--p500) !important; font-weight:400 !important}
.opr-dc-portada .opr-dc-input::-webkit-search-cancel-button{-webkit-appearance:none !important; appearance:none !important}
.opr-dc-portada .opr-dc-borrar{
  flex:none !important; width:38px !important; height:38px !important; border-radius:999px !important;
  display:grid !important; place-items:center !important; color:var(--p400) !important;
  transition:color .15s ease, background-color .15s ease !important;
}
.opr-dc-portada .opr-dc-borrar:hover{color:#fff !important; background:var(--p700) !important}
.opr-dc-portada .opr-dc-borrar svg{width:16px !important; height:16px !important}

/* --- sugerencias --- */
.opr-dc-portada .opr-dc-sug{
  position:absolute !important; left:0 !important; right:0 !important; top:calc(100% + 8px) !important; z-index:20 !important;
  max-height:min(52vh,380px) !important; overflow-y:auto !important;
  padding:6px !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra) !important;
}
.opr-dc-portada .opr-dc-sug li{display:block !important}
.opr-dc-portada .opr-dc-sug button{
  display:block !important; width:100% !important; text-align:left !important; padding:10px 13px !important; border-radius:9px !important;
  color:var(--tinta) !important; transition:background-color .12s ease !important;
}
.opr-dc-portada .opr-dc-sug button b{display:block !important; font-size:.96875rem !important; font-weight:700 !important; letter-spacing:-.014em !important}
.opr-dc-portada .opr-dc-sug button span{
  display:block !important; margin-top:2px !important; font-size:.8125rem !important; line-height:1.4 !important; color:var(--tenue) !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important;
}
.opr-dc-portada .opr-dc-sug button:hover,
.opr-dc-portada .opr-dc-sug button[aria-selected="true"]{background:var(--p100) !important}
.opr-dc-portada .opr-dc-sug mark{background:none !important; color:var(--tinta) !important; font-weight:800 !important}

.opr-dc-portada .opr-dc-datos{
  display:flex !important; gap:clamp(22px,3vw,38px) !important; margin-top:clamp(24px,3vw,34px) !important;
  padding-top:22px !important; border-top:1px solid var(--p800) !important;
}
.opr-dc-portada .opr-dc-datos > div{display:flex !important; flex-direction:column !important; gap:1px !important}
.opr-dc-portada .opr-dc-datos b{font-size:1.75rem !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.035em !important; color:#fff !important}
.opr-dc-portada .opr-dc-datos span{font-size:.78125rem !important; font-weight:500 !important; color:var(--p500) !important}

/* sin plan no hay nada que buscar: ni el campo ni la invitación a escribir */
.opr-dc-portada[data-puede="no"] .opr-dc-buscador,
.opr-dc-portada[data-puede="no"] .opr-dc-invita{display:none !important}

/* =====================  la lista  ===================== */

.opr-dc-lista{padding-top:clamp(38px,4.4vw,64px) !important}
.opr-dc-lista .opr-caja{position:relative !important}

.opr-dc-lista .opr-dc-estado{
  margin-bottom:20px !important; padding-bottom:14px !important; border-bottom:1px solid var(--borde) !important;
  font-size:.84375rem !important; font-weight:600 !important; color:var(--tenue) !important;
}
.opr-dc-lista .opr-dc-cuerpo{display:flex !important; flex-direction:column !important}

/* --- la línea del abecedario ---
   Se queda pegada bajo la cabecera mientras se recorre la lista. Puede hacerlo
   porque `--opr-cabecera` dice cuánto mide la cabecera de verdad —barra de
   administración incluida—: sin ese dato, pegarla era pelearse con ella.

   Sin color. Una letra que no tiene términos no se pinta de rojo: se apaga y
   deja de responder al ratón. */
.opr-dc-lista .opr-dc-abc{
  position:sticky !important; top:var(--opr-cabecera, 0px) !important; z-index:6 !important;
  display:flex !important; flex-wrap:wrap !important; gap:4px !important;
  margin:0 0 18px !important; padding:10px 0 !important;
  background:var(--fondo) !important;
  box-shadow:0 1px 0 var(--borde) !important;
}
.opr-dc-lista .opr-dc-abc button{
  min-width:30px !important; height:30px !important; padding:0 2px !important; border-radius:8px !important;
  font-size:.84375rem !important; font-weight:700 !important; letter-spacing:-.01em !important; line-height:1 !important;
  color:var(--suave) !important; background:transparent !important;
  font-variant-numeric:tabular-nums !important;
  transition:background-color .14s ease, color .14s ease !important;
}
.opr-dc-lista .opr-dc-abc button:hover{background:var(--p100) !important; color:var(--tinta) !important}
.opr-dc-lista .opr-dc-abc button.es-aqui{background:var(--p950) !important; color:#fff !important}
.opr-dc-lista .opr-dc-abc button[disabled]{color:var(--p300) !important; cursor:default !important; background:transparent !important}
@media (max-width:520px){
  .opr-dc-lista .opr-dc-abc{gap:2px !important}
  .opr-dc-lista .opr-dc-abc button{min-width:26px !important; height:28px !important; font-size:.8125rem !important}
}

/* El separador tiene que quedar por debajo de la línea al saltar a él. Esto
   acierta casi siempre; el guion afina lo que falte DESPUÉS de saltar, que es
   cuando se puede medir de verdad. */
.opr-dc-lista .opr-dc-letra{
  scroll-margin-top:calc(var(--opr-cabecera, 0px) + var(--opr-dc-abc, 0px) + 10px) !important;
}

/* --- separador de letra --- */
.opr-dc-lista .opr-dc-letra{
  display:flex !important; align-items:center !important; gap:14px !important; margin:26px 0 12px !important;
}
.opr-dc-lista .opr-dc-letra:first-child{margin-top:0 !important}
.opr-dc-lista .opr-dc-letra b{
  font-size:1.0625rem !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--tinta) !important;
  min-width:1.2em !important;
}
.opr-dc-lista .opr-dc-letra i{flex:1 !important; height:1px !important; background:var(--borde) !important; display:block !important}

/* --- ficha --- */
.opr-dc-lista .opr-dc-ficha{
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,26px) !important;
  margin-bottom:9px !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
  scroll-margin-top:calc(var(--opr-cabecera, 0px) + var(--opr-dc-abc, 0px) + 14px) !important;
  transition:box-shadow .3s ease !important;
}
/* OJO CON EL NOMBRE. Hasta la v1.0.1 esta regla se llamaba `es-señalada` y el
   guion ponía `es-marcada`: la ficha a la que saltabas no se señalaba nunca, y
   el arnés no lo veía porque miraba la lista de clases y no el estilo. */
.opr-dc-lista .opr-dc-ficha.es-marcada{box-shadow:inset 0 0 0 2px var(--tinta), var(--sombra) !important}
.opr-dc-lista .opr-dc-termino{
  font-size:1.1875rem !important; font-weight:800 !important; letter-spacing:-.022em !important; line-height:1.2 !important;
  color:var(--tinta) !important; text-wrap:balance !important;
}
.opr-dc-lista .opr-dc-def{
  margin-top:8px !important; max-width:56ch !important; font-size:1rem !important; line-height:1.6 !important;
  color:var(--suave) !important; text-wrap:pretty !important; overflow-wrap:anywhere !important;
}

/* --- los tres desplegables --- */
.opr-dc-lista .opr-dc-mas{display:flex !important; flex-direction:column !important; gap:6px !important; margin-top:15px !important}
.opr-dc-lista .opr-dc-bloque{
  border-radius:var(--radio-s) !important; background:var(--p50) !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-dc-lista .opr-dc-bloque summary{
  display:flex !important; align-items:center !important; gap:10px !important; padding:11px 14px !important; cursor:pointer !important;
  font-size:.90625rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--suave) !important;
}
.opr-dc-lista .opr-dc-bloque summary::-webkit-details-marker{display:none !important}
.opr-dc-lista .opr-dc-bloque summary::marker{content:'' !important}
.opr-dc-lista .opr-dc-bloque summary svg{width:17px !important; height:17px !important; flex:none !important; color:var(--p500) !important}
.opr-dc-lista .opr-dc-bloque summary .opr-dc-chevron{margin-left:auto !important; width:15px !important; height:15px !important; transition:transform .18s ease !important}
.opr-dc-lista .opr-dc-bloque[open] summary{color:var(--tinta) !important}
.opr-dc-lista .opr-dc-bloque[open] summary svg{color:var(--suave) !important}
.opr-dc-lista .opr-dc-bloque[open] summary .opr-dc-chevron{transform:rotate(180deg) !important}
.opr-dc-lista .opr-dc-bloque p{
  padding:0 14px 13px 41px !important; max-width:56ch !important;
  font-size:.9375rem !important; line-height:1.58 !important; color:var(--suave) !important;
  text-wrap:pretty !important; overflow-wrap:anywhere !important;
}

/* --- ver también --- */
.opr-dc-lista .opr-dc-ver{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:7px !important;
  margin-top:14px !important; padding-top:13px !important; border-top:1px solid var(--borde) !important;
}
.opr-dc-lista .opr-dc-ver > span{font-size:.78125rem !important; color:var(--tenue) !important; margin-right:3px !important}
.opr-dc-lista .opr-dc-ver button{
  padding:6px 13px !important; border-radius:999px !important; font-size:.84375rem !important; font-weight:600 !important;
  color:var(--suave) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  transition:color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
.opr-dc-lista .opr-dc-ver button:hover{color:var(--tinta) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}

/* lo que casa con la búsqueda: peso, no color. El amarillo del `mark` del
   navegador se lee como aviso, y aviso aquí no significa nada. */
.opr-dc-lista mark{background:var(--p100) !important; color:var(--tinta) !important; font-weight:700 !important; border-radius:3px !important; padding:0 2px !important}

/* --- sin resultados --- */
.opr-dc-lista .opr-dc-vacio{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:7px !important;
  padding:clamp(24px,3vw,34px) !important; border-radius:var(--radio) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-dc-lista .opr-dc-vacio b{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.014em !important}
.opr-dc-lista .opr-dc-vacio span{font-size:.9375rem !important; color:var(--suave) !important; max-width:52ch !important}
.opr-dc-lista .opr-dc-vacio .opr-btn{margin-top:10px !important; padding:11px 19px !important; font-size:.90625rem !important}

/* --- el candado --- */
.opr-dc-lista .opr-dc-candado{
  display:none !important; flex-direction:column !important; align-items:flex-start !important;
  padding:clamp(26px,3.4vw,44px) !important; border-radius:var(--radio) !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-dc-lista[data-puede="no"] .opr-dc-candado{display:flex !important}
.opr-dc-lista[data-puede="no"] .opr-dc-estado,
.opr-dc-lista[data-puede="no"] .opr-dc-cuerpo,
.opr-dc-lista[data-puede="no"] .opr-dc-arriba{display:none !important}
.opr-dc-lista .opr-dc-candado-icono{
  display:grid !important; place-items:center !important; width:46px !important; height:46px !important; margin-bottom:16px !important;
  border-radius:999px !important; background:var(--superficie) !important; color:var(--suave) !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-dc-lista .opr-dc-candado-icono svg{width:23px !important; height:23px !important}
.opr-dc-lista .opr-dc-candado .opr-h3{max-width:26ch !important; text-wrap:balance !important}
.opr-dc-lista .opr-dc-candado-txt{margin-top:11px !important; max-width:56ch !important; font-size:.96875rem !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-dc-lista .opr-dc-candado-btns{display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:24px !important}
.opr-dc-lista .opr-dc-candado-btns .opr-btn{padding:13px 22px !important; font-size:.9375rem !important}
.opr-dc-lista[data-dentro="si"] .opr-dc-fuera{display:none !important}

/* --- volver al buscador ---
   NO SE PONE ABAJO DEL TODO, y no es capricho. Astra pinta su propia flecha de
   «subir arriba» en `#ast-scroll-top`, también `position:fixed`, a 30 px del
   borde de abajo y del derecho y midiendo 32 px. Este botón caía justo encima:
   medido en el sitio, la flecha entera —[1203, 548, 32, 32]— quedaba debajo de
   la píldora —[1115, 529, 116, 50]— y no se podía pulsar.

   Así que este se sube por encima de ella: 30 de hueco + 32 de flecha + 14 de
   aire = 76. La cifra es fija a propósito, porque lo que hay debajo también lo
   es; si algún día se quita la flecha del tema, esto se baja a mano.

   El de la derecha se deja como estaba: las dos van alineadas por ese borde. */
.opr-dc-lista .opr-dc-arriba{
  position:fixed !important; right:clamp(16px,3vw,34px) !important; bottom:76px !important; z-index:800 !important;
  display:inline-flex !important; align-items:center !important; gap:9px !important; padding:12px 19px !important;
  border-radius:999px !important; background:var(--p950) !important; color:#fff !important;
  font-size:.90625rem !important; font-weight:700 !important; letter-spacing:-.012em !important;
  box-shadow:0 10px 30px -12px rgba(18,23,28,.7) !important;
  transition:transform .14s ease, background-color .16s ease !important;
}
.opr-dc-lista .opr-dc-arriba:hover{background:var(--p800) !important}
.opr-dc-lista .opr-dc-arriba:active{transform:translateY(1px) !important}
.opr-dc-lista .opr-dc-arriba svg{width:16px !important; height:16px !important; flex:none !important}

@media (max-width:560px){
  .opr-dc-portada .opr-dc-input{font-size:1rem !important; padding:13px 0 !important}
  .opr-dc-portada .opr-dc-campo{padding-left:15px !important; gap:10px !important}
  .opr-dc-lista .opr-dc-termino{font-size:1.09375rem !important}
  .opr-dc-lista .opr-dc-bloque p{padding-left:14px !important}
  .opr-dc-lista .opr-dc-candado-btns .opr-btn{flex:1 1 100% !important}
  .opr-dc-lista .opr-dc-arriba span{display:none !important}
  .opr-dc-lista .opr-dc-arriba{padding:13px !important; border-radius:999px !important}
}

/* ---------------------------------------------------------------------------
   TRAMPA Nº 4 DEL MANUAL, y aquí mordió tres veces: el atributo `hidden` no
   ocultaba nada. `.opr [hidden]{display:none !important}` es (0,1,1) y las reglas de este
   fichero son (0,2,0); con el blindaje las dos llevan !important, así que gana
   la más específica y salían desde el primer momento el botón flotante, la
   equis de borrar y el aviso de «sin resultados».

   No basta con `.opr-dc-portada [hidden]`: eso también es (0,2,0) —una clase y
   un atributo— y empata. Con `[data-puede]` delante son (0,3,0) y ganan
   siempre. Y va al FINAL del fichero, no al principio: en un empate, manda el
   orden.
   --------------------------------------------------------------------------- */
.opr-dc-portada[data-puede] [hidden],
.opr-dc-lista[data-puede] [hidden]{display:none !important}


/* --- el índice de términos escrito en el servidor ---            v1.0.11
   Solo lo ve quien no tiene plan: con plan, el guion lo quita antes de pintar
   el diccionario. No es una lista de adorno; es lo que le dice al buscador de
   qué va la página, así que se maqueta para leerse, no para rellenar. */
.opr-dc-lista .opr-dc-indice{margin-top:clamp(26px,3vw,38px) !important}
.opr-dc-lista .opr-dc-indice-tit{margin:0 0 10px !important}
.opr-dc-lista .opr-dc-indice-txt{
  color:var(--suave) !important; max-width:64ch !important; margin:0 0 26px !important;
}
.opr-dc-lista .opr-dc-indice-txt b{color:var(--tinta) !important; font-weight:600 !important}
.opr-dc-lista .opr-dc-indice-grupo{
  display:grid !important; grid-template-columns:44px minmax(0,1fr) !important;
  gap:0 16px !important; align-items:start !important;
  padding:14px 0 !important; border-top:1px solid var(--borde) !important;
}
.opr-dc-lista .opr-dc-indice-letra{
  margin:0 !important; font-size:1.25rem !important; font-weight:800 !important;
  line-height:1.2 !important; color:var(--tenue) !important; letter-spacing:-.02em !important;
  font-variant-numeric:tabular-nums !important;
}
.opr-dc-lista .opr-dc-indice-lista{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:flex !important; flex-wrap:wrap !important; gap:6px 10px !important;
}
.opr-dc-lista .opr-dc-indice-lista li{
  font-size:.9375rem !important; color:var(--tinta) !important; font-weight:500 !important;
  background:var(--p100) !important; border-radius:var(--radio-s) !important;
  padding:5px 11px !important;
}
.opr-dc-lista .opr-dc-indice-def{color:var(--suave) !important; font-weight:400 !important}
@media (max-width:560px){
  .opr-dc-lista .opr-dc-indice-grupo{grid-template-columns:1fr !important; gap:8px !important}
  .opr-dc-lista .opr-dc-indice-letra{font-size:1.0625rem !important}
}