/* Toolbar del editor del LMS.
 *
 * Sólo se carga donde hay un EDITOR (los cuatro puntos que ya cargaban
 * rhino-editor/trix). El estilo del CONTENIDO —tablas, títulos, etiquetas— vive
 * en lms_rich_text.css, que además se carga en las vistas de lectura.
 *
 * ── Por qué existe este archivo ─────────────────────────────────────────────
 * Hasta 2026-08-26 el chrome de los controles se inyectaba desde JS con un
 * <style> generado en tiempo de ejecución (rhino_floating_bar.js), y los
 * botones de la barra principal traían `style="..."` inline desde un helper de
 * Ruby. Nada de eso era inspeccionable ni tematizable: para cambiar el alto de
 * un botón había que tocar cuatro copias de la misma tira de declaraciones.
 *
 * La app es clara y no tiene modo oscuro, así que esto tampoco lo inventa.
 */

/* ── Se apagan las superficies de control propias de Rhino ──────────────────
 * CODEX dibuja la suya (rhino_toolbar.js). Se cubren las dos formas de cada
 * selector porque Rhino 0.18 renderiza en shadow DOM o en light DOM según el
 * entorno, y en el builder del admin lo hace en light DOM.
 *
 * La regla de abajo caza cualquier parte que lleve el token `toolbar`, y con eso
 * alcanza para la barra principal (`toolbar main__toolbar`) y para la burbuja de
 * formato que asomaba al seleccionar texto (`toolbar bubble-menu__toolbar`).
 */
rhino-editor::part(toolbar),
rhino-editor [part~="toolbar"] {
  display: none !important;
}

/* PERO Rhino tiene una burbuja de ENLACE aparte, que es otro elemento y no lleva
 * el token `toolbar`: `link-bubble-menu__anchored-region`, con su propio
 * `link-dialog__container` y sus botones de poner y quitar enlace. Por eso
 * sobrevivió al rediseño sin que nadie lo notara, y el facilitador terminaba con
 * DOS formas distintas de poner un enlace —la de la barra y ésta, con otro
 * aspecto y otro comportamiento— apareciendo encima del texto.
 *
 * Se apagan las regiones ancladas de las dos burbujas y no sólo su contenido: la
 * región es el envase que dibuja el marco y la flechita, así que esconder lo de
 * adentro dejaría un recuadro vacío flotando.
 *
 * Ojo con lo que NO se toca: `anchored-region` y `popover-base` a secas son
 * genéricos y los usan también el editor de texto alternativo de las imágenes y
 * el progreso de subida. Apagarlos por prefijo se llevaría eso puesto.
 */
rhino-editor::part(bubble-menu__anchored-region),
rhino-editor [part~="bubble-menu__anchored-region"],
rhino-editor::part(link-bubble-menu__anchored-region),
rhino-editor [part~="link-bubble-menu__anchored-region"] {
  display: none !important;
}

.lms-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: visible;
  background: #fff;
}

/* El editor ya no dibuja su propio borde: lo pone el wrapper, así la barra y el
 * área de escritura se leen como una sola pieza. */
.lms-editor rhino-editor {
  border: 0;
}

/* La variante de PANTALLA PROPIA (no modal): deja el chrome de la página y las
 * acciones del formulario visibles, y entrega el resto del alto al contenido.
 * La modal no la usa —no puede crecer— y ésa es la única distinción que
 * importa; quién esté mirando no cambia cuánto alto hay. */
.lms-editor:has(rhino-editor.rhino-editor--expanded) {
  min-height: calc(100vh - 250px);
}

/* Pantalla completa. La capa cubre el viewport para que el documento sea el
 * centro; título, adjuntos y visibilidad siguen en el formulario normal y
 * reaparecen al salir. Se sale con el botón de la barra o con Escape. */
body.lms-fullscreen-open {
  overflow: hidden;
}

/* Una pantalla de edición vive dentro de `.pc-reveal`, que usa transform para
 * su entrada animada. Un ancestro transformado convierte un fixed en fijo a
 * ese ancestro, no al viewport; se quita solo durante fullscreen. */
.lms-fullscreen-host {
  transform: none !important;
  animation: none !important;
}

form.lms-form--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #f4f6f8;
  overflow: hidden;
}

form.lms-form--fullscreen .pc-form-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 12px 16px 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

form.lms-form--fullscreen .pc-form-card > .mb-4:not(.pc-content-editor),
form.lms-form--fullscreen .pc-form-card > .mb-2,
form.lms-form--fullscreen .pc-form-card > .mt-4,
form.lms-form--fullscreen > .d-flex a {
  display: none;
}

form.lms-form--fullscreen .pc-content-editor {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0 !important;
}

form.lms-form--fullscreen .pc-content-editor .lms-editor {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

form.lms-form--fullscreen .pc-content-editor rhino-editor {
  flex: 1 1 0;
  min-height: 0;
}

form.lms-form--fullscreen .pc-content-editor rhino-editor::part(editor-wrapper),
form.lms-form--fullscreen .pc-content-editor rhino-editor [part~="editor-wrapper"] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

form.lms-form--fullscreen .pc-content-editor rhino-editor::part(editor),
form.lms-form--fullscreen .pc-content-editor rhino-editor [part~="editor"] {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

form.lms-form--fullscreen > .d-flex {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 10px 16px;
  border-top: 1px solid #dfe3e8;
  background: #fff;
}

/* ── La barra ───────────────────────────────────────────────────────────────
 * `position: relative` para que sirva de ancla visual, pero los menús NO se
 * posicionan contra ella: viven en document.body (ver rhino_toolbar.js).
 */
.lms-tb {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e3e6ec;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.lms-tb__row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 7px;
  background: #f7f8fa;
  /* Una tabla ancha mete muchos controles en la fila contextual; antes que
   * apilarlos y hacer saltar el alto de la barra, la fila scrollea sola. */
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Fila contextual: mismo lenguaje que la principal, con un tinte que la
 * distingue sin gritar. Es lo que reemplaza al overlay negro que aparecía
 * ENCIMA de la tabla justo sobre las filas que se querían editar. */
.lms-tb__row--ctx {
  background: #eef4ff;
  border-top: 1px solid #dbe6fb;
}

.lms-tb__row[hidden] {
  display: none;
}

.lms-tb__sep {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin: 3px 6px;
  background: #dfe3ea;
}

.lms-tb__spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* ── Botones ────────────────────────────────────────────────────────────────*/
.lms-tb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: none;
  height: 30px;
  min-width: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4a5462;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.lms-tb__btn:hover:not(:disabled) {
  background: rgba(120, 132, 150, .16);
  color: #1c2431;
}

.lms-tb__btn:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -1px;
}

.lms-tb__btn[aria-pressed="true"],
.lms-tb__btn[aria-expanded="true"] {
  background: #0d6efd;
  color: #fff;
}

.lms-tb__btn--fullscreen {
  margin-left: 4px;
  background: #fff3cd;
  color: #8a5a00;
  box-shadow: inset 0 0 0 1px #f0c36d;
}

.lms-tb__btn--fullscreen:hover:not(:disabled),
.lms-tb__btn--fullscreen.is-active {
  background: #f0a500;
  color: #fff;
}

/* Un control que no aplica se ve apagado en vez de no responder: un botón que
 * la mitad del tiempo no hace nada se lee como editor roto. */
.lms-tb__btn:disabled {
  opacity: .35;
  cursor: default;
}

/* Deshacer y rehacer: presentes pero secundarias, como en la referencia. */
.lms-tb__btn.is-ghost {
  color: #98a1af;
}

.lms-tb__lbl {
  letter-spacing: -.01em;
  white-space: nowrap;
}

.lms-tb__caret {
  font-size: 9px;
  opacity: .7;
  margin-left: -1px;
}

/* Muestra del color vigente dentro del botón, para saber qué hace sin abrirlo. */
.lms-tb__swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(120, 132, 150, .55);
  border-radius: 3px;
  background: transparent;
}

/* Los cuatro de formato se dibujan con su propio formato: se reconocen sin
 * leer el tooltip. Enganchan en `data-tip` y no en `title` porque la ayuda dejó
 * de viajar en el atributo nativo (ver el bloque de tooltips más abajo). */
.lms-tb__btn[data-tip^="Negrita"] .lms-tb__lbl    { font-weight: 800; }
.lms-tb__btn[data-tip^="Cursiva"] .lms-tb__lbl    { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.lms-tb__btn[data-tip^="Subrayado"] .lms-tb__lbl  { text-decoration: underline; }
.lms-tb__btn[data-tip^="Tachado"] .lms-tb__lbl    { text-decoration: line-through; }

/* El selector de tamaño muestra el número vigente. Ancho fijo por dígito para
 * que la barra no se corra un pixel al pasar de 10 a 24, y un poco de aire para
 * que "24 ▾" no se lea como una sola cosa. */
.lms-tb__btn[data-tip^="Tamaño"] .lms-tb__lbl {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Tooltips ───────────────────────────────────────────────────────────────
 * Propios, no el `title` del navegador (tarda ~1s y lo dibuja el sistema
 * operativo) ni los de Bootstrap (este bundle también corre dentro de
 * RailsAdmin, donde no hay garantía de `window.bootstrap`). Se ven como los de
 * Bootstrap a propósito: es el lenguaje del resto de la app.
 *
 * Viven en document.body con `position: fixed` porque la fila de la barra
 * scrollea en horizontal, y cualquier cosa dibujada dentro de ella —un
 * ::after, por ejemplo— la recortaría el `overflow` justo al asomar.
 */
.lms-tb-tip {
  position: fixed;
  z-index: 100001;
  display: none;
  max-width: 260px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #1c2431;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(28, 36, 49, .28);
}

.lms-tb-tip.is-open {
  display: block;
}

/* La flecha. `--tip-arrow` la fija el JS: es la distancia desde el borde
 * izquierdo del globo hasta el centro del control, para que siga apuntándole
 * aunque el globo se haya corrido para no salirse de la ventana. */
.lms-tb-tip::after {
  content: "";
  position: absolute;
  left: var(--tip-arrow, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
}

.lms-tb-tip[data-place="bottom"]::after {
  bottom: 100%;
  border-bottom-color: #1c2431;
}

.lms-tb-tip[data-place="top"]::after {
  top: 100%;
  border-top-color: #1c2431;
}

/* Aviso, no ayuda: el archivo pesa de más, la grabación salió vacía. Mismo
 * globo y mismo posicionamiento —es la misma pregunta contestada sin que haga
 * falta preguntarla— con el color que lo distingue de una explicación. */
.lms-tb-tip.is-error {
  max-width: 320px;
  background: #c9313f;
  font-weight: 600;
}

.lms-tb-tip.is-error[data-place="bottom"]::after { border-bottom-color: #c9313f; }
.lms-tb-tip.is-error[data-place="top"]::after    { border-top-color: #c9313f; }

/* ── Menús ──────────────────────────────────────────────────────────────────
 * Salen del flujo con position:fixed. No es capricho: el editor se abre dentro
 * de modales de Bootstrap, y un menú en el flujo quedaría recortado por el
 * overflow del cuerpo del modal justo al desplegarse. De QUIÉN cuelgan lo
 * decide rhino_toolbar.js (`portalFor`): del modal si hay uno, para quedar
 * dentro de su focus trap; de document.body si no.
 */
.lms-tb-menu {
  position: fixed;
  z-index: 100000;
  display: none;
  flex-direction: column;
  gap: 1px;
  min-width: 200px;
  padding: 5px;
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 9px;
  box-shadow: 0 2px 4px rgba(28, 36, 49, .08), 0 10px 28px rgba(28, 36, 49, .16);
  color: #1c2431;
  font-size: 13.5px;
  user-select: none;
}

.lms-tb-menu.is-open {
  display: flex;
}

/* Ningún menú puede crecer más que la ventana. Es la red de seguridad de lo de
 * arriba: si algún contenido futuro vuelve a pasarse de alto, se scrollea en
 * vez de dejar sus botones fuera de la pantalla, que es un control que
 * sencillamente no existe para quien lo mira.
 *
 * El scroll de adentro no cierra el menú: rhino_toolbar.js ya distingue el
 * scroll que MUEVE el menú del que ocurre dentro de él. */
.lms-tb-menu {
  max-height: calc(100vh - 20px);
  overflow-y: auto;
}

.lms-tb-menu__row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.lms-tb-menu__row:hover {
  background: #eef0f4;
}

.lms-tb-menu__row:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.lms-tb-menu__row[aria-checked="true"] {
  background: #0d6efd;
  color: #fff;
}

.lms-tb-menu__row[aria-checked="true"] .lms-tb-menu__key {
  color: rgba(255, 255, 255, .75);
}

/* Fila que ahora no aplica (combinar sin dos celdas marcadas, quitar etiqueta
 * donde no hay ninguna). Se muestra apagada en vez de esconderse: así el menú
 * no cambia de alto ni de orden entre aperturas, y la opción se puede aprender
 * dónde está aunque en este momento no se pueda usar. */
.lms-tb-menu__row.is-disabled {
  opacity: .38;
  cursor: default;
}

.lms-tb-menu__row.is-disabled:hover {
  background: transparent;
}

.lms-tb-menu__key {
  flex: none;
  width: 22px;
  color: #8c95a3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .03em;
}

.lms-tb-menu__text {
  flex: 1;
}

/* Las filas que traen una MUESTRA del formato (los tamaños, las etiquetas) se
 * dibujan en su propio tamaño; sin esto la fila de 24 se recortaría contra el
 * padding pensado para texto de 13.5px. */
.lms-tb-menu__text > span {
  display: inline-block;
  vertical-align: middle;
}

.lms-tb-menu__sep {
  height: 1px;
  margin: 4px 6px;
  background: #e6e9ee;
}

.lms-tb-menu__label {
  padding: 7px 9px 4px;
  color: #8c95a3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* ── Paletas ────────────────────────────────────────────────────────────────
 * Cada muestra es la palabra "Aa" ya pintada, no un cuadrito: un cuadrito no
 * dice si el color va en la letra o en el fondo, y era una ambigüedad real
 * porque la paleta vieja estaba compartida entre resaltado y relleno de celda.
 */
.lms-tb-menu__pal {
  display: grid;
  grid-template-columns: repeat(9, 30px);
  gap: 4px;
  padding: 3px 6px 7px;
}

.lms-tb-menu__aa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.lms-tb-menu__aa:hover {
  border-color: #98a1af;
}

/* El blanco es el único de la fila que no se ve sobre el menú: una "Aa" blanca
   sobre fondo claro es un hueco. Su muestra va sobre un chip oscuro, que además
   dice para qué sirve el color —escribir encima de algo relleno—. */
.lms-tb-menu__aa[data-hue="blanco"] {
  background: #2f3846;
  border-color: #2f3846;
}
.lms-tb-menu__aa[data-hue="blanco"]:hover { border-color: #98a1af; }

/* Las dos filas del menú de color llevan DOCE muestras: los nueve matices de la
   rueda más lo que se agregó a cada una. Con diez columnas, las dos últimas de
   la letra caían solas a un segundo renglón y el menú se leía como una fila y
   media. El menú se ensancha para acomodarlas: son 12 × 30 + 11 de separación,
   y `rhino_toolbar.js` ya lo reacomoda si no entra contra el borde derecho de
   la ventana. */
.lms-tb-menu__pal[data-mode="text"],
.lms-tb-menu__pal[data-mode="mark"] {
  grid-template-columns: repeat(12, 30px);
}

/* La paleta del encabezado lleva diez muestras (la de "sin color" más los nueve
   matices), una más que las de texto y relleno. */
.lms-tb-menu__pal--header {
  grid-template-columns: repeat(10, 30px);
}

/* "Sin color": devuelve el encabezado al gris de fábrica. Se dibuja como una
   muestra vacía con la cruz, para que se lea como parte de la misma fila de
   opciones y no como un botón aparte. */
.lms-tb-menu__aa--none {
  background: transparent;
  border-color: #d3d8e0;
  color: #8c95a3;
  font-weight: 400;
}

.lms-tb-menu__aa[aria-checked="true"] {
  border-color: #0d6efd;
}

.lms-tb-menu__aa:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}

/* ── Grilla de tamaño de tabla ──────────────────────────────────────────────*/
.lms-tb-menu__grid {
  display: grid;
  grid-template-columns: repeat(8, 19px);
  gap: 3px;
  padding: 3px 6px 0;
}

.lms-tb-menu__cell {
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid #d3d8e0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.lms-tb-menu__cell.is-on {
  background: #0d6efd;
  border-color: #0d6efd;
}

.lms-tb-menu__gridlabel {
  padding: 8px 6px 2px;
  color: #8c95a3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  text-align: center;
  /* Ancho fijo por dígito: el cartel no salta al pasar de 3×9 a 3×10. */
  font-variant-numeric: tabular-nums;
}

/* ── Menú de enlace ─────────────────────────────────────────────────────────*/
.lms-tb-menu--form {
  min-width: 268px;
}

.lms-tb-menu__input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1c2431;
}

.lms-tb-menu__input:focus {
  outline: 2px solid #0d6efd;
  outline-offset: -1px;
  border-color: #0d6efd;
}

/* Dirección que no se puede publicar (javascript:, data:). Se marca el campo en
   vez de dejar el botón sin respuesta. `:focus` de arriba iría después en la
   cascada y ganaría el outline azul, así que el rojo se declara acá abajo. */
.lms-tb-menu__input.is-invalid,
.lms-tb-menu__input.is-invalid:focus {
  border-color: #c9313f;
  outline-color: #c9313f;
}

.lms-tb-menu__actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 0 2px;
}

.lms-tb-menu__go {
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: #0d6efd;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lms-tb-menu__go:hover {
  background: #0b5ed7;
}

/* ── Grabador de audio ──────────────────────────────────────────────────────
 * El panel de rhino_media_recorder.js (audio y video). Estados en `data-state` sobre el propio
 * menú (idle / recording / ready / blocked); el JS decide cuál, la hoja decide
 * cómo se ve cada uno.
 */
.lms-tb-rec {
  min-width: 288px;
  gap: 8px;
  padding: 10px;
}

.lms-tb-rec__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* El botón de grabar es rojo y redondo porque es el único control de toda la
 * barra que enciende un aparato del que el usuario tiene que estar al tanto.
 * Que no se confunda con "aplicar" es parte de su trabajo. */
.lms-tb-rec__main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  justify-content: center;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: #c9313f;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lms-tb-rec__main::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}

.lms-tb-rec__main:hover:not(:disabled) {
  background: #ad2733;
}

.lms-tb-rec__main:disabled {
  background: #c3c9d2;
  cursor: default;
}

/* Grabando: el punto late. Es la señal de que está tomando, redundante con el
 * medidor a propósito — si el navegador no da AudioContext, el medidor no se
 * mueve y esto sigue siendo la única prueba de vida. */
.lms-tb-rec__main.is-recording {
  background: #1c2431;
}

.lms-tb-rec__main.is-recording::before {
  border-radius: 2px;
  animation: lms-tb-rec-pulse 1.1s ease-in-out infinite;
}

@keyframes lms-tb-rec-pulse {
  50% { opacity: .25; }
}

.lms-tb-rec__clock {
  flex: none;
  min-width: 42px;
  color: #4a5462;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Últimos 30 segundos antes del corte automático. */
.lms-tb-rec__clock.is-warning {
  color: #c9313f;
  font-weight: 700;
}

/* ── Medidor ────────────────────────────────────────────────────────────────
 * Barras que se mueven con la voz. No es adorno: es lo que evita grabar dos
 * minutos en silencio porque el sistema tenía elegida otra entrada.
 */
.lms-tb-rec__meter {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 4px;
  border-radius: 8px;
  background: #f2f4f7;
}

.lms-tb-rec__meter[hidden] {
  display: none;
}

.lms-tb-rec__meter > span {
  flex: 1;
  height: 24px;
  border-radius: 2px;
  background: #0d6efd;
  transform: scaleY(.08);
  transform-origin: center;
  transition: transform .06s linear;
}

.lms-tb-rec__preview {
  width: 100%;
  height: 34px;
  accent-color: #0d6efd;
}

/* En video el mismo elemento hace de espejo mientras se graba y de reproductor
 * después, así que necesita alto de verdad. `object-fit: cover` evita las
 * bandas negras cuando la cámara no da 16:9. */
.lms-tb-rec--video .lms-tb-rec__preview {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #10151f;
  object-fit: cover;
}

/* El panel de video lleva ancho FIJO, no un mínimo.
 *
 * Con `min-width` se desbordaba media pantalla: al enchufarle la cámara, el
 * <video> adopta su tamaño intrínseco —1280×720— y el panel, que se dimensiona
 * por su contenido, crecía con él. El `width: 100%` del reproductor no lo
 * frenaba, porque el ancho del padre dependía a su vez del hijo.
 *
 * Y no era sólo feo: el panel se hacía tan alto que la fila de "Repetir" e
 * "Insertar" quedaba FUERA de la ventana. Se grababa y no había con qué
 * confirmar; parecía que el botón no existiera.
 *
 * 360px es ancho suficiente para encuadrarse y angosto para caber al lado del
 * editor. El `max-width` es para pantallas chicas, donde 360 ya no entra. */
.lms-tb-rec--video {
  width: 360px;
  max-width: calc(100vw - 24px);
}

.lms-tb-rec__preview[hidden] {
  display: none;
}

.lms-tb-rec__status {
  color: #8c95a3;
  font-size: 11.5px;
  line-height: 1.35;
}

/* Micrófono bloqueado, sin micrófono, grabación vacía: el panel dice qué pasó y
 * qué hacer, en vez de dejar un botón que no responde. */
.lms-tb-rec__status.is-error {
  color: #c9313f;
}

.lms-tb-rec__again {
  padding: 6px 12px;
  margin-right: auto;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background: #fff;
  color: #4a5462;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lms-tb-rec__again:hover {
  background: #f2f4f7;
}

.lms-tb-rec__again[hidden],
.lms-tb-rec .lms-tb-menu__go[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lms-tb__btn {
    transition: none;
  }

  .lms-tb-rec__meter > span,
  .lms-tb-rec__main.is-recording::before {
    transition: none;
    animation: none;
  }
}