/* 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 <table>, 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 <colgroup>, 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
 * <table>, width en cada <col>), 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 <div> 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 <table>. Son independientes de la
 * alineación: una tabla puede tener los dos.
 *
 * El relleno de cada celda viaja como `style` inline en el <td>/<th>, 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
 * <table> (HTML publicado y editor) y otra para el `.tableWrapper`, que es donde
 * la decoración de ProseMirror deja la clase mientras se edita.
 */
: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: #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;
}

/* 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 <a> 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; }

/* 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 <a> se reemplaza por un <div> 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;
}