/* Estilos compartidos del contenido rico del LMS (clases, foros, mensajes). * * Vive aparte a propósito: estas reglas tienen que aplicar en las TRES * superficies donde se ve el mismo HTML — el editor Rhino, la vista publicada * del alumno/instructor, y el preview del builder admin. Antes vivían en un * bloque `:css` dentro de un partial de RailsAdmin, así que fuera del admin las * tablas quedaban sin bordes y en `table-layout: auto`. * * Se carga junto a `rhino-editor/trix` en los cuatro puntos donde se ve * contenido del LMS: layouts student e instructor, courses/_lms_modules * (Course show) y lms/course_modules/_contents (CourseModule show). */ /* ---------------------------------------------------------------- Tablas * `.rhino-table` es la clase con la que el editor serializa cada , así * que cubre el HTML publicado en cualquier contenedor (el alumno lo ve dentro * de .pc-reader-body, no de .trix-content). Los otros dos selectores cubren el * editor y el preview del admin. * * `table-layout: fixed` no es cosmético: en layout automático una celda que * contiene un embed de video —un div sin ancho intrínseco— colapsa al * `min-width` que el editor guardó en el , 25px, y el video queda * reducido a una tirita ilegible. */ .rhino-table, rhino-editor .ProseMirror table, .trix-content table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; table-layout: fixed; } .rhino-table td, .rhino-table th, rhino-editor .ProseMirror table td, rhino-editor .ProseMirror table th, .trix-content table td, .trix-content table th { border: 1px solid #cecece; padding: 0.35rem 0.5rem; min-width: 2rem; vertical-align: top; position: relative; } .rhino-table th, rhino-editor .ProseMirror table th, .trix-content table th { background: #f5f5f5; font-weight: 600; text-align: left; } /* Estado "tabla seleccionada" / celda activa — solo dentro del editor. */ rhino-editor .ProseMirror table .selectedCell { background: rgba(13, 110, 253, 0.12); } /* Resize de columnas. prosemirror-tables trae la función pero NO trae CSS: * pone la clase `resize-cursor` en el editor mientras el puntero está sobre la * zona de arrastre, y un `.column-resize-handle` sobre el borde de la columna. * Sin estas reglas se podía arrastrar pero nada lo indicaba. El * `position: relative` que la regla de td/th ya trae es lo que ancla el handle. */ rhino-editor .ProseMirror.resize-cursor { cursor: col-resize; } rhino-editor .ProseMirror .column-resize-handle { position: absolute; top: 0; right: -2px; bottom: -2px; width: 4px; background: #0d6efd; pointer-events: none; z-index: 20; } /* Scroll horizontal, para que una tabla ancha nunca quede cortada. Al * redimensionar columnas el editor guarda anchos en píxeles (min-width en el *
, width en cada ), que en una pantalla angosta se salen del área * de lectura y el alumno ve la tabla incompleta sin poder llegar al resto. * Contenerla con scroll es mejor que apretujar las columnas hasta hacerlas * ilegibles. El
lo agrega Lms::RichTextHelper al publicar; dentro del * editor el mismo rol lo cumple el .tableWrapper de prosemirror-tables, que * tampoco trae CSS propio. */ .rhino-table-scroll, rhino-editor .ProseMirror .tableWrapper { max-width: 100%; overflow-x: auto; } /* Alineación de la tabla como bloque (ver rhino_table_align.js). Distinto de * alinear el texto de las celdas, que ya se hacía con text-align. * * El default es `width: 100%`, donde alinear no se notaría: no sobra espacio * del cual correrse. Al elegir una alineación la tabla pasa a dimensionarse por * su contenido, y el margen elástico tiene de dónde sacar el espacio. * * El `:is(...)` de adelante repite los tres selectores de la regla base solo * para ganarle en especificidad a `rhino-editor .ProseMirror table`, que si no * seguiría imponiendo el `width: 100%` dentro del editor. */ :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table--left, rhino-editor .ProseMirror .rhino-table--left > table { width: auto; max-width: 100%; margin-left: 0; margin-right: auto; } :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table--center, rhino-editor .ProseMirror .rhino-table--center > table { width: auto; max-width: 100%; margin-left: auto; margin-right: auto; } :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table--right, rhino-editor .ProseMirror .rhino-table--right > table { width: auto; max-width: 100%; margin-left: auto; margin-right: 0; } /* Estilos de tabla (ver rhino_table_format.js). Un "look" completo elegido en la * barra flotante, guardado como clase en el
. Son independientes de la * alineación: una tabla puede tener los dos. * * El relleno de cada celda viaja como `style` inline en el
/, así que * SIEMPRE le gana a estas reglas — pintar una celda a mano es más específico * que el estilo general de la tabla, que es lo que uno espera. * * Igual que con la alineación, cada preset se declara dos veces: una para el * (HTML publicado y editor) y otra para el `.tableWrapper`, que es donde * la decoración de ProseMirror deja la clase mientras se edita. */ /* Encabezado de color. El tono se elige en el menú "Estilo" de la fila de tabla * y viaja como clase `rhino-table-header--`; el default sin elegir nada * es el azul que ya se veía. * * Se resuelve con una custom property y no con un par de selectores por matiz * (serían dieciocho): la propiedad se hereda, así que da igual que la clase * quede en el
—HTML publicado— o en el `.tableWrapper` —lo que hace la * decoración mientras se edita—. Los valores son los mismos nueve colores de * texto de la paleta, acá usados como fondo con letra blanca; todos pasan AA, * verificado en test/javascript/palette_contrast_test.rb. */ .rhino-table-header--ambar { --lms-th-bg: #9a6700; } .rhino-table-header--naranja { --lms-th-bg: #b4530a; } .rhino-table-header--rojo { --lms-th-bg: #b42318; } .rhino-table-header--magenta { --lms-th-bg: #a01f5c; } .rhino-table-header--violeta { --lms-th-bg: #6339c0; } .rhino-table-header--azul { --lms-th-bg: #0b5ed7; } .rhino-table-header--verde { --lms-th-bg: #146c43; } .rhino-table-header--marron { --lms-th-bg: #7a5230; } .rhino-table-header--gris { --lms-th-bg: #545d6a; } :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table-style--header th, rhino-editor .ProseMirror .rhino-table-style--header > table th { background: var(--lms-th-bg, #0d6efd); color: #fff; } :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table-style--striped tbody tr:nth-child(even) td, rhino-editor .ProseMirror .rhino-table-style--striped > table tbody tr:nth-child(even) td { background: #f2f5f9; } :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table-style--borderless td, :is(.rhino-table, rhino-editor .ProseMirror table, .trix-content table).rhino-table-style--borderless th, rhino-editor .ProseMirror .rhino-table-style--borderless > table td, rhino-editor .ProseMirror .rhino-table-style--borderless > table th { border-color: transparent; } /* ------------------------------------------------- Títulos con nombre * Los tres títulos del menú "Título" del editor: Título de clase (h2), Sección * (h3) y Subsección (h4). Reemplazan al selector "Tam." de ocho tamaños en px, * que era la fuente directa de que el material de cada facilitador saliera * distinto: el mismo encabezado quedaba en 24px en una clase y en 20px en otra. * * El formato definitivo lo define Daniel; hasta entonces estos valores son un * punto de partida razonable. Están como variables a propósito: ajustarlos es * cambiar estas cinco líneas, y TODAS las clases del LMS se actualizan juntas * sin reeditar ninguna. * * Se declaran para las tres superficies donde se ve el mismo HTML —el editor, * la vista del alumno (.pc-reader-body) y el preview del admin (.trix-content)— * porque un

no lleva clase propia con la cual viajar, a diferencia de las * tablas y las etiquetas. */ /* Los tres niveles, con los valores que definió Daniel (2026-08-26). En px y no * en rem porque los dio en px: son medidas exactas, no proporciones. * * Los tres colores pasan WCAG AA sobre blanco, verificado en * test/javascript/heading_contrast_test.rb — que lee los hex de ESTE archivo, * así que cambiar un valor acá y dejarlo ilegible rompe el test. */ rhino-editor .ProseMirror, .trix-content, .pc-reader-body { --lms-body-size: 18px; --lms-video-width: 620px; --lms-body-ink: #1f2937; --lms-h2-size: 24px; --lms-h3-size: 20px; --lms-h4-size: 18px; /* Azul oscuro brillante */ --lms-h2-color: #2b15d1; /* Vinotinto casi morado */ --lms-h3-color: #772865; /* Negro. Es EL MISMO valor que --lms-body-ink de más abajo y que el "Negro" * de la paleta del editor: "Sección" es el título más chico y se lee pegado * al párrafo, así que un gris propio lo hacía ver desteñido al lado del texto * que encabeza. Va el hex y no var(--lms-body-ink) porque * test/javascript/heading_contrast_test.rb lee los tres colores de acá con * una expresión regular sobre el hex. Revisión de QA del 1-sep-2026. */ --lms-h4-color: #1f2937; } /* ------------------------------------------------------ Cuerpo del texto * 18px, definido por Daniel (2026-08-27). Va en la MISMA hoja que los títulos * porque es la otra mitad de la misma decisión: la escala del material. * * Antes nadie lo declaraba, así que cada superficie caía en un default * distinto: el editor tomaba el del navegador (16px) y la vista del alumno * traía `font-size: 1.5rem` (24px) de panel_components.css. El facilitador * escribía en un tamaño y el alumno leía en otro, que es justo lo que el * selector de tamaño no puede arreglar solo. * * El tamaño elegido A MANO desde la barra viaja como `style` inline en un * , así que siempre le gana a esta regla — que es lo que uno espera de * haberlo elegido. */ :is(rhino-editor .ProseMirror, .trix-content, .pc-reader-body) { font-size: var(--lms-body-size); /* El color del cuerpo tenía el mismo problema que el tamaño: nadie lo declaraba, así que el editor heredaba el de Bootstrap (#212529) y el alumno el de panel_components.css (#1f2937). Encima de eso, el "Negro" de la paleta del editor ES este valor (rhino_palette.js), y sin declararlo acá una palabra pintada de negro se veía distinta del párrafo que la rodea. */ color: var(--lms-body-ink); } /* Mismo problema de especificidad que los colores de título de más abajo: * `.pl-content .pc-reader-card .pc-reader-body` de panel_components.css pesa * (0,3,0) contra los (0,1,0) de la regla de arriba, así que sin esto el alumno * seguiría leyendo en 24px. Se repite `.pc-reader-body` para llegar a (0,4,0) y * ganar por especificidad, no por orden de carga. */ .pl-content .pc-reader-card .pc-reader-body.pc-reader-body { font-size: var(--lms-body-size); color: var(--lms-body-ink); } /* El Título llevaba una barrita vertical azul al inicio. Se retiró en la * revisión de QA del 1-sep-2026: el tamaño, el peso y el color ya marcan dónde * empieza el bloque, y la barra sumaba un elemento gráfico que en una clase con * varios títulos se leía como un margen roto. */ :is(rhino-editor .ProseMirror, .trix-content, .pc-reader-body) h2 { font-size: var(--lms-h2-size); font-weight: 700; line-height: 1.25; color: var(--lms-h2-color); margin: 1.4rem 0 .5rem; } :is(rhino-editor .ProseMirror, .trix-content, .pc-reader-body) h3 { font-size: var(--lms-h3-size); font-weight: 700; line-height: 1.3; color: var(--lms-h3-color); margin: 1.2rem 0 .4rem; } :is(rhino-editor .ProseMirror, .trix-content, .pc-reader-body) h4 { font-size: var(--lms-h4-size); font-weight: 700; line-height: 1.35; color: var(--lms-h4-color); margin: 1rem 0 .35rem; } /* En la vista del alumno hay que ganarle a panel_components.css, que pinta los * encabezados del lector con `--pc-ink` desde * .pl-content .pc-reader-card .pc-reader-body :is(h1, h2, h3) * con especificidad (0,3,1) contra los (0,1,2) de las reglas de arriba. Mientras * los colores coincidían daba igual quién ganara; ahora que son distintos, sin * esto el alumno vería los encabezados azul marino y el facilitador los vería * como los definió. * * Se repite el mismo camino y se le suma una clase —de ahí el `.pc-reader-body` * dos veces— para llegar a (0,4,1) y ganar por especificidad y no por orden de * carga, que puede cambiar al tocar cualquier layout. Sólo el color: el tamaño * y los márgenes no los pisa nadie. h4 no hace falta (su regla no lo cubre), * pero va igual para que los tres se lean juntos. */ .pl-content .pc-reader-card .pc-reader-body.pc-reader-body h2 { color: var(--lms-h2-color); } .pl-content .pc-reader-card .pc-reader-body.pc-reader-body h3 { color: var(--lms-h3-color); } .pl-content .pc-reader-card .pc-reader-body.pc-reader-body h4 { color: var(--lms-h4-color); } /* ------------------------------------------------------ Nota destacada * Tratamiento de CITA: comillas dobles grandes al inicio del párrafo, texto en * itálica y sangrado. Antes era un recuadro con fondo y borde; la cita destaca * igual sin encajonar el texto, y se lee como una voz distinta del resto de la * clase — que es lo que suele ser: un ejemplo, una advertencia, algo dicho * aparte. * * Es un atributo del párrafo (ver rhino_text_styles.js) y viaja como clase, así * que esta regla sola lo cubre en las tres superficies. */ .lms-callout { margin: 1.25rem 0; /* Sangría chica, sólo para que el bloque se despegue del párrafo anterior. No tiene que hacerle sitio a la comilla: las dos van EN LÍNEA. */ padding: .1rem 0 .1rem 1rem; font-style: italic; /* Un punto más que el cuerpo: la cita pesa sin gritar. */ font-size: 1.05em; line-height: 1.55; } /* Las comillas: ABRE y CIERRA, del mismo tamaño y las dos EN LÍNEA. * * Antes había sólo la de apertura, en 3.4em, al 28% de opacidad y en posición * absoluta. En la revisión de QA del 1-sep-2026 se reportó primero que "no se * entiende bien cómo trabaja" —una comilla gigante, pálida y sin pareja se lee * como un adorno suelto, y no había señal de dónde termina lo citado— y después * que salía montada sobre la primera letra. * * Lo segundo es consecuencia de lo primero: una comilla absoluta y un padding * que le hace sitio son DOS medidas que tienen que coincidir, y cualquier * cambio de tamaño de letra las descuadra. En línea no hay nada que coordinar: * la comilla ocupa su lugar y empuja al texto, como cualquier carácter. * * `\201C` y `\201D` son las tipográficas (“ ”), no las rectas; en Georgia * tienen el trazo grueso que las vuelve reconocibles a este tamaño. * * `line-height: 0` evita que su tamaño estire el renglón, y `vertical-align` * las baja a la altura del texto —sin eso quedan colgando del tope de la línea, * que es la otra forma de verse "montadas". * * `aria-hidden` no aplica a pseudo-elementos, pero los lectores de pantalla * modernos no anuncian `content` decorativo. */ .lms-callout::before, .lms-callout::after { font-family: Georgia, "Times New Roman", serif; font-size: 1.7em; font-style: normal; line-height: 0; vertical-align: -.32em; color: rgba(43, 21, 209, .55); pointer-events: none; } .lms-callout::before { content: "\201C"; margin-right: .08em; } .lms-callout::after { content: "\201D"; margin-left: .08em; } /* ------------------------------------------------------------ Etiquetas * Formato con nombre, no color pintado a mano. Cambiar cómo se ve una etiqueta * en todo el LMS es cambiar su regla acá; con texto pintado a mano habría que * reeditar clase por clase. * * La LETRA de cada etiqueta sí sale de la paleta del editor * (app/javascript/rhino_palette.js, TEXT_COLORS) y su contraste lo verifica * test/javascript/palette_contrast_test.rb. * * El FONDO son los mismos tintes que usa el resaltado, pero escritos acá a mano: * es una copia, no una importación. Si algún día se cambian allá, hay que * cambiarlos acá también. */ .lms-tag { display: inline; padding: .1em .5em; border-radius: 999px; font-size: .92em; font-weight: 700; line-height: 1.5; /* `box-decoration-break` para que una etiqueta que cae en el corte de línea * conserve el redondeo en los dos pedazos en vez de quedar cortada al medio. */ -webkit-box-decoration-break: clone; box-decoration-break: clone; } .lms-tag--vocabulario { background: #d0ebff; color: #0b5ed7; } .lms-tag--gramatica { background: #d3f9d8; color: #146c43; } .lms-tag--ejemplo { background: #fff3bf; color: #9a6700; } .lms-tag--practica { background: #f3e8fd; color: #6339c0; } .lms-tag--ojo { background: #ffe3e3; color: #b42318; } /* Pero DENTRO del editor una tabla sin bordes es imposible de editar: no se ve * dónde empieza y termina cada celda. Le dejamos una guía punteada, que no se * publica. Lleva una clase de más a propósito, para ganarle a la regla de * arriba sin depender del orden. */ rhino-editor .ProseMirror table.rhino-table.rhino-table-style--borderless td, rhino-editor .ProseMirror table.rhino-table.rhino-table-style--borderless th, rhino-editor .ProseMirror .rhino-table-style--borderless > table.rhino-table td, rhino-editor .ProseMirror .rhino-table-style--borderless > table.rhino-table th { border: 1px dashed rgba(13, 110, 253, 0.35); } /* ------------------------------------------------------------ Embeds de video * El alto sale de `aspect-ratio` (ver Lms::RichTextHelper). La regla de trix * fuerza `width: 100%` sobre img/svg/figure; el embed no es ninguno de esos, * así que necesita su propio ancho para no colapsar dentro de una celda. */ /* Tamaño y alineación elegidos en la barra flotante del editor. Las clases las * trae el propio y el helper las copia al wrapper (ver rhino_video_embed.js). */ .rich-embed.rhino-video--lg { max-width: 75%; } .rich-embed.rhino-video--md { max-width: 55%; } .rich-embed.rhino-video--sm { max-width: 35%; } /* El margen vive acá y no inline a propósito: un style inline le ganaría a estas * reglas y no habría forma de correr el reproductor a un costado. `auto` de * default deja centrado a un video reducido, que es lo que se espera; en ancho * completo no se nota porque no sobra espacio. */ .rich-embed { width: 100%; max-width: 100%; margin: 1rem auto; } .rich-embed.rhino-video--left { margin-left: 0; margin-right: auto; } .rich-embed.rhino-video--center { margin-left: auto; margin-right: auto; } .rich-embed.rhino-video--right { margin-left: auto; margin-right: 0; } /* ------------------------------------------- Miniatura dentro del editor * La carátula que asoma bajo un enlace de YouTube mientras se edita (ver * rhino_video_preview.js). Es una decoración: existe sólo en pantalla, no entra * al documento y no se guarda. * * No define ancho propio a propósito: lleva las mismas clases `rich-embed` y * `rhino-video--*` que el embed publicado, así que hereda de arriba el ancho y * la alineación. Es lo que hace que elegir "mediano" se vea mediano EN EL ACTO, * sin una segunda definición de tamaños que pueda desincronizarse de la real. */ rhino-editor .ProseMirror .lms-yt { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #10151f; line-height: 0; user-select: none; } rhino-editor .ProseMirror .lms-yt img { display: block; width: 100%; height: auto; } /* El triángulo de reproducir, para que se lea como un video y no como una * imagen cualquiera que alguien pegó ahí. */ rhino-editor .ProseMirror .lms-yt__play { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(-30%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55)); } /* La misma alineación, pero DENTRO del editor, donde el video todavía es un * enlace de texto y no hay reproductor que correr. Lo mostramos como bloque con * el mismo margen elástico, así el facilitador ve dónde va a quedar sin tener * que guardar. * * `display: block` sobre un enlace suena raro pero acá es lo fiel: al publicar, * ese se reemplaza por un
de bloque. `fit-content` es lo que le deja * espacio al margen para correrse; si el texto del enlace llena el ancho, la * alineación no se nota — igual que un video en ancho completo. */ rhino-editor .ProseMirror a.rhino-video--left, rhino-editor .ProseMirror a.rhino-video--center, rhino-editor .ProseMirror a.rhino-video--right { display: block; width: fit-content; max-width: 100%; } rhino-editor .ProseMirror a.rhino-video--left { margin-left: 0; margin-right: auto; } rhino-editor .ProseMirror a.rhino-video--center { margin-left: auto; margin-right: auto; } rhino-editor .ProseMirror a.rhino-video--right { margin-left: auto; margin-right: 0; } /* Piso de seguridad SOLO cuando no se eligió tamaño: dentro de una tabla * alineada la tabla vuelve a dimensionarse por contenido y un div sin ancho * intrínseco colapsaría igual que antes de aspect-ratio. 240px es el mínimo con * el que un reproductor sigue siendo usable. * * Excluye los tamaños explícitos a propósito: `min-width` le gana a * `max-width`, así que con el piso puesto siempre, sm/md/lg terminaban todos * en 240px en cualquier contenedor angosto — se veían idénticos. */ .rich-embed:not(.rhino-video--sm):not(.rhino-video--md):not(.rhino-video--lg) { min-width: 240px; } /* ------------------------------------------------- Adjuntos de multimedia * Las tarjetas de audio, video y archivo que emite * app/views/active_storage/blobs/_blob.html.erb. * * ── Por qué existen ───────────────────────────────────────────────────────── * Hasta acá el partial emitía el