/* ===================================================================== BravoZulu · 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; } /* LAS TARJETAS DE LA FICHA, MAS MARCADAS. Sobre el gris de la seccion no basta con el filete mas claro y la sombra corta: borde `--borde2` y sombra grande, igual que la tarjeta del listado. Peticion de Sergio del 13 de septiembre. */ .opr-cv.opr-cv-ficha .opr-cv-datos{ border:1px solid var(--borde2) !important; border-radius:var(--radio) !important; background:var(--superficie) !important; box-shadow:var(--sombra) !important; padding:clamp(18px,2.4vw,26px) !important; margin-bottom:clamp(20px,2.6vw,30px) !important; } /* --- la banda oscura del titulo --- El volver, el organismo, el titular y el sello viven ahora en una seccion `es-noche`. El nucleo ya pone en claro el rotulo y la entradilla, pero estas piezas son de la ficha y llevan su propio color fijado, asi que hay que decirselo aqui. */ .opr-cv.opr-cv-ficha .es-noche .opr-cv-volver{color:var(--p400) !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-volver:hover{color:#fff !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-organismo{color:var(--p400) !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado{border-left-color:var(--p200) !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado span{color:var(--p400) !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-apagado{border-left-color:var(--p700) !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-apagado b{color:var(--p300) !important} /* --- EL ESTADO EN COLOR, TAMBIÉN EN LA CABECERA DE LA FICHA · v1.0.41 --- Los mismos tonos que la tarjeta del listado (v1.0.40), para que el estado se lea igual en los dos sitios: verde abierta y en proceso, amarillo próximamente, rojo cerrada. Filete y palabra; la línea de debajo, en gris. Misma especificidad que el `es-apagado` de arriba (0,5,1) y va después: gana. Excepción declarada en el documento 01. */ .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-abierta, .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-proceso, .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-vigente{border-left-color:#3FB68A !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-abierta b, .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-proceso b, .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-vigente b{color:#3FB68A !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-proximamente{border-left-color:#EBC43A !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-proximamente b{color:#EBC43A !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-cerrada{border-left-color:#F06464 !important} .opr-cv.opr-cv-ficha .es-noche .opr-cv-estado.es-cerrada b{color:#F06464 !important} /* El titular ya no necesita margen abajo: lo separa el borde de la seccion. */ .opr-cv.opr-cv-ficha .es-noche .opr-cv-alto{margin-bottom:0 !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 --- Desde la v1.0.42 se usan otra vez, pero solo para lo que va desde el primer

del contenido (las preguntas de Google, `.opr-cv-preguntas`). El resto del contenido sigue sin pintarse: repetía al pie lo que ya está arriba. Estas reglas se quedan porque el texto sigue escrito en WordPress y basta con devolver una línea en `_plugin.php` para volver a sacarlo; ahí está dicho cómo. */ .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} /* --- las preguntas de Google, en un cajón blanco (v1.0.42) --- Lo que va desde el primer

del contenido de la entrada. El texto de antes del

sigue sin salir: es el resumen de la tarjeta del listado. */ .opr-cv .opr-cv-preguntas{ margin:clamp(26px,3.2vw,38px) 0 0 !important; padding:clamp(20px,2.6vw,30px) !important; border:1px solid var(--borde2) !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; box-shadow:var(--sombra-s) !important; } .opr-cv .opr-cv-preguntas .opr-cv-texto > h2:first-child{margin-top:0 !important} .opr-cv .opr-cv-preguntas .opr-cv-texto h3{margin-top:1.3em !important} /* La fila de los dos enlaces del pie, centrada. Decisión de Sergio, 26 de septiembre: a la izquierda, con la caja del DNI ancha encima, los dos botones se quedaban colgando en una esquina. Centrados forman el remate de la ficha. Y al apilarse en el móvil siguen centrados, que es lo que ya se hizo en la tarjeta del listado. */ .opr-cv.opr-cv-ficha .opr-cv-pie{ margin-top:clamp(24px,3vw,34px) !important; justify-content:center !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; } /* --- la caja de reseñas, al final de la ficha --- Solo la ve quien sigue pasando las pruebas, así que no hay que gritar: es una caja tranquila, del gris de la página, con el botón a la derecha cuando hay sitio y debajo cuando no. Nada de color: aquí no significaría nada. */ .opr-cv .opr-cv-resena{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:18px !important; flex-wrap:wrap !important; margin-top:clamp(22px,2.6vw,30px) !important; padding:18px 20px !important; border:1px solid var(--borde) !important; border-radius:var(--radio-s) !important; background:var(--p50) !important; } .opr-cv .opr-cv-resena > div{min-width:min(100%,260px) !important; flex:1 1 300px !important} .opr-cv .opr-cv-resena b{display:block !important; font-size:1rem !important; font-weight:700 !important; color:var(--tinta) !important; margin-bottom:3px !important} .opr-cv .opr-cv-resena p{margin:0 !important; font-size:.9375rem !important; color:var(--suave) !important; line-height:1.5 !important; max-width:62ch !important} .opr-cv .opr-cv-resena .opr-btn{flex:0 0 auto !important} /* --- el botón de inscribirse, dentro de su cajón --- */ .opr-cv .opr-cv-inscribirse{ display:inline-flex !important; align-items:center !important; margin:0 0 14px !important; min-height:40px !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 `
` 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(--borde2) !important; border-radius:var(--radio-s) !important; background:var(--superficie) !important; margin-bottom:10px !important; overflow:hidden !important; box-shadow:var(--sombra-s) !important; } /* LA CABECERA NO SE PARTE EN DOS FILAS. Iba con `flex-wrap:wrap`, y en el móvil el último cajón —«Curso de formación y prácticas», el nombre más largo de los diez— empujaba la flecha a un renglón propio: quedaba debajo y a la izquierda, donde no la busca nadie, mientras el resto de cajones la tienen arriba a la derecha. Lo vio Sergio en el teléfono. Con `nowrap`, lo que se parte es el TÍTULO, que es lo que tiene que partirse: el estado y la flecha se quedan en su sitio y el nombre baja a dos líneas. Hace falta el `min-width:0` de más abajo: un elemento flex no se encoge por debajo del ancho de su contenido si no se le dice. En pantalla ancha no cambia nada, porque ahí nunca llegaba a envolver. */ .opr-cv .opr-cv-cajon summary{ display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:nowrap !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; min-width:0 !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 `
` 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} /* Y EN EL MÓVIL SE LE HACE SITIO AL TÍTULO. Con `nowrap` la flecha ya se queda arriba a la derecha, pero al nombre más largo de la convocatoria —«Curso de formación y prácticas»— le faltaba UN PÍXEL para caber en dos líneas: a 390 px le quedaban 171 y «Curso de formación» mide 172. Se recorta el aire —el hueco entre elementos, el relleno de los lados y el cuerpo del estado— y pasa a tener 190, que ya da margen. No se toca el cuerpo del título: es el mismo en los diez cajones y bajarlo aquí rompería la jerarquía. */ @media (max-width:520px){ .opr-cv .opr-cv-cajon summary{gap:8px !important; padding:15px 16px !important} .opr-cv .opr-cv-cajon-e{font-size:.75rem !important} } /* Y un escalón más para los teléfonos estrechos —360 px y por debajo—, donde ese mismo nombre volvía a irse a tres líneas. */ @media (max-width:400px){ .opr-cv .opr-cv-cajon summary{gap:6px !important; padding:14px !important} .opr-cv .opr-cv-cajon-e{font-size:.7188rem !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. AZUL desde la v1.0.38, por decisión de Sergio. Era verde, y el verde en BravoZulu quiere decir «acierto»: junto a un «Sin plaza» o un «No apto» se leía como buena noticia. El punto no juzga la nota, solo dice que dentro hay algo tuyo, así que va en un color que no es ninguno de los tres estados. Es la quinta excepción declarada del sistema: azul = «esto es tuyo», nada más. Tono 214°, cerca de la Pizarra (212°); 5:1 sobre blanco. 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:#2B6CC4 !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; } /* --- el botón del documento --- Con el icono delante se ve de un vistazo qué hay al otro lado: un PDF que abrimos nosotros, o el canal de Telegram. Va como pastilla y no como enlace subrayado porque se pulsa, y lo que se pulsa tiene que tener un objetivo decente: 38 px de alto, que es la medida del documento 01. */ .opr-cv .opr-cv-hito a.opr-cv-doc{ display:inline-flex !important; align-items:center !important; gap:7px !important; margin-top:8px !important; padding:7px 13px 7px 10px !important; min-height:38px !important; box-sizing:border-box !important; border:1px solid var(--borde2) !important; border-radius:999px !important; background:var(--superficie) !important; color:var(--tinta) !important; text-decoration:none !important; font-size:.8125rem !important; font-weight:600 !important; transition:border-color .12s, background .12s !important; } .opr-cv .opr-cv-hito a.opr-cv-doc:hover, .opr-cv .opr-cv-hito a.opr-cv-doc:focus-visible{ border-color:var(--tinta) !important; background:var(--p50) !important; } .opr-cv .opr-cv-hito a.opr-cv-doc svg{ width:17px !important; height:17px !important; flex:0 0 17px !important; color:var(--suave) !important; } .opr-cv .opr-cv-hito a.opr-cv-doc:hover svg{color:var(--tinta) !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:0 0 14px !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} /* --- el desglose de la nota --- Cuatro ejercicios y la puntuación convertida no caben en una frase: con el mismo « · » que separa la nota de la calificación no se sabe dónde acaba un dato y empieza el siguiente. En rejilla se lee de un vistazo, que es como se lee una tabla de notas. Las columnas que quepan, y una sola en el móvil. */ .opr-cv .opr-cv-desglose{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important; gap:8px 18px !important; margin:11px 0 0 !important; padding:11px 0 0 !important; border-top:1px solid var(--borde) !important; } .opr-cv .opr-cv-desglose div{min-width:0 !important} .opr-cv .opr-cv-desglose dt{ font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important; margin:0 0 1px !important; } .opr-cv .opr-cv-desglose dd{ margin:0 !important; font-size:.9375rem !important; font-weight:600 !important; color:var(--tinta) !important; font-variant-numeric:tabular-nums !important; overflow-wrap:anywhere !important; } /* Dentro de un cajón en verde o en rojo, la raya de arriba se ve con el color del cajón: un gris ahí corta el bloque con un color que no pinta nada. */ .opr-cv .opr-cv-mia.es-apto .opr-cv-desglose{border-top-color:var(--ok500) !important} .opr-cv .opr-cv-mia.es-noapto .opr-cv-desglose{border-top-color:var(--no500) !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}