El pulpo en el vaso

Diseño de materiales y Moodle para cursos del CEFIRE

Escrito por: José Luis Miralles Bono (tiempo de lectura: 12 ‘)

Recientemente me han vuelto a contactar para impartir formación al profesorado en la Comunidad Valenciana. En esta entrada quiero compartir algunos recursos y estrategias que he creado para optimizar el proceso de diseño de materiales y adaptar su estética a la imagen visual corporativa del CEFIRE.

Recientemente me han vuelto a contactar para impartir formación al profesorado en la Comunidad Valenciana, a través del CEFIRE. En esta ocasión, la formación se organiza desde el SOGERE en colaboración con el CEFIRE, y he tenido que desarrollar los materiales para un curso alojado en Aules.

En esta entrada quiero compartir algunos recursos y estrategias que he creado para optimizar el proceso de diseño de materiales y adaptar su estética a la imagen visual corporativa del CEFIRE. Iré de lo más básico a lo más avanzado.

Trataré temas como:

  • Uso de etiquetas mlang para ofrecer contenidos en los dos idiomas cooficiales.
  • Creación de banners con códigos de color HEX adecuados.
  • Combinación de banners y etiquetas mlang.
  • Uso de iconos, descripciones de secciones en Moodle y secciones colapsables..
  • Creación de bancos de preguntas, mapas mentales y podcasts a partir del material.
  • Y, por último, compartiré un estilo CSS para Joplin que permite generar manuales con un diseño coherente.

Es posible que no todos los apartados te resulten de interés, así que si lo deseas, puedes ir directamente a las secciones que más te llamen la atención.

Etiquetas mlang

Ya he hablado anteriormente en este blog sobre las etiquetas mlang. Cuando se crean materiales en varios idiomas, Moodle permite filtrar la visibilidad de los elementos según el idioma del usuario. Las etiquetas {mlang} permiten mostrar un solo elemento con contenido en diferentes idiomas, sin necesidad de duplicarlo.

Por ejemplo, si tienes un PDF por idioma, sí será necesario subir un archivo por cada idioma y configurar su disponibilidad. Sin embargo, para descripciones de secciones, títulos o preguntas de cuestionarios, puedes escribir un único contenido usando {mlang}. Así, cada usuario verá el texto correspondiente a su idioma configurado en Moodle.

Estas etiquetas también son muy útiles para los cuestionarios: si las usas correctamente en el banco de preguntas, tanto las preguntas como las respuestas y el feedback se mostrarán en el idioma adecuado.

Eso sí, el trabajo reside en redactar los textos en ambos idiomas y aplicar correctamente las etiquetas. Para facilitar esta tarea, he creado un GPT personalizado que traduce al idioma solicitado y añade las etiquetas mlang automáticamente:

👉 Translate and insert mlang

Este GPT funciona con múltiples idiomas, pero si solo necesitas traducir entre castellano y valenciano, puedes usar directamente este otro, que detecta el idioma de Moodle (por ejemplo, catalán o valenciano) y realiza la traducción desde el castellano aplicando correctamente las etiquetas mlang ({mlang cat} o {mlang cat_valencia}):

👉 mlang traductor ES-CAT(VAL)

Banners

Un banner es un bloque visual destacado que se utiliza para resaltar información dentro de una página web o una plataforma como Moodle. Normalmente se presenta como un título o sección con un fondo llamativo y un estilo visual atractivo (colores, tipografía, iconos, etc.).

En el contexto de los materiales para cursos en Aules, los banners ayudan a:

  • Organizar visualmente el contenido.
  • Identificar secciones importantes.
  • Mejorar la estética y la coherencia con la imagen corporativa del CEFIRE.

Por ejemplo, un banner puede tener un fondo con un gradiente de color y texto en negrita para marcar claramente el inicio de una nueva unidad o apartado.

Si bien se le puede pedir a una IA que nos genere el código html para crear un Banner, vamos a presentar un GPT personalizado que ya lo hace con algunas opciones por defecto (aunque todas se podrían cambiar):

  • Encabezado <h3>.
  • Fondo con gradiente entre dos colores (#cdffd8 y #93b9ff); que son los colores corporativos de CEFIRE actualmente.
  • Texto en negro.

Y, además también con traducción mlang directamente a {mlang ca_valencia} es el paquete de idioma instalado en Aules:

👉 Creador de Banner HTML CEFIRE amb filtres mlang

{mlang es}

 Guía Didáctica y Temporalización

{mlang} {mlang other}

 Guia Didàctica i Temporalització

{mlang}

Creación de Iconos

Puede ser que nos interese también crear algunos iconos para usar. Así que presento aquí una herramienta diseñada para generar imágenes e iconos isométricos en 3D con un estilo moderno, minimalista y coherente. Su objetivo es facilitar la creación rápida de recursos visuales con una estética uniforme, utilizando una paleta de colores suaves y tonos acordes a la imagen visual corporativa del CEFIRE. Ideal para representar conceptos educativos, objetos, entornos y materiales digitales con un acabado profesional y amigable.

👉 Creador iconos CEFIRE

Descripciones de apartados

En Moodle todos los elementos pueden tener una pequeña descripción, que indica rápidamente al usuario qué encontrará en ellos o qué debe hacer con ellos. Siguiendo la filosofía de esto, una guía rápida visual del elemento descrito, me gusta que estas descripciones sea breves, amigables y visuales. Por lo que recomiendo la inclusión de emojis en ellas. Para ello, tengo otro GPT personalizado que tiene dos modos de funcionamiento que a continuación explico.

👉 Emoji Enhancer

Emoji Enhancer es una herramienta diseñada para mejorar visualmente los textos mediante el uso estratégico de emojis. Su objetivo es reforzar mensajes clave y dar un toque más expresivo a la comunicación escrita, sin perder claridad ni profesionalismo.

Cuenta con dos modos de funcionamiento:

🔹 /simplemoji: Añade emojis junto a palabras clave sin modificar el texto original. Es ideal para quienes desean mantener la estructura del mensaje intacta y solo resaltar visualmente ciertos elementos.

🔹 /devemoji: Además de incorporar emojis, realiza ligeras modificaciones al texto para hacerlo más cálido, cercano y accesible. El mensaje no cambia en esencia, pero adopta un tono más conversacional.

Una vez creado el texto, éste se puede pasar a mlang traductor ES-CAT(VAL) y así además ya lo tenemos en ambos idiomas.

Ejemplo:

El curso está finalizando ⏳. Esperamos que os haya resultado interesante ✨ y sea de utilidad para vuestras clases 📚. Como última tarea, os agradeceríamos que rellenarais la encuesta de valoración del curso 📝; también nos es muy útil cualquier comentario que queráis hacernos llegar por correo electrónico 📧 para poder mejorar en futuras ediciones de este curso 🔄.

Ejemplo con banner, icono y descripción.

Secciones Colapsables

Una sección colapsable en HTML es un bloque de contenido que el usuario puede expandir o contraer haciendo clic, normalmente en un encabezado o resumen. Esto permite mostrar contenido adicional de forma opcional y ordenada, sin sobrecargar la página visualmente.

Se usa el elemento <details> junto con <summary>:

  • <details>: define el contenedor colapsable.
  • <summary>: es el texto visible en forma de título que se puede hacer clic.
<details>
  <summary>Ver detalles del producto</summary>
  <p>Este producto está fabricado con materiales reciclados y cuenta con garantía de 2 años.</p>
</details>

🔹 Al principio solo se ve el texto «Ver detalles del producto».
🔹 Al hacer clic, se despliega el contenido adicional.

Esto se puede crear fácilmente usando el esquema anterior o pidiéndoselo a una IA con un prompt como el siguiente:

"Crea una sección colapsable en HTML que diga [Texto de título] y al abrirse muestre [texto a desplegar]"

Creación de Bancos de preguntas

Aquí me explayo extensamente sobre cómo crear bancos de preguntas para Moodle apoyado por diferentes herramientas de Inteligencia artificial:

👉 https://elpulpoenelvaso.jlmirall.es/?p=432

Resumiendo la entrada anterior, aquí tienes un listado de todas las herramientas que he creado y la explicación de su función:

Creación de Mapas Mentales

Aquí tienes una explicación de cómo crear mapas interactivos: https://educacion.bilateria.org/diagramas-en-arbol-con-ia-y-markmap

Podcasts a partir de los materiales

Usando Google NotebookLM puede crear resúmenes de audio de materiales: https://educacion.bilateria.org/aplicaciones-docentes-de-google-notebooklm

Alternativamente, si quieres un control más estricto de todo lo que dice el podcast, aunque se pierde la interacción entre dos interlocutores como NotebookLM, puedes decirle a ChatGPT que vuelva a repetir un texto que le has introducido sin decir nada, y luego solicitarle que lea la respuesta, con lo que tienes igualmente un texto locutado. Con cualquier grabador de audio interno del ordenador, puedes conseguir el audio.

Estilo CSS en Joplin

Joplin es una aplicación de código abierto diseñada para tomar notas, gestionar tareas y organizar información de forma estructurada. Una de sus principales ventajas es que permite trabajar con formato Markdown, lo que facilita la creación de contenido bien estructurado, tanto en texto plano como con formato enriquecido. Además, Joplin está disponible en múltiples plataformas, lo que permite sincronizar notas entre dispositivos y tener acceso a la información en todo momento.

Una de las funciones más útiles de Joplin es la posibilidad de exportar notas o libretas completas en formato HTML. Esta característica convierte las notas escritas en documentos web estáticos que pueden visualizarse fácilmente en cualquier navegador. Esta exportación genera archivos HTML organizados y funcionales, lo que permite reutilizar las notas como base para materiales educativos, documentación técnica, presentaciones o incluso pequeñas páginas web personales.

Al exportar contenido desde Joplin en HTML, se abre también la posibilidad de personalizar su aspecto visual mediante CSS. Aunque los archivos exportados incluyen un formato básico, podemos modificar su estilo para adaptarlo a diferentes usos y mejorar su presentación. Al aplicar CSS, es posible cambiar tipografías, colores, márgenes, y otros aspectos visuales, transformando así una simple nota en un documento profesional y visualmente atractivo.

Este enfoque resulta especialmente útil para quienes desean crear materiales digitales bien presentados a partir de sus notas personales, sin necesidad de herramientas complejas ni conocimientos avanzados de diseño web. Simplemente redactando en Joplin y exportando el contenido, se obtiene una base HTML lista para ser estilizada según las necesidades del proyecto.

Aquí se indica dónde está el archivo css que se debe modificar para que aplique el estilo: https://joplinapp.org/help/apps/custom_css/

Yo me he creado mi propio archivo de CSS utilizando los colores del CEFIRE. Primero te explico qué características tiene y luego te presento el código que debes introducir en la configuración de css de Joplin para poder usarlo:

🎨 Estilo general y variables (:root)

  • 🧱 Define variables reutilizables para colores, tamaños y márgenes.
  • 🎨 Paleta de colores:
    • Texto: #40464f
    • Primario (detalles y enlaces): #93b9ff
    • Fondo principal: #f8f7f2 (tono crema suave)
    • Marcadores de lista: #a2b6d4
    • Resaltado de texto: #ffffb5c2
    • Bloques y código: #cdffd8
    • Sombra en imágenes: #e3e8f0
    • Enlaces: #0066cc y hover en #0055aa

🖋️ Tipografía y cuerpo del documento

  • 📝 Usa fuentes limpias como 'Cantarell' o 'Arial'.
  • 🧘 Fondo claro y centrado, con justificación del texto para mejorar la lectura.
  • 📐 Márgenes y ancho adaptativos con clamp() y calc() para máxima responsividad.

🧩 Encabezados (h1 a h6)

  • 🌈 Encabezados h1 y h2 llevan un degradado de fondo entre #cdffd8 y #93b9ff.
  • 🔢 Numeración jerárquica automática tipo 1., 1.1., 1.1.1., etc.
  • 📎 Iconos de copia ocultos salvo cuando se pasa el cursor.

🔗 Enlaces (a)

  • 🔵 Coloreados en #0066cc, cambian a #0055aa al pasar el cursor.
  • ✒️ Subrayado sutil con desplazamiento para mejorar la estética.

🧑‍💻 Código (code, pre)

  • 💾 Fondo verde claro #cdffd8, fuente monoespaciada y diseño limpio.
  • 📦 Los bloques de código (pre) tienen padding, bordes redondeados y scroll horizontal si es necesario.

📋 Listas (ul, ol)

  • ✅ Márgenes y sangrías uniformes.
  • 🔹 Los marcadores tienen el color #a2b6d4.

🧱 Párrafos y bloques

  • 📄 Los párrafos respetan márgenes laterales y están justificados.
  • 💬 Citas (blockquote) con borde izquierdo en #93b9ff y fondo #cdffd8.

➖ Líneas horizontales (hr)

  • 🌈 Usan un degradado entre #cdffd8 y #93b9ff, igual que los encabezados.

📊 Tablas

  • 🧾 Se adaptan al ancho disponible con scroll horizontal si es necesario.
  • 🎨 Bordes en #d9dfe4 y encabezados en color primario #93b9ff.

🗂️ Callouts personalizados (b-gray, b-cefire, etc.)

Cada uno representa un tipo de mensaje destacado:

  • b-gray: fondo #e9edf0, borde #b1bcc2
  • b-green: fondo #cdffd8, borde igual
  • b-red: fondo #fad3d4, borde #f65354
  • b-blue: fondo #d3e5fa, borde #93b9ff
  • b-orange: fondo #faf3d3, borde #cf7506
  • b-purple: fondo #ead9fb, borde #af74e8
  • b-pink: fondo #fad3e5, borde #ed5393

🔷 b-cefire diseño con los colores corporativos de CEFIRE:

  • 🌈 Fondo en degradado suave desde rgba(205, 255, 216, 0.4) hasta rgba(147, 185, 255, 0.4)
  • 🔵 Borde lateral izquierdo en #93b9ff
  • 🎯 Ideal para destacar contenidos educativos o institucionales

🖼️ Imágenes (img)

  • 🖼 Centradas y escalables (max-width: 100%) con sombra #e3e8f0.

🔽 Secciones colapsables (summary, details)

  • 📂 Margen y ancho coherente con el resto del contenido.
  • 👆 summary tiene cursor tipo «pointer» para indicar que se puede hacer clic.

🧬 Diagramas Mermaid

  • 📊 Estilo minimalista y responsivo.
  • 🧮 Fondo transparente, sin bordes ni rellenos.

📱 Media queries (adaptación a móviles)

  • 🔧 Ajustes en márgenes, paddings y justificación para mejorar la experiencia en pantallas pequeñas (< 480px).
  • 📐 Tablas y encabezados se reajustan para evitar desbordamientos.

Este es el código que debe figurar en el archivo: userstyle.css

/* RENDERIZADO */
:root {
    --text-color: #40464f;
    --primary-color: #93b9ff;
    --bg-color: #f8f7f2; /* Color de fondo actualizado a tono crema suave */
    --side-bar-bg-color: var(--bg-color);
    --marker-color: #a2b6d4;
    --highlight-color: #ffffb5c2;
    --header-span-color: var(--primary-color);
    --block-bg-color: #cdffd8;
    --img-shadow-color: #e3e8f0;
    --heading-bgcolor: unset;
    --preformatted-text-bgcolor: var(--block-bg-color);
    --link-color: #0066cc;
    --container-width: min(90%, 1200px); /* Limitamos el ancho máximo y usamos min() para responsividad */
    --heading-padding: 15px; /* Padding consistente para encabezados */
    --content-margin: clamp(15px, 3%, 30px); /* Margen adaptativo */
    --content-width: calc(100% - (var(--content-margin) * 2)); /* Ancho adaptativo */
}

body {
    color: var(--text-color);
    background-color: var(--bg-color);
    font-family: 'Cantarell', 'Arial', sans-serif;
    line-height: 1.6;
    text-align: justify;
    counter-reset: h2counter;
    margin: 0 auto; /* Centrado de contenido */
    padding: 0 10px; /* Padding para evitar que el contenido toque los bordes */
    box-sizing: border-box;
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Arial', sans-serif;
    color: var(--text-color);
    padding: 0;
    background-color: unset;
    border-bottom: unset;
    margin-left: 0; /* Alineados al margen izquierdo */
    box-sizing: border-box;
    width: 100%;
    text-align: left; /* Evita justificación en encabezados */
}

h1 {
    background: linear-gradient(to right, #cdffd8, #93b9ff);
    width: 100%;
    color: #40464f;
    padding: var(--heading-padding);
    margin: 0 0 2.3rem 0;
    font-size: clamp(1.5rem, 5vw, 2rem); /* Tamaño de fuente adaptativo */
    border-radius: 0; /* Sin border-radius */
}

h2 {
    background: linear-gradient(to right, #cdffd8, #93b9ff);
    width: 100%;
    color: #40464f;
    padding: var(--heading-padding);
    border-radius: 0; /* Sin border-radius */
    display: block;
    margin: 0.3em 0;
    font-size: clamp(1.2rem, 4vw, 1.5rem); /* Tamaño de fuente adaptativo */
    counter-reset: h3counter;
}

h3 {
    color: var(--primary-color);
    margin: 1em 0 1em 0; /* Mismo nivel que h1 y h2 */
    font-size: clamp(1.1rem, 3.5vw, 1.4rem); /* Tamaño de fuente adaptativo */
    counter-reset: h4counter;
    padding-left: var(--heading-padding);
}

h4 {
    color: var(--primary-color);
    margin: 0.8em 0 0.8em 0; /* Ajustado para alinear con otros encabezados */
    font-size: clamp(1rem, 3vw, 1.2rem); /* Tamaño de fuente adaptativo */
    counter-reset: h5counter;
    padding-left: var(--heading-padding);
}

h5 {
    color: var(--primary-color);
    margin: 0.6em 0 0.6em 0; /* Ajustado para alinear con otros encabezados */
    font-size: clamp(0.95rem, 2.5vw, 1.1rem); /* Tamaño de fuente adaptativo */
    counter-reset: h6counter;
    padding-left: var(--heading-padding);
}

h6 {
    color: var(--primary-color);
    margin: 0.4em 0 0.4em 0; /* Ajustado para alinear con otros encabezados */
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* Tamaño de fuente adaptativo */
    padding-left: var(--heading-padding);
}

/* Sistema de numeración de encabezados empezando desde h2 */
h2:before {
    counter-increment: h2counter;
    content: counter(h2counter) ".\0000a0\0000a0";
}

h3:before {
    counter-increment: h3counter;
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
}

h4:before {
    counter-increment: h4counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
}

h5:before {
    counter-increment: h5counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
}

h6:before {
    counter-increment: h6counter;
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0";
}

/* Para cuando está activo el plugins de links de encabezados */
.cai-lh { 
    display: inline; 
}

h1 span.copy-anchor-icon, h2 span.copy-anchor-icon, h3 span.copy-anchor-icon {
    display: none;
}

h1:hover span.copy-anchor-icon, h2:hover span.copy-anchor-icon, h3:hover span.copy-anchor-icon {
    display: inline;
}

/* Enlaces */
a {
    color: var(--link-color);
    text-decoration: underline solid;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 2px;
}

a:hover {
    color: #0055aa;
}

/* Código */
code {
    color: var(--primary-color);
    font-size: 94%;
    font-weight: normal;
    word-wrap: break-word;
    padding: 2px 4px 2px;
    border-radius: 3px;
    margin: 2px;
    background-color: var(--block-bg-color);
    font-family: monospace;
    word-break: break-all;
    white-space: pre-wrap;
}

pre {
    background-color: var(--block-bg-color);
    padding: 1.2rem 0.8rem;
    border-radius: 10px;
    margin: 1.5rem var(--content-margin);
    line-height: 1.6rem;
    width: calc(100% - (var(--content-margin) * 2));
    box-sizing: border-box;
    overflow-x: auto;
}

/* Listas - CORREGIDO para ser responsive */
ul, ol {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: var(--content-margin);
    width: calc(100% - var(--content-margin) - 20px); /* Ancho adaptativo con margen */
    padding-left: 20px;
    box-sizing: border-box;
}

li {
    margin: 0.4rem 0;
    line-height: 1.7rem;
}

ul {
    list-style-type: disc;
}

ul ul {
    list-style-type: square;
    width: calc(100% - 20px); /* Ancho ajustado para listas anidadas */
}

ol {
    list-style-type: decimal;
}

/* Use marker color for list bullets */
::marker {
    font-weight: bold;
    color: var(--marker-color);
}

/* Parrafos con sangría consistente */
p {
    margin-left: var(--content-margin);
    width: calc(100% - (var(--content-margin) * 2));
    box-sizing: border-box;
}

/* Negrita - Negra y bold */
strong {
    color: #000000;
    font-weight: 900;
}

/* Resaltado */
mark {
    background: var(--highlight-color);
    padding: 1px .15rem;
    border-radius: 1px;
    color: inherit;
}

/* Citas - con sangría consistente y márgenes adicionales */
blockquote {
    display: block;
    font-size: .9em;
    overflow: auto;
    border-left: 3px solid var(--primary-color);
    padding: 15px 30px 15px 20px;
    margin: 20px 0 20px calc(var(--content-margin) + 15px); /* Margen izquierdo aumentado */
    background: var(--block-bg-color);
    color: #000000;
    width: calc(100% - var(--content-margin) - 15px - 50px); /* Ancho adaptativo */
    box-sizing: border-box;
}

/* Líneas horizontales con gradiente igual que los encabezados */
hr {
    margin: 20px 0;
    border: 0;
    height: 3px;
    background-image: linear-gradient(to right, #cdffd8, #93b9ff);
    border-radius: 0; /* Sin border-radius para coincidir con h1 y h2 */
    width: 100%;
}

/* Tablas - Corregidas para mantener consistencia tipográfica y ser responsive */
table, th, td {
    font-family: 'Cantarell', 'Arial', sans-serif; /* Misma fuente que el body */
    font-size: inherit; /* Hereda el tamaño de fuente del elemento padre */
}

table {
    display: block; /* Cambiado para mejor responsividad */
    text-align: justify;
    overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0 0 20px var(--content-margin);
    width: calc(100% - (var(--content-margin) * 2));
    box-sizing: border-box;
}

tbody {
    border: 0;
}

table tr {
    border: 0;
    border-top: 1px solid #ccc;
}

table tr th,
table tr td {
    border: 1px solid #d9dfe4;
    padding: 5px 10px;
    text-align: justify;
}

table tr th {
    text-align: center;
    min-width: 6rem; /* Reducido para pantallas pequeñas */
    font-weight: bold;
    color: var(--primary-color);
}

table tr td:hover,
table tr th:hover {
    background-color: var(--block-bg-color);
}

/* Para estilos de callouts */
b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple, b-cefire {
    width: calc(100% - var(--content-margin) - 20px);
    display: block;
    margin: 20px 0 20px var(--content-margin);
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.1); 
    color: #000000;
    box-sizing: border-box;
}

b-gray {
    border-color: #b1bcc2;
    background-color: #e9edf0; 
}

b-green {
    border-color: var(--block-bg-color);
    background-color: #cdffd8; 
} 

b-red {
    border-color: #f65354;
    background-color: #fad3d4; 
}

b-blue {
    border-color: var(--primary-color);
    background-color: #d3e5fa; 
}

b-orange {
    border-color: #cf7506;
    background-color: #faf3d3; 
}

b-purple {
    border-color: #af74e8;
    background-color: #ead9fb; 
}

b-pink {
    border-color: #ed5393;
    background-color: #fad3e5; 
}

b-cefire {
    border-color: #93b9ff;
    background: linear-gradient(to right, rgba(205, 255, 216, 0.4), rgba(147, 185, 255, 0.4));
}

/* EXPORTACIÓN */
.exported-note {
    code {
        white-space: pre-wrap;
    }    
    color: var(--text-color);
    background-color: var(--bg-color);
    
    a {
        color: var(--link-color);
    }
    
    a:hover { 
        color: #0055aa;
    }
}

/* do not print note title (or when exporting to PDF) */
.exported-note-title {
    display: none !important;
}

/* Imágenes */
img {
    margin: 0 auto;
    max-width: 100%;
    filter: drop-shadow(var(--img-shadow-color) 0px 6px 6px);
    display: block;
}

/* Summary y Details - con márgenes consistentes */
summary, details {
    margin-left: var(--content-margin);
    width: calc(100% - (var(--content-margin) * 2));
    box-sizing: border-box;
}

details > * {
    margin-left: 15px;
}

details > summary {
    margin-left: 0;
    cursor: pointer;
}

/* Estilos para diagramas Mermaid */
.mermaid {
    margin-left: var(--content-margin);
    width: calc(100% - (var(--content-margin) * 2));
    max-width: 100%;
    overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
    background-color: transparent; /* Quita el fondo verde */
    box-sizing: border-box;
}

/* Si el diagrama está dentro de un pre o div */
pre.mermaid, div.mermaid {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Contenedor específico para SVG de Mermaid */
.mermaid svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Media queries para adaptación a pantallas muy pequeñas */
@media (max-width: 480px) {
    :root {
        --content-margin: 10px;
    }
    
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
    }
    
    body {
        text-align: left; /* Cambia la justificación a alineación izquierda en pantallas pequeñas */
    }
    
    table tr th {
        min-width: 4rem;
    }
    
    pre {
        padding: 0.8rem 0.5rem;
    }
    
    blockquote {
        padding: 10px 15px 10px 15px;
        margin: 15px 0 15px var(--content-margin);
        width: calc(100% - (var(--content-margin) * 2));
    }
}

José Luis Miralles Bono

Etiquetas:

Comentarios

Deja un comentario