/* =====================================================================
   OpoReal · Convocatorias · la ficha de una convocatoria
   =====================================================================
   La página propia de cada convocatoria. Es la que puede traer visitas
   de Google buscando «convocatoria Ertzaintza 2026», así que el texto
   viene del servidor entero, no lo pinta JavaScript.
   ===================================================================== */
.opr-cv.opr-cv-ficha .opr-cv-volver{
  display:inline-flex !important; align-items:center !important; gap:7px !important; min-height:40px !important;
  margin-bottom:12px !important; font-size:.875rem !important; font-weight:600 !important; color:var(--suave) !important;
}
.opr-cv.opr-cv-ficha .opr-cv-volver:hover{color:var(--tinta) !important}
.opr-cv.opr-cv-ficha .opr-cv-volver svg{width:15px !important; height:15px !important}
.opr-cv.opr-cv-ficha .opr-cv-h1{
  font-size:clamp(1.85rem,4vw,2.9rem) !important; font-weight:800 !important;
  line-height:1.04 !important; letter-spacing:-.03em !important; text-wrap:balance !important; max-width:20ch !important;
}
.opr-cv.opr-cv-ficha .opr-cv-alto{
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:22px !important;
  align-items:end !important; margin-bottom:clamp(24px,3vw,34px) !important;
}
.opr-cv.opr-cv-ficha .opr-cv-datos{
  border:1px solid var(--borde) !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important; box-shadow:var(--sombra-s) !important;
  padding:clamp(18px,2.4vw,26px) !important; margin-bottom:clamp(20px,2.6vw,30px) !important;
}
.opr-cv.opr-cv-ficha .opr-cv-plazo{margin-bottom:clamp(20px,2.6vw,30px) !important}


/* --- el texto libre, con la medida de lectura del documento 01 --- */
.opr-cv .opr-cv-texto{max-width:60ch !important}
.opr-cv .opr-cv-texto p, .opr-cv .opr-cv-texto ul, .opr-cv .opr-cv-texto ol{margin-bottom:1.05em !important; font-size:1.0625rem !important; line-height:1.66 !important; color:var(--suave) !important}
.opr-cv .opr-cv-texto h2{
  margin:1.7em 0 .55em !important; font-size:1.3rem !important; font-weight:700 !important;
  letter-spacing:-.02em !important; color:var(--tinta) !important;
}
.opr-cv .opr-cv-texto h3{
  margin:1.4em 0 .45em !important; font-size:1.0625rem !important; font-weight:700 !important;
  letter-spacing:-.012em !important; color:var(--tinta) !important;
}
.opr-cv .opr-cv-texto b, .opr-cv .opr-cv-texto strong{font-weight:700 !important; color:var(--tinta) !important}
.opr-cv .opr-cv-texto a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important}
.opr-cv .opr-cv-texto ul, .opr-cv .opr-cv-texto ol{padding-left:1.15em !important}
.opr-cv .opr-cv-texto li{margin-bottom:.4em !important; list-style:disc !important}
.opr-cv .opr-cv-texto ol li{list-style:decimal !important}
.opr-cv .opr-cv-texto li::marker{color:var(--borde2) !important}
.opr-cv .opr-cv-texto > *:last-child{margin-bottom:0 !important}
.opr-cv.opr-cv-ficha .opr-cv-pie{margin-top:clamp(24px,3vw,34px) !important}
.opr-cv .opr-cv-fuente{
  margin-top:clamp(22px,2.6vw,30px) !important; padding-top:16px !important; border-top:1px solid var(--borde) !important;
  font-size:.8125rem !important; color:var(--tenue) !important; max-width:72ch !important;
}
@media (max-width:640px){
.opr-cv.opr-cv-ficha .opr-cv-alto{grid-template-columns:1fr !important; align-items:start !important}
}



/* --- la marca de «estimado» ---
   Ámbar, que en este sistema significa aviso, y pegada al número. Es letra
   pequeña pero no es una nota al pie: va en la misma línea que el dato, porque
   una cifra que se lee sola acaba citándose sola. */
.opr-cv .opr-cv-datos .opr-cv-estimado{
  display:inline-block !important; margin-left:8px !important; vertical-align:3px !important;
  font-size:.6875rem !important; font-weight:700 !important; font-style:normal !important;
  letter-spacing:0 !important; color:var(--av600) !important; background:var(--av100) !important;
  padding:3px 9px !important; border-radius:999px !important;
}


/* --- el enlace al resumen de las bases ---
   Se ve distinto de los enlaces oficiales del pie a propósito: el BOPV es la
   fuente, esto es lo que hemos escrito nosotros sobre ella. */
.opr-cv .opr-cv-articulo{
  display:block !important; margin:22px 0 0 !important;
  padding:18px 20px !important; border-radius:var(--radio) !important;
  background:var(--p100) !important; border:1px solid var(--borde) !important;
  transition:background .16s, border-color .16s !important;
}
.opr-cv .opr-cv-articulo:hover{background:var(--superficie) !important; border-color:var(--borde2) !important}
.opr-cv .opr-cv-articulo b{
  display:block !important; font-size:1rem !important; font-weight:700 !important;
  letter-spacing:-.012em !important; color:var(--tinta) !important;
}
.opr-cv .opr-cv-articulo span{
  display:block !important; margin-top:3px !important; font-size:.875rem !important; color:var(--tenue) !important; line-height:1.5 !important;
}



/* =====================================================================
   EL SEGUIMIENTO · los cajones por fase
   =====================================================================
   Documento 33. Un cajón por fase, con sus hitos dentro y, para quien ha
   entrado en su cuenta, su línea.

   Va con `<details>` y no con botones y `hidden` a propósito: el navegador ya
   sabe abrirlo y cerrarlo con teclado, lo encuentra el buscador del navegador
   aunque esté cerrado, y **no puede caer en la trampa n.º 4 del documento
   02** —el `[hidden]` que pierde por especificidad—, que ha mordido cuatro
   veces en cuatro plugins distintos.
   ===================================================================== */
.opr-cv .opr-cv-seg{margin:clamp(26px,3.2vw,38px) 0 0 !important}
.opr-cv .opr-cv-seg-alto{
  display:flex !important; align-items:baseline !important; justify-content:space-between !important;
  gap:14px !important; flex-wrap:wrap !important; margin-bottom:14px !important;
}
.opr-cv .opr-cv-seg-h{margin:0 !important}
.opr-cv .opr-cv-seg-pista{margin:0 !important; font-size:.8125rem !important; color:var(--tenue) !important}
.opr-cv .opr-cv-cajon{
  border:1px solid var(--borde) !important; border-radius:var(--radio-s) !important;
  background:var(--superficie) !important; margin-bottom:10px !important; overflow:hidden !important;
}
.opr-cv .opr-cv-cajon summary{
  display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important;
  padding:15px 18px !important; cursor:pointer !important; min-height:44px !important;
  list-style:none !important; user-select:none !important;
}
.opr-cv .opr-cv-cajon summary::-webkit-details-marker{display:none !important}
.opr-cv .opr-cv-cajon summary:hover{background:var(--p50) !important}
.opr-cv .opr-cv-cajon summary:focus-visible{outline:2px solid var(--tinta) !important; outline-offset:-2px !important}
.opr-cv .opr-cv-cajon-n{
  flex:1 1 auto !important; font-weight:700 !important; font-size:1rem !important;
  letter-spacing:-.014em !important; color:var(--tinta) !important;
}
.opr-cv .opr-cv-cajon-e{
  flex:0 0 auto !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
}


/* --- LA FLECHA ---
   El cajón se abría y se cerraba desde el principio, y no se veía: costaba
   descubrir que aquello era desplegable. Un `<details>` sin marcador propio no
   avisa de nada, así que se le pone uno y se le da la vuelta al abrir. */
.opr-cv .opr-cv-flecha{
  flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important;
  width:26px !important; height:26px !important; margin-left:-2px !important;
  border-radius:50% !important; color:var(--suave) !important; background:var(--p100) !important;
  transition:transform .18s ease, background .16s !important;
}
.opr-cv .opr-cv-flecha svg{width:15px !important; height:15px !important}
.opr-cv .opr-cv-cajon[open] > summary .opr-cv-flecha{transform:rotate(180deg) !important}
.opr-cv .opr-cv-cajon summary:hover .opr-cv-flecha{background:var(--p200) !important; color:var(--tinta) !important}


/* --- LA MARCA DE «AQUÍ DENTRO HAY ALGO TUYO» ---
   Los cajones vienen plegados menos el que está en curso, así que una nota
   podría quedarse dentro sin que nadie la viera. El punto lo dice sin abrirlo.
   Verde porque es lo tuyo y está publicado, y del tamaño de un punto: no es un
   aviso, es una señal. */
.opr-cv .opr-cv-punto{
  display:inline-block !important; width:8px !important; height:8px !important; margin-left:8px !important;
  vertical-align:middle !important; border-radius:50% !important; background:var(--ok500) !important;
}
.opr-cv .opr-cv-oculto{
  position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}

/* El color solo donde significa algo: ámbar es aviso, y un plazo de
   reclamación corriendo es lo único de esta página que obliga a hacer algo
   hoy. Lo demás va en tinta y gris. */
.opr-cv .opr-cv-cajon.es-plazo{border-color:var(--av500) !important}
.opr-cv .opr-cv-cajon.es-plazo .opr-cv-cajon-e{color:var(--av600) !important}
.opr-cv .opr-cv-cajon.es-pendiente .opr-cv-cajon-n, .opr-cv .opr-cv-cajon.es-pasada .opr-cv-cajon-n{color:var(--tenue) !important; font-weight:600 !important}
.opr-cv .opr-cv-cajon-c{padding:2px 18px 18px !important}


/* --- los hitos --- */
.opr-cv .opr-cv-hitos{margin:0 !important; padding:0 !important; list-style:none !important}
.opr-cv .opr-cv-hito{
  display:grid !important; grid-template-columns:26px minmax(0,1fr) !important; gap:12px !important;
  padding:12px 0 !important; border-top:1px solid var(--borde) !important;
}
.opr-cv .opr-cv-hito:first-child{border-top:0 !important; padding-top:4px !important}
.opr-cv .opr-cv-hito-i{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:26px !important; height:26px !important; border-radius:50% !important;
  background:var(--p100) !important; color:var(--suave) !important;
}
.opr-cv .opr-cv-hito-i svg{width:15px !important; height:15px !important}
.opr-cv .opr-cv-hito.es-plazo .opr-cv-hito-i{background:var(--av100) !important; color:var(--av600) !important}
.opr-cv .opr-cv-hito.es-futuro .opr-cv-hito-i{background:transparent !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-cv .opr-cv-hito time{
  display:block !important; font-size:.75rem !important; font-weight:700 !important; color:var(--tenue) !important;
}
.opr-cv .opr-cv-hito b{
  display:block !important; margin-top:2px !important; font-size:.9375rem !important; font-weight:700 !important;
  letter-spacing:-.01em !important; color:var(--tinta) !important;
}
.opr-cv .opr-cv-hito p{
  margin:3px 0 0 !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important;
  overflow-wrap:anywhere !important;
}
.opr-cv .opr-cv-hito a{
  display:inline-block !important; margin-top:6px !important; font-size:.8125rem !important; font-weight:600 !important;
  color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important;
}
.opr-cv .opr-cv-nada{margin:6px 0 0 !important; font-size:.9375rem !important; color:var(--tenue) !important}


/* --- mi línea ---
   Aquí el verde y el rojo sí significan lo que significan en todo el sistema:
   acierto y fallo. Es la única parte de la página que los usa. */
.opr-cv .opr-cv-mia{
  margin:14px 0 0 !important; padding:13px 16px !important; border-radius:var(--radio-s) !important;
  background:var(--p100) !important; border:1px solid var(--borde) !important;
}
.opr-cv .opr-cv-mia-r{
  display:block !important; font-size:.75rem !important; font-weight:700 !important; color:var(--tenue) !important; margin-bottom:2px !important;
}
.opr-cv .opr-cv-mia p{margin:0 !important; font-size:1rem !important; color:var(--tinta) !important; line-height:1.5 !important; overflow-wrap:anywhere !important}
.opr-cv .opr-cv-mia b{font-weight:800 !important; font-size:1.125rem !important}
.opr-cv .opr-cv-mia.es-apto{background:var(--ok100) !important; border-color:var(--ok500) !important}
.opr-cv .opr-cv-mia.es-apto b{color:var(--ok600) !important}
.opr-cv .opr-cv-mia.es-noapto{background:var(--no100) !important; border-color:var(--no500) !important}
.opr-cv .opr-cv-mia.es-noapto b{color:var(--no600) !important}
.opr-cv .opr-cv-mia.es-sinfila, .opr-cv .opr-cv-mia.es-sindni{
  font-size:.9375rem !important; color:var(--suave) !important; background:var(--p50) !important;
}
.opr-cv .opr-cv-mia.es-sinfila b{font-size:.9375rem !important; color:var(--tinta) !important}


/* --- el cuadro del DNI --- */
/* --- EL CUADRO DEL DNI, DE NOCHE ---
   Petición de Sergio, 4 de septiembre. Y le va bien: es lo único de la página
   que pide algo, así que se separa de lo que solo informa. */
.opr-cv .opr-cv-dni{
  margin:clamp(26px,3.2vw,38px) 0 0 !important; padding:clamp(20px,2.6vw,28px) !important;
  border:0 !important; border-radius:var(--radio) !important;
  background:var(--p950) !important; color:var(--p100) !important;
  box-shadow:var(--sombra-s) !important; max-width:60ch !important;
}
.opr-cv .opr-cv-dni .opr-h3{color:#fff !important}
.opr-cv .opr-cv-dni p{margin:0 0 14px !important; font-size:.9375rem !important; line-height:1.6 !important; color:var(--p300) !important}
.opr-cv .opr-cv-dni p b{color:#fff !important}
.opr-cv .opr-cv-dni-f{display:grid !important; gap:8px !important; max-width:22rem !important}
.opr-cv .opr-cv-dni-f label{font-size:.8125rem !important; font-weight:700 !important; color:var(--p300) !important}
.opr-cv .opr-cv-dni-f input{
  width:100% !important; min-height:44px !important; padding:10px 13px !important;
  border:1.5px solid var(--p700) !important; border-radius:var(--radio-s) !important;
  font:inherit !important; font-size:1rem !important; letter-spacing:.06em !important;
  background:var(--p900) !important; color:#fff !important;
}
.opr-cv .opr-cv-dni-f input::placeholder{color:var(--p500) !important}
.opr-cv .opr-cv-dni-f input:focus{outline:2px solid var(--p300) !important; outline-offset:1px !important; border-color:var(--p500) !important}

/* sobre fondo oscuro el botón se invierte, como en `.es-noche` */
.opr-cv .opr-cv-dni-f .opr-btn-1{background:var(--p50) !important; color:var(--p950) !important}
.opr-cv .opr-cv-dni-f .opr-btn-1:hover{background:#fff !important}
.opr-cv .opr-cv-dni-f button{justify-self:start !important}
.opr-cv .opr-cv-dni-hay b{color:#fff !important; letter-spacing:.08em !important}
.opr-cv .opr-cv-dni-fijo{
  margin:0 0 14px !important; padding:11px 14px !important; border-radius:var(--radio-s) !important;
  background:rgba(255,255,255,.06) !important; color:var(--p300) !important;
  font-size:.875rem !important; line-height:1.55 !important;
}
.opr-cv .opr-cv-dni-fijo b{color:#fff !important}
.opr-cv .opr-cv-dni-fijo a{color:#fff !important; text-decoration:underline !important; text-underline-offset:3px !important}
.opr-cv .opr-cv-dni-borrar{
  min-height:40px !important; padding:0 4px !important; background:none !important; border:0 !important;
  font:inherit !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--p400) !important;
  text-decoration:underline !important; text-underline-offset:3px !important; cursor:pointer !important;
}
.opr-cv .opr-cv-dni-borrar:hover{color:#fff !important}
.opr-cv .opr-cv-dni-mal{
  margin:14px 0 0 !important; padding:11px 14px !important; border-radius:var(--radio-s) !important;
  background:var(--av100) !important; color:var(--av900) !important; font-size:.875rem !important;
}
.opr-cv .opr-cv-dni-fuera{
  margin:clamp(26px,3.2vw,38px) 0 0 !important; font-size:.9375rem !important; color:var(--tenue) !important;
}
.opr-cv .opr-cv-dni-fuera a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important}