/* PIEZA: bibliografia («Fuentes del articulo») * --------------------------------------------------------------------------- * Redisena `.bibliografia-box`. Hasta el 2026-09-08 su aspecto lo ponia el * CSS adicional del Personalizador (entrada `custom_css` #2214): fondo gris * plano `#e4e4e4`, sin borde, sin radio de esquina. * * OJO CON LA ESPECIFICIDAD, igual que explica la cabecera de `articulo.css`: * el CSS adicional del Personalizador se imprime en el `` DESPUES de * todas las hojas encoladas (via `wp_custom_css_cb`, colgado de `wp_head` a * prioridad 101; los estilos encolados salen a la 8). O sea que encolar esta * pieza tarde (prioridad 999 en `wp_enqueue_scripts`, ver `piezas.php`) NO * basta para ganarle: con la misma especificidad seguiria ganando el * Personalizador, que imprime despues pase lo que pase. Por eso TODAS las * reglas de aqui llevan `.single` delante: (0,2,*) contra el (0,1,*) del * Personalizador, tambien en `h3` y en `a`, que son las dos que el * Personalizador tambien define. * * --------------------------------------------------------------------------- * LA VUELTA AL BLOQUE GRIS (2026-09-08, segunda pasada) * * La primera version usaba el mismo canto de 3px en el azul ancla que * `.dl-autor` (autoria.css): correcto por consistencia con el resto del * sistema, pero el usuario lo vio como «tarjeta con canto de color», el * gesto que mas grita plantilla generica. Se vuelve al bloque gris plano que * ya tenia el sitio (`#e4e4e4`, aqui `#E7E7E4`, casi el mismo), SIN tocar el * resto del sistema de diseno: nada de esto se usa en ninguna otra pieza, * asi que no hace falta un token nuevo en `tokens.css` para un gris que no * se repite en ningun otro sitio. * * Cada fuente lleva un icono de enlace externo en vez de vineta o de linea * divisoria, y el enlace no lleva NUNCA subrayado (decision explicita del * usuario): solo cambia de color al pasar el raton. El icono es un SVG * minimo metido como fondo del `::before` del `
  • `: no toca el HTML del * `postmeta` (la lista blanca de `dl_bibliografia_etiquetas_permitidas()` en * `bibliografia.php`), asi que las 221 entradas existentes lo reciben sin * editar ni una. * --------------------------------------------------------------------------- */ .single .bibliografia-box { margin: var(--dl-esp-xl) 0 0; padding: 1.2rem 1.4rem; /* Gris plano, casi literal el `#e4e4e4` original. Sin relacion con la escala de azules del sitio a proposito: no se tokeniza porque no se repite en ninguna otra pieza. */ background-color: #E7E7E4; border-radius: var(--dl-radio); font-size: 0.9375rem; color: var(--dl-tinta); } .single .bibliografia-box h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; color: var(--dl-tinta); line-height: 1.3; } .single .bibliografia-box ul, .single .bibliografia-box ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } /* Sangria francesa (hanging indent), no flex: la primera version ponia el icono en una columna aparte con `display:flex` y calculaba su alto a mano para que coincidiera con la PRIMERA linea del enlace — se acercaba, pero es una aproximacion (la caja del icono centrada contra la caja de linea del texto, que no es exactamente lo mismo que su base de referencia real). Puesto ASI, el icono es parte del mismo renglon que el propio texto: `vertical-align` lo coloca contra la base de ese renglon con la metrica real de la fuente, sin calculo de por medio. El `text-indent` negativo saca el icono (mas su margen) fuera de la sangria en la primera linea; el `padding-left` deja esa misma sangria en las lineas siguientes, asi que un titulo largo que hace wrap se alinea bajo el texto y no bajo el icono. */ .single .bibliografia-box li { padding-left: 1.425rem; text-indent: -1.425rem; line-height: 1.45; } /* El color va en HEX literal, no en `var(--dl-tinta-suave)`: un SVG dentro de un `data:` URI no puede leer variables CSS. Es una copia de ese token, a mano; si el token cambia algun dia, este SVG no se entera. */ .single .bibliografia-box li::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 0.55rem; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7076' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3H3.8A1.3 1.3 0 0 0 2.5 4.3v7.9A1.3 1.3 0 0 0 3.8 13.5h7.9a1.3 1.3 0 0 0 1.3-1.3V9.5'/%3E%3Cpath d='M9.5 2.5H13.5V6.5'/%3E%3Cpath d='M7 9 13.3 2.7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px 14px; } .single .bibliografia-box a { color: var(--dl-tinta); text-decoration: none; transition: color var(--dl-dur) var(--dl-ease); } .single .bibliografia-box a:hover { color: var(--dl-azul-500); } .single .bibliografia-box a:focus-visible { outline: 2px solid var(--dl-foco); outline-offset: 2px; border-radius: 2px; transition: none; } @media (max-width: 700px) { .single .bibliografia-box { padding: 1rem 1.1rem; margin-top: var(--dl-esp-lg); font-size: 0.90625rem; } } @media (prefers-reduced-motion: reduce) { .single .bibliografia-box a { transition: none; } }