/* =====================================================================
   BravoZulu · Convocatorias · el listado
   =====================================================================
   Reglas de color que se respetan aquí, del documento 01: el verde, el
   rojo y el ámbar significan acierto, fallo y aviso, y no decoran. Por
   eso el estado de una convocatoria —abierta, próximamente, en proceso,
   cerrada— **no lleva color**: lleva un filete de tinta y una palabra.
   El único ámbar de esta página es el de «quedan pocos días», que sí es
   un aviso de verdad.
   ===================================================================== */
/* --- EL MAIN TIENE QUE OCUPAR TODO EL ANCHO, y hasta hoy no lo hacia ---
   `.ast-container` de Astra es un CONTENEDOR FLEX, y nuestro `<main>` es un
   item con `flex-grow:0`: se encogia a su contenido --1083 px dentro de 1265--
   y quedaban 180 px muertos a la derecha. Con todo en blanco no se veia; el
   dia que la cabecera se puso en oscuro apareció una franja blanca al borde
   derecho. `display:block` en el item NO lo arregla: un item flex se mide como
   item, no como bloque. Hay que decirle que crezca.
   Va con (0,2,0) para ganarle al `max-width:none` de `.opr`. */
.opr-cv.opr-cv-listado,
.opr-cv.opr-cv-ficha{width:100% !important; flex:1 1 100% !important}

/* --- la cabeza: banda oscura y los agentes a la derecha ---
   El titular vive ahora en su propia seccion `es-noche`, asi que no necesita
   margen abajo: lo separa el borde de la seccion. Y como es lo unico que hay
   dentro, la rejilla la reparte el propio header: texto a la izquierda,
   agentes a la derecha, apoyados en la misma linea de base.
   OJO CON EL NUCLEO, Y AQUI NO BASTA (0,1,1). `.opr img,.opr svg` fija
   `display:block` y `max-width:100%` con (0,1,1), y ese mismo bloque va en el
   nucleo de CADA plugin. En esta pagina, `bravozulu-bloques/core.css` --la
   cabecera y el pie, que van en todo el sitio-- se carga DESPUES de esta hoja,
   asi que un `img.opr-cv-agentes` (0,1,1) pierde por orden aunque lleve
   `!important`. Es la trampa del ultimo nucleo, la primera del documento 02, y
   aqui se cayo en ella: el `display:none` del movil no hacia nada.
   Por eso todo lo de los agentes va con `.opr-cv img.opr-cv-agentes` (0,2,1),
   que esta por encima de cualquier `.opr img` venga de donde venga. */
.opr-cv .opr-cv-cabeza{
  margin-bottom:0 !important;
  display:grid !important;
  /* La segunda columna es una FRACCION, no `auto`: asi los agentes tienen sitio
     de sobra y se centran dentro de ella en vez de pegarse al borde derecho de
     la caja. Y el texto se centra en vertical, que antes iba abajo y dejaba mas
     aire arriba que abajo. Las dos cosas, pedidas por Sergio el 13 de
     septiembre de 2026. */
  grid-template-columns:minmax(0,1fr) minmax(0,0.36fr) !important;
  gap:clamp(12px,3vw,32px) !important;
  align-items:center !important;
}
.opr-cv .opr-cv-cabeza-txt{min-width:0 !important; align-self:center !important}
.opr-cv img.opr-cv-agentes{
  width:clamp(88px,13.5vw,172px) !important; height:auto !important;
  justify-self:center !important; align-self:center !important;
}

/* La banda venia con demasiado aire: el titular quedaba hundido. Menos relleno
   arriba y abajo, y los agentes mas pequenos, y el bloque sube solo.
   Pedido por Sergio el 13 de septiembre de 2026. */
.opr-cv .opr-seccion.es-primera{
  padding-top:clamp(20px,2.6vh,32px) !important;
  padding-bottom:clamp(24px,3vh,38px) !important;
}

/* EN EL MOVIL LOS AGENTES NO SALEN. Decision de Sergio: en 390 px la figura
   quedaba en 96 px, que no es un dibujo, es una pegatina, y le robaba la mitad
   del ancho al titular.
   OJO: hace falta (0,2,1) --`.opr-cv img.clase`--. Con (0,1,1) no basta: el
   nucleo de `bravozulu-bloques` se carga despues y fija `.opr img{display:block}`
   con la misma especificidad, asi que ganaria el. Comprobado en el sitio. */
@media (max-width:640px){
  .opr-cv img.opr-cv-agentes{display:none !important}
  .opr-cv .opr-cv-cabeza{grid-template-columns:1fr !important}
}

/* La lista arranca debajo de la banda oscura, asi que no le hace falta el aire
   entero de una seccion de en medio. */
.opr-cv .opr-seccion.es-lista{padding-top:clamp(32px,4.4vw,58px) !important}


/* --- el filtro por cuerpo --- */
.opr-cv .opr-cv-filtro{display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:center !important}
.opr-cv .opr-cv-filtro .opr-seg{flex-wrap:wrap !important}
.opr-cv .opr-cv-filtro .opr-seg button span{
  margin-left:7px !important; font-variant-numeric:tabular-nums !important; color:var(--tenue) !important; font-weight:600 !important;
}
.opr-cv .opr-cv-filtro .opr-seg button[aria-pressed="true"] span{color:var(--suave) !important}


/* --- la rejilla --- */
.opr-cv .opr-cv-lista{
  margin-top:clamp(22px,2.6vw,32px) !important;
  display:grid !important; gap:clamp(14px,1.8vw,20px) !important;
}


/* --- una convocatoria ---
   LA TARJETA ES BLANCA, ASI QUE LA SECCION NO PUEDE SERLO. Hasta hoy el cajon
   de la convocatoria era `--superficie` sobre una seccion `es-blanca`, que es
   el mismo blanco: solo lo separaba un filete de 1 px y se fundia con el fondo.
   Lo dijo Sergio el 13 de septiembre. Arreglado por donde tocaba: la seccion de
   la lista se queda con el papel de la pagina --`--fondo`, que es el gris muy
   claro de la paleta-- y la tarjeta blanca destaca encima, con el borde un tono
   mas marcado y la sombra grande en vez de la corta. Ni un color nuevo. */
.opr-cv .opr-cv-tarjeta{
  background:var(--superficie) !important; border:1px solid var(--borde2) !important;
  border-radius:var(--radio) !important; box-shadow:var(--sombra) !important;
  display:grid !important; gap:0 !important;
  /* El relleno lo llevan las dos mitades, no la tarjeta: la banda oscura tiene
     que llegar a los bordes. Y `overflow:hidden` para que la recorte el radio. */
  padding:0 !important; overflow:hidden !important;
}

/* --- la mitad de arriba, en oscuro ---
   Lo pidio Sergio el 13 de septiembre: el titulo de la convocatoria con fondo
   oscuro, para que la tarjeta se lea de un vistazo. Es el mismo negro de la
   banda de la portada, asi que la pagina sigue teniendo dos tonos y no tres. */
.opr-cv .opr-cv-tcab{
  background:var(--p950) !important; color:var(--p100) !important;
  padding:clamp(17px,2.2vw,24px) clamp(20px,2.6vw,30px) !important;
}
.opr-cv .opr-cv-tcab .opr-cv-organismo{color:var(--p400) !important}
.opr-cv .opr-cv-tcab .opr-cv-titulo a{color:#fff !important}
.opr-cv .opr-cv-tcab .opr-cv-estado{border-left-color:var(--p200) !important}
.opr-cv .opr-cv-tcab .opr-cv-estado span{color:var(--p400) !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-apagado{border-left-color:var(--p700) !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-apagado b{color:var(--p300) !important}
/* --- EL ESTADO EN COLOR, SOLO EN LA TARJETA · v1.0.39 ---
   Decisión de Sergio, 29 de septiembre: que el estado se lea de un vistazo.
   Verde abierta y en proceso (está viva), amarillo próximamente, rojo
   cerrada: el semáforo de siempre, que se entiende sin leyenda. En la v1.0.39
   «en proceso» iba en naranja; Sergio lo quiso en verde el mismo día (v1.0.40).
   Excepción declarada en el documento 01. Va sobre la cabecera oscura, así que
   son tonos claros (todos por encima de 5:1 sobre el 950). Se colorean el
   filete y la palabra; la línea pequeña de debajo sigue en gris. Misma
   especificidad que el `es-apagado` de arriba (0,4,1) y va después: gana. */
.opr-cv .opr-cv-tcab .opr-cv-estado.es-abierta{border-left-color:#3FB68A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-abierta b{color:#3FB68A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-proximamente{border-left-color:#EBC43A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-proximamente b{color:#EBC43A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-proceso{border-left-color:#3FB68A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-proceso b{color:#3FB68A !important}
/* v1.0.44 · «Vigente» (bolsa en uso), también en verde. */
.opr-cv .opr-cv-tcab .opr-cv-estado.es-vigente{border-left-color:#3FB68A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-vigente b{color:#3FB68A !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-cerrada{border-left-color:#F06464 !important}
.opr-cv .opr-cv-tcab .opr-cv-estado.es-cerrada b{color:#F06464 !important}
.opr-cv .opr-cv-tcuerpo{
  padding:clamp(20px,2.6vw,30px) !important;
  display:grid !important; gap:18px !important;
}
/* Una cerrada tambien lleva cabecera oscura, pero un tono mas suave: sigue
   siendo una tarjeta apagada. */
.opr-cv .opr-cv-tarjeta.es-cerrada .opr-cv-tcab{background:var(--p800) !important}
/* Una cerrada se queda un escalon por debajo del blanco y sin sombra: se ve que
   es una tarjeta, pero no reclama atencion. */
.opr-cv .opr-cv-tarjeta.es-cerrada{
  background:var(--p50) !important; border-color:var(--borde) !important; box-shadow:none !important;
}

/* EL PAPEL DE LA SECCION DE LA LISTA. `--fondo` (--p50) se quedaba corto: es un
   3 % de diferencia contra el blanco de la tarjeta y seguia sin despegarse.
   Un escalon mas, a `--p100`, y el cajon de la convocatoria se lee solo.
   Segunda pasada del 13 de septiembre, a peticion de Sergio. */
.opr-cv .opr-seccion.es-lista{background:var(--p100) !important}
.opr-cv .opr-cv-tarjeta.es-cerrada .opr-cv-tcab .opr-cv-titulo a{color:var(--p200) !important}
.opr-cv .opr-cv-alto{
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:18px !important; align-items:start !important;
}
.opr-cv .opr-cv-organismo{
  display:block !important; margin-bottom:7px !important;
  font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
}
.opr-cv .opr-cv-titulo{
  font-size:clamp(1.15rem,2vw,1.4rem) !important; font-weight:800 !important;
  line-height:1.22 !important; letter-spacing:-.022em !important; text-wrap:balance !important;
}
.opr-cv .opr-cv-titulo a{color:var(--tinta) !important}
.opr-cv .opr-cv-titulo a:hover{text-decoration:underline !important; text-underline-offset:3px !important}


/* El estado: filete y palabra. Ni píldora ni punto de color. */
.opr-cv .opr-cv-estado{
  padding-left:13px !important; border-left:2.5px solid var(--tinta) !important;
  display:flex !important; flex-direction:column !important; gap:1px !important; white-space:nowrap !important;
}
.opr-cv .opr-cv-estado b{font-size:.9375rem !important; font-weight:700 !important; letter-spacing:-.012em !important}
.opr-cv .opr-cv-estado span{font-size:.75rem !important; color:var(--tenue) !important}
.opr-cv .opr-cv-estado.es-apagado{border-left-color:var(--borde2) !important}
.opr-cv .opr-cv-estado.es-apagado b{color:var(--suave) !important}


/* --- los cuatro datos --- */
/* Cinco datos desde la v1.0.14 —plazas, inscripción, BEC, físicas y
   entrevista—, y con cuatro columnas fijas el quinto se quedaba solo en una
   fila. `auto-fit` pone las que quepan: cinco en la ficha ancha, dos en un
   móvil y las que salgan en la tarjeta del listado, que es más estrecha. */
.opr-cv .opr-cv-datos{
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) !important; gap:14px !important;
  padding:16px 0 !important; border-top:1px solid var(--borde) !important; border-bottom:1px solid var(--borde) !important;
}
.opr-cv .opr-cv-dato{min-width:0 !important}
.opr-cv .opr-cv-dato dt{
  font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important; margin-bottom:3px !important;
}
.opr-cv .opr-cv-dato dd{
  font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.018em !important;
  font-variant-numeric:tabular-nums !important; overflow-wrap:anywhere !important;
}
.opr-cv .opr-cv-dato small{display:block !important; margin-top:2px !important; font-size:.75rem !important; font-weight:400 !important; color:var(--tenue) !important}


/* --- la marca de «estimado» ---
   Estaba solo en la hoja de la ficha, y la tarjeta del listado pinta los MISMOS
   datos con el mismo marcado: sin esta regla, «estimado» salía como texto en
   negrita pegado a la cifra —«593estimado»—, que se lee como si formara parte
   del número. Se vio el 4 de septiembre, con la 36.ª ya publicada. La regla es
   la misma que en `cv-ficha/estilo.css`: si se toca una, se tocan las dos. */
.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 aviso de plazo, el único ámbar de la página --- */
.opr-cv .opr-cv-plazo{
  display:flex !important; gap:9px !important; align-items:flex-start !important;
  padding:11px 14px !important; border-radius:var(--radio-s) !important;
  background:var(--av100) !important; color:var(--av900) !important;
  font-size:.875rem !important; line-height:1.45 !important;
}
.opr-cv .opr-cv-plazo svg{width:16px !important; height:16px !important; flex:none !important; margin-top:2px !important; color:var(--av600) !important}
.opr-cv .opr-cv-resumen{font-size:.9375rem !important; color:var(--suave) !important; line-height:1.6 !important; max-width:72ch !important}
.opr-cv .opr-cv-pie{display:flex !important; flex-wrap:wrap !important; gap:10px !important; align-items:center !important}
.opr-cv .opr-cv-pie .opr-btn{padding:11px 19px !important; font-size:.9375rem !important; min-height:40px !important}

/* 40 px de alto: por debajo de 38 un dedo falla, y el arnés lo mide. */
.opr-cv .opr-cv-enlace{
  display:inline-flex !important; align-items:center !important; min-height:40px !important;
  font-size:.875rem !important; font-weight:600 !important; color:var(--suave) !important;
  padding:9px 15px !important; border-radius:999px !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-cv .opr-cv-enlace:hover{color:var(--tinta) !important; box-shadow:inset 0 0 0 1px var(--borde2) !important; background:var(--p50) !important}


/* --- sin resultados --- */
.opr-cv .opr-cv-vacio{
  padding:clamp(28px,4vw,48px) !important; text-align:center !important;
  border:1px dashed var(--borde2) !important; border-radius:var(--radio) !important; color:var(--suave) !important;
}
.opr-cv .opr-cv-vacio b{display:block !important; margin-bottom:6px !important; color:var(--tinta) !important; font-size:1.0625rem !important}


/* --- pie de la sección: los documentos van a Telegram --- */
/* Con la seccion en `--p100`, el cajon de Telegram ya no puede ser `--p100`:
   seria el fondo. Pasa a blanco con filete, como la tarjeta pero sin sombra. */
.opr-cv .opr-cv-telegram{
  margin-top:clamp(26px,3vw,38px) !important; padding:clamp(18px,2.4vw,26px) !important;
  border-radius:var(--radio) !important;
  background:var(--superficie) !important; border:1px solid var(--borde) !important;
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:18px !important; align-items:center !important;
}
.opr-cv .opr-cv-tg-txt{display:flex !important; gap:14px !important; align-items:flex-start !important; min-width:0 !important}
.opr-cv .opr-cv-telegram p{font-size:.9375rem !important; color:var(--suave) !important; max-width:64ch !important}
/* El unico color de marca de la pagina, y esta ahi porque significa: dice a
   donde lleva el boton antes de leer nada. */
.opr-cv .opr-cv-tg-i{
  flex:none !important; width:38px !important; height:38px !important;
  border-radius:999px !important; background:#2AABEE !important;
  display:grid !important; place-items:center !important;
}
.opr-cv .opr-cv-tg-i svg{width:21px !important; height:21px !important}

/* El mismo sello, mas pequeno, dentro del enlace del pie de la ficha. */
.opr-cv .opr-cv-enlace.es-telegram{display:inline-flex !important; align-items:center !important; gap:9px !important}
.opr-cv .opr-cv-enlace.es-telegram .opr-cv-tg-i{width:24px !important; height:24px !important}

/* El enlace con icono —el de las bases— se monta igual que el de Telegram: las
   dos pastillas van una al lado de la otra y con la misma estructura se leen
   como un par. Sin esto, una llevaba dibujo y la otra no. */
.opr-cv .opr-cv-enlace{display:inline-flex !important; align-items:center !important; gap:8px !important; justify-content:center !important}
.opr-cv .opr-cv-enlace > svg{width:18px !important; height:18px !important; flex:0 0 18px !important; color:var(--suave) !important}
.opr-cv .opr-cv-enlace:hover > svg{color:var(--tinta) !important}
.opr-cv .opr-cv-enlace.es-telegram .opr-cv-tg-i svg{width:14px !important; height:14px !important}
.opr-cv .opr-cv-telegram b{color:var(--tinta) !important}


/* --- anchos --- */

@media (max-width:860px){
.opr-cv .opr-cv-datos{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.opr-cv .opr-cv-telegram{grid-template-columns:1fr !important}
}
@media (max-width:560px){
.opr-cv .opr-cv-alto{grid-template-columns:1fr !important; gap:14px !important}
.opr-cv .opr-cv-estado{align-self:start !important}
.opr-cv .opr-cv-pie .opr-btn{width:100% !important}
/* En el móvil el botón grande ocupa todo el ancho y «Bases» cae debajo. A la
   izquierda se veía descolgado del botón de arriba; centrado, los dos forman
   una columna. Solo aquí: en pantalla ancha van los dos en la misma línea y a
   la izquierda, que es donde empieza a leerse la tarjeta. */
.opr-cv .opr-cv-pie{justify-content:center !important}
}