/* PIEZA: notas («aviso» y «ejemplo» dentro del cuerpo del articulo) * --------------------------------------------------------------------------- * QUE SUSTITUYE, Y POR QUE * * Hasta el 2026-09-08 los avisos y los ejemplos dentro de los articulos se * pintaban con dos cosas que venian de fuera del sistema de diseno: * * 1. El shortcode `[su_note]` de Shortcodes Ultimate. Su `.su-note-inner` * lleva el fondo `#e3e9ef` puesto a mano en el CSS del Personalizador * (entrada `custom_css` #2214), con `!important`. Casualmente ese hex es * el mismo que `--dl-azul-100`, pero era coincidencia, no sistema: el * valor estaba escrito dos veces en dos sitios que no se hablan. * 2. ``, que es un SUBRAYADOR AMARILLO (`#fbe88d`, * tambien del Personalizador). Ese amarillo no existe en `tokens.css` ni * en ninguna otra pieza: es el unico sitio del sitio donde aparece, y se * ve como lo que es, un rotulador sobre un documento por lo demas sobrio. * * Las dos cosas ademas ATABAN EL CONTENIDO A UN PLUGIN que este proyecto tiene * en la lista para quitar (ver `docs/PLUGINS.md`): el dia que Shortcodes * Ultimate se desactive, cada `[su_note]` de cada articulo se queda impreso en * pantalla como texto suelto entre corchetes. * * --------------------------------------------------------------------------- * POR QUE DOS COMPONENTES Y NO UNO * * Son dos trabajos distintos y merecen dos formas distintas: * * - `.dl-nota` es un APARTE: algo que conviene saber pero que no es el hilo * del articulo. Va en panel lleno, como el resto de paneles del sitio. * - `.dl-ejemplo` es CONTENIDO PRINCIPAL: es la parte que el lector viene a * buscar cuando no entiende una regla. No es un aparte, asi que no se mete * en una caja de color; se separa con un filete y se rotula. * * De ahi que el ejemplo NO lleve fondo ni borde de caja. Ademas de ser lo * correcto por jerarquia, evita el gesto de «tarjeta con canto de color» que * el usuario ya rechazo en la caja de fuentes (ver la cabecera de * `bibliografia.css`). * * --------------------------------------------------------------------------- * NADA DE AZUL EN EL EJEMPLO, A PROPOSITO * * `tokens.css` fija la regla del sitio: el azul fuerte no pasa del 5% del area * de ninguna pantalla y vive en el menu, en el subrayado de los encabezados y * en el borde del bloque de respuesta. Un articulo puede llevar tres o cuatro * ejemplos; pintarlos de azul se saltaria esa regla el solo. El rotulo va en * `--dl-tinta-suave` y el filete en `--dl-linea`, que es justo para lo que ese * token existe («reglas y bordes»). * * --------------------------------------------------------------------------- * LA ESPECIFICIDAD, IGUAL QUE EN LAS DEMAS PIEZAS * * Todo lleva `.single` delante por el mismo motivo que explican las cabeceras * de `articulo.css` y `bibliografia.css`: el CSS del Personalizador se imprime * en el `` DESPUES de las hojas encoladas (`wp_custom_css_cb`, prioridad * 101 de `wp_head`), asi que encolar tarde no basta para ganarle. Con `.single` * delante son (0,2,*) contra sus (0,1,*). * --------------------------------------------------------------------------- */ /* --- El aparte ----------------------------------------------------------- */ .single .dl-nota { margin: var(--dl-esp-lg) 0; padding: 1rem 1.2rem; background-color: var(--dl-azul-100); border-radius: var(--dl-radio); color: var(--dl-tinta); } /* Un aparte puede tener mas de un parrafo. El ultimo no arrastra hueco, que el `padding` de la caja ya lo pone. */ .single .dl-nota > :last-child { margin-bottom: 0; } /* --- El ejemplo ---------------------------------------------------------- */ .single .dl-ejemplo { margin: var(--dl-esp-lg) 0; padding-left: 1.15rem; border-left: 2px solid var(--dl-linea); } /* El texto del ejemplo va en CURSIVA (decision del usuario, 2026-09-08). Es el gesto editorial de toda la vida para «esto es un caso, no la regla»: separa el ejemplo del cuerpo sin gastar ni color ni caja, que es justo lo que aqui interesa. El filete de la izquierda va en `--dl-linea`, el token de reglas y bordes: gris, NO el azul de marca, para no romper la regla del 5%. */ .single .dl-ejemplo p { font-style: italic; } .single .dl-ejemplo > :last-child { margin-bottom: 0; } /* El rotulo NO va en cursiva: es una etiqueta, no parte de la frase, y en redonda se distingue del texto del ejemplo de un vistazo. En mayusculas y pequeno para que se lea como etiqueta y no como un titulo mas dentro de la jerarquia de encabezados: es un `

` a proposito, no un `

`, porque no es una seccion del documento y no debe salir en ningun indice ni en el esquema de la pagina. */ .single .dl-ejemplo__rotulo { margin: 0 0 0.3rem; font-family: var(--dl-texto); font-style: normal; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-tinta-suave); } @media (max-width: 700px) { .single .dl-nota { padding: 0.9rem 1rem; margin: var(--dl-esp-md) 0; } .single .dl-ejemplo { margin: var(--dl-esp-md) 0; } }