/* =========================================================================== * PIEZA: la caja de descarga de las fichas de Modelos, y el puente. * * Tipografia: la del sitio, `Segoe UI, Helvetica Neue, Helvetica, sans-serif`, * heredada. Aqui no se declara ninguna familia: la web viva no usa fuentes web * y esta no va a ser la primera pagina que lo haga. * ======================================================================== */ /* --- La caja ------------------------------------------------------------- */ .dl-desc { margin: 0 0 var(--dl-esp-lg); background: var(--dl-superficie); border: 1px solid #C4CDD6; /* El bloque de descarga va a ancho completo del contenedor, como las tablas y los huecos de anuncio. Es lo que la gente viene a buscar. */ text-align: left; } .dl-desc__principal { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 22px; } .dl-desc__txt { min-width: 0; } .dl-desc__nombre { display: block; font-size: 19px; font-weight: 600; line-height: 1.3; color: #22282E; } .dl-desc__meta { /* Es un y no un

a proposito: Ad Inserter cuenta parrafos y corre DESPUES de esta pieza. Ver la cabecera de inc/piezas/descargas.php. */ display: block; margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--dl-tinta-suave); } .dl-desc__meta b { color: var(--dl-tinta); font-weight: 600; } .dl-desc__acciones { display: flex; flex-direction: column; gap: 9px; } /* El boton de descarga. Es LA accion de una ficha de /modelos/, y /modelos/ * son 31 articulos que dan un tercio del trafico del sitio, asi que aqui el * azul de marca se gasta a gusto: es exactamente el sitio para el que * `tokens.css` lo reserva. * * `box-sizing: border-box` NO ES DECORATIVO, ARREGLA UN DESBORDE (2026-09-08) * * Mas abajo, en el bloque de movil, este boton pasa a `width: 100%`. Con el * `content-box` que heredaba, ese 100% era solo la CAJA DE CONTENIDO y encima * se le sumaban los 44px de relleno y los 2 de borde: en un movil de 390px el * boton medía 367 dentro de un contenedor de 355 y se salia por la derecha, * dejando ademas TODA la pagina con scroll horizontal (`scrollWidth` 402 * contra 390 de viewport). Medido con CDP emulando movil de verdad: ojo, que * `--window-size=390` no vale para esto, Chrome en Windows no baja de ~500px * y el fallo no se reproduce. */ .dl-desc__boton { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 1px solid var(--dl-azul-700); border-radius: var(--dl-radio); background: var(--dl-azul-700); color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; /* El filo inferior mas oscuro le da cuerpo de tecla sin separarlo del papel. Es una sombra INTERIOR a proposito: una sombra proyectada en reposo lo dejaria flotando, y este sitio no flota nada. */ box-shadow: inset 0 -2px 0 rgba(9, 40, 68, 0.45); transition: background-color var(--dl-dur) var(--dl-ease), box-shadow var(--dl-dur) var(--dl-ease), transform var(--dl-dur) var(--dl-ease); } /* La flecha baja al pasar por encima. Es el unico movimiento de la pieza y dice literalmente lo que hace el boton. */ .dl-desc__boton .dl-desc__icono { transition: transform var(--dl-dur) var(--dl-ease); } /* EL TEXTO SE VOLVIA AZUL SOBRE AZUL EN CUANTO SE PULSABA UNA VEZ (2026-09-08) * * GeneratePress imprime en el `` de cada pagina, desde los ajustes del * Personalizador, un `a:visited{color:#1e72bd;}`. Ese selector pesa (0,1,1) y * `.dl-desc__boton` pesa (0,1,0), asi que GANA EL SUYO: al volver a la ficha * despues de haber descargado una vez, el rotulo «Descargar» pasaba de blanco * a `#1e72bd`, o sea azul sobre el `#195284` del propio boton. Practicamente * ilegible, y solo lo ve quien ya ha descargado: en un navegador limpio el * boton se ve perfecto, que es justo lo que despista al comprobarlo. * * Se arregla declarando el estado visitado a proposito, con (0,2,0). */ .dl-desc__boton:visited { color: #fff; } .dl-desc__boton:hover, .dl-desc__boton:focus { background: #14456F; border-color: #14456F; color: #fff; transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(9, 40, 68, 0.5), 0 4px 12px -4px rgba(14, 58, 97, 0.55); } .dl-desc__boton:hover .dl-desc__icono, .dl-desc__boton:focus .dl-desc__icono { transform: translateY(2px); } /* Al pulsar se hunde. En movil no hay `hover`, asi que este es el unico acuse de recibo que recibe quien toca. */ .dl-desc__boton:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(9, 40, 68, 0.45); } /* El anillo de foco NUNCA se anima (regla de `tokens.css`) y va por fuera del boton, que por dentro es azul sobre azul y no se veria. */ .dl-desc__boton:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 3px; transition: none; } /* --- El aro de carga ----------------------------------------------------- * Al pulsar, el boton se queda esperando a que cargue el puente. Sin señal, * en una conexion lenta parece que no ha pasado nada y se vuelve a pulsar. * * El aro SUSTITUYE a la flecha en vez de ponerse al lado: asi el boton no * cambia de ancho y no mueve nada de la pagina. La clase la pone * `js/piezas/descargas.js`; sin JavaScript el boton sigue funcionando igual, * solo que sin aro. * * `pointer-events: none` evita el segundo clic, que en el puente significa * empezar la cuenta otra vez. */ .dl-desc__boton.esta-cargando { pointer-events: none; } .dl-desc__boton.esta-cargando .dl-desc__icono { display: none; } .dl-desc__boton.esta-cargando::before { content: ""; flex: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: dl-desc-gira 0.7s linear infinite; } @keyframes dl-desc-gira { to { transform: rotate(360deg); } } /* Sin movimiento: el aro se queda quieto y el boton se atenua. Sigue habiendo acuse de recibo, que es lo que importa, pero sin nada girando. */ @media (prefers-reduced-motion: reduce) { .dl-desc__boton.esta-cargando::before { animation: none; } .dl-desc__boton.esta-cargando { opacity: 0.75; } } /* --- Glifo de formato ---------------------------------------------------- */ .dl-desc__glifo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 32px; border: 1px solid #C3CBD3; background: var(--dl-superficie); color: #55606B; font-size: 7px; font-weight: 600; line-height: 1; letter-spacing: .02em; } .dl-desc__glifo--grande { width: 56px; height: 72px; font-size: 13px; } /* --- Filas de documento -------------------------------------------------- */ .dl-desc__otros { border-top: 1px solid var(--dl-linea); } .dl-desc__rotulo { /* por lo mismo que .dl-desc__meta. */ display: block; margin: 0; padding: 13px 22px 2px; font-size: 14px; color: var(--dl-tinta-suave); } .dl-desc__fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 22px; border-top: 1px solid #EDF0F3; text-decoration: none; color: inherit; } /* Misma historia que en el boton: `a:visited` de GeneratePress pesa mas que este `color: inherit`, y la fila de «otras versiones» se teñia entera de azul en cuanto se descargaba una vez. */ .dl-desc__fila:visited { color: inherit; } .dl-desc__otros .dl-desc__fila:first-of-type { border-top: 0; } .dl-desc__fila:hover { background: #F6F8FA; } .dl-desc__fila-txt { min-width: 0; } .dl-desc__fila-txt b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: #22282E; } .dl-desc__fila-txt span { font-size: 13px; color: var(--dl-tinta-suave); } /* La accion de las «otras versiones». Es secundaria a proposito: si compitiera con el boton principal, la pagina dejaria de tener una accion clara. Recibe el mismo gesto de la flecha, pero sin fondo ni relieve. */ .dl-desc__accion { display: inline-flex; align-items: center; gap: 6px; color: var(--dl-azul-500); font-size: 14px; font-weight: 600; white-space: nowrap; } .dl-desc__accion .dl-desc__icono { transition: transform var(--dl-dur) var(--dl-ease); } .dl-desc__fila:hover .dl-desc__accion { color: var(--dl-azul-700); text-decoration: underline; text-underline-offset: 3px; } .dl-desc__fila:hover .dl-desc__accion .dl-desc__icono { transform: translateY(2px); } .dl-desc__fila:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: -2px; } .dl-desc__icono { flex: none; } /* Sin movimiento para quien lo ha pedido. El cambio de color se queda: es informacion, no adorno. */ @media (prefers-reduced-motion: reduce) { .dl-desc__boton, .dl-desc__boton .dl-desc__icono, .dl-desc__accion .dl-desc__icono { transition: none; } .dl-desc__boton:hover, .dl-desc__boton:focus, .dl-desc__boton:active { transform: none; } .dl-desc__boton:hover .dl-desc__icono, .dl-desc__boton:focus .dl-desc__icono, .dl-desc__fila:hover .dl-desc__accion .dl-desc__icono { transform: none; } } /* --- El justificado, fuera ---------------------------------------------- * La regla de verdad es `.entry-content { text-align: justify !important }` y * viene del «CSS adicional» del personalizador. Con `!important` de por medio, * la especificidad sola NO gana: hace falta `!important` tambien, y entonces * decide la especificidad, que aqui es (0,2,1) contra su (0,1,0). * * Es la unica regla de esta pieza con `!important`, y esta es la razon. No es * un capricho: el justificado abre calles blancas en una columna de 1000px. * Cuando se quite esa linea del personalizador, este bloque sobra. */ article.category-modelos .entry-content { text-align: left !important; } /* --- El recuadro gris de alrededor, fuera -------------------------------- * El contenedor `.modelos-descargas` viene con `background:#e7e7e7` y 40px de * relleno lateral, escrito a mano con GenerateBlocks en las 31 entradas. Deja * la caja nueva dentro de otra caja, y encima gris. * * Se neutraliza por CSS y NO se edita el contenido de ninguna entrada: si se * apaga esta pieza, vuelve tal cual estaba. Los bloques de anuncio que viven * dentro de ese contenedor no se mueven de sitio: solo cambian el fondo y el * relleno, no el orden del DOM. */ article.category-modelos .gb-container-bloque-modelos-descargas { background-color: transparent; } article.category-modelos .gb-container-bloque-modelos-descargas > .gb-inside-container { padding-left: 0; padding-right: 0; } /* --- Movil --------------------------------------------------------------- * A partir de aqui el boton pasa debajo y a ancho completo: en 390px, un * boton de 190px alineado a la derecha se lee como un adorno, no como la * accion principal de la pagina. */ @media (max-width: 768px) { .dl-desc__principal { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; } .dl-desc__glifo--grande { width: 48px; height: 62px; font-size: 12px; } .dl-desc__acciones { grid-column: 1 / -1; margin-top: 4px; } .dl-desc__boton { width: 100%; } .dl-desc__rotulo, .dl-desc__fila { padding-left: 16px; padding-right: 16px; } .dl-desc__fila { grid-template-columns: 26px minmax(0, 1fr); } .dl-desc__accion { grid-column: 2; margin-top: 4px; } } /* =========================================================================== * EL PUENTE * ======================================================================== */ .dl-puente { padding: var(--dl-esp-xl) 0 var(--dl-esp-2xl); text-align: center; } .dl-puente__titulo { margin: 0; font-size: 33px; font-weight: 600; line-height: 1.22; color: #2B3238; } .dl-puente__titulo::after { content: ""; display: block; width: 54px; height: var(--dl-filete); margin: 13px auto 0; background: var(--dl-azul-700); } .dl-puente__fichero { display: inline-flex; align-items: center; gap: 13px; margin: var(--dl-esp-lg) 0 var(--dl-esp-md); padding: 13px 20px; background: var(--dl-superficie); border: 1px solid #C4CDD6; text-align: left; } .dl-puente__fichero-txt b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: #22282E; /* Un nombre de fichero largo no puede empujar la caja fuera de la pantalla. */ overflow-wrap: anywhere; } .dl-puente__fichero-txt span { font-size: 13px; color: var(--dl-tinta-suave); } .dl-puente__progreso { width: 340px; max-width: 100%; height: 5px; margin: 0 auto var(--dl-esp-sm); background: var(--dl-linea); overflow: hidden; } .dl-puente__progreso i { display: block; width: 0; height: 100%; background: var(--dl-azul-700); animation: dl-puente-avanza 2s linear forwards; } @keyframes dl-puente-avanza { from { width: 0; } to { width: 100%; } } /* Es una barra de espera, no informacion: quien pide menos movimiento la ve llena y quieta, que dice lo mismo sin parpadear. */ @media (prefers-reduced-motion: reduce) { .dl-puente__progreso i { width: 100%; animation: none; } } .dl-puente__pista { margin: 0; font-size: 15px; color: var(--dl-tinta-suave); } .dl-puente__volver { margin: var(--dl-esp-sm) 0 0; font-size: 14px; } /* Ya no centra nada: dentro van los dos `.dl-anuncio` de la pieza `anuncios` * (el de escritorio y el de movil, uno escondido por media query) y cada uno * se centra y reserva su alto por su cuenta. Con `display: flex` los dos * pasaban a ser elementos flexibles y el `position: sticky` del de movil se * quedaba sin recorrido. */ .dl-puente__anuncio { margin: var(--dl-esp-xl) 0 0; } @media (max-width: 768px) { .dl-puente__titulo { font-size: 27px; } }