y un estilo en línea gana a cualquier selector por largo que sea. Contra eso solo vale `!important`, que aquí no es pereza sino la única herramienta que existe. Además la lista de aquella sección llegaba hasta `-original-color-4` y hay al menos hasta la 10. ============================================================ */ /* La franja de color en la cabecera de cada tanda. Va al color de la superficie y NO a `transparent`, y eso hay que verlo para saberlo: esta cabecera es `sticky`, así que al desplazar se queda pegada arriba mientras los mensajes le pasan por debajo. Sin fondo opaco, el texto de los dos se superpone y no se lee ninguno. */ .message-header-contents, .message_header .message-header-contents { background: var(--m34-superficie) !important; } /* El símbolo del canal, en todas partes. Se apunta por la familia de clases y no una a una: Zulip reparte los colores con un número al final y esa lista crece cada vez que añaden uno. */ [class*="stream-privacy-original-color-"], [class*="stream-privacy-original-color-"] i, [class*="stream-privacy-original-color-"] svg, #stream_filters .stream-privacy, #stream_filters .stream-privacy i { color: var(--m34-texto-suave) !important; } /* El canal abierto sí se distingue, y por lo que importa: está abierto. Ahí el símbolo toma el acento, como el resto de la fila. */ #stream_filters .active-filter [class*="stream-privacy-original-color-"], #stream_filters .active-filter .stream-privacy, #stream_filters li.active-filter .stream-privacy i { color: var(--m34-acento) !important; } /* ============================================================ 23. LA ESCALA DEL DESIGN SYSTEM El sistema de la empresa define siete tamaños con su interlineado, su peso y su interletrado. No son siete tamaños sueltos: son una jerarquía, y lo que la hace funcionar es usarlos donde toca y no inventar valores intermedios. label-sm 11 / 14 500 horas, metadatos label-md 12 / 16 600 +0.05em etiquetas de sección body-sm 13 / 18 400 texto secundario body-md 14 / 20 400 interfaz body-lg 16 / 24 400 el cuerpo de los mensajes headline-sm 20 / 28 600 nombre de la conversación headline-md 24 / 32 600 -0.01em títulos Dos apartes del sistema, los dos por la misma razón —aquí se lee ocho horas seguidas y una maqueta con cuatro mensajes no lo tiene en cuenta—: - El cuerpo del mensaje va en **body-lg (16)** y no en body-md (14). El sistema tiene los dos; se elige el grande. - El nombre de quien escribe va en **13** y no en los 12 de label-md. A 12 px un nombre propio con apellidos se lee peor de lo que la maqueta sugiere, donde solo hay dos interlocutores. El espaciado es el suyo sin cambios: 4 / 8 / 16 / 24 / 32. ============================================================ */ /* --- Etiquetas de sección de la barra lateral (VISTAS, CANALES...) --- */ .left-sidebar-title, #streams_header .left-sidebar-title, #views-label-container .left-sidebar-title, #direct-messages-section-header .left-sidebar-title { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; color: var(--m34-texto-tenue); } /* --- El nombre de la conversación en la cabecera --- */ #message_view_header .message-header-navbar-title, .message-header-stream-settings-button .narrow_title { font-size: 20px; line-height: 28px; font-weight: 600; } /* Y con ese interlineado hay que recolocar la cabecera entera, o el nombre del canal se queda pegado al borde de arriba. Zulip centra el contenido de la barra por línea base (`align-items: baseline`) contando con que el título herede el `line-height` de la barra —64px, su altura completa—: así la caja del título ocupa todo el alto y el texto sale centrado solo. Al bajarlo a los 28px del sistema de diseño, la caja mide 28 de 64 y la línea base común se sube con ella: título y descripción quedaban 18px por encima del centro, mientras el botón de miembros, que va centrado aparte, se quedaba abajo. Parecían dos filas. Se centra a mano en vez de devolverle el interlineado al título: los 28px son del sistema de diseño y valen también para el resto de la interfaz. A la descripción se le da el mismo alto de caja para que ambas líneas base coincidan, que es lo que buscaba el `baseline` original. */ #message_view_header { align-items: center; } #message_view_header .message-header-stream-settings-button, #message_view_header .navbar_title { align-items: center; } #message_view_header .narrow_description { line-height: 28px; } /* --- Los mensajes ---------------------------------------------------- */ /* El interlineado hay que ponerlo en `.message_row .message_content`: Zulip lo fija desde `.rendered_markdown p` y una regla de un solo nombre de clase no le gana. */ .message_content, .rendered_markdown, .message_row .message_content, .messagebox .rendered_markdown p { font-size: 16px; line-height: 24px; } /* El peso del nombre lo pone Zulip con cuatro clases encadenadas (`.messagebox-includes-sender .messagebox-content .message_sender .sender_name`), así que hay que repetir el mismo camino. Preguntado al navegador después de fallar dos veces adivinando. */ .sender_name, .message_sender_name, .message_header .sender_name, .messagebox .sender_name, .message_row .sender_name, .messagebox-includes-sender .messagebox-content .message_sender .sender_name { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.03em; } .message_time, .message-time, .recipient_row_date { font-size: 11px; line-height: 14px; font-weight: 500; color: var(--m34-texto-tenue); } /* --- El espaciado del sistema: 4 / 8 / 16 / 24 ----------------------- */ /* Las filas de la barra lateral. La maqueta usa `py-1.5`, o sea 6, y no los 8 de `sm`: con 8 caben tres canales menos en pantalla, y aquí hay veinte. El aire entre filas lo pone el `space-y-xs` de 4. */ /* 4 y no 6: cada píxel de más por fila se acumula veinte veces y descuadra el reparto de alturas que Zulip calcula para esta columna. Con 6 el navegador contaba un solapamiento más que con los 3 suyos; con 4 el aire se nota y el desfase no. */ #stream_filters .bottom_left_row, #left-sidebar-navigation-list .top_left_row, #global_filters .top_left_row { padding-top: 4px; padding-bottom: 4px; } /* El `space-y-xs` de 4 px entre filas que pide la maqueta se retira por el mismo motivo que el margen entre secciones: cuatro píxeles por veinte canales son ochenta de más, y Zulip reparte esta columna con alturas que calcula por su cuenta. El resultado eran los rótulos "MENSAJES DIRECTOS" y "CANALES" pintados encima de dos canales. */ /* El espaciado entre secciones NO se toca, y esto hay que dejarlo escrito porque la tentación va a volver. El sistema pide 24 px (lg) entre un grupo y el siguiente. Se puso, y la barra lateral se rompió: la lista de canales aparecía pintada ENCIMA de mensajes directos, con "ayuda-ti" solapando el rótulo "CANALES". Medido: la lista empezaba en y=343 cuando su título estaba en y=518. El motivo es que **Zulip calcula con JavaScript la altura de cada sección** de esta columna para repartirse el scroll entre vistas, directos y canales. Un margen que él no conoce descuadra ese reparto, y el resultado no es un espacio de más: es contenido superpuesto. Así que aquí manda la mecánica de Zulip y no el espaciado del sistema. El aire entre secciones se queda como él lo calcula. */ .left-sidebar-title { margin-bottom: 4px; } /* Los rótulos de sección, con fondo propio. Medido: en esta columna hay elementos que se pisan —"asesores" aparecía escrito encima de "MENSAJES DIRECTOS"—. Y no lo causa esta hoja: desactivándola entera, el navegador cuenta CUATRO solapamientos y con ella tres. Viene de cómo Zulip reparte la altura de las secciones cuando una de ellas está plegada. Perseguir la causa dentro de su mecanismo de scroll es meterse donde no hay salida. Lo que sí se puede es que el rótulo TAPE: con fondo opaco y por encima en el orden de pintado, lo que pase por debajo deja de verse a través. */ #left-sidebar .left-sidebar-title, #left-sidebar .stream-list-subsection-header, #left-sidebar #views-label-container { position: relative; z-index: 2; /* Tiene que ser EXACTAMENTE el fondo de la columna, y por eso es la misma variable y no un color parecido: si los dos se separan, el rótulo deja de tapar y pasa a verse como una banda. Ese es también el motivo de que la columna no lleve degradado. */ background-color: var(--m34-columna); } /* --- El buscador, en pastilla ---------------------------------------- */ #searchbox .navbar-search, #search_query, #searchbox_form, #filter_streams, #user_filter_icon + input, #left-sidebar .input-append input { border-radius: var(--m34-radio-pastilla); } /* ============================================================ 24. LA BARRA LATERAL, EN EL ROJO DE LA CASA Lo que define la maqueta es el contraste: una columna de color a la izquierda y todo lo demás claro. El sistema la pinta de azul marino (#131b2e), que aquí no cabe —serían dos identidades conviviendo en la misma pantalla—, y el primer intento la pasó a un burdeos casi negro con la misma luminancia que el azul de ellos. Se medía bien y se veía apagado, que es el fallo de copiar la luminancia y no la intención: ellos usan un color oscuro porque su marca es azul y el azul oscuro sigue siendo azul; el rojo oscurecido hasta 0.011 deja de ser rojo y se lee como marrón. Así que la columna va en el rojo corporativo pleno, #A50004, el mismo de los SVG del logotipo. El tono y todo lo que se pinta encima están en las variables --m34-columna-*, arriba, con sus contrastes medidos. ============================================================ */ /* Las dos columnas llegan de arriba abajo, y esto hay que dejarlo escrito porque se intentó arreglar tres veces por el sitio equivocado. El síntoma: por debajo de la última fila de la lista se acababa el color y asomaba el fondo de la aplicación. En las dos columnas. Lo que parecía la causa —y no lo era— es que `#left-sidebar` y `#right-sidebar` no declaran alto y crecen con su contenido. De ahí a pintar sus contenedores, `.column-left` y `.column-right`, que son `position: absolute` y sí van de arriba abajo. No cambió nada, y preguntándole al CSS compilado se ve por qué: .app-main .column-left .left-sidebar, .app-main .column-right .right-sidebar { position: fixed; z-index: 100 } Las columnas están **fuera del flujo**. No las contiene su contenedor: el contenedor mide CERO de alto, porque su único hijo es fijo, y un fondo sobre una caja de altura cero no pinta nada. Así que el alto se les da a ellas. Con `position: fixed`, `top` y `bottom` juntos las estiran a la ventana entera; con uno solo, no —el navegador necesita las dos referencias para resolver un alto `auto`—. Y `top: 0` no las mueve de donde ya estaban: su posición estática ya era esa, y el hueco de la barra superior lo abre el `padding-top` que Zulip les pone, no una coordenada. Que el color suba por detrás de la barra superior no se ve: la barra es `position: fixed` con z-index 102 y las columnas están en 100, así que pasan por debajo. */ /* Y antes que nada, el alto de la página, que es de donde venía todo. Zulip mide su alto con una cadena de porcentajes: `.app-main` toma el 100 % de `.app`, `.app` el 100 % de `body`... y ahí se rompe. En el CSS compilado, `html` lleva `height: 100%` y `body` NO lleva ninguna altura, y un 100 % de algo sin altura vale `auto`. Resultado: la aplicación medía lo que medía su contenido —en una vista sin mensajes, bastante menos que la ventana— y por debajo asomaba el fondo del `body`. Las tres columnas se cortaban a la vez y a distinta altura según lo que llevara cada una dentro, que es el "disparejo". Esto no se ve en el fuente de Zulip, donde la medida es `var(--full-height-dynamic-viewport)`: en la build que sirve este servidor esa variable se compiló a `100%`, no a `100dvh`, así que la cadena depende entera de que `body` tenga alto. Se le da el eslabón que falta. Va acotado con `:has(.app)` para no tocar el `body` de las páginas públicas —el acceso, los avisos de error—, que usan esta misma plantilla y sí tienen que crecer con su contenido. */ body:has(.app) { height: 100%; } #left-sidebar, #right-sidebar { top: 0; bottom: 0; } #left-sidebar { background-color: var(--m34-columna); border-right: 1px solid var(--m34-columna-borde); } /* El texto de la columna, en los dos niveles de la maqueta. Ella no usa dos grises apagados: usa BLANCO puro para todo lo que se pulsa —el nombre de quien entra y cada botón del menú— y reserva un segundo tono para el dato que solo acompaña ("Rol: ADMIN"). Dos niveles, y ninguno de los dos es tenue. Los valores y sus contrastes están arriba, en las variables; aquí solo se reparten. */ #left-sidebar, #left-sidebar .bottom_left_row, #left-sidebar .top_left_row, #stream_filters a, #left-sidebar-navigation-list a, #global_filters a, #left-sidebar .narrow-filter a { color: var(--m34-columna-texto); } #left-sidebar .zulip-icon, #left-sidebar i, #stream_filters .stream-privacy, #stream_filters [class*="stream-privacy-original-color-"] { color: var(--m34-columna-texto) !important; } /* Las etiquetas de sección: VISTAS, CANALES, MENSAJES DIRECTOS. Son el equivalente del "Rol: ADMIN" de la maqueta —acompañan, no se pulsan—, así que llevan el segundo tono y no un gris más. */ #left-sidebar .left-sidebar-title { color: var(--m34-columna-texto-2); } /* Bajo el ratón, una capa clara por encima del rojo. Es lo que hace Material sobre un contenedor de color; el `surface-container-low` que pone el sistema daría un destello blanco en cada fila. El `bg-white/5` que la maqueta pinta en REPOSO no se copia. Allí son cinco botones sueltos y la pastilla los separa; aquí la misma regla convertiría veinte canales en veinte pastillas apiladas, que es ruido y no jerarquía. El reposo se queda transparente y el 12 % del ratón se sigue leyendo bien contra él. */ #stream_filters li:hover .bottom_left_row, #left-sidebar-navigation-list li:hover .top_left_row, #global_filters li:hover .top_left_row { background-color: var(--m34-columna-hover); } /* Y el ratón no cambia el color del texto. Antes lo subía de un gris a blanco; con el reposo ya en blanco esa regla no hacía nada, así que no está escrita: en la maqueta el estado lo marca el fondo, no la tinta, y una regla muerta solo haría creer que aquí hay dos niveles de texto donde hay uno. */ /* La fila abierta: pastilla BLANCA con el rojo escrito dentro. Es el recurso más reconocible de la maqueta y aquí gana, porque sobre una columna de color el negativo no solo señala lo abierto: es el único sitio de la columna donde el rojo aparece como tinta y no como fondo. 8.07:1 en los dos sentidos. */ #stream_filters .active-filter .bottom_left_row, #left-sidebar-navigation-list .active-filter .top_left_row, #global_filters .active-filter .top_left_row, #stream_filters li.active-filter .bottom_left_row { background-color: var(--m34-columna-activa); border-radius: var(--m34-radio-m); } #stream_filters .active-filter a, #left-sidebar-navigation-list .active-filter a, #global_filters .active-filter a, #stream_filters li.active-filter .stream-privacy, #stream_filters li.active-filter .zulip-icon, #stream_filters li.active-filter [class*="stream-privacy-original-color-"] { color: var(--m34-columna-activa-texto) !important; font-weight: 600; } /* El buscador de la columna, que sobre el rojo necesita su propia superficie. Va al 13 % por el mismo motivo que el ratón: una capa blanca rinde menos sobre este fondo que sobre un casi negro, y con el 8 % de partida el campo desaparecía. */ #left-sidebar input[type="text"], #left-sidebar .input-append input, #left_bar_filter input { background-color: var(--m34-columna-campo); border-color: var(--m34-columna-campo-borde); color: var(--m34-columna-texto); } /* El aviso del buscador, un peldaño por debajo de lo que se escribe dentro (que va en blanco), pero en el segundo tono y no en un gris. */ #left-sidebar input[type="text"]::placeholder, #left_bar_filter input::placeholder { color: var(--m34-columna-texto-2); } /* El contador de no leídos se invierte. Iba en el acento, que sobre un fondo oscuro destacaba; sobre esta columna el acento ES el fondo, y una pastilla roja encima de un fondo rojo no se ve: 1:1. Pasa a blanco con el rojo dentro, igual que la fila abierta, y sigue significando lo mismo. */ #left-sidebar .unread_count { background-color: var(--m34-columna-activa); color: var(--m34-columna-activa-texto); font-weight: 600; } /* --- 24.1 Lo que la columna de color deja al descubierto --------------- Zulip pinta de gris claro (#f0f0f0) dos franjas de la barra lateral y escribe "CREAR UN CANAL" en su morado. Con la columna clara pasaban desapercibidas; sobre el color son dos manchas y un texto ilegible. Barrido hecho con el navegador, midiendo cada fondo y cada contraste, no mirando la captura. */ #left-sidebar-search, #left-sidebar .stream-list-subsection-header, #left-sidebar .zoom-in-hide { background-color: transparent; } /* Estos dos iban juntos en la misma regla y no hacen lo mismo. Las cabeceras de subsección rotulan; "CREAR UN CANAL" es un botón. En la maqueta serían el "Rol: ADMIN" y el "Crear Sala", que no comparten color. Aquí tampoco. */ #left-sidebar .stream-list-subsection-header a, #left-sidebar .stream-list-subsection-header span, #stream_filters .zoom-in-hide a { color: var(--m34-columna-texto-2) !important; } /* "CREAR UN CANAL" cuelga de #subscribe-to-more-streams, que no está dentro de ninguno de los contenedores anteriores. Preguntado al navegador por su cadena completa. Es una acción, así que va en blanco como los botones de la maqueta —y por eso ya no necesita subir de tono bajo el ratón, igual que las filas de canal—. */ #subscribe-to-more-streams .subscribe-more-label, #subscribe-to-more-streams .subscribe-more-link, #subscribe-to-more-streams i { color: var(--m34-columna-texto) !important; } /* El panel de bienvenida lleva el degradado de marca, que sobre una columna clara destacaba y sobre esta se funde: son los dos el mismo rojo. No se le cambia el color —es la tarjeta de la casa— sino que se le da un borde y un poco de relieve para despegarlo del fondo. */ #mass34-bienvenida { /* El borde va en 0.38 y no en 0.16, y la sombra cerrada. El panel lleva el degradado de marca —#A50004 a #7D0003—, o sea que su borde superior es EXACTAMENTE el color de la columna que tiene detrás: lo único que lo separa es su propio contorno, así que tiene que verse. */ border: 1px solid rgba(255, 255, 255, 0.38); border-radius: var(--m34-radio-l); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); /* El panel va `position: fixed` con z-index 1, y en cuanto la columna de la izquierda pasó a tener fondo propio se puso a pintarse encima de él: el panel seguía ahí, visible y con su tamaño, pero tapado. Se comprobó preguntando al navegador qué elemento hay en el punto central del panel, y respondía `#left-sidebar`. Y no basta con subirlo un poco: el panel cuelga del `body`, mientras que la columna vive dentro de `.app`, que tiene **z-index 99**. Desde fuera, toda la aplicación está en ese nivel, así que el panel tiene que superarlo a él y no a la columna. Preguntado al navegador por la cadena de apilamiento de los dos después de que un z-index de 5 no cambiara nada. */ z-index: 101; } /* --- 24.2 Y LA DE LA DERECHA, IGUAL QUE LA DE LA IZQUIERDA ------------- Las dos columnas de la pantalla van del mismo rojo, con el contenido claro entre ellas. Comparten las variables `--m34-columna-*`, así que el tono se sigue cambiando desde un solo sitio y las dos se mueven a la vez. Nada de esto vuelve a medirse: los contrastes son los mismos, porque el fondo y las tintas son los mismos. Aquí NO se repiten los selectores de la izquierda, y no es por ahorrar líneas. Aquella son listas que Zulip pinta con reglas propias y colores heredados; esta está escrita casi entera con variables suyas —`--color-text-sidebar-row`, `--color-text-sidebar-heading`, `--color-buddy-list-highlighted-user`—. Reasignarlas DENTRO de la columna es lo que pide esta hoja: sobrevive a que Zulip reorganice sus selectores, y un selector más largo no. La que más trabaja es `--color-background`. Zulip la usa aquí para tres cosas que tienen que ser exactamente el fondo de la columna: el fondo opaco de la cabecera y, en el punto de presencia, su relleno y el anillo de 1.5 px que lo despega del avatar. Apuntándola al rojo, las tres se colocan solas; escritas a mano habrían sido tres sitios donde olvidarse del cambio siguiente. Va acotada a `#right-sidebar` y no al `:root` justamente por eso: es la variable del fondo de TODA la aplicación, y soltarla fuera pintaría de rojo la columna del centro. ---------------------------------------------------------------------- */ /* Y las capas que monta simplebar alrededor de las listas. Son cuatro divs que él inserta por su cuenta, no están en la plantilla y ninguno se ve hasta que hay un color detrás que no coincide. Van las dos columnas, que llevan el mismo scroll. */ #left-sidebar .simplebar-wrapper, #left-sidebar .simplebar-mask, #left-sidebar .simplebar-offset, #left-sidebar .simplebar-content-wrapper, #right-sidebar .simplebar-wrapper, #right-sidebar .simplebar-mask, #right-sidebar .simplebar-offset, #right-sidebar .simplebar-content-wrapper, #right-sidebar #buddy_list_wrapper_padding, #right-sidebar .invite-user-shortcut { background-color: transparent; } #right-sidebar { background-color: var(--m34-columna); border-left: 1px solid var(--m34-columna-borde); /* Los fondos opacos de dentro: la cabecera y el punto de presencia. */ --color-background: var(--m34-columna); /* Los dos niveles de texto, los mismos que en la izquierda: blanco para las personas, el segundo tono para lo que solo rotula. */ --color-text-default: var(--m34-columna-texto); --color-text-sidebar-base: var(--m34-columna-texto); --color-text-sidebar-row: var(--m34-columna-texto); --color-text-url: var(--m34-columna-texto); --color-text-url-hover: var(--m34-columna-texto); --color-text-sidebar-heading: var(--m34-columna-texto-2); --color-text-sidebar-action-heading: var(--m34-columna-texto-2); --color-text-sidebar-action-heading-hover: var(--m34-columna-texto); --color-text-empty-list-message: var(--m34-columna-texto-2); --color-sidebar-action: var(--m34-columna-texto-2); --color-sidebar-action-hover: var(--m34-columna-texto); --color-vdots-hint: rgba(255, 255, 255, 0.45); --color-vdots-visible: var(--m34-columna-texto-2); --color-vdots-hover: var(--m34-columna-texto); /* El estado, marcado con el fondo y no con la tinta. */ --color-buddy-list-highlighted-user: var(--m34-columna-hover); --color-background-hover-narrow-filter: var(--m34-columna-hover); --color-background-sidebar-action-hover: var(--m34-columna-hover); --color-background-sidebar-action-heading-hover: var(--m34-columna-hover); --color-shadow-sidebar-row-hover: rgba(255, 255, 255, 0.22); /* Las líneas de separación y el hueco del avatar mientras carga. */ --color-border-sidebar: rgba(255, 255, 255, 0.16); --color-border-sidebar-subheader: rgba(255, 255, 255, 0.16); --color-buddy-list-avatar-loading: rgba(255, 255, 255, 0.12); /* El buscador de personas. Zulip lo monta con su componente `filter-input` y TODO lo suyo sale de estas cinco variables: el fondo —blanco puro en tema claro, que es la caja clara que se veía en medio del rojo—, el contorno, que va en `outline` y no en `border`, y el color de la lupa y de la equis de limpiar. Escribir una regla para el input no habría bastado: el contorno y los dos iconos no cuelgan de él. */ --color-background-input: var(--m34-columna-campo); --color-background-input-focus: rgba(255, 255, 255, 0.2); --color-outline-input: var(--m34-columna-campo-borde); --color-outline-input-hover: rgba(255, 255, 255, 0.4); --color-outline-input-focus: var(--m34-columna-texto); --color-text-neutral-icon-button: var(--m34-columna-texto-2); } /* La franja de la cabecera, que es donde va ese buscador. Zulip la pinta con `--color-background`, que arriba ya apunta al rojo, pero aquí se escribe además explícita y con dos ids. No es cinturón y tirantes: esta franja va pegada arriba y tapa las filas que pasan por debajo al hacer scroll, así que tiene que ser opaca Y exactamente del color de la columna. Es el mismo caso que los rótulos de sección de la izquierda, y la única parte de las dos columnas donde un color que no coincida no se ve como un tono raro sino como texto pisado. */ #right-sidebar #userlist-header { background-color: var(--m34-columna); } /* Y los contenedores de en medio no pintan: el color lo pone la columna y ellos lo dejan pasar. */ #right-sidebar .right-sidebar-items, #right-sidebar #user-list, #right-sidebar #buddy_list_wrapper, #right-sidebar .buddy-list-section-container, #right-sidebar .buddy-list-section, #right-sidebar #buddy-list-loading-subscribers, #right-sidebar .simplebar-content { background-color: transparent; } /* Y lo que no pasa por ninguna variable suya. */ /* Del buscador solo queda aquí la tinta: el fondo, el contorno y los iconos los ponen las variables de arriba, que es donde Zulip los busca. Va por el atributo y por `.input-element` porque su componente envuelve el input en dos capas y no siempre deja el `type` a mano. */ #right-sidebar input[type="text"], #right-sidebar .input-element { color: var(--m34-columna-texto); } #right-sidebar input[type="text"]::placeholder, #right-sidebar .input-element::placeholder { color: var(--m34-columna-texto-2); } /* Los iconos: la lupa del campo, la equis de limpiarlo, los tres puntos del menú y el triángulo que pliega cada sección. */ #right-sidebar .zulip-icon, #right-sidebar i { color: var(--m34-columna-texto); } /* Los no leídos, invertidos igual que los de la izquierda: una pastilla del acento sobre un fondo que YA es el acento no se ve. */ #right-sidebar .unread_count { background-color: var(--m34-columna-activa); color: var(--m34-columna-activa-texto); font-weight: 600; } /* El punto de presencia se queda VERDE, y conviene dejar escrito por qué, porque verde sobre rojo es el par que primero salta a la vista. No se cambia porque ese verde significa algo —conectado— y es el mismo que se usa en el doble check de leído: pintarlo de blanco lo dejaría igual que el punto de "ausente" salvo por la forma. Sobre este rojo contrasta 3.15:1, o sea que se distingue por luminancia y no solo por tono, que es lo que hace falta para quien no separa el rojo del verde. Su anillo, en cambio, ya no hay que tocarlo: sale del `--color-background` de arriba y por tanto es del rojo de la columna. */ /* ============================================================ 25. LOS MENSAJES, EN BURBUJA La maqueta pone cada mensaje en una tarjeta: los ajenos en superficie clara con borde, los propios en el color principal y empujados a la derecha. Queda dicho, porque se avisó antes de hacerlo y sigue siendo verdad: **la burbuja alternada es un patrón de conversación entre dos.** La maqueta tiene dos interlocutores; el canal `asesores` tiene veinte, y ahí el zigzag cansa más que ayuda. Se hace porque se ha pedido dos veces; si un día se quiere volver atrás, se borra esta sección entera y la interfaz vuelve a la lista plana. Lo que NO se hace, a propósito: mover el avatar al otro lado en los mensajes propios. Habría que invertir el orden de la caja entera, y ahí cuelgan la hora, la estrella y los checks de leído. El resultado se parece igual y se rompe mucho menos. Cuáles son propios lo marca `mass34-checks.js` con la clase `mass34-propio`: Zulip no lo dice en el DOM, y ese módulo ya lo sabe porque se lo pregunta a la API para pintar los checks. ============================================================ */ .message_row .message_content { display: inline-block; box-sizing: border-box; max-width: 46em; padding: 12px; background-color: var(--m34-superficie); border: 1px solid var(--m34-borde-fuerte); /* La esquina de arriba a la izquierda, más cerrada: es lo que da a la tarjeta el gesto de "sale de aquí" sin dibujar una cola. */ border-radius: var(--m34-radio-m) var(--m34-radio-m) var(--m34-radio-m) var(--m34-radio-s); box-shadow: var(--m34-sombra-suave); } /* Los propios: el color de la casa y a la derecha. */ .message_row.mass34-propio .message_content { background-color: var(--m34-acento); color: var(--m34-sobre-acento); border-color: transparent; border-radius: var(--m34-radio-m) var(--m34-radio-m) var(--m34-radio-s) var(--m34-radio-m); } /* Dentro de una burbuja de acento, lo que Zulip pinta con sus colores deja de leerse: enlaces, citas y código. */ .message_row.mass34-propio .message_content a, .message_row.mass34-propio .message_content code, .message_row.mass34-propio .message_content blockquote { color: var(--m34-sobre-acento); } .message_row.mass34-propio .message_content a { text-decoration: underline; } .message_row.mass34-propio .message_content code { background-color: rgba(255, 255, 255, 0.16); } .message_row.mass34-propio .message_content blockquote { border-left-color: rgba(255, 255, 255, 0.4); } /* Ceñir la burbuja a su contenido se hace con `width: fit-content`, y NO convirtiendo la caja en un flex en columna. Se probó así y el resultado fue que la hora saltaba de la derecha a encima del mensaje: dentro de esa caja no está solo el texto, también la hora, la estrella y los checks, y ponerla en columna los reordena todos. Con `fit-content` el layout de Zulip se queda como está y solo cambia el ancho de la tarjeta. */ .message_row .message_content { width: fit-content; } .message_row.mass34-propio .message_content { margin-left: auto; } /* --- 25.1 En los propios, ni avatar ni nombre ------------------------- Con la burbuja a la derecha pero el avatar y el nombre a la izquierda quedaban los dos extremos de la fila ocupados y el medio vacío: se leía como dos cosas distintas en vez de una. En la maqueta los mensajes propios no llevan ninguna de las dos cosas, y tiene sentido: ya se sabe de quién son porque están a la derecha y en el color de la casa. Repetir el nombre propio en cada mensaje no informa a nadie. El avatar se oculta con `visibility` y no con `display`, para que siga ocupando su sitio: sobre él se apoya la sangría del texto, y quitándolo de la caja los mensajes propios se desalinearían con los demás cada vez que alternan. */ /* El avatar NO cuelga de `.message_sender` sino directamente de `.messagebox-content`, al lado de él. Preguntado al navegador por su cadena; con el selector de antes no se ocultaba nada. */ .message_row.mass34-propio > .messagebox > .messagebox-content > .message-avatar, .message_row.mass34-propio .messagebox-content > .message-avatar { visibility: hidden; } .message_row.mass34-propio .message_sender .sender_name { display: none; } /* ============================================================ 26. LOS DETALLES DE LA MAQUETA Lo que quedaba por traer del design system y sí tiene equivalente en Zulip. Al final de la sección está la lista de lo que NO lo tiene, con el motivo, para que no se busque el error donde no lo hay. ============================================================ */ /* --- 26.1 La barra de desplazamiento ---------------------------------- 6 px, sin pista y con el pulgar redondeado. Es de las cosas que menos se miran y más se notan. */ #left_sidebar_scroll_container ::-webkit-scrollbar, #right-sidebar ::-webkit-scrollbar, .message-list ::-webkit-scrollbar, .overlay-container ::-webkit-scrollbar, .simplebar-content-wrapper::-webkit-scrollbar, #compose-textarea::-webkit-scrollbar { width: 6px; height: 6px; } #left_sidebar_scroll_container ::-webkit-scrollbar-track, #right-sidebar ::-webkit-scrollbar-track, .message-list ::-webkit-scrollbar-track, .simplebar-content-wrapper::-webkit-scrollbar-track, #compose-textarea::-webkit-scrollbar-track { background: transparent; } #left_sidebar_scroll_container ::-webkit-scrollbar-thumb, #right-sidebar ::-webkit-scrollbar-thumb, .message-list ::-webkit-scrollbar-thumb, .simplebar-content-wrapper::-webkit-scrollbar-thumb, #compose-textarea::-webkit-scrollbar-thumb { background-color: var(--m34-borde-fuerte); border-radius: 20px; } /* En las dos columnas de color el pulgar gris no se ve. La regla va después de la anterior a propósito: el selector de la derecha es el mismo que allí, misma especificidad, así que manda por orden. */ #left_sidebar_scroll_container ::-webkit-scrollbar-thumb, #right-sidebar ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.22); } /* --- 26.2 Los tooltips ------------------------------------------------- `inverse-surface` sobre `inverse-on-surface`, que es como los pinta el sistema: oscuros sobre una interfaz clara. */ .tippy-box, .tippy-box[data-theme~="zulip"] { background-color: #263143; color: #ecf1ff; border-radius: var(--m34-radio-s); font-size: 11px; line-height: 14px; font-weight: 500; box-shadow: var(--m34-sombra-suave); } .tippy-box .tippy-arrow, .tippy-box[data-theme~="zulip"] .tippy-arrow { color: #263143; } /* --- 26.3 Las reacciones, en pastilla ---------------------------------- */ .message_reactions .message_reaction { background-color: var(--m34-superficie-alt); border: 1px solid var(--m34-borde); border-radius: var(--m34-radio-pastilla); padding: 2px 8px; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--m34-texto-suave); transition: background-color var(--m34-transicion); } .message_reactions .message_reaction:hover { background-color: var(--m34-superficie); } /* La que uno ha puesto va en el acento: es la unica que dice algo de quien mira. */ .message_reactions .message_reaction.reacted { background-color: var(--m34-acento-tenue); border-color: var(--m34-acento); color: var(--m34-acento); } .message_reactions .reaction_button { border-radius: var(--m34-radio-pastilla); color: var(--m34-texto-tenue); } /* --- 26.4 El check de leído, en verde --------------------------------- La maqueta usa #10B981 para el doble check. Se cambia el azul por su verde para seguirla. Conviene saber que en el sistema ese mismo verde marca también quién está conectado. Aquí no chocan porque nunca aparecen juntos —uno va en el avatar y el otro junto a la hora—, pero si algún día se ponen cerca, este es el sitio donde separarlos. */ .mass34-check-leido { color: #10b981; } /* --- 26.5 El punto de presencia --------------------------------------- */ /* Ojo: `.user-circle-active` se usa para DOS cosas distintas. En la lista de personas es el punto redondo de 12x12 que se quiere pintar; en la barra lateral izquierda es una barra de 9x27 sin radio, que con el verde de fondo aparecía como un trazo al lado del nombre. Medido con el navegador después de verlo en la captura. Por eso la regla va acotada al sitio, y no a la clase suelta. */ #right-sidebar .user-circle-active, #buddy-list-users-matching-view .user-circle-active, .message-avatar .user-circle-active, .user_circle_green { background-color: #10b981; } /* --- 26.6 La caja de escribir ------------------------------------------ Rehecha contra la maqueta nueva, que la trata como una sola pastilla: una franja de fondo pegada abajo y, dentro, una caja con borde y esquinas redondas que se enciende al escribir. El mapeo de sus tokens a los de aquí, uno a uno: franja bg-surface + border-t outline-variant + p-sm -> --m34-superficie-alt, --m34-borde-fuerte, 8px caja bg-surface-container-low + border + rounded-xl + p-xs -> --m34-fondo, --m34-borde-fuerte, 8px, 4px al escribir focus-within:border-secondary -> --m34-acento (su secondary es azul; aquí manda el rojo de la casa, que es el color de foco de toda esta hoja) enviar bg-primary-container + rounded-full + w-8 h-8 -> --m34-acento, redondo, 32 px `outline-variant` de la maqueta es #c6c6cd y `--m34-borde-fuerte` también: ese no hace falta traducirlo, ya es el mismo color. Y el radio: su `rounded-xl` son 0.5rem, o sea 8, que es `--m34-radio-m` y no `--m34-radio-l`. Sus nombres de radio están corridos respecto a los de aquí, así que van por valor y no por nombre. */ /* La franja del fondo. Va en `#compose`, que es `position: fixed` a lo ancho de la pantalla con z-index 4; las dos columnas están en 100, así que la franja solo asoma por el centro y no se les mete debajo. */ #compose { background-color: var(--m34-superficie-alt); border-top: 1px solid var(--m34-borde-fuerte); padding: 8px; box-sizing: border-box; } /* La caja. Zulip la deja con las esquinas de abajo en pico (`border-radius: 9px 9px 0 0`) porque va pegada al borde de la ventana; con la franja de arriba ya tiene aire por los cuatro lados, así que se redondea entera. */ #compose-content { background-color: var(--m34-fondo); border: 1px solid var(--m34-borde-fuerte); border-radius: var(--m34-radio-m); padding: 4px; transition: border-color var(--m34-transicion); } #compose-content:focus-within { border-color: var(--m34-acento); } /* El texto, sin caja propia dentro de la caja. */ #compose-textarea, #compose-textarea:focus { background-color: transparent; border: none; box-shadow: none; outline: none; color: var(--m34-texto); /* Cuánto crece la caja según se escribe. La maqueta decía `max-h-32` —128 px, cuatro líneas—, y ese número no llegaba a aplicarse nunca: **Zulip fija el tope por estilo inline** desde `reset_compose_message_max_height()`, recalculado con el alto de la ventana, y un estilo de hoja no le gana. En una pantalla de 950 px salían 314. Se sube al 45 % de la ventana y con `!important`, que es la única forma de ganar a un inline. Redactar un mensaje largo deja de ser mirar por una rendija de cuatro líneas, y con el tope relativo la conversación nunca desaparece del todo: más de la mitad de la pantalla sigue siendo la conversación. */ max-height: min(45vh, 460px) !important; } #compose-textarea::placeholder { color: var(--m34-texto-suave); } /* La botonera. La maqueta la lleva en la MISMA fila que el texto, y eso no se puede copiar desde aquí: `#compose-content` es una columna de flex y dentro van, por este orden, los avisos, la caja de destinatario, el texto y los botones. Pasarlo a fila descolocaría el selector de canal y tema, que en la maqueta no existe porque allí el canal está fijado arriba. Lo que sí se hace es quitarle la línea que la separaba —la maqueta nueva no la tiene, la anterior sí— y el fondo propio que Zulip le pone, para que se lea como parte de la pastilla y no como una barra pegada debajo. */ #message-formatting-controls-container, .compose-scrolling-buttons-container { border-top: none; padding-top: 0; margin-top: 4px; background-color: transparent; } .compose-control-buttons-container .compose_control_button { color: var(--m34-texto-suave); border-radius: var(--m34-radio-pastilla); } .compose-control-buttons-container .compose_control_button:hover { color: var(--m34-acento); background-color: var(--m34-acento-tenue); } /* El botón de enviar. Redondo y de 32, como en la maqueta —antes estaba cuadrado de 36, que es lo que pedía la maqueta anterior—. El color no es el suyo: allí va en `primary-container`, que es el azul marino de su paleta, y aquí lo que llama a la acción es el rojo. */ #compose-send-button { width: 32px; min-width: 32px; height: 32px; padding: 0; flex: 0 0 auto; border-radius: var(--m34-radio-pastilla); background-color: var(--m34-acento); color: var(--m34-sobre-acento); border: none; } #compose-send-button:hover { background-color: var(--m34-acento-hover); } #compose-send-button:active { background-color: var(--m34-acento-activo); } #compose-send-button .zulip-icon, #compose-send-button i { color: var(--m34-sobre-acento); } /* Y la caja cerrada —"Escribir mensaje" y "Empezar una nueva conversación"—, que es lo que se ve mientras no se escribe. La maqueta no la dibuja, pero es la misma pieza en reposo: lleva la misma pastilla para que al abrirse no cambie de forma. */ #compose_buttons .reply_button_container, #compose_buttons .compose_mobile_button, #compose_buttons #new_direct_message_button { background-color: var(--m34-fondo); border: 1px solid var(--m34-borde-fuerte); border-radius: var(--m34-radio-m); } #compose_buttons .reply_button_container:hover, #compose_buttons .compose_mobile_button:hover, #compose_buttons #new_direct_message_button:hover { border-color: var(--m34-acento); } /* --- 26.7 El divisor de fecha ------------------------------------------ En la maqueta va centrado con una línea a cada lado. Zulip lo deja alineado a la derecha y sin línea. */ .message-date-container, .date_row { display: flex; align-items: center; gap: 12px; } .message-date-container::before, .message-date-container::after, .date_row::before, .date_row::after { content: ""; flex: 1; height: 1px; background-color: var(--m34-borde); } .recipient_row_date, .message-date-container .recipient_row_date { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--m34-texto-tenue); } /* --- 26.8 Los adjuntos, como tarjeta ----------------------------------- Zulip los deja como un enlace más dentro del texto. La maqueta les da una tarjeta con su icono. No se puede llegar a su tarjeta completa —el tamaño y el tipo del archivo no están en el DOM, así que no hay de dónde sacar el peso ni la extensión— pero sí al recuadro con el icono. */ .message_content a[href*="/user_uploads/"] { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 2px 0; background-color: var(--m34-superficie-alt); border: 1px solid var(--m34-borde); border-radius: var(--m34-radio-m); text-decoration: none; transition: background-color var(--m34-transicion); } .message_content a[href*="/user_uploads/"]:hover { background-color: var(--m34-superficie); text-decoration: none; } .message_content a[href*="/user_uploads/"]::before { content: "\1F4CE"; font-size: 14px; opacity: 0.7; } /* Dentro de una burbuja propia, la tarjeta va sobre el acento. */ .mass34-propio .message_content a[href*="/user_uploads/"] { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); } .mass34-propio .message_content a[href*="/user_uploads/"]:hover { background-color: rgba(255, 255, 255, 0.22); } /* ── Lo que NO tiene equivalente y por qué ───────────────────────────── No es que falte por hacer: es que no existe en Zulip y no se puede inventar desde una hoja de estilos. - El panel de hilos de la derecha (360 px). Matrix y la maqueta tienen hilos; Zulip tiene TEMAS, que son otra cosa: no cuelgan de un mensaje sino del canal. Y esa columna ya la ocupa la lista de personas. - Las pestañas Canales / Miembros / Archivos de la cabecera. No hay ninguna vista de archivos del canal a la que llevar. - El menú de comandos con barra. Zulip no tiene comandos de barra. - La ficha del adjunto con tamaño y tipo. El DOM solo trae el enlace; el peso del archivo no viaja con él. - La vista previa de respuestas con los avatares apilados. Otra vez los hilos. - El aviso de sistema en pastilla centrada. Los mensajes de los bots son mensajes normales y no se distinguen en el DOM. ────────────────────────────────────────────────────────────────────── */ /* ============================================================ 27. QUE LAS BURBUJAS FLOTEN Con las burbujas puestas, la pantalla seguía sin parecerse a la maqueta, y el motivo no era ninguna de las dos: era lo que hay DEBAJO. Medido: cada `.message_row` es una banda blanca de 826 px de ancho con un borde a la izquierda, y el contenedor de la lista (`#main_div`) va en gris #f0f0f0. Así que había una caja blanca a todo lo ancho y, dentro, otra caja blanca con borde —la burbuja—. Dos recuadros, uno metido en el otro, que es justo lo que se veía raro sin saber señalarlo. En la maqueta el fondo es uno y continuo, y encima flotan las tarjetas. Eso es lo que se arregla aquí: - el fondo de la lista pasa al del sistema - las filas se quedan sin fondo ni borde - lo que sí necesita seguir viéndose —el mensaje bajo el ratón, el seleccionado, el que te menciona— se marca sobre ese fondo ============================================================ */ /* Estos cinco contenedores del feed siguen escritos aunque `--color-background` ya sea este mismo celeste: Zulip los pinta con variables propias y distintas de la del fondo general, así que heredar no basta. Es el mismo valor, no la misma regla. */ #main_div, .message-feed, #message_feed_container, #message-lists-container, .message-list { background-color: var(--m34-fondo); } /* Las filas, sin fondo ni borde: la tarjeta es la burbuja, no la fila. */ .message_row, .message_row.selectable_row, .recipient_row { background-color: transparent; border-left: 0; border-right: 0; } /* --- Lo que la fila blanca sí hacía y hay que reponer ------------------ El fondo de la fila no estaba de adorno: marcaba el mensaje bajo el ratón y el seleccionado con el teclado. Sin él se pierden los dos, y el segundo es el que usa quien navega sin ratón. Se pasan a la burbuja, que es donde ahora vive el mensaje. */ .message_row:hover .message_content { border-color: var(--m34-borde-fuerte); box-shadow: var(--m34-sombra-suave); } .message_row.mass34-propio:hover .message_content { background-color: var(--m34-acento-hover); } /* El seleccionado con el teclado. La primera versión le puso un contorno de 2 px en el acento y quedó fatal, y el motivo es de Zulip: **siempre hay un mensaje seleccionado**, se esté usando el teclado o no. Así que en pantalla había permanentemente una burbuja con marco rojo, que se leía como un error o como algo pendiente. Se cambia por un halo tenue del mismo acento: se ve dónde está el cursor si lo buscas y no grita si no. */ .message_row.selected_message .message_content, .message_row.focused_message .message_content { box-shadow: 0 0 0 3px var(--m34-acento-tenue-fuerte); } /* --- El aire entre mensajes ------------------------------------------- La maqueta separa las tarjetas 8 px (sm) y las tandas 16. Sin la banda blanca haciendo de fondo, ese aire es lo único que separa un mensaje del siguiente. */ .message_row { padding-top: 4px; padding-bottom: 4px; } .recipient_row + .recipient_row { margin-top: 16px; } /* La cabecera de la tanda deja de ser una franja y pasa a ser un rótulo sobre el fondo. Su fondo opaco sigue haciendo falta porque es `sticky` (ver la sección 22), pero ahora se ciñe al texto. */ .message_header .message-header-contents { display: inline-flex; align-items: center; border-radius: var(--m34-radio-pastilla); padding: 4px 12px; box-shadow: var(--m34-sombra-suave); } /* ============================================================ 28. LOS AVISOS DEL SISTEMA Quién creó el canal, quién invitó a quién, quién cambió los permisos. Zulip los trata como mensajes normales —con su avatar, su nombre y su burbuja— y ocupan en la conversación el mismo sitio que lo que escribe una persona. En la maqueta van en una pastilla gris centrada, pequeña y sin avatar. Se leen si hacen falta y no compiten con la conversación, que es lo que se busca: en un canal de trabajo esos avisos son ruido casi siempre. Cuáles son lo marca `mass34-sistema.js` con la clase `mass34-sistema`: el DOM no dice si un mensaje lo escribió un bot, así que hay que preguntárselo a la API y cruzarlo con el `u-` del avatar. ============================================================ */ .message_row.mass34-sistema .message_content { display: block; width: fit-content; max-width: 40em; margin: 0 auto; padding: 8px 16px; background-color: var(--m34-superficie-alt); border: 1px solid var(--m34-borde); box-shadow: none; font-size: 12px; line-height: 18px; color: var(--m34-texto-suave); /* El texto va a la IZQUIERDA aunque la pastilla esté centrada. Centrado solo funciona en un aviso de una línea; en cuanto trae una lista —"permisos: antes esto, ahora esto otro"— el texto centrado deja los renglones sin un margen común y se lee a saltos. La pastilla se ciñe al contenido, así que en los avisos cortos se ve igual de centrada. */ text-align: left; /* Con dos o tres renglones dentro, la pastilla de extremos redondos queda desproporcionada: los lados curvos se comen el texto. Radio normal, que sigue siendo una tarjeta y no una fila. */ border-radius: var(--m34-radio-m); } /* Se probó dejar la pastilla de extremos redondos en los avisos "sin lista", pensando que serían de una línea. No lo son: el de "canal creado por…" mide 94 px de alto —tres renglones— y con los lados curvos se ve deformado. CSS no sabe contar líneas, así que el criterio no valía. Radio normal para todos, que a estos tamaños es lo que se lee como una nota al margen. */ /* --- Lo que viene dentro de un aviso --------------------------------- Estos mensajes los escribe Zulip en Markdown y traen párrafos, listas y menciones. Con los estilos normales de un mensaje, dentro de una pastilla de 12 px eso queda basto: viñetas colgando, negritas gruesas y cada mención con su propio recuadro de color. */ /* El párrafo hay que bajarlo a mano. La sección 23 pone el cuerpo de los mensajes en 16 px apuntando a `.messagebox .rendered_markdown p`, y esa regla también alcanza aquí dentro: el aviso salía con la primera línea a 16 y el resto a 12, dos tamaños en la misma pastilla. */ .message_row.mass34-sistema .message_content p, .message_row.mass34-sistema .message_content li, .message_row.mass34-sistema.messagebox .rendered_markdown p { font-size: 12px; line-height: 18px; margin: 0; } .message_row.mass34-sistema .message_content ul, .message_row.mass34-sistema .message_content ol { list-style: none; margin: 4px 0 0; padding: 0; } .message_row.mass34-sistema .message_content li { margin: 0; padding: 0; } /* "Old:" y "New:" no necesitan negrita: ya los separa el renglón. En 12 px una negrita pesa demasiado y convierte el aviso en un titular. */ .message_row.mass34-sistema .message_content strong, .message_row.mass34-sistema .message_content b { font-weight: 600; color: var(--m34-texto); } /* Los enlaces de dentro —"posting permissions" y compañía— llevan al manual de Zulip, que la sección 11 ya deja como texto muerto. Que no parezcan pulsables. */ .message_row.mass34-sistema .message_content a { color: inherit; text-decoration: none; } /* Sin avatar y sin nombre: el aviso no lo firma nadie. El avatar se esconde con `visibility` y no con `display` para que no se mueva la sangría del resto de la tanda. */ .message_row.mass34-sistema .messagebox-content > .message-avatar { visibility: hidden; } .message_row.mass34-sistema .message_sender, .message_row.mass34-sistema .sender_name { display: none; } /* Y sin la hora ni la estrella: en un aviso del sistema no hay nada que destacar ni a quién responder. */ .message_row.mass34-sistema .message_time, .message_row.mass34-sistema .message-time, .message_row.mass34-sistema .star_container { visibility: hidden; } /* Dentro de la pastilla, las menciones que Zulip pone en estos avisos —de persona y de grupo— traen cada una su recuadro de color. En un aviso que nombra a cuatro grupos seguidos eso son cuatro parches en dos renglones, y el color no dice nada: no es una mención dirigida a nadie, es el nombre de un permiso. Se quedan como texto, distinguidas solo por el peso. */ .message_row.mass34-sistema .message_content .user-mention, .message_row.mass34-sistema .message_content .user-group-mention, .message_row.mass34-sistema .message_content .stream, .message_row.mass34-sistema .message_content .topic-mention { background-color: transparent; color: var(--m34-texto); font-weight: 600; padding: 0; border: 0; } /* Zulip marca en otro color las menciones que apuntan a un grupo del que uno forma parte (`user-mention-me`). En un aviso del sistema eso tampoco informa: aquí el grupo se nombra porque cambió un permiso, no porque te llamen. */ .message_row.mass34-sistema .message_content .user-mention-me { background-color: transparent; color: var(--m34-texto); font-weight: 600; } /* Un aviso no se marca al pasar el ratón ni al seleccionarlo: no es una conversación, es una nota al margen. */ .message_row.mass34-sistema:hover .message_content, .message_row.mass34-sistema.selected_message .message_content { border-color: var(--m34-borde); box-shadow: none; } /* ============================================================ 29. LA FICHA DEL ADJUNTO La sección 26 dejó los adjuntos en un recuadro con un clip, y dicho quedó que su ficha completa —"2.4 MB · PDF Document"— no se podía porque el peso y el tipo no viajan en el DOM. Se puede: el tipo sale de la extensión y el peso de una petición `HEAD`, que devuelve el tamaño sin descargar el archivo. `mass34-adjuntos.js` pone las dos cosas y marca la familia en un atributo; aquí se le da forma. Y no es solo por parecerse a la maqueta: por aquí se mandan grabaciones de llamadas, y saber si algo pesa 80 KB o 40 MB antes de pulsar importa cuando se abre desde el móvil de una sede. ============================================================ */ .message_content a[href*="/user_uploads/"] { /* Todo en un renglón: icono, nombre y, al final, el peso y el tipo. Se probó a dos alturas —nombre arriba, "1,7 MB · Audio" debajo— como pide la maqueta, y con cuatro grabaciones en un mismo mensaje la burbuja se comía la pantalla. Un renglón por archivo dice lo mismo y deja ver la conversación. */ display: inline-flex; align-items: baseline; column-gap: 8px; max-width: 30em; padding: 5px 10px; } /* El icono, que cambia según la familia del archivo. Se pinta con emoji y no con un archivo de imagen a propósito: no añade una petición más ni un estático que mantener. */ .message_content a[href*="/user_uploads/"]::before { flex: 0 0 auto; content: "\1F4CE"; /* clip, para lo que no se reconoce */ font-size: 14px; line-height: 1; opacity: 0.75; } .message_content a[data-m34-familia="documento"]::before { content: "\1F4C4"; /* hoja de papel */ } .message_content a[data-m34-familia="hoja"]::before { content: "\1F4CA"; /* gráfico de barras */ } .message_content a[data-m34-familia="imagen"]::before { content: "\1F5BC\FE0F"; /* cuadro */ } .message_content a[data-m34-familia="audio"]::before { content: "\1F3A7"; /* auriculares */ } .message_content a[data-m34-familia="video"]::before { content: "\1F3AC"; /* claqueta */ } .message_content a[data-m34-familia="comprimido"]::before { content: "\1F5C4\FE0F"; /* archivador */ } /* El nombre del archivo. Se corta con puntos suspensivos en vez de partirse en tres líneas: los nombres que llegan aquí son largos —`archive_TATIANA_CORDOVA_242_20260827-110932_...opus`— y lo que importa de un vistazo es el principio. Lo envuelve `mass34-adjuntos.js` en un span: el nombre llega como texto suelto dentro del enlace, y al texto suelto no se le puede aplicar CSS. Sin ese span no hay forma de recortarlo sin recortar también el peso, que va detrás en el mismo renglón. */ .message_content a[href*="/user_uploads/"] .mass34-adjunto-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* El peso y el tipo, al final del renglón y sin encogerse: es el dato por el que se mira la ficha antes de abrirla desde el móvil de una sede, así que no puede ser lo primero que se corte. */ .message_content a[href*="/user_uploads/"] .mass34-adjunto-pie { flex: 0 0 auto; margin-left: auto; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--m34-texto-tenue); } /* Dentro de una burbuja propia el gris tenue no se lee sobre el acento. */ .mass34-propio .message_content a[href*="/user_uploads/"] .mass34-adjunto-pie { color: rgba(255, 255, 255, 0.78); } /* ============================================================ 30. LAS PESTAÑAS DE LA CABECERA El diseño pone junto al nombre del canal un grupo de pestañas con la activa subrayada. Las suyas son Canales / Miembros / Archivos; aquí son dos, y las que faltan no es por pereza: - **Archivos** no existe. Zulip no tiene ninguna vista de "los archivos de este canal" a la que llevar, y una pestaña que no lleva a ningún sitio es peor que no tenerla. - **Ajustes** existe, pero a un asesor `mass34-cuenta.js` le cierra esa pantalla en cuanto se abre. Misma razón. Las pone `mass34-miembros.js`, que ya montaba ahí el botón de miembros: se amplía en vez de crear otro módulo que compita por el mismo sitio de la barra. ============================================================ */ .mass34-pestanas { display: inline-flex; align-items: stretch; gap: 16px; margin-left: 12px; padding-left: 16px; /* La línea vertical que en la maqueta separa el nombre del canal de las pestañas. */ border-left: 1px solid var(--m34-borde-fuerte); flex-shrink: 0; } .mass34-pestanas .mass34-pestana { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 4px; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; color: var(--m34-texto-suave); cursor: pointer; white-space: nowrap; transition: color var(--m34-transicion), border-color var(--m34-transicion); } .mass34-pestanas .mass34-pestana:hover { color: var(--m34-texto); } /* La abierta: subrayada en el acento, como en la maqueta. */ .mass34-pestanas .mass34-pestana-activa { color: var(--m34-texto); border-bottom-color: var(--m34-acento); cursor: default; } .mass34-pestanas .mass34-pestana-activa:hover { color: var(--m34-texto); } /* A un asesor se le esconde "Miembros" (esa pantalla no se le abre), y entonces "Conversación" se queda sola. Una pestaña única no es una elección: es un adorno que ocupa sitio. Se va el grupo entero. `:has()` es lo que permite preguntar "¿le queda alguna pestaña pulsable?" sin tener que decírselo desde el JavaScript. */ body.mass34-asesor .mass34-pestanas:not(:has(.mass34-pestana:not(.mass34-pestana-activa))) { display: none; } /* Las pestañas ocupan sitio en la barra, y lo que se comprime detrás es la descripción del canal, que acababa metiéndose debajo del buscador. El buscador va en posición absoluta —lo explica la sección 6— así que no reserva su hueco: hay que dejárselo a mano. La descripción se recorta con puntos suspensivos, que para un texto de apoyo es lo correcto; el nombre del canal y las pestañas no se tocan. */ #message_view_header .narrow_description { max-width: 24em; margin-right: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ 31. EL PANEL DE TEMAS La columna de la derecha del diseño es un panel de hilos. Zulip no tiene hilos: tiene temas, que cuelgan del canal y no de un mensaje. Por eso el panel se llama "Temas de este canal" y no "Hilo" — llamarlo igual sería prometer algo que no hace. Va encima de la lista de personas y no en su lugar: esa lista es donde se ve quién está conectado y se usa a diario. Lo llena `mass34-temas.js`. ============================================================ */ /* Los colores salen de las variables `--m34-columna-*`, que son las de esta columna y ya llevan sus contrastes medidos. La primera versión de este panel usaba los grises de las superficies claras y sobre el rojo daba 1.52:1 el título y 1.16:1 los temas: ilegible. Cualquier cosa que se añada aquí dentro tiene que usar esas variables, no las generales. */ .mass34-temas { padding: 12px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--m34-columna-borde); } .mass34-temas-titulo { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--m34-columna-texto-2); margin-bottom: 8px; padding: 0 4px; } .mass34-temas-lista { list-style: none; margin: 0; padding: 0; } .mass34-tema { margin: 0; } .mass34-tema-enlace { display: block; padding: 5px 8px; border-radius: var(--m34-radio-s); font-size: 13px; line-height: 18px; color: var(--m34-columna-texto-2); text-decoration: none; /* Los temas que se escriben aquí son largos —"channel events", "seguimiento cartera septiembre"— y partirlos en tres líneas llenaría la columna. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--m34-transicion), color var(--m34-transicion); } .mass34-tema-enlace:hover { background-color: var(--m34-columna-hover); color: var(--m34-columna-texto); text-decoration: none; } /* El que se está mirando, en negativo —pastilla blanca con el rojo escrito dentro— igual que el canal abierto en la columna izquierda. Es el único sitio de la columna donde se invierten los papeles, y por eso se encuentra sin buscarlo. */ .mass34-tema-abierto .mass34-tema-enlace { background-color: var(--m34-columna-activa); color: var(--m34-columna-activa-texto); font-weight: 600; } .mass34-temas-resto { margin-top: 6px; padding: 0 8px; font-size: 11px; line-height: 14px; color: var(--m34-columna-texto-2); } /* ============================================================ 32. LOS MENSAJES, CON AIRE La conversación se leía amontonada, y no era solo cuestión de márgenes: la hora, la estrella y los checks aparecían a otra altura que la burbuja a la que pertenecen, así que entre dos mensajes había siempre una tercera línea suelta. Con las burbujas casi tocándose no se distinguía de cuál era. Se arreglan las dos cosas a la vez, porque son la misma: dar aire y poner cada dato a la altura de su mensaje. ============================================================ */ /* --- 32.1 Los checks tenían el sitio mal ------------------------------ `mass34-checks.js` cuelga el check de `.messagebox-content`, que es una rejilla con las celdas ya repartidas por Zulip (avatar, remitente, mensaje, controles, hora). El check no tiene celda asignada, así que lo colocaba el reparto automático, y caía donde hubiera hueco: - en los mensajes con cabecera, en la separación de 8px entre los controles y la hora: se quedaba en 3px de ancho, cortado; - en los mensajes sin cabecera —los que van seguidos del mismo remitente, que son la mayoría— la celda del avatar está libre, y el check se iba al extremo izquierdo de la conversación, a 700px de la burbuja roja que estaba certificando. Se le da columna propia entre los controles y la hora. Hay que reescribir la rejilla entera para añadirla, pero solo eso cambia: las otras cuatro columnas y las cuatro filas se copian de Zulip tal cual. Se excluye `content_edit_mode`, que es la variante que Zulip usa al editar un mensaje: ahí encoge la columna de controles a 0 para dejar sitio al cuadro de texto, y esta regla tiene su misma especificidad, así que sin el `:not()` ganaría la nuestra por ir después y el editor saldría estrecho. */ .message_row .messagebox-content:not(.content_edit_mode) { grid-template-columns: var(--message-box-avatar-column-width) minmax(0, 1fr) max-content max-content minmax(var(--message-box-timestamp-column-width), max-content); grid-template-areas: "avatar sender controls check time" "avatar message . . . " ". hilo . . . " ". more . . . " ". reactions . . . "; } .message_row .mass34-check { grid-area: check; justify-self: end; margin-right: 6px; } /* --- 32.2 La hora, a la altura de su burbuja -------------------------- Zulip reserva la primera fila para la línea del remitente y pone ahí la hora, los controles y —ahora— los checks; el mensaje va en la segunda. Cuando hay cabecera está bien: la hora se alinea con el nombre. Pero en los mensajes seguidos no hay nombre que mostrar, y esa primera fila se queda vacía con la hora flotando por encima de la burbuja, más cerca del mensaje anterior que del suyo. En esos mensajes se funden las dos filas: la burbuja pasa a la primera y comparte fila con la hora, los checks y los controles, que se centran sobre ella. El `.message_sender` vacío se oculta, porque al desaparecer su celda el reparto automático volvería a colocarlo en cualquier hueco —que es justo el problema de arriba. */ .message_row:not(.messagebox-includes-sender) .messagebox-content:not(.content_edit_mode) { grid-template-areas: "avatar message controls check time" ". hilo . . . " ". more . . . " ". reactions . . . "; } .message_row:not(.messagebox-includes-sender) .message_sender { display: none; } .message_row:not(.messagebox-includes-sender) .message-time, .message_row:not(.messagebox-includes-sender) .mass34-check, .message_row:not(.messagebox-includes-sender) .message_controls { align-self: center; } /* --- 32.3 El aire ------------------------------------------------------ Los 4px de la sección 21 dejaban 16px entre burbujas, midiendo de borde a borde. Se suben a 6 —20px— y, cuando el mensaje abre bloque de otra persona, a 16, que es el escalón siguiente del design system: así el cambio de interlocutor se ve antes de leer el nombre. El relleno de dentro de la burbuja también sube: 12px por los cuatro lados apretaba el texto contra el borde en los mensajes de una línea, que aquí son casi todos. */ .message_row .messagebox-content { padding-top: 6px; padding-bottom: 6px; } .message_row.messagebox-includes-sender .messagebox-content { padding-top: 16px; } .message_row .message_content { padding: 10px 14px; } /* --- 32.4 Las reacciones, debajo de su burbuja ------------------------ Las reacciones viven en la celda del mensaje, que ocupa todo el ancho de la columna: la burbuja propia se va a la derecha con su `margin-left: auto`, pero la fila de reacciones se quedaba pegada al margen izquierdo, a media pantalla de la burbuja a la que responde. Es flex, así que basta con mandarla al mismo lado. */ .message_row.mass34-propio .message_reactions { justify-content: flex-end; } /* ============================================================ 33. LA CABECERA DE UN MENSAJE DIRECTO El nombre de los participantes salía dos veces en la misma pantalla: arriba en la barra de la aplicación y, dos dedos más abajo, en la píldora que encabeza el grupo de mensajes. Y los botones de la conversación —poner nombre al grupo, convertirlo en grupo abierto, vaciarlo— estaban arriba, lejos de aquello sobre lo que actúan. Se deja un solo sitio: la píldora. Ahí van ahora los tres botones, que colocan `mass34-nombre-grupo.js`, `mass34-convertir-grupo.js` y `mass34-borrar-conversacion.js` a través de `m34.barraConversacion()`. ============================================================ */ /* El título de arriba, fuera. Se oculta y no se quita del DOM a propósito: los módulos del lápiz y del grupo leen de ahí los nombres de los participantes para escribirlos en su diálogo, y sin el nodo se quedarían sin ese texto. La marca `mass34-vista-dm` la pone `mass34-vistas.js` mirando la dirección. Solo en mensajes directos: en un canal el título de arriba es el nombre del canal y ahí sí hace falta. */ body.mass34-vista-dm #message_view_header .navbar_title { display: none; } /* La píldora es una rejilla de Zulip con las celdas repartidas, así que los botones caen al final por reparto automático, detrás de la fecha. Ahí se ven bien; lo que no se puede dejar al azar es el orden entre ellos, porque cada módulo se vigila por su cuenta y llega cuando llega. Van de menos a más destructivo. */ .message-header-contents .mass34-nombre-grupo { order: 1; } .message-header-contents .mass34-convertir-grupo { order: 2; } .message-header-contents .mass34-vaciar-conversacion { order: 3; } /* ============================================================ 32. AIRE A LOS LADOS DE LA COLUMNA CENTRAL Medido: la columna izquierda acaba en x=327 y la central empieza en x=326. Se tocan, y el efecto es que la caja de escribir y los mensajes nacen pegados al borde de la barra lateral, sin nada que los separe. El diseño de la empresa da 24 px (`lg`) a cada lado del área central. Con la caja de escribir hay un detalle: el borde y la sombra de la tarjeta estaban en `#compose-content`, que es el elemento al que Zulip le calcula el margen izquierdo para dejar sitio a la columna. Darle padding metería el contenido hacia dentro pero dejaría el BORDE igual de pegado, que es justo lo que se quiere separar. Así que la tarjeta pasa al hijo (`.message_comp`) y el aire se pone fuera de ella. ============================================================ */ /* --- La lista de mensajes --------------------------------------------- */ #main_div, .message-feed { padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* --- La caja de escribir ---------------------------------------------- */ #compose-content { padding-left: 24px; padding-right: 24px; /* Deja de ser la tarjeta: ahora solo es el hueco donde va. */ background-color: transparent; border: 0; box-shadow: none; } .message_comp { background-color: var(--m34-superficie); border: 1px solid var(--m34-borde-fuerte); border-radius: var(--m34-radio-l); box-shadow: var(--m34-sombra-suave); transition: border-color var(--m34-transicion), box-shadow var(--m34-transicion); } /* El halo al escribir se mueve con ella. */ #compose-content:focus-within { box-shadow: none; } #compose-content:focus-within .message_comp { border-color: var(--m34-acento); box-shadow: 0 0 0 3px var(--m34-acento-halo), var(--m34-sombra-suave); } /* Los botones que Zulip enseña cuando no hay nada escrito —"Escribir a…", "Empezar una nueva conversación"— viven fuera de `.message_comp`, así que necesitan su propio aire por dentro. */ #compose_buttons { padding-left: 0; padding-right: 0; } /* ============================================================ 34. LA BOTONERA DE ESCRIBIR, DENTRO DE SU FILA Los iconos de formato salían cortados por abajo, medio fuera de la pantalla: se veía la mitad de arriba de cada uno. La caja de escribir es una rejilla de dos filas —el texto y la botonera— y Zulip le da a la segunda una **altura fija**, `--compose-formatting-buttons-row-height`, que vale 2em: 32px. Dentro caben sus botones, que son más pequeños; los de aquí no, por dos añadidos propios que suman de más: - la sección 26.6 separa la botonera del texto con una línea, y eso son 8px de margen, 1 de borde y 8 de relleno: 17px de sombrero que se comen la mitad de la fila; - los botones se agrandaron a 30px para que se puedan pulsar con el ratón sin apuntar al icono, y con su caja miden 32. 17 + 32 son 49px en una fila de 32: los 17 sobrantes se salían por abajo, y como la caja está pegada al pie de la pantalla, se salían de la pantalla. La fila pasa a medirse por su contenido. Podría ponerse un número mayor y calculado, pero volvería a quedarse corto en cuanto cambie el tamaño de los botones, el de la letra o el grosor de la separación: `auto` no hay que recalcularlo nunca. ============================================================ */ #compose .messagebox { grid-template-rows: minmax(0, 1fr) auto; } /* ============================================================ 33. LA FILA DE DESTINO DE LA CAJA Es el "a quién le estás escribiendo": el selector de canal o de conversación directa, y el campo del tema. En la maqueta esta fila NO existe —su caja es solo el texto, los botones y enviar— porque allí el destino ya lo fija el canal abierto. Zulip la necesita: desde aquí se cambia de canal, se elige el tema y se añaden destinatarios sin salir de la caja. Así que no se puede quitar; lo que se hace es que hable el mismo idioma que el resto. Estaba a 16 px y peso 400, o sea con el mismo tamaño y el mismo peso que el texto de un mensaje. Eso lo hacía competir con lo que se escribe, cuando su papel es de etiqueta: decir dónde va esto y apartarse. En el sistema de la empresa eso es `label-md` —12 px, 600, con interletrado— que es lo que llevan las etiquetas de sección. ============================================================ */ /* La fila, separada del área de escritura por una línea, igual que la maqueta separa la botonera de abajo. */ #compose-recipient { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--m34-borde); } /* --- El selector de canal o conversación ------------------------------ */ /* El radio y la altura los fija Zulip con `.compose_table #compose-recipient.compose-recipient-direct-selected #compose_select_recipient_widget`, y el radio va con `!important`. Contra eso solo vale otro `!important` desde un selector al menos tan específico; la altura, en cambio, pasa por una variable suya, así que se reasigna —que es lo que siempre sale mejor aquí— y de paso la toma también el campo del tema, que la comparte. */ :root { --compose-recipient-box-min-height: 28px; } .compose_table #compose-recipient #compose_select_recipient_widget.dropdown-widget-button { border-radius: var(--m34-radio-m) !important; } #compose_select_recipient_widget.dropdown-widget-button { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; background-color: var(--m34-superficie-alt); border: 1px solid var(--m34-borde); border-radius: var(--m34-radio-m); transition: background-color var(--m34-transicion), border-color var(--m34-transicion); } #compose_select_recipient_widget.dropdown-widget-button:hover { background-color: var(--m34-superficie); border-color: var(--m34-acento); } /* El texto: nombre del canal, o "MD" en las conversaciones directas. */ #compose_select_recipient_widget .dropdown_widget_value, #compose_select_recipient_widget .decorated-channel-name, #compose_select_recipient_widget .decorated-dm-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; color: var(--m34-texto-suave); } /* Los dos iconos —el del tipo de destino y la flecha— van al gris de los bordes: son señales, no contenido. */ #compose_select_recipient_widget .zulip-icon, #compose-recipient .conversation-arrow { color: var(--m34-texto-tenue); font-size: 14px; } /* --- El campo del tema ------------------------------------------------- */ #compose_recipient_box { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; background-color: transparent; border: 0; border-radius: var(--m34-radio-m); } #stream_message_recipient_topic { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.05em; color: var(--m34-texto-suave); background-color: transparent; border: 0; } #stream_message_recipient_topic::placeholder, #topic-not-mandatory-placeholder { font-weight: 500; letter-spacing: 0; color: var(--m34-texto-tenue); } /* --- Los destinatarios de una conversación directa --------------------- */ /* Cada persona va en una pastilla. Zulip las deja con el borde y el radio de un campo de formulario; con el avatar dentro y el nombre al lado, lo que son es una etiqueta. */ #compose-direct-recipient .pill { height: 24px; padding: 0 4px 0 0; background-color: var(--m34-superficie-alt); border: 1px solid var(--m34-borde); border-radius: var(--m34-radio-pastilla); } #compose-direct-recipient .pill .pill-label, #compose-direct-recipient .pill .pill-value { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--m34-texto-suave); } #compose-direct-recipient .pill .pill-image { border-radius: 50%; } /* La equis de quitar a alguien: gris hasta que se apunta a ella. */ #compose-direct-recipient .pill .pill-close-button { color: var(--m34-texto-tenue); transition: color var(--m34-transicion); } #compose-direct-recipient .pill:hover .pill-close-button { color: var(--m34-acento); } /* ============================================================ 34. FUERA LA FILA DE DESTINO En la maqueta la caja de escribir es solo el texto, los botones y enviar. Aquí igual: la fila de "a quién le escribes" no se ve, y tampoco al pasar el ratón. Quedaba UN caso en el que seguía apareciendo: cuando se empieza una conversación directa nueva y todavía no hay destinatarios (la fila «MD · Añade uno o más usuarios», sin pastillas). Se retiró también, para TODOS los roles: nadie debe verla. La vía para escribir a alguien nuevo no es esta —rellenar el campo a mano—, es que quien coordina lo asigne (`mass34-asignar-chat.js`) o abrirlo desde su ficha, que ya llega con el destinatario puesto. PERO hay una segunda excepción, y esta no se puede quitar: el propio creador de grupos (`mass34-convertir-grupo.js` → `abrirCreadorGrupo`, disparado desde `montarConfirmacionNuevoChat` en mass34-stitch-ui.js) usa esta misma fila para enseñar las pastillas de gente elegida y el botón «Abrir chat». Ese flujo SÍ sigue abierto —es la vía por la que Admin, Superadmin y Owner crean una conversación o un grupo nuevo—, y pone la clase `mass34-nuevo-chat-seleccionando` en el `` mientras dura. Ocultar la fila sin mirar esa clase se llevaba por delante también esto: se veía crear el grupo pero nunca salían las pastillas ni el botón de confirmar, así que tampoco salía después el formulario para ponerle nombre. ── Lo que esto se lleva por delante ────────────────────────────── En un canal, en esa fila iba el TEMA. Sin ella no se puede elegir: lo que se escriba va al tema que estuviera puesto, y al empezar una conversación nueva en un canal, a "conversación general". Se avisó antes de hacerlo y se hizo igualmente, que es una decisión legítima; queda escrito aquí para que el día que alguien pregunte "¿por qué todo acaba en conversación general?" no haya que averiguarlo otra vez. Para devolverlo, se borra esta sección. ────────────────────────────────────────────────────────────────── */ body:not(.mass34-nuevo-chat-seleccionando) #compose-recipient { display: none !important; } /* El textarea queda pegado al borde de arriba de la tarjeta al desaparecer la fila. */ body:not(.mass34-nuevo-chat-seleccionando) #compose-recipient + .messagebox #compose-textarea { padding-top: 12px; } /* ============================================================ 35. LA BARRA, CON LO JUSTO A LA VISTA Se quedan tres botones: adjuntar, emoticono y negrita. Es lo que se usa a diario aquí —mandar una grabación, poner una cara, destacar un dato— y con tres, la barra deja de ser una fila de iconos que hay que leer cada vez para encontrar uno. El resto no se quita: se guarda detrás de un botón de tres puntos al final. Los mueve `mass34-barra.js`, y los MUEVE en vez de copiarlos: Zulip les tiene puestos sus manejadores y su ayuda emergente, así que un duplicado sería un icono que no hace nada. ============================================================ */ /* Los separadores sobran con tres botones. Van TODOS los de la barra y no solo los hijos directos: al repartir los grupos queda alguno suelto dentro de un contenedor que se ha quedado con un único botón, y se veía una raya entre la negrita y el menú. */ .compose-scrollable-buttons .divider { display: none; } /* --- El botón de tres puntos ------------------------------------------ */ .mass34-mas-caja { position: relative; display: inline-flex; align-items: center; margin-left: 4px; } .mass34-mas { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: none; border: 0; border-radius: var(--m34-radio-s); color: var(--m34-texto-suave); cursor: pointer; transition: background-color var(--m34-transicion), color var(--m34-transicion); } .mass34-mas:hover, .mass34-mas[aria-expanded="true"] { background-color: var(--m34-acento-tenue); color: var(--m34-acento); } /* --- El panel que se despliega ---------------------------------------- */ .mass34-mas-panel { display: none; position: absolute; /* Hacia arriba: la caja de escribir está pegada al pie de la pantalla y hacia abajo no hay sitio. */ bottom: calc(100% + 6px); left: 0; z-index: 120; padding: 6px; background-color: var(--m34-flotante); border: 1px solid var(--m34-borde); border-radius: var(--m34-radio-m); box-shadow: var(--m34-sombra-flotante); white-space: nowrap; } .mass34-mas-panel.abierto { display: flex; align-items: center; gap: 2px; } /* Dentro del panel los botones van en fila, como en la barra. Los contenedores que Zulip usa para agruparlos también. */ .mass34-mas-panel .compose_control_button_container, .mass34-mas-panel .compose-control-buttons-container { display: inline-flex; align-items: center; gap: 2px; } /* Los que ya estaban escondidos por la sección 19 —LaTeX, texto oculto, citar, código, enlace, la ayuda de formato…— siguen escondidos aquí dentro. Se movieron con los demás porque el módulo no distingue, y está bien que así sea: si algún día se devuelve alguno, aparece en el menú sin tocar nada más. */ .mass34-mas-panel > .divider { display: none; } /* --- 35.1 Lo eliminado sigue eliminado -------------------------------- Al mover los botones al menú salieron de `.compose-control-buttons-container`, y las reglas de la sección 19 que los escondían colgaban justo de ese contenedor. Resultado: LaTeX, citar, código, el enlace y la ayuda de formato REAPARECIERON dentro del menú, después de haberlos quitado a petición expresa. Aquí se repiten sin depender de dónde estén. Es la contrapartida de mover elementos con JavaScript: las reglas escritas contra la estructura original dejan de valer en cuanto la estructura cambia. */ .mass34-mas-panel a[data-format-type="latex"], .mass34-mas-panel a[data-format-type="spoiler"], .mass34-mas-panel a[data-format-type="quote"], .mass34-mas-panel a[data-format-type="code"], .mass34-mas-panel a[data-format-type="link"], .mass34-mas-panel .compose_help_button, .mass34-mas-panel .compose_control_button_container:has(.time_pick), .mass34-mas-panel .compose_control_button_container:has(.add-todo-list), .mass34-mas-panel .compose_control_button_container:has(.saved_snippets_widget), .mass34-mas-panel .compose_control_button_container.hide { display: none; } /* --- 35.2 El botón, en línea con los otros tres ------------------------ La caja cuelga del contenedor de la barra —tiene que ser así, porque la barra recorta— y ese contenedor apila a sus hijos, así que el botón caía a un renglón propio debajo. */ #message-formatting-controls-container.compose-scrolling-buttons-container { display: flex; align-items: center; flex-wrap: nowrap; } #message-formatting-controls-container .compose-scrollable-buttons { flex: 0 1 auto; } /* Y detrás de los tres, no delante. La barra de Zulip lleva una clase `order-1` que la adelanta en el reparto flex, así que la caja —que no tiene ninguna, o sea orden 0— se colocaba primero y los tres puntos salían a la izquierda del clip. */ .mass34-mas-caja { order: 2; } /* ============================================================ 36. LA NEGRITA SE VE MIENTRAS SE ESCRIBE Al pulsar el botón B salía el texto entre asteriscos en crudo y había que imaginarse el resultado. Ahora se ve la palabra en negrita y los asteriscos no se ven. Un

no admite texto con formato —es texto plano y punto—,
   así que `mass34-formato.js` pinta un ESPEJO justo debajo: un div con
   el mismo texto, este sí con formato. Al textarea se le quita la tinta
   y se le deja el cursor. Se escribe en el de siempre y se lee el otro.

Para que no se vea doble, las letras tienen que caer EXACTAMENTE en el
   mismo sitio en los dos. De ahí las dos decisiones raras de aquí abajo:

- **La negrita no se hace con `font-weight`.** La negrita de verdad es
     más ancha: medido en esta caja, una frase normal ocupa 404.92 px y
     en negrita 426.48 px. Con 21 px de diferencia el espejo parte las
     líneas por otro sitio y desde la primera palabra en negrita todo
     baila. Engordar el trazo de la letra se ve igual y mide lo mismo:
     404.92 px, cero de diferencia.
   - **Los asteriscos siguen ahí, en transparente.** Ocupan su ancho, y
     quitarlos de verdad correría el texto. Se notan como un hueco
     pequeño a los lados de la palabra; es el precio de no verlos.
   ============================================================ */

/* La fila que contiene el textarea pasa a ser el marco de referencia del
   espejo. Es `static` de origen, y sin esto el espejo se posicionaría
   contra la ventana.

Y con ella hay que posicionar TAMBIÉN la fila de los botones, que es
   su hermana y va después en el documento. El motivo es lo que costó
   encontrar: un elemento posicionado se pinta por encima de los
   hermanos estáticos que le siguen, y esta fila llega 32 px más abajo
   de donde acaba el textarea —de 784 a 884, con los botones de 855 a
   887—, o sea justo por encima de ellos. El efecto era que el botón de
   negrita se veía perfectamente y no se podía pulsar: el ratón lo
   recibía esta fila. Medido con `elementsFromPoint` sobre el centro del
   botón, que devolvía el contenedor del texto y no el botón.

Posicionando las dos, el orden del documento vuelve a decidir y los
   botones quedan delante. */
.surround-formatting-buttons-row,
#message-formatting-controls-container {
    position: relative;
}

.mass34-espejo {
    position: absolute;
    z-index: 0;
    margin: 0;
    /* El textarea es `content-box` y el JS le pasa aquí su `offsetWidth`,
       que ya lleva el relleno dentro. Con `border-box` las dos áreas de
       texto acaban midiendo lo mismo. */
    box-sizing: border-box;
    overflow: hidden;
    /* Ni clics ni selección: de eso sigue encargándose el textarea, que
       está justo encima. */
    pointer-events: none;
    color: var(--m34-texto);
    background: none;
    border-style: solid;
    border-color: transparent;
}

/* El textarea, sin tinta pero con cursor. La clase la pone el JS al
   montar el espejo, nunca esta hoja: si el archivo no llegara a cargar,
   la regla dejaría la caja de escribir en blanco. */
#compose-textarea.mass34-velado {
    position: relative;
    z-index: 1;
    color: transparent;
    caret-color: var(--m34-texto);
    background-color: transparent;
}

/* El texto de ayuda sí se ve: tiene color propio y no hereda el
   transparente de arriba. */
#compose-textarea.mass34-velado::placeholder {
    color: var(--m34-texto-tenue);
}

/* Al seleccionar, el fondo tiene que dejar leer lo de debajo. Un azul
   opaco del sistema taparía el espejo y la selección se vería como una
   barra vacía. */
#compose-textarea.mass34-velado::selection {
    background-color: var(--m34-acento-halo);
    color: transparent;
}

/* --- Las marcas de formato -------------------------------------------- */

.mass34-espejo .m34-f-marca {
    color: transparent;
}

.mass34-espejo .m34-f-negrita {
    -webkit-text-stroke-width: 0.4px;
}

/* La cursiva lleva el ángulo escrito a mano por lo mismo que la negrita
   no engorda. `italic` a secas desviaba 22.66 px la misma frase: esta
   familia no trae cursiva de verdad —comprobado con `document.fonts`— y
   el navegador se iba a otra fuente para inclinarla, que mide otra cosa.
   Con el ángulo puesto la inclina él, sobre la misma letra: 0.00 px. */
.mass34-espejo .m34-f-cursiva {
    font-style: oblique 12deg;
}

.mass34-espejo .m34-f-tachado {
    text-decoration: line-through;
}

/* El código NO cambia de tipografía, por lo mismo que la negrita no
   engorda: una monoespaciada mide otra cosa. Se marca con el fondo. */
.mass34-espejo .m34-f-codigo,
.mass34-espejo .m34-f-bloque {
    background-color: var(--m34-acento-tenue);
    border-radius: var(--m34-radio-s);
}

/* ============================================================
   37. LA FRANJA DE ABAJO, EN BLANCO

Con la caja de escribir cerrada, Zulip llenaba el pie con dos botones
   grandes: «Escribir a Fulano, Mengano» y «Empezar una nueva
   conversación». Ocupaban una franja entera para decir lo que ya dice la
   cabecera —con quién estás—, y el segundo lleva a algo que aquí casi
   nadie puede hacer: abrir una conversación es cosa de quien coordina.

Se van los dos y la franja queda vacía. La caja aparece al empezar a
   teclear, o al responder a un mensaje.

**Y esto se elige sabiendo lo que cuesta**: quien no conozca esa forma
   de empezar puede quedarse mirando sin ver por dónde escribir. A
   cambio, la conversación llega hasta abajo del todo y no hay dos
   botones separando los mensajes de la caja.

La regla de la sección de los asesores que escondía «Empezar una nueva
   conversación» se queda donde está aunque ahora sea redundante: si algún
   día se devuelve esta franja, esa sigue haciendo falta.

Nota para quien busque un nombre que no aparece: el botón de responder
   es uno de los cinco sitios donde `mass34-nombre-grupo.js` escribe el
   nombre de una conversación de grupo. Sigue escribiéndolo, pero ya no
   se ve. Los otros cuatro no cambian.
   ============================================================ */

#compose_buttons {
    display: none;
}

/* ============================================================
   38. LA PANTALLA SE VE IGUAL SEA QUIEN SEA

Lo que cambia entre un asesor y quien administra son los permisos y
   lo que se le enseña, NO dónde están las cosas. Y había una forma de
   romper eso sin darse cuenta.

Zulip trae una preferencia por cuenta, «Ancho de pantalla». Con ella
   apagada limita el ancho de la aplicación y la centra, así que en un
   monitor ancho aparecen dos bandas vacías a los lados y TODO se
   desplaza. Medido a 1920 px, con una cuenta que la tenía apagada:

administrador   zona central x=0    ancho 1920
     asesor          zona central x=177  ancho 1566

177 px de desplazamiento en la barra lateral, la cabecera, el
   buscador, el panel de temas y la caja de escribir. La misma versión,
   el mismo navegador y la misma pantalla, y sin embargo dos interfaces
   distintas: la única diferencia era una casilla de una cuenta.

Aquí eso no interesa. La aplicación ocupa el ancho que haya, y punto.

**Va con `!important` a propósito.** Zulip aplica el límite desde seis
   reglas distintas —una por cada combinación de barras laterales
   ocultas— y todas llevan `body` más dos clases más `:not(...)`, así
   que ganan a cualquier selector razonable escrito aquí. Igualarlas
   obligaría a copiar las seis y a rehacerlas cada vez que Zulip añada
   una; una declaración prioritaria las cubre todas y sigue valiendo si
   mañana hay siete.
   ============================================================ */

#compose-container,
.app .app-main,
.header-main {
    max-width: none !important;
}

/* Y con el ancho fijado, la casilla que lo cambiaba sobra: dejarla sería
   un control que se marca y no hace nada, que es peor que no tenerlo. Se
   esconde la fila entera —etiqueta incluida—, no solo la casilla. */
.input-group:has(input.fluid_layout_width) {
    display: none;
}

/* ============================================================
   39. RESPONDER Y REACCIONAR SIN ABRIR NADA

Los dos gestos corrientes de un chat estaban escondidos en el menú de
   los tres puntos, a dos clics y una lista de once opciones: reaccionar
   —el icono de la carita solo lo pone Zulip en los mensajes de los
   demás, porque en los propios ese hueco es el lápiz de editar— y
   responder, que Zulip llama «Citar el mensaje» y no tiene botón en
   ninguna parte. En un chat de trabajo la reacción es el acuse rápido,
   el «visto» y el «hecho», y la cita es cómo se contesta a un mensaje
   concreto cuando hay tres personas hablando a la vez.

Los dos iconos los pone `mass34-acciones.js`, que no necesita tocar
   el paquete de Zulip. Aquí se ocupa de lo otro, que es de dónde
   quitar.
   ============================================================ */

/* --- 39.1 El menú de los tres puntos, en cuatro -----------------------

Se queda con lo que se hace de verdad con un mensaje: reenviarlo,
   corregirlo, borrarlo y ver quién lo ha leído. Fuera citar, copiar el
   enlace, colapsar, marcar como no leído desde aquí, recordármelo,
   denunciar, mover y ver el original.

**Va por lista blanca, no por descarte.** Nombrar lo que se quita
   obliga a volver aquí cada vez que Zulip añada una opción, y hasta que
   alguien se dé cuenta esa opción está a la vista de todo el mundo. Con
   la lista al revés, lo nuevo nace escondido y se decide con calma.

La reacción de emoticono no hace falta nombrarla: Zulip solo la
   ofrece en el menú cuando el icono no está a la vista
   (`is_add_reaction_icon_visible`), y ahora está siempre.

El `>` de cada `:has()` es imprescindible: el `<a>` cuelga
   directamente del `<li>`, y sin él la comprobación alcanzaría también
   a la lista entera. */
#message-actions-menu-dropdown .popover-menu-list-item:not(:has(> .forward_button)):not(:has(> .popover_edit_message)):not(:has(> .delete_message)):not(:has(> .view_read_receipts)):not(.mass34-menu-item-hilo):not(.mass34-menu-item-copiar):not(.mass34-menu-item-editar):not(.mass34-menu-item-eliminar):not(.mass34-menu-item-reenviar) {
    display: none !important;
}

/* Y sin separadores. `display: none` no saca los elementos del DOM, así
   que las rayas que agrupaban once opciones se quedaban donde estaban:
   tres líneas sueltas alrededor de cuatro entradas. Con cuatro no hay
   nada que agrupar. */
#message-actions-menu-dropdown .popover-menu-separator {
    display: none;
}

/* --- 39.2 En los avisos del sistema, no --------------------------------

Los avisos del sistema van en pastilla, sin hora y sin estrella
   (sección 28): no hay nada que destacar ni a quién responder. Con la
   carita pasa lo mismo, y además la trae Zulip de serie porque los
   escribe un bot, o sea que no es «un mensaje propio» y le toca el trato
   de mensaje ajeno. Se esconde con `visibility` como sus vecinas, para
   no mover la fila. */
.message_row.mass34-sistema .reaction_button {
    visibility: hidden;
}

/* --- 39.3 Sin las pistas de teclado ------------------------------------

Cada entrada del menú llevaba a la derecha su atajo —`<` para
   reenviar, `⇧V` para las confirmaciones—, y aquí no los usa nadie: son
   una columna de símbolos sueltos que hay que descartar con la vista
   cada vez que se abre el menú, y encima invitan a probar teclas en una
   pantalla donde escribir es lo que se hace todo el día.

Solo en este menú. Los atajos que el propio Zulip enseña en su ayuda
   siguen funcionando: esto tapa el cartel, no la tecla. */
#message-actions-menu-dropdown .popover-menu-hotkey-hints {
    display: none;
}

/* ============================================================
   40. LA CITA DE UNA RESPUESTA, COMO UNA TARJETA

Al responder, Zulip escribe la cita como un `blockquote` corriente:
   una raya vertical, el texto al mismo tamaño que el mensaje y el
   «fulano ha dicho:» suelto por encima, fuera de la raya. Dentro de una
   burbuja de color eso no se lee como una cita, se lee como una franja:
   ocupa lo mismo que la respuesta y no se distingue de ella.

Aquí se convierte en la tarjetita de siempre —barra de color, fondo
   tenue, letra más pequeña— con el encabezado y el texto citado dentro
   de la misma caja. El anidamiento lo corta `mass34-acciones.js` antes
   de enviar; esto es para lo que ya está escrito y para el markdown que
   alguien ponga a mano.

**Los colores salen de `currentColor`, no de variables de tema.** Es
   la única forma de que la misma regla valga dentro de la burbuja roja
   —donde el texto es blanco— y dentro de la clara, sin escribir cuatro
   juegos de color y los tres contextos de tema de cada uno. Un
   `color-mix` con el color del texto siempre contrasta con su fondo,
   porque el fondo es justo aquello sobre lo que ese texto ya se lee.
   ============================================================ */

.message_content p:has(> .user-mention.silent):has(+ blockquote),
.message_content blockquote {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    border-inline-start: 4px solid var(--m34-acento);
    padding-inline: 8px;
    margin-inline: 0;
    font-size: 0.75em;
    line-height: 1.2;

/* **Un tope de ancho, o la cita estira la burbuja.** La burbuja se
       dimensiona por su contenido (`width: fit-content`, sección 25), y
       una línea que no se puede partir —la cita va en `nowrap`— cuenta
       entera para ese cálculo: citando un mensaje con el nombre de un
       archivo dentro, la burbuja pasaba de los 155 px de sus vecinas a
       620, y el recorte con puntos suspensivos no llegaba a aplicarse
       nunca porque no había nada que recortar. Con el tope puesto, la
       burbuja se para aquí y el texto sí se recorta. */
    max-width: 26em;
}

/* El encabezado y la cita son dos elementos hermanos, no uno dentro de
   otro, así que la caja se dibuja entre los dos: el de arriba redondea
   arriba, el de abajo redondea abajo y ninguno de los dos separa. */
.message_content p:has(> .user-mention.silent):has(+ blockquote) {
    border-radius: var(--m34-radio-m) var(--m34-radio-m) 0 0;
    padding-block: 4px 2px;
    margin-block: 0;
}

.message_content p:has(> .user-mention.silent) + blockquote {
    border-radius: 0 0 var(--m34-radio-m) var(--m34-radio-m);
}

.message_content blockquote {
    border-radius: var(--m34-radio-m);
    padding-block: 0 4px;
    margin-block: 0 4px;
    color: var(--m34-texto-suave);

/* **Una línea y puntos suspensivos.** La tarjeta dice a qué se
       responde; el mensaje entero está a un clic, en el enlace del
       encabezado. Recortar al pintar y no al enviar es lo que permite
       esto: el texto sigue completo dentro del mensaje.

Para dos o tres líneas en vez de una, se cambia `nowrap` por
       `normal` aquí y se añade `-webkit-line-clamp` con
       `display: -webkit-box`. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Un mensaje citado de varios párrafos enseña el primero. Los demás no
   se recortan solos: cada uno es un bloque y saldría en su propio
   renglón, y la tarjeta volvería a crecer. */
.message_content blockquote > p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message_content blockquote > p ~ p {
    display: none;
}

/* El nombre manda dentro de la tarjeta, así que va en negrita y sin el
   recuadro de las menciones: ahí no está mencionando a nadie, está
   diciendo de quién es lo que viene debajo. El tamaño se iguala al del
   resto porque Zulip encoge las menciones un 5 %, y el nombre quedaba
   más pequeño que lo que dijo. */
.message_row .message_content p:has(> .user-mention.silent) .user-mention {
    background-color: transparent;
    padding: 0;
    color: var(--m34-acento);
    font-size: inherit;
    font-weight: 700;
}

/* Y el «ha dicho», que es el enlace al mensaje original, en segundo
   plano: se deja pulsable, pero no compite con el nombre ni con el
   texto citado.

**El selector nombra la mención a propósito**, y no es adorno: dentro
   de una burbuja propia los enlaces los pinta
   `.message_row.mass34-propio .message_content a`, que son tres clases,
   y una regla más corta pierde por especificidad aunque vaya después.
   Con `.user-mention.silent` dentro del `:has()` son cuatro y gana sin
   recurrir a `!important`. */
.message_row .message_content p:has(> .user-mention.silent) a {
    /* El «ha dicho» sobra: en la tarjeta el nombre ya dice de quién es lo
       que hay debajo, y esas dos palabras repetidas en cada respuesta son
       ruido. El enlace no se pierde —es lo que lleva al mensaje
       original—: se queda como una franja invisible que sigue siendo
       pulsable, sin ocupar renglón. */
    font-size: 0;
    text-decoration: none;
}

.message_row .message_content p:has(> .user-mention.silent) a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.message_content p:has(> .user-mention.silent):has(+ blockquote) {
    position: relative;
}

/* Dentro de la burbuja de acento el velo tiene que ser más marcado: un
   8 % sobre el rojo no se ve y la tarjeta se perdía.

**Sigue saliendo de `currentColor`, no de un blanco fijo.** Un
   `rgba(255,255,255,…)` funciona en el tema claro —burbuja roja, texto
   blanco— y se cae en el oscuro, donde el acento se aclara a #ff5a5f y
   el texto pasa a ser oscuro: allí un velo blanco aclara aún más una
   burbuja que ya es clara, la tarjeta desaparece y la barra baja a
   1.57:1. Con el color del texto, el velo oscurece o aclara según haga
   falta, porque el texto es justo lo que se lee sobre ese fondo. */
.message_row.mass34-propio .message_content p:has(> .user-mention.silent):has(+ blockquote),
.message_row.mass34-propio .message_content blockquote {
    background-color: color-mix(in srgb, currentColor 14%, transparent);
    border-inline-start-color: color-mix(in srgb, currentColor 80%, transparent);
}

/* Sobre el rojo de la burbuja propia ni el nombre puede ir en rojo ni el
   texto en gris: los dos se apoyan en el color del texto de la burbuja,
   que es el que se lee ahí. */
.message_row.mass34-propio .message_content p:has(> .user-mention.silent) .user-mention {
    color: inherit;
}

.message_row.mass34-propio .message_content blockquote {
    color: color-mix(in srgb, currentColor 88%, transparent);
}

/* --- 40.1 Las citas de citas que ya están escritas --------------------

Los mensajes enviados antes de podar la cita llevan dentro la escalera
   entera, y eso no hay forma de reescribirlo. Se dejan de pintar los
   pisos de más: se ve el primero —quién dijo qué y qué dijo— y el resto
   sigue en el mensaje, a un clic en el enlace del encabezado.

El `>` es imprescindible en el `:has()` del encabezado: sin él la
   comprobación alcanzaría a los párrafos de fuera y se llevaría por
   delante el primer piso, que es el que se quiere conservar. */
.message_content blockquote blockquote,
.message_content blockquote p:has(> .user-mention.silent):has(+ blockquote) {
    display: none;
}

/* --- 40.2 Los restos del markdown roto ---------------------------------

Los mensajes escritos antes de podar la cita llevan dentro un bloque de
   código vacío: al apilarse las citas, el texto de alguien acabó pegado a
   la valla de cierre y Zulip lo interpretó como la apertura de un bloque
   de código. En pantalla es un recuadro gris con su botón de copiar y
   nada dentro, en medio de la conversación.

La marca la pone `mass34-acciones.js`, que es quien puede mirar si hay
   texto ahí dentro; CSS no sabe distinguir «vacío» de «con un salto de
   línea». Y también se va el `<br>` que queda detrás, que si no deja un
   renglón en blanco donde estaba el recuadro. */
.message_content .zulip-code-block.mass34-resto,
.message_content .zulip-code-block.mass34-resto + br {
    /* Zulip declara `.codehilite { display: block !important }`, así que
       aquí no hay especificidad que valga: se responde en el mismo tono.
       Comprobado con `CSS.getMatchedStylesForNode`, que es lo que hay que
       preguntar antes de dar por perdida una regla. */
    display: none !important;
}

/* ============================================================
   41. LA BARRA DE RESPUESTA

Responder dejaba en la caja de escribir el markdown de la cita: cuatro
   líneas con arrobas, asteriscos, una URL entera y dos vallas de acentos,
   ocupando la mitad del hueco donde se escribe. Es lo que Zulip manda al
   servidor, pero no tiene por qué ser lo que se lee mientras se escribe.

Ahora se ve lo mismo que en cualquier chat: una tira encima de la caja
   con el nombre y la frase a la que se responde, y una equis para
   quitarla. El markdown lo guarda `mass34-acciones.js` y lo antepone
   justo al enviar.
   ============================================================ */

.mass34-respuesta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 6px 8px 6px 10px;
    border-radius: var(--m34-radio-m);
    background-color: color-mix(in srgb, currentColor 7%, transparent);
    border-inline-start: 3px solid var(--m34-acento);
    color: var(--m34-texto);
    font-size: 0.8125em;
    line-height: 1.4;
}

/* Una sola línea, pase lo que pase: la barra avisa de a qué se responde,
   no reproduce el mensaje. Lo que no cabe se corta con puntos
   suspensivos, que es lo que hace que no crezca hacia arriba comiéndose
   la conversación. */
.mass34-respuesta-texto {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mass34-respuesta-quien {
    font-weight: 700;
    color: var(--m34-acento);
}

.mass34-respuesta-quien::after {
    content: ": ";
    font-weight: 400;
}

.mass34-respuesta-frase {
    color: var(--m34-texto-suave);
}

.mass34-respuesta-cerrar {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--m34-radio-s);
    background: transparent;
    color: var(--m34-texto-suave);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.mass34-respuesta-cerrar:hover {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    color: var(--m34-texto);
}

/* --- 40.3 Dentro de la cita, el adjunto es solo su nombre --------------

`mass34-adjuntos.js` le pone a cada archivo su tipo y su peso, que en
   la conversación se agradecen. Dentro de la tarjeta de una cita no: ahí
   solo hay sitio para una línea, y el peso se pegaba al nombre del
   archivo —«…opus367 KB · Audio»— porque la ficha se pinta como un
   trozo más del texto. */
.message_content blockquote .mass34-adjunto-pie {
    display: none;
}

/* ============================================================
   42. EL ESPACIO QUE QUEDA EN LA CAJA

Zulip tiene un aviso de longitud, pero solo aparece pasado el 90 % del
   límite: 9.000 caracteres. Hasta ahí no hay ninguna señal de cuánto se
   lleva escrito, y el aviso llega cuando ya no hay nada que hacer salvo
   recortar.

El contador propio aparece antes —a partir de 500 caracteres, que es
   cuando un mensaje de chat ya es largo— y se queda en un rincón, junto
   al botón de enviar. Mientras el mensaje sea corto no se ve nada: un
   contador permanente en una pantalla que se mira ocho horas es ruido.
   ============================================================ */

.mass34-espacio {
    /* Pegado al botón de enviar, no a media altura: esa columna se
       reparte en vertical y el botón está al fondo, así que el contador
       se empuja hasta él con el margen automático. */
    align-self: flex-end;
    margin-block-start: auto;
    margin-block-end: 6px;
    margin-inline-end: 4px;
    color: var(--m34-texto-tenue);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Cerca del límite deja de ser un dato y pasa a ser un aviso. */
.mass34-espacio.mass34-apurado {
    color: var(--m34-acento);
    font-weight: 600;
}

/* Y fuera el de Zulip, que dice lo mismo con otras palabras —cuenta lo
   que queda en vez de lo que llevas— y solo aparece pasado el 90 %. Dos
   números distintos en el mismo rincón, uno de ellos solo a veces, es
   peor que ninguno. */
#compose-limit-indicator {
    display: none;
}

/* ============================================================
   43. SIN EL HUECO DEL FINAL

Debajo del último mensaje quedaban 380 px en blanco antes de la caja
   de escribir. Es `#bottom_whitespace`, un hueco que Zulip reserva para
   poder subir el último mensaje hasta arriba del todo al hacer scroll.
   En una conversación de trabajo eso no se usa nunca y lo que se ve es
   media pantalla vacía entre lo último que dijo alguien y donde se
   escribe, que es justo lo contrario de lo que hace cualquier chat.

Se deja en 64 px: junto con la reserva propia de la lista, mantiene el
   último mensaje completo por encima del editor fijo. Va con important
   porque Zulip fija esa altura por estilo inline y la recalcula con el
   tamaño de la ventana.

Comprobado que no tapa nada, que es el riesgo de tocarlo: con la caja
   vacía y con la caja crecida a quince líneas, el último mensaje sigue
   entero por encima de ella.
   ============================================================ */

#bottom_whitespace {
    height: 64px !important;
}

/* Y dentro de ese hueco vivía el logotipo de Zulip, en marca de agua.
   En la conversación ya no cabe, pero se apaga igual: es la marca de
   otro producto dentro de la aplicación.

**Hay dos, y el segundo hay que nombrarlo con su id.** El mismo
   logotipo está en el hueco de «Conversaciones recientes», y ahí Zulip
   lo enciende con `#recent_view_bottom_whitespace .bottom-messages-logo`
   —id más clase—, que gana a una regla de clase sola por muchas veces
   que se repita. Ese sí se veía. */
.bottom-messages-logo,
#recent_view_bottom_whitespace .bottom-messages-logo {
    display: none;
}

/* ============================================================
   44. INTERFAZ TECNOLÓGICA, CLARA Y RESPONSIVE

La revisión visual de la aplicación completa mostró tres problemas:

- las dos columnas rojas competían con el contenido y convertían el
     acento de marca en fondo permanente;
   - las burbujas propias en rojo pleno pesaban más que el mensaje;
   - en móvil, las citas y los nombres de archivo podían ensanchar la
     conversación más allá de la pantalla.

La marca vuelve a cumplir una función: señala lo activo, lo nuevo y lo
   accionable. Las superficies siguen la escala fría del design system y
   las conversaciones conservan el patrón de burbujas, pero con un tono
   propio suave que se puede leer durante toda la jornada.
   ============================================================ */

:root {
    /* Navegación clara: una superficie fría separada del área de lectura. */
    --m34-columna: #f9f9ff;
    --m34-columna-texto: #111c2d;
    --m34-columna-texto-2: #5d626d;
    --m34-columna-hover: rgba(165, 0, 4, 0.065);
    --m34-columna-campo: #ffffff;
    --m34-columna-campo-borde: rgba(17, 28, 45, 0.16);
    --m34-columna-activa: rgba(165, 0, 4, 0.1);
    --m34-columna-activa-texto: #8a0003;
    --m34-columna-borde: rgba(17, 28, 45, 0.1);

/* El mensaje propio se distingue sin convertir el texto en una alarma. */
    --m34-propio-fondo: #fff1f2;
    --m34-propio-texto: #321416;
    --m34-propio-borde: rgba(165, 0, 4, 0.24);
    --m34-propio-codigo: rgba(165, 0, 4, 0.08);
}

.dark-theme:root {
    --m34-columna: #13161b;
    --m34-columna-texto: #e6e8ec;
    --m34-columna-texto-2: #a0a7b4;
    --m34-columna-hover: rgba(255, 255, 255, 0.07);
    --m34-columna-campo: #1c2028;
    --m34-columna-campo-borde: rgba(255, 255, 255, 0.13);
    --m34-columna-activa: rgba(255, 90, 95, 0.16);
    --m34-columna-activa-texto: #ff7377;
    --m34-columna-borde: rgba(255, 255, 255, 0.09);

--m34-propio-fondo: rgba(255, 90, 95, 0.13);
    --m34-propio-texto: #f7e7e8;
    --m34-propio-borde: rgba(255, 90, 95, 0.3);
    --m34-propio-codigo: rgba(255, 255, 255, 0.09);
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-columna: #13161b;
        --m34-columna-texto: #e6e8ec;
        --m34-columna-texto-2: #a0a7b4;
        --m34-columna-hover: rgba(255, 255, 255, 0.07);
        --m34-columna-campo: #1c2028;
        --m34-columna-campo-borde: rgba(255, 255, 255, 0.13);
        --m34-columna-activa: rgba(255, 90, 95, 0.16);
        --m34-columna-activa-texto: #ff7377;
        --m34-columna-borde: rgba(255, 255, 255, 0.09);

--m34-propio-fondo: rgba(255, 90, 95, 0.13);
        --m34-propio-texto: #f7e7e8;
        --m34-propio-borde: rgba(255, 90, 95, 0.3);
        --m34-propio-codigo: rgba(255, 255, 255, 0.09);
    }
}

/* Las columnas son navegación, no carteles de marca. */
#left-sidebar,
#right-sidebar {
    box-shadow: none;
}

#right-sidebar {
    --color-background: var(--m34-columna);
    --color-background-input: var(--m34-columna-campo);
    --color-background-input-focus: var(--m34-superficie);
    --color-outline-input: var(--m34-columna-campo-borde);
    --color-outline-input-hover: var(--m34-borde-fuerte);
    --color-outline-input-focus: var(--m34-acento);
    --color-border-sidebar: var(--m34-columna-borde);
    --color-border-sidebar-subheader: var(--m34-columna-borde);
    --color-shadow-sidebar-row-hover: var(--m34-columna-borde);
    --color-buddy-list-avatar-loading: var(--m34-columna-hover);
}

#mass34-bienvenida {
    border-color: color-mix(in srgb, var(--m34-acento) 20%, transparent);
    box-shadow: 0 4px 16px rgba(17, 28, 45, 0.16);
}

/* Burbujas limpias: el color diferencia sin dominar. */
.message_row .message_content {
    overflow-wrap: anywhere;
    word-break: normal;
}

.message_row.mass34-propio .message_content {
    background-color: var(--m34-propio-fondo);
    color: var(--m34-propio-texto);
    border-color: var(--m34-propio-borde);
    box-shadow: 0 1px 2px rgba(17, 28, 45, 0.05);
}

.message_row.mass34-propio .message_content a,
.message_row.mass34-propio .message_content code,
.message_row.mass34-propio .message_content blockquote {
    color: var(--m34-propio-texto);
}

.message_row.mass34-propio .message_content code {
    background-color: var(--m34-propio-codigo);
}

.message_row.mass34-propio .message_content blockquote {
    border-left-color: var(--m34-acento);
}

.message_content blockquote,
.message_content blockquote p,
.message_content a,
.message_content .mass34-adjunto-nombre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* El aviso de permisos pertenece al producto y sigue la misma paleta. */
.navbar-alert-banner.banner-brand {
    background-color: var(--m34-superficie-alt);
    border-bottom: 1px solid var(--m34-borde);
    box-shadow: none;
    color: var(--m34-texto);
}

.navbar-alert-banner .banner-content,
.navbar-alert-banner .banner-action-buttons {
    gap: 8px;
}

.navbar-alert-banner .banner-label {
    color: var(--m34-texto-suave);
}

/* En pantallas estrechas cada píxel debe quedar dentro del viewport. */
@media (max-width: 50em) {
    #main_div,
    .message-feed {
        padding-right: 12px;
        padding-left: 12px;
    }

#compose-content {
        padding-right: 12px;
        padding-left: 12px;
    }

.message_row,
    .message_row .messagebox,
    .message_row .messagebox-content {
        min-width: 0;
        max-width: 100%;
    }

.message_row .message_content {
        /* Deja sitio al avatar, a los metadatos y al aire exterior. */
        width: fit-content;
        max-width: calc(100vw - 108px);
    }

.message_content blockquote {
        max-width: 100%;
        margin-right: 0;
    }

.message_content img,
    .message_content video,
    .message_content audio,
    .message_content .mass34-adjunto {
        max-width: 100%;
    }

.top-navbar-container,
    #message_view_header,
    #message_view_header .navbar_title {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

#message_view_header .message-header-navbar-title {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.navbar-alert-banner {
        min-height: 0;
        padding: 8px 40px 8px 12px;
    }

.navbar-alert-banner .banner-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
    }

.navbar-alert-banner .banner-label {
        font-size: 13px;
        line-height: 17px;
        text-align: left;
    }

.navbar-alert-banner .banner-action-buttons {
        display: block;
        width: 100%;
    }

.navbar-alert-banner .request-desktop-notifications {
        width: 100%;
        min-height: 34px;
    }

.navbar-alert-banner .customize-desktop-notifications,
    .navbar-alert-banner .reject-desktop-notifications {
        display: none;
    }

.navbar-alert-banner .banner-close-button {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   47. CABECERA OPACA Y FOCO DISCRETO

La cabecera de la tanda es sticky: los mensajes pasan físicamente por
   debajo al desplazarse. Debe ser plana como en Element, pero no puede ser
   transparente o ambos textos se superponen. Ocupa el ancho disponible y
   usa la misma superficie que la cronología.
   ============================================================ */

.message_header,
.message_header_private_message,
.message_header_stream {
    background-color: var(--m34-fondo);
}

.message_header .message-header-contents,
.message_header_private_message .message-header-contents,
.message_header_stream .message-header-contents {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background-color: var(--m34-fondo) !important;
    border: 0;
    border-bottom: 1px solid var(--m34-borde);
    border-radius: 0;
    box-shadow: none;
}

.message_row.selected_message,
.message_row.focused_message {
    outline: none !important;
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--m34-acento);
}

.message_row.selected_message .messagebox-content,
.message_row.focused_message .messagebox-content {
    outline: none !important;
}

/* ============================================================
   48. ACCIÓN DE ESCRIBIR VISIBLE EN MÓVIL

En escritorio el editor permanece abierto. En móvil Zulip lo pliega
   para ganar altura y enseña `#compose_buttons`; una regla anterior lo
   ocultaba en todos los tamaños, dejando una franja vacía de 25 px y sin
   ninguna forma evidente de responder. En una conversación se recupera
   solo el botón principal, grande y con el destino resumido.
   ============================================================ */

@media (max-width: 50em) {
    body.mass34-en-conversacion #compose {
        padding: 8px;
    }

body.mass34-en-conversacion #compose-content {
        min-height: 44px;
        padding: 0;
    }

body.mass34-en-conversacion #compose_buttons {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
    }

body.mass34-en-conversacion #compose_buttons .reply_button_container {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        background-color: var(--m34-superficie);
        border: 1px solid var(--m34-borde-fuerte);
        border-radius: var(--m34-radio-l);
    }

body.mass34-en-conversacion #compose_buttons .compose-reply-button-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

body.mass34-en-conversacion #compose_buttons .compose_reply_button {
        display: block;
        width: 100%;
        min-height: 42px;
        overflow: hidden;
        color: var(--m34-texto-suave);
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: transparent;
        border: 0;
    }

body.mass34-en-conversacion #compose_buttons .compose_new_conversation_button,
    body.mass34-en-conversacion #compose_buttons .mobile_button_container,
    body.mass34-en-conversacion #compose_buttons .new_direct_message_button_container {
        display: none;
    }

body.mass34-en-conversacion #compose_buttons .reply_button_container:hover,
    body.mass34-en-conversacion #compose_buttons .reply_button_container:focus-within {
        border-color: var(--m34-acento);
        box-shadow: 0 0 0 2px var(--m34-acento-tenue-fuerte);
    }
}

/* ============================================================
   45. EL BUSCADOR VACÍO, SIN CATÁLOGO DE OPERADORES

Al recibir el foco, Zulip abre de entrada una lista técnica con todos
   los operadores (`is:`, `channel:`, `has:`) y todos los canales. Es útil
   como documentación, pero como primera respuesta del buscador ocupa
   media pantalla, mezcla español e inglés y parece un formulario interno.

Se retira solo mientras el campo está vacío. En cuanto la persona
   escribe, el desplegable vuelve a estar disponible con las coincidencias
   reales. La búsqueda, los filtros avanzados y el teclado se conservan.
   ============================================================ */

#searchbox_form.expanded:has(#search_query:empty) {
    height: var(--m34-buscador-alto);
}

#searchbox_form.expanded:has(#search_query:empty) > .typeahead.dropdown-menu {
    display: none !important;
}

/* Cuando sí hay resultados, se leen como un panel de producto y no como
   una lista HTML flotante. */
#searchbox_form > .typeahead.dropdown-menu {
    margin-top: 8px;
    padding: 6px;
    overflow: hidden;
    background-color: var(--m34-flotante);
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-l);
    box-shadow: var(--m34-sombra-flotante);
}

#searchbox_form .typeahead-item-link {
    border-radius: var(--m34-radio-m);
}

#searchbox_form .typeahead-item.active .typeahead-item-link,
#searchbox_form .typeahead-item-link:hover {
    background-color: var(--m34-acento-tenue);
}

#searchbox_form .search_list_item .description {
    color: var(--m34-texto-suave);
    font-size: 13px;
    line-height: 18px;
}

/* ============================================================
   46. CRONOLOGÍA DE CONVERSACIÓN, PATRÓN ELEMENT/MIDAS

La referencia usa una jerarquía muy clara: navegación sobre una
   superficie gris fría y conversación sobre blanco. Los mensajes no son
   tarjetas alternadas; forman una cronología común con avatar, nombre,
   cuerpo y metadatos. Ese patrón funciona mejor tanto en un directo como
   en un canal con muchas personas y exige menos aprendizaje al usuario.

Se adopta la estructura visual, no la marca ni las funciones de Matrix:
   Zulip conserva temas, canales, menciones, acuses, reacciones, búsqueda y
   permisos. Las citas y los adjuntos siguen teniendo su propia tarjeta,
   porque ahí el contenedor sí comunica una relación real.
   ============================================================ */

:root {
    --m34-fondo: #ffffff;
    --m34-superficie-alt: #f7f7fa;
    --m34-columna: #f4f3f6;
}

.dark-theme:root {
    --m34-fondo: #0f1115;
    --m34-superficie-alt: #13161b;
    --m34-columna: #13161b;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-fondo: #0f1115;
        --m34-superficie-alt: #13161b;
        --m34-columna: #13161b;
    }
}

/* Una sola superficie de lectura, sin el tinte que antes hacía falta para
   separar las burbujas blancas. */
#main_div,
.message-feed,
#message_feed_container,
#message-lists-container,
.message-list {
    background-color: var(--m34-fondo);
}

/* El contenido vuelve a la cronología plana. */
.message_row .message_content,
.message_row.mass34-propio .message_content {
    display: block;
    width: auto;
    max-width: none;
    margin-left: 0;
    padding: 0;
    overflow-wrap: anywhere;
    color: var(--m34-texto);
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.message_row.mass34-propio .message_content a,
.message_row.mass34-propio .message_content code,
.message_row.mass34-propio .message_content blockquote {
    color: inherit;
}

.message_row.mass34-propio .message_content a {
    color: var(--m34-acento);
}

.message_row.mass34-propio .message_content code {
    background-color: var(--m34-superficie-alt);
}

.message_row.mass34-propio .message_content blockquote {
    border-left-color: var(--m34-acento);
}

/* En una cronología todos los mensajes enseñan quién los escribió. */
.message_row.mass34-propio > .messagebox > .messagebox-content > .message-avatar,
.message_row.mass34-propio .messagebox-content > .message-avatar {
    visibility: visible;
}

.message_row.mass34-propio .message_sender .sender_name {
    display: inline;
}

/* El ratón y el teclado señalan la fila completa con una capa tenue, como
   en la referencia. No convierten permanentemente una burbuja en alerta. */
.message_row:hover,
.message_row.selectable_row:hover {
    background-color: color-mix(in srgb, var(--m34-texto) 4%, transparent);
}

.message_row:hover .message_content,
.message_row.mass34-propio:hover .message_content,
.message_row.selected_message .message_content,
.message_row.focused_message .message_content {
    color: var(--m34-texto);
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.message_row.selected_message,
.message_row.focused_message {
    background-color: var(--m34-acento-tenue);
}

/* El encabezado de cada tanda deja de parecer una tarjeta independiente. */
.message_header .message-header-contents,
.message_header_private_message .message-header-contents,
.message_header_stream .message-header-contents {
    background-color: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Compositor discreto y estable: conserva las herramientas, pero ya no
   compite con la conversación mediante doble borde y relieve. */
#compose {
    background-color: var(--m34-superficie);
    border-top-color: var(--m34-borde);
    padding: 8px 16px;
}

.message_comp {
    background-color: var(--m34-superficie);
    border-color: var(--m34-borde-fuerte);
    border-radius: var(--m34-radio-l);
    box-shadow: none;
}

#compose-content:focus-within .message_comp {
    border-color: var(--m34-acento);
    box-shadow: 0 0 0 2px var(--m34-acento-tenue-fuerte);
}

@media (max-width: 50em) {
    .message_row .message_content,
    .message_row.mass34-propio .message_content {
        width: auto;
        max-width: 100%;
    }

#compose {
        padding-right: 8px;
        padding-left: 8px;
    }
}

/* ============================================================
   49. CIERRE RESPONSIVE DE LA CRONOLOGÍA

La hora, los checks y las acciones comparten la primera fila con el
   nombre. En móvil el texto ocupa después todo el ancho libre desde el
   avatar, en lugar de quedar encajonado entre esas columnas. Así las citas
   y los adjuntos conservan un ancho legible sin ocultar sus metadatos.
   ============================================================ */

/* La cabecera sticky necesita una superficie opaca: la sección anterior
   aplana su borde, pero no debe dejar ver mensajes al desplazarse. */
.message_header .message-header-contents,
.message_header_private_message .message-header-contents,
.message_header_stream .message-header-contents {
    background-color: var(--m34-fondo) !important;
    border-bottom: 1px solid var(--m34-borde);
}

@media (max-width: 50em) {
    .message_row .messagebox-content:not(.content_edit_mode) {
        grid-template-columns:
            var(--message-box-avatar-column-width) minmax(0, 1fr) max-content
            max-content max-content;
        grid-template-areas:
            "avatar sender  controls check time"
            "avatar message message  message message"
            ".      hilo    hilo     hilo    hilo"
            ".      more    more     more    more"
            ".      reactions reactions reactions reactions";
    }

.message_row:not(.messagebox-includes-sender)
        .messagebox-content:not(.content_edit_mode) {
        grid-template-areas:
            "avatar .       controls check time"
            "avatar message message  message message"
            ".      hilo    hilo     hilo    hilo"
            ".      more    more     more    more"
            ".      reactions reactions reactions reactions";
    }

.message_row .message_content,
    .message_row.mass34-propio .message_content {
        min-width: 0;
        max-width: 100%;
    }
}

/* ============================================================
   50. MENSAJES LIBRES DEL EDITOR Y REACCIÓN TÁCTIL

El editor personalizado mide 134 px en escritorio, mientras que la
   reserva original de Zulip termina unos 40 px antes. Sin compensarlo, el
   último mensaje queda físicamente debajo de la caja de escritura. El
   relleno pertenece al final de la lista e incluye aire de lectura: al
   llegar abajo se ve el mensaje entero y el editor conserva sus herramientas.

En móvil la reacción sí existe, pero Zulip la retira con tres propiedades
   a la vez porque espera un hover. En una pantalla táctil no hay hover: se
   muestra en el mensaje activo o tocado y se amplía su blanco de pulsación.
   ============================================================ */

@media (min-width: 50.001em) {
    body.mass34-en-conversacion #message-lists-container {
        padding-bottom: 64px;
    }
}

@media (max-width: 50em) {
    .message_row.selected_message .message_controls .reaction_button,
    .message_row.selected_msg_for_touchscreen .message_controls .reaction_button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        min-width: 36px;
        height: 36px;
        margin-block: -7px;
        visibility: visible !important;
        opacity: 1 !important;
        background-color: var(--m34-superficie-alt);
        border: 1px solid var(--m34-borde);
        border-radius: 50%;
        touch-action: manipulation;
    }

.message_row.selected_message .message_controls .reaction_button:active,
    .message_row.selected_msg_for_touchscreen
        .message_controls
        .reaction_button:active {
        color: var(--m34-acento);
        background-color: var(--m34-acento-tenue);
        border-color: var(--m34-acento);
    }
}

/* ============================================================
   51. REACCIONES SIN GLOBO OSCURO

Zulip crea un tooltip Tippy con el aria-label de cada reacción
   ("Tú ... reaccionaron con :star_struck:"). Ese texto se conserva para
   accesibilidad, pero el globo visual tapa los mensajes. Se oculta solo
   mientras se apunta a una reacción; no afecta al selector de emojis ni
   a los avisos de otros controles.
   ============================================================ */

body:has(.message_reaction:hover)
    [data-tippy-root]:has(.tippy-box[role="tooltip"]) {
    visibility: hidden !important;
}

/* ============================================================
   52. PULIDO FINAL DE DENSIDAD Y JERARQUÍA

Esta capa cierra la revisión visual sobre el producto ya montado. La
   conversación gana densidad sin perder legibilidad, el compositor queda
   subordinado al contenido y los controles táctiles dejan de flotar sobre
   el centro del mensaje. En móvil también se reserva la cabecera para lo
   esencial: búsqueda compacta y aviso de notificaciones en una sola fila.
   ============================================================ */

/* Una selección debe orientar, no teñir toda la conversación de rosa. */
.message_row.selected_message,
.message_row.focused_message {
    background-color: color-mix(in srgb, var(--m34-acento) 6%, transparent);
    box-shadow: inset 3px 0 0 var(--m34-acento);
}

.message_row:hover,
.message_row.selectable_row:hover {
    background-color: color-mix(in srgb, var(--m34-texto) 3%, transparent);
}

/* Acerca los mensajes consecutivos y conserva más aire al cambiar de autor. */
.message_row .messagebox-content {
    padding-top: 3px;
    padding-bottom: 3px;
}

.message_row.messagebox-includes-sender .messagebox-content {
    padding-top: 10px;
}

.message_row .message_time {
    color: var(--m34-texto-suave);
    font-size: 12px;
}

/* El editor se percibe como una herramienta estable, no como una alerta. */
#compose {
    padding-top: 6px;
    padding-bottom: 6px;
}

.message_comp {
    border-color: var(--m34-borde);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--m34-texto) 8%, transparent);
}

#compose-content:focus-within .message_comp {
    border-color: color-mix(in srgb, var(--m34-acento) 72%, var(--m34-borde));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--m34-acento) 12%, transparent);
}

#compose-textarea {
    padding-top: 8px;
    padding-bottom: 8px;
}

#message-formatting-controls-container,
.compose-scrolling-buttons-container {
    margin-top: 0;
}

#compose-send-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    color: var(--m34-sobre-acento);
    background-color: var(--m34-acento);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--m34-acento) 24%, transparent);
}

#compose-send-button:disabled {
    color: color-mix(in srgb, var(--m34-sobre-acento) 82%, transparent);
    background-color: color-mix(in srgb, var(--m34-acento) 48%, var(--m34-superficie));
    box-shadow: none;
}

@media (max-width: 50em) {
    /* El aviso deja de consumir más de cien píxeles del área de lectura. */
    .navbar-alert-banner {
        min-height: 0;
        padding: 7px 34px 7px 10px;
    }

.navbar-alert-banner .banner-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center;
        gap: 8px;
    }

.navbar-alert-banner .banner-label {
        display: -webkit-box;
        overflow: hidden;
        font-size: 12px;
        line-height: 15px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

.navbar-alert-banner .banner-action-buttons {
        width: auto;
    }

.navbar-alert-banner .request-desktop-notifications {
        width: auto;
        min-width: 0;
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
        white-space: nowrap;
    }

.navbar-alert-banner .banner-close-button {
        top: 6px;
        right: 5px;
    }

/* Cerrado, el buscador es un único botón. Al abrirlo recupera todo el
       ancho disponible y cubre temporalmente la cabecera. */
    #searchbox {
        position: relative;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
    }

#searchbox_form:not(.expanded) {
        display: flex;
        position: absolute;
        top: 12px;
        right: auto;
        bottom: auto;
        left: 0;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        margin: 0;
        background: transparent;
        transform: none;
    }

#searchbox_form:not(.expanded) #searchbox-input-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border-color: transparent;
        border-radius: 50%;
    }

#searchbox_form:not(.expanded) .search-input-and-pills,
    #searchbox_form:not(.expanded) .search_close_button {
        display: none;
    }

#searchbox_form:not(.expanded) .search_icon {
        position: static;
        margin: 0;
    }

#searchbox #searchbox_form.expanded {
        display: block;
        position: fixed !important;
        top: 12px !important;
        right: auto !important;
        bottom: auto !important;
        left: 64px !important;
        z-index: 50;
        width: calc(100vw - 128px);
        max-width: calc(100vw - 128px);
        height: 40px !important;
        margin: 0;
        background-color: var(--m34-superficie);
        transform: none !important;
    }

body:has(.navbar-alert-banner) #searchbox #searchbox_form.expanded {
        top: 73px !important;
    }

#searchbox_form.expanded #searchbox-input-container {
        width: 100%;
        height: 40px;
        background-color: var(--m34-superficie);
    }

body:has(#searchbox_form.expanded)
        a.header-button:not(#userlist-toggle-button) {
        visibility: hidden;
        pointer-events: none;
    }

/* Los controles pertenecen a la línea de metadatos; el botón de
       reacción mantiene un blanco táctil de 36 px sin parecer un globo. */
    .message_row .message_controls {
        align-items: center;
        justify-content: flex-end;
        min-height: 32px;
    }

.message_row.selected_message .message_controls .reaction_button,
    .message_row.selected_msg_for_touchscreen .message_controls .reaction_button {
        width: 36px;
        min-width: 36px;
        height: 36px;
        margin: 0;
        color: var(--m34-texto-suave);
        background-color: transparent;
        border-color: transparent;
        border-radius: var(--m34-radio-m);
    }

.message_row.selected_message .message_controls .reaction_button:active,
    .message_row.selected_msg_for_touchscreen
        .message_controls
        .reaction_button:active {
        background-color: var(--m34-acento-tenue);
        border-color: transparent;
    }

#compose {
        padding: 6px;
    }

#compose-content {
        padding-right: 0;
        padding-left: 0;
    }

#compose-textarea {
        padding: 8px 12px;
        line-height: 1.4;
    }

#compose-send-button {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
}

/* ============================================================
   53. DIRECCIÓN VISUAL MASS 34 · REFERENCIA STITCH

Traduce la maqueta aprobada al DOM real de Zulip. No se reemplazan
   vistas, permisos ni comportamiento: esta capa ordena la navegación,
   la cronología, el panel de participantes y el compositor con la escala
   gris fría, el rojo de marca y la densidad del diseño de referencia.
   ============================================================ */

:root {
    --left-sidebar-width: 288px;
    --right-sidebar-width: 320px;
    --m34-columna: #edf2f7;
    --m34-columna-texto: #0f172a;
    --m34-columna-texto-2: #475569;
    --m34-columna-hover: rgba(255, 255, 255, 0.7);
    --m34-columna-campo: #ffffff;
    --m34-columna-campo-borde: #cbd5e1;
    --m34-columna-activa: #ffffff;
    --m34-columna-activa-texto: #0f172a;
    --m34-columna-borde: #cbd5e1;
    --m34-fondo: #f8fafc;
    --m34-superficie-alt: #f1f5f9;
    --m34-texto: #0f172a;
    --m34-texto-suave: #334155;
    --m34-texto-tenue: #64748b;
    --m34-borde: #e2e8f0;
    --m34-borde-fuerte: #cbd5e1;
}

.dark-theme:root {
    --m34-acento: #ef4444;
    --m34-acento-hover: #dc2626;
    --m34-acento-activo: #b91c1c;
    --m34-sobre-acento: #ffffff;
    --m34-navbar-fondo: #0c0e13;
    --m34-navbar-texto: #f1f5f9;
    --m34-navbar-texto-tenue: #94a3b8;
    --m34-navbar-borde: #2a2f3d;
    --m34-navbar-campo: #111318;
    --m34-navbar-campo-hover: #181b22;
    --m34-navbar-campo-borde: #2a2f3d;
    --m34-columna: #111318;
    --m34-columna-texto: #f1f5f9;
    --m34-columna-texto-2: #94a3b8;
    --m34-columna-hover: rgba(255, 255, 255, 0.07);
    --m34-columna-campo: #181b22;
    --m34-columna-campo-borde: #2a2f3d;
    --m34-columna-activa: rgba(239, 68, 68, 0.14);
    --m34-columna-activa-texto: #ffffff;
    --m34-columna-borde: #2a2f3d;
    --m34-fondo: #0c0e13;
    --m34-superficie: #181b22;
    --m34-superficie-alt: #222631;
    --m34-flotante: rgba(24, 27, 34, 0.96);
    --m34-texto: #f1f5f9;
    --m34-texto-suave: #94a3b8;
    --m34-texto-tenue: #64748b;
    --m34-borde: #2a2f3d;
    --m34-borde-fuerte: #373e50;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-acento: #ef4444;
        --m34-acento-hover: #dc2626;
        --m34-acento-activo: #b91c1c;
        --m34-sobre-acento: #ffffff;
        --m34-navbar-fondo: #0c0e13;
        --m34-navbar-texto: #f1f5f9;
        --m34-navbar-texto-tenue: #94a3b8;
        --m34-navbar-borde: #2a2f3d;
        --m34-navbar-campo: #111318;
        --m34-navbar-campo-hover: #181b22;
        --m34-navbar-campo-borde: #2a2f3d;
        --m34-columna: #111318;
        --m34-columna-texto: #f1f5f9;
        --m34-columna-texto-2: #94a3b8;
        --m34-columna-hover: rgba(255, 255, 255, 0.07);
        --m34-columna-campo: #181b22;
        --m34-columna-campo-borde: #2a2f3d;
        --m34-columna-activa: rgba(239, 68, 68, 0.14);
        --m34-columna-activa-texto: #ffffff;
        --m34-columna-borde: #2a2f3d;
        --m34-fondo: #0c0e13;
        --m34-superficie: #181b22;
        --m34-superficie-alt: #222631;
        --m34-flotante: rgba(24, 27, 34, 0.96);
        --m34-texto: #f1f5f9;
        --m34-texto-suave: #94a3b8;
        --m34-texto-tenue: #64748b;
        --m34-borde: #2a2f3d;
        --m34-borde-fuerte: #373e50;
    }
}

body:has(.app),
button,
input,
textarea {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

/* La referencia usa la navegación como una superficie de trabajo tranquila. */
#mass34-bienvenida {
    display: none;
}

#left-sidebar-navigation-area {
    margin-top: 0;
}

#left-sidebar,
#right-sidebar {
    background-color: var(--m34-columna);
    border-color: var(--m34-columna-borde);
}

#left-sidebar .filter-input,
#right-sidebar .filter-input {
    min-height: 36px;
    background-color: var(--m34-columna-campo);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--m34-columna-campo-borde);
}

#left-sidebar .left-sidebar-title,
#right-sidebar .buddy-list-section-heading {
    color: var(--m34-columna-texto-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#left-sidebar .left-sidebar-navigation-label {
    color: var(--m34-columna-texto);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#left-sidebar a,
#right-sidebar a {
    border-radius: 7px;
}

#left-sidebar .active-filter,
#left-sidebar .active-filter:hover,
#left-sidebar .narrow-filter.active-filter {
    color: var(--m34-columna-activa-texto);
    background-color: var(--m34-columna-activa);
    box-shadow: inset 3px 0 0 var(--m34-acento),
        inset 0 0 0 1px color-mix(in srgb, var(--m34-acento) 12%, transparent);
}

/* El panel derecho se presenta como contexto de la conversación. En grupos
   conserva la lista real de participantes, que es el contenido correcto. */
#right-sidebar::before {
    content: "Detalles de la conversación";
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    color: var(--m34-columna-texto-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--m34-superficie);
    border-bottom: 1px solid var(--m34-columna-borde);
}

#right-sidebar #userlist-header {
    padding: 10px 12px;
    background-color: var(--m34-superficie);
    border-bottom: 1px solid var(--m34-columna-borde);
}

#right-sidebar .buddy-list-section-heading {
    padding-top: 12px;
    padding-bottom: 8px;
}

/* Mensajes con la jerarquía de la maqueta: autor fuerte, hora secundaria y
   contenido de lectura continua. */
.message_row .message_sender .sender_name {
    color: var(--m34-texto);
    font-size: 13px;
    font-weight: 700;
}

.message_row .message_content {
    color: var(--m34-texto);
    font-size: 15px;
    line-height: 1.48;
}

.message_row .message_reaction {
    background-color: var(--m34-superficie-alt);
    border-color: var(--m34-borde);
    border-radius: 999px;
}

.message_row .message_content blockquote {
    padding: 7px 10px;
    color: var(--m34-texto-suave);
    background-color: var(--m34-superficie-alt);
    border-left: 2px solid var(--m34-acento);
    border-radius: 0 7px 7px 0;
}

.dark-theme .message_row:hover,
.dark-theme .message_row.selectable_row:hover,
.color-scheme-automatic .message_row:hover,
.color-scheme-automatic .message_row.selectable_row:hover {
    background-color: rgba(255, 255, 255, 0.035);
}

.dark-theme .message-avatar img,
.dark-theme .user_circle,
.color-scheme-automatic .message-avatar img,
.color-scheme-automatic .user_circle {
    border-radius: 7px;
}

/* El compositor de la referencia es una sola tarjeta con herramientas en
   el pie y una llamada a la acción textual. */
#compose {
    background-color: var(--m34-superficie);
    border-top: 1px solid var(--m34-borde);
}

.message_comp {
    border-color: var(--m34-borde-fuerte);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#message-formatting-controls-container,
.compose-scrolling-buttons-container {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: color-mix(
        in srgb,
        var(--m34-superficie-alt) 72%,
        transparent
    );
    border-top: 1px solid color-mix(in srgb, var(--m34-borde) 70%, transparent);
}

@media (min-width: 50.001em) {
    :root {
        --header-height: 70px;
    }

/* El aviso deja de ser una franja de alarma y se integra como estado. */
    .navbar-alert-banner {
        position: fixed;
        top: 17px;
        right: calc(var(--right-sidebar-width) - 24px);
        left: auto;
        z-index: 140;
        width: max-content;
        min-height: 34px;
        padding: 0 12px;
        color: #92400e;
        background-color: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 999px;
        box-shadow: none;
        transform: none;
    }

.navbar-alert-banner .banner-content {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.navbar-alert-banner .banner-label {
        display: inline-flex;
        align-items: center;
        font-size: 0;
    }

.navbar-alert-banner .banner-label::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-right: 7px;
        background-color: #f59e0b;
        border-radius: 50%;
    }

.navbar-alert-banner .banner-label::after {
        content: "Avisos del navegador";
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

.navbar-alert-banner .request-desktop-notifications {
        min-height: 0;
        padding: 0;
        color: #78350f;
        font-size: 11px;
        font-weight: 700;
        text-decoration: underline;
        background: transparent;
        border: 0;
    }

.navbar-alert-banner .customize-desktop-notifications,
    .navbar-alert-banner .reject-desktop-notifications,
    .navbar-alert-banner .banner-close-button {
        display: none;
    }

#searchbox {
        min-width: 260px;
    }

#compose-send-button {
        width: auto;
        min-width: 92px;
        height: 36px;
        padding: 0 14px;
        border-radius: 8px;
    }

#compose-send-button::before {
        content: "Enviar";
        margin-right: 7px;
        font-size: 13px;
        font-weight: 700;
    }
}

/* ============================================================
   54. ESTRUCTURA CONTEXTUAL DE LA REFERENCIA STITCH

Los nodos los crea mass34-stitch-ui.js con la conversacion real.
   Esta seccion reproduce las proporciones, tarjetas y microjerarquia
   de las capturas clara y oscura sin sustituir el contenido de Zulip.
   ============================================================ */

@media (min-width: 50.001em) {
    :root {
        --left-sidebar-width: 311px;
        --right-sidebar-width: 354px;
    }

#navbar-middle .column-middle-inner {
        display: block;
    }

#navbar-middle .top-navbar-container {
        display: grid;
        width: 100%;
        grid-template-columns: 0 minmax(300px, 1fr);
        gap: 0;
        align-items: stretch;
    }

#navbar-middle .top-navbar-container > #message_view_header {
        width: 0;
        min-width: 0;
        padding: 0;
        overflow: hidden;
    }

#searchbox,
    #searchbox #searchbox_form,
    #searchbox #searchbox-input-container {
        min-width: 0;
    }

#searchbox {
        width: 100%;
    }

#searchbox #searchbox_form {
        width: calc(100% - 60px);
        max-width: 420px;
        margin-right: auto;
        margin-left: 60px;
    }

#searchbox #searchbox-input-container {
        width: 100%;
    }

#top_navbar .left-sidebar-toggle-button {
        display: none;
    }

#top_navbar .column-left .brand.logo,
    #top_navbar .column-left a.brand {
        margin-left: 18px;
    }
}

/* Marca compacta: simbolo, nombre y sede como en la referencia. */
#top_navbar .brand.logo:has(.mass34-workspace-brand) > img,
#top_navbar a.brand:has(.mass34-workspace-brand) > img {
    display: none;
}

.mass34-workspace-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--m34-navbar-texto);
}

.mass34-workspace-34 {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--m34-acento) 24%, transparent);
}

.mass34-workspace-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.12;
}

.mass34-workspace-copy strong {
    color: var(--m34-navbar-texto);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mass34-workspace-copy small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: #059669;
    font-size: 10px;
    font-weight: 600;
}

.mass34-workspace-copy small i,
.mass34-network-copy i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Identidad y acciones de la conversacion abierta. */
#message_view_header {
    gap: 12px;
    min-width: 0;
    padding: 0 8px;
}

.message-header-contents.mass34-stitch-room-header {
    display: grid;
    min-height: 68px;
    padding: 8px 12px;
    /* Reserva el sitio de `.mass34-chat-header-actions`, que ya no vive
     * en la rejilla (va en posición absoluta, ver más abajo): hasta 4
     * iconos —llamada, vídeo, info y, en una conversación propia, la
     * papelera— a 34px cada uno más el hueco entre ellos. Sin esto,
     * `.mass34-conversation-identity` (la columna `1fr`) y los botones de
     * grupo que sí siguen en la rejilla (`.mass34-nombre-grupo`,
     * `.mass34-convertir-grupo`) se extenderían por debajo de los
     * iconos en vez de pararse antes. */
    padding-right: 180px;
    grid-template-columns: minmax(0, 1fr) repeat(2, 36px);
    align-items: center;
    gap: 4px;
    background: var(--m34-superficie);
    border-bottom: 1px solid var(--m34-borde);
}

.message-header-contents.mass34-stitch-room-header
    > .message_label_clickable,
.message-header-contents.mass34-stitch-room-header
    > .recipient_row_date {
    display: none;
}

.message-header-contents.mass34-stitch-room-header
    > .mass34-conversation-identity {
    grid-column: 1;
    min-width: 0;
}

.message-header-contents.mass34-stitch-room-header > button {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    color: var(--m34-texto-tenue);
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.message-header-contents.mass34-stitch-room-header > button:hover {
    color: var(--m34-texto);
    background: var(--m34-superficie-alt);
}

/* Los tres mismos de antes: por rejilla (columnas 2, 3 y 4) dependían de
 * que `minmax(0, 1fr)` calculara bien el ancho que le sobra a la columna
 * 1, y no siempre lo hacía —ver la nota de `.mass34-chat-header-actions`,
 * unas líneas más abajo—. En una conversación de grupo, donde estos tres
 * son los únicos botones de la cabecera (no hay teléfono/vídeo/info),
 * el hueco llegaba a 187px entre el último botón y el borde. Posición
 * absoluta y un `right` fijo por cada uno, de más a menos pegado al
 * borde: no dependen de la rejilla, y si alguno está oculto
 * (`display: none`, como `.mass34-convertir-grupo` para quien no puede
 * crear canales) los otros dos no se mueven para llenar el hueco, pero
 * tampoco queda ninguno fuera de sitio. */
.message-header-contents.mass34-stitch-room-header
    > .mass34-vaciar-conversacion {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.message-header-contents.mass34-stitch-room-header
    > .mass34-convertir-grupo {
    position: absolute;
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
}

.message-header-contents.mass34-stitch-room-header
    > .mass34-nombre-grupo {
    position: absolute;
    top: 50%;
    right: 100px;
    transform: translateY(-50%);
}

#message_view_header:has(.mass34-conversation-identity) > .navbar_title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mass34-conversation-identity {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
}

.mass34-stitch-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: visible;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    background: linear-gradient(145deg, var(--m34-marca-hasta), var(--m34-acento));
    border-radius: 50%;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--m34-acento) 18%, transparent);
}

.mass34-stitch-avatar.mass34-stitch-avatar-canal {
    background: var(--mass34-color-canal, var(--m34-acento));
    box-shadow: 0 3px 10px color-mix(
        in srgb,
        var(--mass34-color-canal, var(--m34-acento)) 28%,
        transparent
    );
}

.mass34-stitch-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.mass34-stitch-avatar > svg {
    display: block;
    width: 19px;
    height: 19px;
    color: #fff !important;
    fill: none;
    stroke: #fff !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mass34-stitch-avatar-grande {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
    font-size: 24px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--m34-acento) 22%, transparent);
}

.mass34-stitch-avatar-grande.mass34-stitch-avatar-canal {
    box-shadow: 0 8px 24px color-mix(
        in srgb,
        var(--mass34-color-canal, var(--m34-acento)) 32%,
        transparent
    );
}

.mass34-stitch-avatar-grande > svg {
    width: 34px;
    height: 34px;
}

.mass34-stitch-presencia {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 11px;
    height: 11px;
    background: #94a3b8;
    border: 2px solid var(--m34-superficie);
    border-radius: 50%;
}

.mass34-stitch-presencia.esta-activo {
    background: #10b981;
}

.mass34-conversation-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
}

.mass34-conversation-title-line {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.mass34-conversation-title {
    overflow: hidden;
    color: var(--m34-navbar-texto);
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mass34-conversation-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    flex: 0 0 auto;
    color: var(--m34-navbar-texto-tenue);
    font-size: 9px;
    font-weight: 700;
    background: var(--m34-navbar-campo);
    border: 1px solid var(--m34-navbar-borde);
    border-radius: 999px;
}

.mass34-conversation-status {
    overflow: hidden;
    margin-top: 4px;
    color: var(--m34-navbar-texto-tenue);
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mass34-conversation-status.esta-activo {
    color: #059669;
}

/* "X participantes", cuando es un grupo: abre quiénes están dentro. */
.mass34-conversation-status-clicable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color var(--m34-transicion);
}

.mass34-conversation-status-clicable:hover,
.mass34-conversation-status-clicable:focus-visible {
    text-decoration-color: currentColor;
}

.mass34-chat-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.mass34-stitch-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--m34-navbar-texto-tenue);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.mass34-stitch-icono:hover,
.mass34-stitch-icono:focus-visible {
    color: var(--m34-navbar-texto);
    background: var(--m34-navbar-hover);
}

.mass34-stitch-icono svg,
.mass34-context-action svg,
.mass34-context-file svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Panel derecho: perfil o grupo, acciones y adjuntos reales. */
#right-sidebar::before {
    min-height: 58px;
    padding: 0 18px;
}

.mass34-context-card {
    color: var(--m34-columna-texto);
    background: var(--m34-columna);
    border-bottom: 1px solid var(--m34-columna-borde);
}

.mass34-context-profile {
    display: flex;
    padding: 22px 18px 18px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid var(--m34-columna-borde);
}

.mass34-context-profile h2 {
    max-width: 100%;
    margin: 13px 0 0;
    overflow: hidden;
    color: var(--m34-columna-texto);
    font-size: 15px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mass34-context-profile p {
    margin: 4px 0 0;
    color: var(--m34-columna-texto-2);
    font-size: 12px;
}

.mass34-context-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    margin-top: 10px;
    padding: 0 9px;
    color: var(--m34-columna-texto-2);
    font-size: 10px;
    font-weight: 650;
    background: var(--m34-superficie-alt);
    border: 1px solid var(--m34-columna-borde);
    border-radius: 999px;
}

.mass34-context-state::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
}

.mass34-context-state.esta-activo {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.dark-theme .mass34-context-state.esta-activo {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.28);
}

.mass34-context-state.esta-activo::before {
    background: #10b981;
}

.mass34-context-actions {
    display: grid;
    width: 100%;
    margin-top: 17px;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.mass34-context-action {
    display: flex;
    min-width: 0;
    min-height: 58px;
    padding: 7px 4px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--m34-columna-texto-2);
    font-size: 10px;
    background: var(--m34-columna-campo);
    border: 1px solid var(--m34-columna-borde);
    border-radius: 9px;
    cursor: pointer;
}

.mass34-context-action:hover,
.mass34-context-action:focus-visible {
    color: var(--m34-columna-activa-texto);
    background: var(--m34-columna-activa);
    border-color: color-mix(in srgb, var(--m34-acento) 30%, var(--m34-columna-borde));
}

.mass34-context-files {
    padding: 15px 16px 16px;
}

.mass34-context-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--m34-columna-texto);
    font-size: 11px;
}

.mass34-context-section-title strong {
    font-weight: 700;
}

.mass34-context-section-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    color: var(--m34-columna-texto-2);
    font-size: 9px;
    background: var(--m34-superficie-alt);
    border-radius: 999px;
}

.mass34-context-file {
    display: flex;
    min-width: 0;
    min-height: 44px;
    margin-top: 7px;
    padding: 8px 9px;
    align-items: center;
    gap: 9px;
    color: var(--m34-columna-texto);
    background: var(--m34-columna-campo);
    border: 1px solid var(--m34-columna-borde);
    border-radius: 9px;
}

.mass34-context-file svg {
    width: 28px;
    height: 28px;
    padding: 6px;
    flex: 0 0 28px;
    color: var(--m34-acento);
    background: var(--m34-acento-tenue);
    border-radius: 7px;
}

.mass34-context-file span {
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mass34-context-empty {
    margin: 0;
    padding: 12px;
    color: var(--m34-columna-texto-2);
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
    background: var(--m34-columna-campo);
    border: 1px dashed var(--m34-columna-borde);
    border-radius: 9px;
}

#right-sidebar:has(.mass34-context-card) #userlist-header {
    padding-top: 12px;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-container {
    padding-top: 2px;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-other-users-container {
    display: none;
}

/* Pie persistente del lateral izquierdo. */
.mass34-network-status {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    min-height: 48px;
    padding: 0 13px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--m34-nav-texto-2) !important;
    font-size: 11px;
    background: var(--m34-nav-fondo) !important;
    border-top: 1px solid var(--m34-nav-borde) !important;
    border-right: 1px solid var(--m34-nav-borde) !important;
    backdrop-filter: blur(10px);
}

@media (min-width: 50.001em) {
    .mass34-network-status {
        right: auto;
        width: calc(var(--left-sidebar-width) + 9px);
    }
}

.mass34-network-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.mass34-network-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mass34-network-status.sin-conexion .mass34-network-copy i {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.mass34-network-version {
    padding: 2px 6px;
    flex: 0 0 auto;
    color: var(--m34-nav-texto-2) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    background: #ffffff !important;
    border: 1px solid var(--m34-nav-borde) !important;
    border-radius: 6px;
}

/* Mas aire vertical y un campo de escritura tan claro como en la captura. */
@media (min-width: 50.001em) {
    #compose {
        min-height: 154px;
        padding: 12px 18px 14px;
    }

#compose-textarea {
        min-height: 68px !important;
        padding: 12px 14px;
    }

.message_comp {
        min-height: 126px;
    }
}

/* 55.2 Cierre definitivo de geometria y acciones. Debe permanecer al final
   porque ajusta medidas compiladas de Zulip y las secciones anteriores. */

@media (min-width: 50.001em) {
    /* El panel nativo queda 16 px fuera por el ancho de la barra de scroll. */
    #right-sidebar {
        transform: translateX(-16px);
    }

/* 329px, no `var(--right-sidebar-width)` (354px): esa variable es el
     * ancho nativo de Zulip para su propio panel, y el nuestro —el de la
     * sección 73, `#right-sidebar-container { width: 329px }`— es más
     * estrecho. Reservar el nativo dejaba un hueco de 15px entre la
     * conversación y el panel de verdad, que no está pegado a nada: solo
     * flota con ese margen de sobra detrás. */
    body.mass34-panel-derecho-visible .column-middle,
    body.mass34-panel-derecho-visible #compose-content {
        margin-right: 329px;
    }

#compose-content {
        padding-right: 3px;
        padding-left: 3px;
    }

body.mass34-en-conversacion #message_feed_container {
        padding-top: var(--header-height) !important;
    }

#main_div > .top-messages-logo,
    #main_div > #loading_older_messages_indicator:empty,
    #main_div > #page_loading_indicator:empty {
        display: none !important;
    }

.message_header:has(.mass34-stitch-room-header) {
        /* El +48px/-24px centraba el desbordamiento a partes iguales a
           los dos lados, pero el lado derecho se quedaba 7px corto del
           borde real de la ventana —la franja que se veía como un hueco
           minúsculo en la esquina superior derecha—. El izquierdo ya
           llegaba bien, así que los 7px de más van solo al ancho, no al
           margen: no mueve el lado izquierdo. */
        width: calc(100% + 55px);
        margin-left: -24px;
    }

.message-header-contents.mass34-stitch-room-header {
        min-height: 70px;
        box-sizing: border-box;
        /* El 40px de la derecha venía de antes de anclar los iconos en
         * posición absoluta (sección de más arriba): esta regla, al venir
         * después en el archivo, pisaba silenciosamente el padding-right
         * de 180px que se le puso ahí para reservarles sitio, porque el
         * `padding` en forma abreviada fija los cuatro lados de golpe. */
        padding: 8px 180px 8px 31px;
        margin-top: 0 !important;
    }

#left-sidebar-search {
        transform: none !important;
        margin-bottom: 0 !important;
    }

.message_row .message_controls .message_control_button,
    .message_row .message_controls .message-controls-icon {
        width: 28px;
        min-width: 28px;
        height: 28px;
    }
}

.message-header-contents.mass34-stitch-room-header .mass34-stitch-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.mass34-stitch-avatar-grande {
    width: 100px;
    height: 100px;
    flex-basis: 100px;
    font-size: 30px;
}

.mass34-context-actions {
    margin-top: 26px;
}

.mass34-context-action {
    min-height: 66px;
}

#right-sidebar .mass34-context-close {
    right: 16px;
    z-index: 20;
    display: inline-flex;
    visibility: visible;
    opacity: 1;
}

#right-sidebar:has(.mass34-context-card) #user-list,
#right-sidebar:has(.mass34-context-card) #buddy_list_wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Barra flotante de acciones: Zulip puede reconstruirla, y el modulo de
   acciones repone Responder y Reaccionar cuando eso ocurre. */
.message_row .message_controls {
    gap: 1px;
    padding: 2px;
    opacity: 0;
    visibility: hidden;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
    transition: opacity 120ms ease, visibility 120ms ease;
}

.message_row:hover .message_controls,
.message_row .message_controls:focus-within,
.message_row.selected_msg_for_touchscreen .message_controls {
    opacity: 1;
    visibility: visible;
}

.message_row .message_controls .message_control_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.message_row .message_controls .message_control_button:hover {
    color: var(--m34-texto);
    background: var(--m34-superficie-alt);
}

.mass34-mention-button {
    padding: 0;
    color: var(--m34-texto-tenue);
    font: 600 18px/1 var(--m34-font-ui);
    background: transparent;
    border: 0;
}

#message-formatting-controls-container
    a[data-format-type="code"]::before {
    content: "</>" !important;
    font: 600 12px/1 var(--m34-font-ui) !important;
}

@media (max-width: 50em) {
    .mass34-workspace-copy,
    .mass34-chat-header-actions,
    .mass34-conversation-badge {
        display: none;
    }

.mass34-workspace-34 {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 8px;
    }

.mass34-conversation-identity {
        gap: 7px;
    }

.mass34-stitch-avatar {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

.mass34-conversation-title {
        max-width: 118px;
        font-size: 12px;
    }

.mass34-conversation-status {
        max-width: 118px;
        font-size: 9px;
    }

#message_view_header {
        padding: 0 5px;
    }

.mass34-network-status {
        position: sticky;
        min-height: 48px;
    }
}

/* ============================================================
   55. AJUSTE FINAL CONTRA LA REFERENCIA DE MENSAJERIA

Una sola escala tipografica y una reticula de 8 px para que cabecera,
   laterales, cronologia y compositor compartan ritmo y alineacion.
   ============================================================ */

:root {
    --m34-font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    --m34-space-1: 4px;
    --m34-space-2: 8px;
    --m34-space-3: 12px;
    --m34-space-4: 16px;
    --m34-space-6: 24px;
}

body:has(.app),
body:has(.app) .app,
#left-sidebar,
#right-sidebar,
#message-lists-container,
#compose,
#compose input,
#compose textarea,
#compose button,
#compose [contenteditable="true"],
.popover-menu {
    font-family: var(--m34-font-ui);
}

#left-sidebar .left-sidebar-navigation-label,
#left-sidebar .stream-name,
#left-sidebar .private-message-name,
#right-sidebar .user-name {
    font-size: 14px;
    line-height: 20px;
}

#left-sidebar .left-sidebar-title,
#right-sidebar .buddy-list-heading {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.075em;
}

@media (min-width: 50.001em) {
    #searchbox #searchbox_form {
        max-width: 445px;
    }

#left-sidebar-search {
        padding-right: 15px;
        padding-left: 15px;
    }

#left-sidebar .left-sidebar-navigation-area {
        padding-right: 15px;
        padding-left: 15px;
    }

#compose-content {
        padding-right: 6px;
        padding-left: 6px;
    }

#compose {
        min-height: 175px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

.message_comp {
        min-height: 142px;
    }
}

/* Cabecera global: iconos, notificaciones y persona conectada. */
#top_navbar .column-right {
    display: flex;
    padding-right: 14px;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

#top_navbar .column-right .header-button,
.mass34-header-notifications {
    display: inline-flex;
    width: 42px;
    height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--m34-navbar-texto-tenue);
    background: transparent;
    border: 0;
    border-radius: 9px;
}

#top_navbar .column-right .header-button:hover,
#top_navbar .column-right .header-button:focus-visible,
.mass34-header-notifications:hover,
.mass34-header-notifications:focus-visible {
    color: var(--m34-navbar-texto);
    background: var(--m34-navbar-hover);
}

.mass34-header-notifications {
    position: relative;
    flex: 0 0 42px;
}

.mass34-header-notifications svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mass34-header-notifications > i {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    width: 8px;
    height: 8px;
    background: var(--m34-acento);
    border: 2px solid var(--m34-navbar-fondo);
    border-radius: 50%;
}

.mass34-header-notifications.tiene-pendientes > i {
    display: block;
}

#personal-menu {
    min-width: 0;
    padding-left: 12px;
    margin-left: 8px;
    border-left: 1px solid var(--m34-navbar-borde);
}

#personal-menu > a.mass34-current-user {
    width: auto;
    min-width: 154px;
    padding: 4px 7px;
    justify-content: flex-start;
    gap: 9px;
}

#personal-menu .header-button-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.mass34-default-avatar-hidden {
    display: none !important;
}

.mass34-top-avatar {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    background: linear-gradient(145deg, var(--m34-acento-activo), var(--m34-acento));
    border-radius: 50%;
}

.mass34-top-avatar::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 9px;
    height: 9px;
    background: #10b981;
    border: 2px solid var(--m34-navbar-fondo);
    border-radius: 50%;
}

.mass34-current-user-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.mass34-current-user-copy strong {
    max-width: 128px;
    overflow: hidden;
    color: var(--m34-navbar-texto);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mass34-current-user-copy small {
    max-width: 128px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--m34-navbar-texto-tenue);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mass34-panel-derecho-visible #userlist-toggle {
    display: none;
}

/* Cabecera de la conversacion, con los tres controles de la referencia.
 *
 * Antes iban por rejilla (`grid-column: 2 / 5; justify-self: end`), pero
 * la columna `minmax(0, 1fr)` de la izquierda no siempre ocupa todo el
 * ancho que debería —depende de con qué más comparte fila esta cabecera,
 * y eso cambia con la versión de Zulip—, así que la rejilla entera
 * terminaba más corta que la fila real: quedaba una franja vacía entre
 * los iconos y el borde derecho, con el botón de info bien lejos de donde
 * tendría que estar. En posición absoluta, anclados al borde con
 * relleno de la propia fila, no dependen de ese cálculo: están donde
 * tienen que estar, acierte la rejilla o no. */
.message-header-contents.mass34-stitch-room-header {
    position: relative;
}

.message-header-contents.mass34-stitch-room-header
    > .mass34-chat-header-actions {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.mass34-stitch-icono:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.mass34-stitch-icono:disabled:hover {
    color: var(--m34-navbar-texto-tenue);
    background: transparent;
}

.mass34-conversation-title {
    font-size: 14px;
    line-height: 20px;
}

.mass34-conversation-badge {
    min-height: 22px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 600;
}

.mass34-conversation-status {
    margin-top: 2px;
    font-size: 11px;
    line-height: 16px;
}

/* Avatares predeterminados convertidos a iniciales, sin logos repetidos. */
.message-avatar,
.user-profile-picture {
    position: relative;
}

.mass34-initials-avatar {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    background: #1e293b;
    border-radius: 50%;
}

.message-avatar .mass34-initials-avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
}

.mass34-initials-avatar.es-propio {
    background: linear-gradient(145deg, var(--m34-acento-activo), var(--m34-acento));
}

.user-profile-picture .mass34-initials-avatar + .user-circle {
    position: absolute;
    right: -2px;
    bottom: -2px;
}

/* Cronologia: sin bloques rosados, con una jerarquia de lectura estable. */
.message_row,
.message_row.selected_message,
.message_row.focused_message,
.message_row.selected_msg_for_touchscreen {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.message_row:hover,
.message_row.selectable_row:hover {
    background-color: color-mix(
        in srgb,
        var(--m34-superficie-alt) 45%,
        transparent
    ) !important;
}

.message_row .message_sender .sender_name {
    font-size: 13px;
    line-height: 18px;
}

.message_row .message_time,
.message_row .message_timestamp {
    font-size: 11px;
    line-height: 16px;
}

.message_row .message_content {
    font-size: 15px;
    line-height: 23px;
}

.message_row .message_content blockquote {
    display: block;
    width: min(640px, 100%);
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    margin: 5px 0 7px;
    background: var(--m34-superficie-alt);
    border-inline-start: 2px solid var(--m34-acento);
    border-radius: 0 7px 7px 0;
}

.message_row .message_reaction {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 11px;
}

/* Panel de detalles: perfil, participantes y archivos, en ese orden. */
#right-sidebar {
    position: relative;
}

#right-sidebar .mass34-context-close {
    position: absolute;
    top: calc(var(--header-height) + 10px);
    right: 10px;
    z-index: 5;
}

#right-sidebar:has(.mass34-context-card) #userlist-header {
    display: none;
}

#right-sidebar:has(.mass34-context-card) #buddy_list_wrapper {
    max-height: 190px !important;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-container {
    padding: 13px 16px 15px;
    border-bottom: 1px solid var(--m34-columna-borde);
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-container
    .buddy-list-subsection-header {
    min-height: 30px;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-container
    .buddy-list-section-toggle {
    display: none;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-section-heading {
    display: flex;
    padding: 0;
    align-items: center;
    color: var(--m34-columna-texto);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-section-heading
    .buddy-list-heading-text {
    font-size: 0;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-section-heading
    .buddy-list-heading-text::after {
    content: "Participantes";
    font-size: 12px;
}

#right-sidebar:has(.mass34-context-card) .user_sidebar_entry {
    min-height: 42px;
}

#right-sidebar:has(.mass34-context-card) .selectable_sidebar_block {
    min-height: 42px;
    padding: 5px 0;
}

.mass34-context-profile {
    padding: 26px 26px 24px;
}

.mass34-context-profile h2 {
    margin-top: 14px;
    font-size: 15px;
    line-height: 20px;
}

.mass34-context-profile p {
    font-size: 12px;
    line-height: 17px;
}

.mass34-context-actions {
    margin-top: 18px;
    gap: 10px;
}

.mass34-context-action {
    min-height: 64px;
    font-size: 10px;
    border-radius: 9px;
}

.mass34-context-files {
    padding: 17px 16px 20px;
    border-bottom: 1px solid var(--m34-columna-borde);
}

.mass34-context-section-title {
    margin-bottom: 12px;
    font-size: 12px;
}

.mass34-context-section-title a {
    color: var(--m34-acento);
    font-size: 10px;
    font-weight: 600;
}

.mass34-context-file {
    min-height: 52px;
    margin-top: 8px;
    padding: 8px 10px;
}

.mass34-context-file span {
    font-size: 12px;
}

/* Compositor alineado con la misma columna que la cabecera y mensajes. */
#compose-textarea {
    color: var(--m34-texto);
    font-size: 15px;
    line-height: 23px;
}

#message-formatting-controls-container {
    min-height: 45px;
    padding: 5px 10px;
}

#message-formatting-controls-container .compose-scrollable-buttons {
    gap: 2px;
}

#message-formatting-controls-container .compose_control_button_container,
#message-formatting-controls-container .compose_control_button {
    width: 34px;
    min-width: 34px;
    height: 34px;
}

/* Los menus superiores comparten tipografia, radio y ritmo con el chat. */
#gear-menu-dropdown,
#personal-menu-dropdown,
#help-menu-dropdown,
.popover-menu {
    font-family: var(--m34-font-ui);
}

#gear-menu-dropdown .popover-menu-list,
#personal-menu-dropdown .popover-menu-list,
#help-menu-dropdown .popover-menu-list {
    padding: 8px;
}

#gear-menu-dropdown .popover-menu-list-item > a,
#personal-menu-dropdown .popover-menu-list-item > a,
#help-menu-dropdown .popover-menu-list-item > a,
.popover-menu .popover-menu-link {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 18px;
    border-radius: 8px;
}

#gear-menu-dropdown .org-info-container {
    padding: 12px 14px 10px;
    margin: 0 8px 5px;
    border-bottom: 1px solid var(--m34-borde);
}

#gear-menu-dropdown .org-info-container .org-info.org-name {
    font-size: 14px;
    line-height: 20px;
}

#gear-menu-dropdown .org-info-container .org-info.org-url,
#gear-menu-dropdown .org-info-container .org-info.org-version {
    font-size: 11px;
    line-height: 16px;
}

@media (max-width: 50em) {
    .mass34-header-notifications,
    .mass34-current-user-copy,
    #personal-menu {
        display: none;
    }

.message-avatar .mass34-initials-avatar {
        width: 34px;
        height: 34px;
    }

#right-sidebar .mass34-context-close {
        top: 10px;
    }
}

/* 55.1 Correccion fina de margenes observada en la captura real. */

.mass34-vista-oculta,
#direct-messages-section-header,
#streams_list .stream-list-subsection-header {
    display: none !important;
}

/* Mantener solo las cuatro vistas principales de MASS 34 aunque Zulip
 * reconstruya la lista y quite las clases aplicadas por JavaScript. */
#left-sidebar .top_left_all_messages,
#left-sidebar .top_left_my_reactions,
#left-sidebar .top_left_reactions,
#left-sidebar .top_left_scheduled_messages,
#left-sidebar .top_left_reminders,
#left-sidebar .top_left_reminder {
    display: none !important;
}

/* Algunas versiones renderizan estas filas fuera de #left-sidebar. */
.top_left_all_messages,
.top_left_my_reactions,
.top_left_reactions,
.top_left_scheduled_messages,
.top_left_reminders,
.top_left_reminder {
    display: none !important;
}

/* Ocultación de vistas no deseadas mediante selectores de clase y atributo */
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.mass34-vista-oculta,
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.top_left_all_messages,
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.top_left_reactions,
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.top_left_my_reactions,
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.top_left_scheduled_messages,
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.top_left_reminders,
#left-sidebar-navigation-area #left-sidebar-navigation-list > li.top_left_reminder,
#left-sidebar-navigation-list > li.mass34-vista-oculta,
#left-sidebar-navigation-list > li.top_left_all_messages,
#left-sidebar-navigation-list > li.top_left_reactions,
#left-sidebar-navigation-list > li.top_left_my_reactions,
#left-sidebar-navigation-list > li.top_left_scheduled_messages,
#left-sidebar-navigation-list > li.top_left_reminders,
#left-sidebar-navigation-list > li.top_left_reminder,
#global_filters > li.mass34-vista-oculta,
#global_filters > li.top_left_all_messages,
#global_filters > li.top_left_reactions,
#global_filters > li.top_left_my_reactions,
#global_filters > li.top_left_scheduled_messages,
#global_filters > li.top_left_reminders,
#global_filters > li.top_left_reminder {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

#left-sidebar .left-sidebar-navigation-area {
    padding-right: 0;
    padding-left: 0;
}

#left-sidebar-search {
    width: 100%;
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mass34-sidebar-section {
    display: flex;
    min-height: 30px;
    padding: 9px 15px 5px;
    align-items: center;
    justify-content: space-between;
    color: var(--m34-columna-texto-2);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.mass34-sidebar-section strong {
    font-weight: 700;
}

.mass34-sidebar-section button {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--m34-columna-texto-2);
    font-size: 16px;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.mass34-sidebar-section button:hover {
    color: var(--m34-acento);
    background: var(--m34-columna-hover);
}

#stream_filters {
    display: flex;
    flex-direction: column;
}

#stream-list-4-container {
    order: 1;
}

#stream-list-3-container {
    order: 2;
}

#stream-list-normal-streams-container {
    order: 3;
}

#stream-list-4 {
    display: flex;
    flex-direction: column;
}

#stream-list-4 > li[data-stream-id="3"] {
    order: 1;
}

#stream-list-4 > li[data-stream-id="1"] {
    order: 2;
}

#direct-messages-list .dm-list-item {
    margin-right: 7px;
    margin-left: 7px;
}

#direct-messages-list .dm-box {
    min-height: 40px;
    padding: 5px 9px;
    gap: 9px;
    border-radius: 8px;
}

#direct-messages-list .conversation-partners-icon {
    display: none;
}

.mass34-dm-avatar {
    position: relative;
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 9px;
    font-weight: 800;
    background: #cbd5e1;
    border-radius: 50%;
    overflow: visible;
}

.mass34-dm-avatar.tiene-foto {
    background: transparent !important;
    color: transparent !important;
}

.mass34-dm-avatar .mass34-dm-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.mass34-dm-avatar.esta-activo {
    color: #fff;
    background: linear-gradient(145deg, var(--m34-acento-activo), var(--m34-acento));
}

.mass34-dm-avatar.esta-activo.tiene-foto {
    background: transparent !important;
    color: transparent !important;
}

.mass34-dm-avatar::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 7px;
    height: 7px;
    background: #94a3b8;
    border: 1.5px solid var(--m34-columna);
    border-radius: 50%;
    z-index: 3;
}

.mass34-dm-avatar.esta-en-linea::after {
    background: #10b981;
}

.mass34-cita-origen {
    display: none !important;
}

.message_content blockquote.mass34-cita-unificada {
    width: min(640px, 100%);
    padding: 7px 12px;
    margin: 5px 0 7px;
    color: var(--m34-texto-suave);
    font-size: 12px;
    line-height: 18px;
    background: var(--m34-superficie-alt);
    border-inline-start: 2px solid var(--m34-acento);
    border-radius: 0 7px 7px 0;
}

.mass34-quote-author {
    margin-right: 4px;
    color: var(--m34-texto);
    font-weight: 650;
}

#right-sidebar:has(.mass34-context-card)
    #buddy-list-users-matching-view-section-heading {
    margin-left: -16px;
}

.mass34-context-files {
    padding-right: 24px;
}

@media (min-width: 50.001em) {
    #searchbox #searchbox_form {
        right: auto !important;
        left: 80px !important;
        width: min(445px, calc(100% - 100px));
        margin-right: 0;
        margin-left: 0;
        transform: none !important;
    }

#searchbox #searchbox-input-container {
        display: flex;
        width: 100% !important;
        box-sizing: border-box;
        background: var(--m34-navbar-campo);
        border: 1px solid var(--m34-navbar-campo-borde);
        border-radius: 9px;
    }

#searchbox .search-input-and-pills {
        min-width: 0;
        flex: 1 1 auto;
    }

#searchbox #search_query {
        width: 100% !important;
        min-width: 0;
        background: transparent;
    }

#compose {
        min-height: 154px;
        padding-top: 12px;
        padding-bottom: 14px;
    }

.message_comp {
        min-height: 126px;
    }
}

/* 57. ULTIMA CAPA: alineacion verificada sobre la captura 121609. */

@media (min-width: 50.001em) {
    #compose-content {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }
}

#right-sidebar .mass34-context-close {
    right: 16px;
    z-index: 20;
    display: inline-flex;
    visibility: visible;
    opacity: 1;
}

.mass34-context-profile {
    padding-bottom: 24px;
}

.mass34-context-actions {
    margin-top: 26px;
}

.mass34-context-action {
    min-height: 66px;
}

.mass34-context-files {
    margin-top: -34px;
}

/* La lista directa debe ser una fila compacta, no un elemento de lista con
   marcador y sangrias heredadas. */
#direct-messages-list .dm-list,
#direct-messages-list .dm-list-item {
    padding-left: 0 !important;
    list-style: none !important;
}

#direct-messages-list .dm-list-item::before,
#direct-messages-list .dm-list-item::marker {
    display: none !important;
    content: none !important;
}

#direct-messages-list .dm-list-item {
    margin-right: 15px;
    margin-left: -18px;
}

#direct-messages-list .dm-box {
    display: flex !important;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 6px 12px 6px 14px;
    align-items: center;
    gap: 9px;
}

#direct-messages-list .conversation-partners {
    display: block !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
}

#direct-messages-list .conversation-partners-list {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#direct-messages-list .unread_count.zero_count {
    display: none !important;
}

#direct-messages-list .dm-markers-and-unreads {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

#direct-messages-list .unread_count:not(.zero_count) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 19px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background-color: var(--m34-acento, #dc2626) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--m34-acento) 40%, transparent) !important;
    margin-left: auto !important;
}

#direct-messages-list .active-sub-filter .dm-box::after {
    content: "Activo";
    margin-left: auto;
    background: var(--m34-acento-tenue-fuerte) !important;
    color: var(--m34-acento) !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em !important;
}

#direct-messages-list .active-sub-filter:has(.unread_count:not(.zero_count)) .dm-box::after {
    display: none !important;
}

.mass34-code-button {
    padding: 0;
    color: var(--m34-texto-tenue);
    font: 600 12px/1 var(--m34-font-ui);
    background: transparent;
    border: 0;
}

/* La fecha incluida en la cabecera del primer bloque es metadato interno de
   Zulip. No debe convertirse en otro separador: la cronologia ya inserta sus
   propios date_row (Hoy, Ayer, etc.) entre los mensajes. */
.message_header:has(.mass34-stitch-room-header) {
    position: sticky;
    margin-bottom: 0;
    overflow: visible;
}

.message-header-contents.mass34-stitch-room-header
    > .recipient_row_date {
    display: none !important;
}

/* 58. CIERRE DE RETICULA: cabecera, pie lateral y compositor.
   Esta capa usa medidas explicitas para que los tres bordes compartan eje
   incluso cuando Zulip cambia el box-sizing de sus columnas. */
@media (min-width: 50.001em) {
    #top_navbar .column-left,
    #top_navbar .column-right {
        height: var(--header-height, 70px) !important;
        min-height: var(--header-height, 70px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-items: center !important;
    }

#top_navbar .column-left {
        display: flex !important;
    }

#top_navbar .column-left .brand.logo,
    #top_navbar .column-left a.brand,
    #top_navbar .column-right > * {
        top: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }

.mass34-network-status {
        width: calc(var(--left-sidebar-width) + 9px) !important;
        min-width: calc(var(--left-sidebar-width) + 9px) !important;
        max-width: calc(var(--left-sidebar-width) + 9px) !important;
        box-sizing: border-box !important;
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* El nombre de un mensaje directo es contenido principal, no un enlace de
   navegacion azul. Conserva negro en reposo, seleccionado y visitado. */
#direct-messages-list .conversation-partners-list,
#direct-messages-list .conversation-partners-list:link,
#direct-messages-list .conversation-partners-list:visited,
#direct-messages-list .dm-box .private-message-name,
#direct-messages-list .dm-box a {
    color: var(--m34-texto) !important;
}

/* La tarjeta del editor debe cerrar como una sola pieza: el fondo de la
   botonera llega hasta el boton Enviar y el borde exterior nunca se corta. */
.message_comp {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        var(--m34-superficie) 0,
        var(--m34-superficie) calc(100% - 46px),
        color-mix(in srgb, var(--m34-superficie-alt) 72%, transparent)
            calc(100% - 46px),
        color-mix(in srgb, var(--m34-superficie-alt) 72%, transparent) 100%
    );
}

#message-formatting-controls-container,
.compose-scrolling-buttons-container {
    background-color: transparent;
}

/* La altura y el flex de la capa anterior ya fijan el eje en y=35. Se
   neutralizan transformaciones heredadas y se retira Ayuda por solicitud. */
@media (min-width: 50.001em) {
    #top_navbar .column-left .brand.logo,
    #top_navbar .column-left a.brand {
        transform: none;
    }

#top_navbar .column-right > .navbar-item,
    #top_navbar .column-right > .mass34-header-notifications {
        transform: none;
    }

#top_navbar #help-menu {
        display: none !important;
    }
}

/* Las imagenes adjuntas comparten una sola tira compacta. Se anulan el
   ancho inline y el aspecto variable de Zulip para que una captura alta o
   panoramica no empuje el editor ni cambie la reticula al terminar de cargar. */
.message_content .message-thumbnail-gallery {
    display: flex !important;
    max-width: 100%;
    padding: 4px 2px 7px;
    margin-top: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
    flex-flow: row nowrap !important;
    gap: 8px;
    scrollbar-width: thin;
}

.message_content .message-thumbnail-gallery .message_inline_image {
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 152px !important;
    overflow: hidden;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.message_content
    .message-thumbnail-gallery
    .message_inline_image
    > a[href*="/user_uploads/"] {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    align-items: stretch !important;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    color: var(--m34-texto);
    text-decoration: none;
}

.message_content
    .message-thumbnail-gallery
    .message_inline_image
    > a[href*="/user_uploads/"]::before {
    display: none !important;
    content: none !important;
}

.message_content .message-thumbnail-gallery .media-image-element {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    flex: 0 0 82px;
    object-fit: cover;
    object-position: center;
    background: var(--m34-superficie-alt);
    border: 0;
    border-radius: 8px 8px 0 0;
}

.message_content
    .message-thumbnail-gallery
    .message_inline_image
    .mass34-adjunto-pie,
.mass34-propio
    .message_content
    .message-thumbnail-gallery
    .message_inline_image
    .mass34-adjunto-pie {
    display: block;
    width: 100%;
    height: 29px;
    padding: 7px 8px 6px;
    margin: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--m34-texto-tenue) !important;
    font-size: 10px;
    line-height: 15px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Acceso rapido al ultimo mensaje, integrado con la marca y separado del
   compositor. */
#scroll-to-bottom-button-container {
    z-index: 30;
}

#scroll-to-bottom-button-clickable-area {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
}

#scroll-to-bottom-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--m34-acento);
    border: 1px solid color-mix(in srgb, var(--m34-acento) 78%, #000);
    border-radius: 50%;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--m34-acento) 24%, transparent);
    transition: background-color var(--m34-transicion),
        box-shadow var(--m34-transicion), transform var(--m34-transicion);
}

#scroll-to-bottom-button-clickable-area:hover #scroll-to-bottom-button {
    background: var(--m34-acento-hover);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--m34-acento) 30%, transparent);
    transform: translateY(-1px);
}

#scroll-to-bottom-button .scroll-to-bottom-icon {
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 50em) {
    .message_content .message-thumbnail-gallery .message_inline_image {
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        flex-basis: 132px !important;
    }
}

/* Si Zulip genera una galeria, los enlaces Markdown que la preceden son
   duplicados visuales. Para imagenes se muestra solo la miniatura clicable. */
.message_content:has(.message-thumbnail-gallery)
    > p:has(a[href*="/user_uploads/"]) {
    display: none !important;
}

.message_content .message-thumbnail-gallery .media-image-element {
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    flex-basis: 112px;
    border-radius: 8px;
}

.message_content
    .message-thumbnail-gallery
    .message_inline_image
    .mass34-adjunto-pie {
    display: none !important;
}

#userlist-toggle,
#userlist-toggle-button {
    display: none !important;
}

.mass34-context-actions.es-directa {
    width: 100%;
    max-width: 286px;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mass34-context-actions.es-grupo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mass34-context-action.esta-silenciado {
    color: var(--m34-acento);
    background: var(--m34-acento-tenue);
    border-color: color-mix(in srgb, var(--m34-acento) 40%, var(--m34-columna-borde));
}

.mass34-context-action.esta-cargando {
    opacity: 0.65;
    cursor: wait;
}

/* En portatiles o ventanas bajas el compositor reduce solo su zona de
   escritura; conserva las herramientas y deja visible el ultimo mensaje. */
@media (min-width: 50.001em) and (max-height: 599.98px) {
    #compose {
        min-height: 102px !important;
        padding: 5px 18px 7px !important;
    }

#compose-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

.message_comp {
        min-height: 86px !important;
    }

#compose-textarea {
        height: 34px !important;
        min-height: 34px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        line-height: 22px;
    }

#message-formatting-controls-container {
        min-height: 34px;
        padding: 1px 8px;
    }

#message-formatting-controls-container .compose_control_button_container,
    #message-formatting-controls-container .compose_control_button {
        width: 28px;
        min-width: 28px;
        height: 28px;
    }

#scroll-to-bottom-button-container {
        bottom: 108px !important;
    }
}

/* ============================================================
   56. COMPOSITOR COMPACTO EN ESCRITORIO

La caja vacia ocupaba 154 px y reservaba 68 px solo para escribir,
   aunque el uso habitual empieza con una linea. Se reduce la altura
   inicial sin fijarla: Zulip conserva el crecimiento automatico cuando
   el mensaje necesita mas lineas y el espejo de formato sigue la medida
   real mediante ResizeObserver.
   ============================================================ */

@media (min-width: 50.001em) and (min-height: 600px) {
    #compose {
        min-height: 120px;
        padding: 8px 18px 10px;
    }

.message_comp {
        min-height: 94px;
    }

#compose-textarea {
        min-height: 40px !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* Controles retirados del compositor por solicitud: expandir el editor,
   codigo y el menu de formato de tres puntos. Se oculta tambien la caja
   del boton Codigo para que no deje un hueco en la botonera. */
.expand-composebox-button,
#message-formatting-controls-container
    .compose_control_button_container:has(> .mass34-code-button),
.mass34-code-button,
#message-formatting-controls-container > .mass34-mas-caja {
    display: none !important;
}

/* ============================================================
   57. BOTONERA DEL COMPOSITOR COMO LA REFERENCIA DE MENSAJERIA

La caja mantiene dos filas: texto arriba; herramientas, borrador y
   envio abajo. Aa abre el formato nativo, adjuntar y emoji conservan sus
   manejadores de Zulip, e IA se muestra inactiva hasta tener proveedor.
   ============================================================ */

#compose .messagebox {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "message-content-container message-content-container"
        "message-formatting-controls-container message-send-controls-container";
}

#message-formatting-controls-container {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 4px 10px;
}

#message-formatting-controls-container > .mass34-mas-caja.mass34-formato-caja {
    display: inline-flex !important;
    margin: 0 2px 0 0;
    order: 0;
}

#message-formatting-controls-container .compose-scrollable-buttons {
    display: flex;
    min-width: 0;
    align-items: center;
    order: 1;
    overflow: visible;
}

#message-formatting-controls-container .formatting-control-scroller-button {
    display: none;
}

.mass34-formato-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
    color: var(--m34-texto-suave);
    font: 600 12px/1 var(--m34-font-ui);
}

#message-send-controls-container {
    display: flex;
    min-width: max-content;
    height: auto;
    margin-left: 0;
    padding: 4px 8px 4px 4px;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-end;
}

#compose-drafts-button {
    display: inline-flex !important;
    min-width: 0;
    padding: 0;
    align-items: center;
    align-self: center;
    gap: 4px;
    color: var(--m34-texto-tenue);
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
}

#compose-drafts-button:hover {
    color: var(--m34-acento);
    text-decoration: none;
}

.mass34-draft-icon {
    display: inline-flex;
}

.mass34-draft-icon svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

#compose-drafts-button .compose-drafts-count-container,
#send_later {
    display: none !important;
}

#compose-send-button {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    height: 28px;
    padding: 0 9px;
    border-radius: 6px;
}

#compose-send-button::before {
    margin-right: 5px;
    font-size: 11px;
    font-weight: 700;
}

#compose-send-button .zulip-icon,
#compose-send-button i {
    font-size: 15px;
}

@media (max-width: 50em) {
    #compose-drafts-button {
        display: none !important;
    }

#message-send-controls-container {
        gap: 4px;
    }
}

/* ============================================================
   60. BORRADORES — ventana clara, compacta y orientada a la accion

La vista original ocupa casi toda la pantalla aunque no haya nada y
   deja el estado vacio perdido en el centro. Esta capa la convierte en
   una tarjeta: el encabezado explica, el contenido responde y la lista
   crece solo cuando realmente hay borradores.
   ============================================================ */

#draft_overlay {
    padding: 0;
    background: rgba(15, 23, 42, 0.54);
    backdrop-filter: blur(3px);
}

#draft_overlay > .overlay-content {
    display: flex !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: clamp(18px, 4vh, 44px);
    margin: 0;
    align-items: center;
    justify-content: center;
}

#draft_overlay .drafts-container {
    display: flex;
    width: min(820px, calc(100vw - 48px));
    max-width: none;
    height: min(720px, calc(100vh - 72px));
    min-height: 430px;
    max-height: calc(100vh - 72px);
    margin: 0;
    overflow: hidden;
    flex-direction: column;
    color: var(--m34-texto);
    background: var(--m34-flotante);
    border: 1px solid var(--m34-borde-fuerte);
    border-radius: 18px;
    box-shadow: 0 28px 75px rgba(15, 23, 42, 0.32),
        0 8px 24px rgba(15, 23, 42, 0.16);
}

/* Sin filas no hace falta una ventana de 700 px de alto. */
#draft_overlay .drafts-container:not(:has(.overlay-message-row)) {
    width: min(720px, calc(100vw - 48px));
    height: auto;
    min-height: min(500px, calc(100vh - 72px));
}

@media (prefers-reduced-motion: no-preference) {
    #draft_overlay.show .drafts-container {
        animation: m34-borradores-entrada 180ms ease-out;
    }
}

@keyframes m34-borradores-entrada {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#draft_overlay .overlay-messages-header {
    position: relative;
    padding: 24px 28px 20px;
    flex: 0 0 auto;
    color: var(--m34-texto);
    text-align: left;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--m34-acento-tenue) 72%, var(--m34-superficie)),
        var(--m34-superficie) 64%
    );
    border-bottom: 1px solid var(--m34-borde);
}

#draft_overlay .overlay-messages-header h1 {
    display: flex;
    min-height: 42px;
    padding: 0 48px 0 0;
    margin: 0;
    align-items: center;
    gap: 12px;
    color: var(--m34-texto);
    font-size: 22px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-transform: none;
}

#draft_overlay .overlay-messages-header h1::before {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    content: "✎";
    color: var(--m34-sobre-acento);
    font: 700 23px/1 "Segoe UI Symbol", sans-serif;
    background: var(--m34-acento);
    border-radius: 12px;
    box-shadow: 0 8px 18px var(--m34-acento-halo);
}

#draft_overlay .overlay-messages-header .exit {
    position: absolute;
    top: 22px;
    right: 24px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--m34-texto-suave);
    background: color-mix(in srgb, var(--m34-superficie) 88%, transparent);
    border: 1px solid var(--m34-borde);
    border-radius: 10px;
    cursor: pointer;
    transition: color var(--m34-transicion),
        background-color var(--m34-transicion),
        border-color var(--m34-transicion),
        transform var(--m34-transicion);
}

#draft_overlay .overlay-messages-header .exit:hover {
    color: var(--m34-acento);
    background: var(--m34-acento-tenue);
    border-color: color-mix(in srgb, var(--m34-acento) 32%, var(--m34-borde));
    transform: translateY(-1px);
}

#draft_overlay .overlay-messages-header .exit .exit-sign {
    position: static;
    margin: 0;
    color: inherit;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

#draft_overlay .header-body {
    display: flex;
    margin-top: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#draft_overlay .drafts-header-note {
    position: relative;
    min-width: 0;
    padding: 12px 14px 12px 46px;
    margin: 0;
    flex: 1 1 auto;
    color: var(--m34-texto-suave);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    background: color-mix(in srgb, var(--m34-superficie-alt) 82%, transparent);
    border: 1px solid var(--m34-borde);
    border-radius: 12px;
}

#draft_overlay .drafts-header-note::before {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    content: "i";
    color: var(--m34-acento);
    font-size: 13px;
    font-weight: 800;
    font-style: normal;
    background: var(--m34-acento-tenue);
    border-radius: 50%;
}

#draft_overlay .drafts-header-note > div + div {
    margin-top: 2px;
    color: var(--m34-texto-tenue);
}

#draft_overlay .popover-menu-hotkey-hint {
    min-width: 24px;
    padding: 2px 6px;
    color: var(--m34-texto);
    font-size: 11px;
    font-weight: 700;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde-fuerte);
    border-radius: 5px;
    box-shadow: 0 1px 0 var(--m34-borde-fuerte);
}

#draft_overlay .delete-drafts-group {
    flex: 0 0 auto;
}

#draft_overlay .select-drafts-button {
    min-height: 36px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 9px;
}

#draft_overlay .drafts-list {
    min-height: 0;
    padding: 22px 28px 28px;
    overflow-y: auto;
    flex: 1 1 auto;
    background: color-mix(in srgb, var(--m34-superficie-alt) 48%, var(--m34-flotante));
    scrollbar-width: thin;
}

#draft_overlay .drafts-container:not(:has(.overlay-message-row)) .drafts-list {
    display: flex;
    min-height: 265px;
    padding: 30px;
    align-items: center;
    justify-content: center;
}

#draft_overlay .drafts-container:not(:has(.overlay-message-row)) .no-drafts {
    position: static;
    display: flex !important;
    max-width: 420px;
    padding: 0;
    margin: 0;
    align-items: center;
    flex-direction: column;
    color: var(--m34-texto);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    pointer-events: none;
}

#draft_overlay .drafts-container:not(:has(.overlay-message-row)) .no-drafts::before {
    display: inline-flex;
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    align-items: center;
    justify-content: center;
    content: "✎";
    color: var(--m34-acento);
    font: 700 34px/1 "Segoe UI Symbol", sans-serif;
    background: var(--m34-acento-tenue);
    border: 1px solid color-mix(in srgb, var(--m34-acento) 22%, var(--m34-borde));
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#draft_overlay .drafts-container:not(:has(.overlay-message-row)) .no-drafts::after {
    display: block;
    max-width: 370px;
    margin-top: 8px;
    content: "Los mensajes que dejes sin enviar aparecerán aquí para que puedas recuperarlos.";
    color: var(--m34-texto-tenue);
    font-size: 13px;
    font-weight: 450;
    line-height: 1.55;
    text-align: center;
}

#draft_overlay .drafts-list h2 {
    padding: 0 2px;
    margin: 4px 0 12px;
    color: var(--m34-texto-suave);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#draft_overlay .overlay-message-row {
    padding: 0;
    margin-bottom: 12px;
}

#draft_overlay .overlay-message-row .overlay-message-info-box {
    margin: 0;
    overflow: hidden;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color var(--m34-transicion),
        box-shadow var(--m34-transicion), transform var(--m34-transicion);
}

#draft_overlay .overlay-message-row .overlay-message-info-box:hover {
    border-color: color-mix(in srgb, var(--m34-acento) 34%, var(--m34-borde));
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
}

#draft_overlay .overlay-message-row .overlay-message-info-box.active {
    border-radius: 12px;
    outline: 2px solid var(--m34-acento);
    outline-offset: 2px;
}

#draft_overlay .overlay-message-row .overlay-message-info-box .recipient_row {
    padding: 10px 14px;
    background: var(--m34-superficie-alt);
    border-bottom: 1px solid var(--m34-borde);
}

#draft_overlay .overlay-message-row .overlay-message-info-box .message_row {
    background: transparent;
    border: 0;
    border-radius: 0;
}

#draft_overlay .overlay-message-row .overlay-message-info-box .messagebox,
#draft_overlay .overlay-message-row .overlay-message-info-box .messagebox-content {
    background: transparent;
    border-radius: 0;
}

#draft_overlay .overlay-message-row .overlay-message-info-box .messagebox-content {
    padding: 14px 16px;
}

#draft_overlay .overlay_message_controls {
    gap: 6px;
}

#draft_overlay .overlay_message_controls > * {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#draft_overlay .overlay_message_controls > *:hover {
    background: var(--m34-acento-tenue);
}

@media (max-width: 50em) {
    #draft_overlay > .overlay-content {
        padding: 10px;
    }

#draft_overlay .drafts-container,
    #draft_overlay .drafts-container:not(:has(.overlay-message-row)) {
        width: 100%;
        height: calc(100vh - 20px);
        min-height: 0;
        max-height: calc(100vh - 20px);
        border-radius: 14px;
    }

#draft_overlay .overlay-messages-header {
        padding: 18px 18px 16px;
    }

#draft_overlay .overlay-messages-header h1 {
        min-height: 36px;
        font-size: 19px;
    }

#draft_overlay .overlay-messages-header h1::before {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 20px;
        border-radius: 10px;
    }

#draft_overlay .overlay-messages-header .exit {
        top: 18px;
        right: 18px;
        width: 34px;
        height: 34px;
    }

#draft_overlay .header-body {
        display: block;
        margin-top: 14px;
    }

#draft_overlay .drafts-header-note {
        padding: 11px 12px 11px 42px;
        font-size: 12px;
    }

#draft_overlay .drafts-header-note::before {
        top: 12px;
        left: 12px;
    }

#draft_overlay .delete-drafts-group {
        width: 100%;
        margin-top: 10px;
    }

#draft_overlay .drafts-list,
    #draft_overlay .drafts-container:not(:has(.overlay-message-row)) .drafts-list {
        min-height: 0;
        padding: 18px;
    }
}

/* ============================================================
   64. PANEL DE DETALLES ADAPTABLE EN PORTATILES

Entre movil y escritorio ancho no caben a la vez los dos laterales y
   una conversacion legible. Por debajo de 1280 px el panel nativo puede
   comprimir el historial y el compositor hasta dejarlos en media pantalla.
   En todo ese tramo la conversacion conserva su ancho y Detalles se abre
   como un drawer modal. En escritorio ancho se mantiene la reticula estable
   de tres columnas.
   ============================================================ */

@media (max-width: 80em) {
    .column-middle,
    #compose-content {
        margin-right: 7px !important;
    }

#right-sidebar-container {
        display: none !important;
    }

body.mass34-contexto-abierto #right-sidebar-container {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 1201 !important;
        display: block !important;
        width: min(360px, calc(100vw - 48px)) !important;
        min-width: min(360px, calc(100vw - 48px)) !important;
        max-width: none !important;
        height: 100dvh !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

body.mass34-contexto-abierto #right-sidebar {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        max-height: 100dvh !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: none !important;
        background: var(--m34-columna);
        border-left: 1px solid var(--m34-columna-borde);
        box-shadow: -18px 0 48px rgba(15, 23, 42, 0.2);
    }

body.mass34-contexto-abierto
        #right-sidebar
        .mass34-context-close {
        position: absolute;
        top: 10px;
        right: 10px;
    }

.mass34-context-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: block;
        width: 100vw;
        height: 100dvh;
        padding: 0;
        margin: 0;
        cursor: default;
        background: rgba(15, 23, 42, 0.28);
        border: 0;
        border-radius: 0;
        backdrop-filter: blur(1px);
    }
}

/* ============================================================
   65. CHATS FIJADOS

Cada persona decide sus fijados en su navegador. La lista conserva el
   orden nativo de Zulip, pero CSS coloca primero las filas marcadas sin
   duplicarlas ni perder contadores, presencia o navegación.
   ============================================================ */

.mass34-chat-menu {
    position: relative;
    display: flex;
}

.mass34-chat-menu-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 1300;
    display: none;
    width: 176px;
    padding: 6px;
    background: var(--m34-columna);
    border: 1px solid var(--m34-columna-borde);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.mass34-chat-menu.esta-abierto .mass34-chat-menu-panel {
    display: block;
}

.mass34-chat-menu-item {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    color: var(--m34-texto);
    font: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 7px;
}

.mass34-chat-menu-item:hover,
.mass34-chat-menu-item:focus-visible {
    color: var(--m34-acento);
    background: color-mix(in srgb, var(--m34-acento) 9%, transparent);
    outline: none;
}

.mass34-chat-menu-item svg,
.mass34-dm-fijado svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#direct-messages-list .mass34-dm-list-ordenada {
    display: flex;
    flex-direction: column;
}

#direct-messages-list .mass34-chat-fijado .dm-box {
    box-shadow: inset 3px 0 0
        color-mix(in srgb, var(--m34-acento) 72%, transparent);
}

.mass34-dm-fijado {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--m34-acento);
}

@media (max-width: 42em) {
    .mass34-chat-menu-panel {
        position: fixed;
        top: 58px;
        right: 12px;
    }
}

/* ============================================================
   66. CIERRE DE GEOMETRIA DE LA CONVERSACION

La cronologia plana separaba el texto de sus metadatos a todo el ancho
   de la pantalla y hacia que una seleccion pareciera una franja gigante.
   Se recuperan burbujas compactas: recibidos a la izquierda y propios a
   la derecha. El panel de detalles vuelve a permanecer anclado al viewport
   para que el scroll del historial no lo arrastre fuera de sitio.
   ============================================================ */

.message_row .message_content,
.message_row.mass34-propio .message_content {
    display: block;
    width: fit-content;
    max-width: min(46em, calc(100% - 72px));
    padding: 9px 13px;
    color: var(--m34-texto);
    background-color: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: 4px 12px 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.message_row.mass34-propio .message_content {
    margin-left: auto;
    color: var(--m34-propio-texto);
    background-color: var(--m34-propio-fondo);
    border-color: var(--m34-propio-borde);
    border-radius: 12px 4px 12px 12px;
}

.message_row.mass34-propio .message_content a,
.message_row.mass34-propio .message_content code,
.message_row.mass34-propio .message_content blockquote {
    color: var(--m34-propio-texto);
}

.message_row.mass34-propio .message_content code {
    background-color: var(--m34-propio-codigo);
}

.message_row.mass34-propio > .messagebox > .messagebox-content > .message-avatar,
.message_row.mass34-propio .messagebox-content > .message-avatar {
    visibility: hidden;
}

.message_row.mass34-propio .message_sender .sender_name {
    display: none;
}

.message_row:hover,
.message_row.selectable_row:hover,
.message_row.selected_message,
.message_row.focused_message {
    background-color: transparent;
    box-shadow: none;
}

.message_row:not(.mass34-propio):hover .message_content,
.message_row:not(.mass34-propio).selected_message .message_content,
.message_row:not(.mass34-propio).focused_message .message_content {
    color: var(--m34-texto);
    background-color: var(--m34-superficie-alt);
    border-color: var(--m34-borde-fuerte);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.message_row.mass34-propio:hover .message_content,
.message_row.mass34-propio.selected_message .message_content,
.message_row.mass34-propio.focused_message .message_content {
    color: var(--m34-propio-texto);
    background-color: var(--m34-propio-fondo);
    border-color: var(--m34-acento);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--m34-acento) 16%, transparent);
}

/* El intento de fijar `#right-sidebar` que vivía aquí —`position: fixed;
 * right: 0; width: var(--right-sidebar-width)`— es el primero de los dos
 * fallidos que cuenta la sección 73 más abajo, y a diferencia de los otros
 * dos no se dejó escrito: se quedó activo compitiendo con la solución
 * buena. La 73 fija `#right-sidebar-container` (`right: 15px`, 329px) y
 * dejó a `#right-sidebar` sin posición propia a propósito, para que llene
 * ese contenedor; esta regla lo volvía a sacar por su cuenta —354px desde
 * el borde de la ventana, sin contar los 15px del contenedor— y los dos
 * paneles dejaban de coincidir: el de dentro asomaba por la izquierda y
 * por abajo del de fuera, que es la línea de borde doble que se veía. */

@media (max-width: 50em) {
    .message_row .message_content,
    .message_row.mass34-propio .message_content {
        max-width: calc(100vw - 92px);
        padding: 8px 11px;
    }
}

/* ============================================================
   67. LA CONVERSACIÓN, EN TANDAS

Las burbujas ya están (sección 25) y ya se les dio aire (32), pero
   todos los mensajes se separan igual: da lo mismo que dos seguidos
   sean de la misma persona o que cambie quien habla. Eso se lee como
   una lista de mensajes sueltos, no como una conversación.

En cualquier aplicación de mensajería la separación es lo que
   agrupa: lo que dice una persona de corrido va junto, y el turno de
   la otra empieza más abajo. La jerarquía la construye esa diferencia,
   no el nombre ni el color.

Zulip ya distingue los dos casos en el DOM y esta hoja lo usa desde
   la 32: `messagebox-includes-sender` marca el primero de cada tanda, y
   los que van detrás no la llevan.
   ============================================================ */

/* Tres píxeles entre lo que dice uno de corrido; dieciséis cuando toma
   la palabra el otro. La proporción importa más que los valores: con
   menos de cuatro veces la diferencia no se percibe como agrupación, y
   con mucho más la conversación se despedaza en bloques. */
.message_row:not(.messagebox-includes-sender) {
    margin-top: 3px;
}

.message_row.messagebox-includes-sender {
    margin-top: 16px;
}

.message_row.messagebox-includes-sender:first-child {
    margin-top: 0;
}

/* La hora, una vez por tanda. Cinco seguidas en la misma columna forman
   una segunda lista a la derecha que compite con la primera, y entre
   mensajes de una misma tanda suelen pasar segundos. Se queda la del
   último —cuándo terminó de hablar— y las demás vuelven con el ratón.

Con `visibility` y no con `display` para que su celda de la rejilla
   siga ocupando sitio: la declara la 32.1 y vaciarla movería los
   checks. */
.message_row:has(+ .message_row:not(.messagebox-includes-sender))
    .message_time {
    visibility: hidden;
}

.message_row:hover .message_time {
    visibility: visible;
}

/* ============================================================
   68. LOS MENSAJES, EN BURBUJA ALTERNADA

La sección 25 puso los mensajes en burbujas y la 46 las quitó,
   volviendo a la cronología plana del patrón Element/Midas. Las dos
   dejaron escrito el mismo motivo: **la burbuja alternada es un patrón
   de conversación entre dos**, y en el canal `asesores`, con veinte
   personas, el zigzag cansa más que ayuda.

**Se ha pedido el formato de mensajería en todas las vistas**, así
   que se restituye sin la restricción. Queda dicho aquí, igual que
   allí, para que quien lo revise sepa que no es un descuido: la
   objeción existe, está argumentada, y se ha decidido por encima de
   ella.

Lo que la hace menos grave en la práctica: el nombre del remitente se
   conserva en los mensajes ajenos, así que con veinte personas el
   zigzag no deja a nadie sin identificar. Lo que se pierde es densidad
   —una lista plana cabe más gente en pantalla que una alternada—.

Si un día se quiere volver a distinguir entre directos y canales,
   basta con añadir `.private-message` a estos selectores.
   ============================================================ */

:root {
    /* El lienzo va un punto más cálido que la superficie de lectura: es
       lo que separa "estoy en una conversación" de "estoy en un panel",
       y hace que la burbuja blanca se recorte sin borde. */
    --m34-dm-lienzo: #f0ece7;
    --m34-dm-propia: #d6f5cd;
    --m34-dm-ajena: #ffffff;
    --m34-dm-texto: #111b21;
    --m34-dm-hora: #667781;
}

.dark-theme:root {
    /* En oscuro el verde claro deslumbra y el blanco todavía más. Las
       dos bajan a superficies oscuras y lo que distingue a la propia es
       el tono verdoso, no la claridad. */
    --m34-dm-lienzo: #0d1418;
    --m34-dm-propia: #0e4a3c;
    --m34-dm-ajena: #1f2a30;
    --m34-dm-texto: #e6e8ec;
    --m34-dm-hora: #93a1a9;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-dm-lienzo: #0d1418;
        --m34-dm-propia: #0e4a3c;
        --m34-dm-ajena: #1f2a30;
        --m34-dm-texto: #e6e8ec;
        --m34-dm-hora: #93a1a9;
    }
}

/* --- 68.1 El lienzo ---------------------------------------------------

Se pinta UNA vez, en el contenedor exterior, y los de dentro van
   transparentes: `#message-lists-container` y `.message-list` crecen
   con el contenido y no con la ventana, así que pintarlos a ellos deja
   sin color el hueco bajo el último mensaje —un corte horizontal justo
   donde acaba la conversación—.

Ojo al guion de `#message-lists-container`: va con guiones medios, no
   con bajos como sus vecinos `#main_div` y `#message_feed_container`.
   Escribirlo como los otros no da error de CSS, simplemente no
   encuentra nada, y su blanco se queda tapando el lienzo.

Va atado a `.column-middle >` porque ese nombre de clase lo reusa la
   barra superior dentro de `#navbar-middle`: sin el hijo directo, el
   lienzo se comería también la barra. */
.column-middle > .column-middle-inner {
    background: var(--m34-dm-lienzo);
}

/* Se probó aquí a separar la cabecera de la conversación (teléfono/vídeo/
 * info) del avatar de la cuenta con un `margin-right` fijo, porque en
 * ventanas no muy anchas y con el panel de detalles cerrado quedaban casi
 * en la misma columna. Tres intentos y tres roturas distintas —la
 * conversación reducida a una franja con el panel abierto, los mensajes
 * sin ancho donde ponerse en móvil— y a la cuarta, pedido explícito:
 * mejor como estaba. Queda sin tocar. Si se retoma, probar primero en los
 * tres estados (panel abierto, panel cerrado, móvil) antes de dar por
 * bueno ninguno de los tres por separado. */

.column-middle-inner #main_div,
.column-middle-inner .message-feed,
.column-middle-inner #message_feed_container,
.column-middle-inner #message-lists-container,
.column-middle-inner .message-list,
.column-middle-inner .recipient_row {
    background-color: transparent;
}

/* --- 68.2 La burbuja --------------------------------------------------

La 46 dejó `.message_content` como texto suelto: sin fondo, sin
   borde, sin radio y a ancho completo. Aquí se le devuelve la caja.

`width: fit-content` es lo que la ciñe al texto: sin él ocuparía todo
   el ancho y no habría nada que alinear a un lado ni a otro. */
.message_row .message_content {
    display: inline-block;
    width: fit-content;
    max-width: 64%;
    padding: 7px 11px 6px;
    background-color: var(--m34-dm-ajena);
    color: var(--m34-dm-texto);
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, 0.12);
    overflow-wrap: anywhere;
}

/* Los propios, a la derecha y en verde. `margin-left: auto` con el
   ancho ceñido al contenido es lo que los empuja: con `float` o
   `text-align`, la hora y los checks —que son hermanos del texto y no
   hijos— perderían su referencia.

Cuáles son propios lo marca `mass34-checks.js` con `mass34-propio`:
   Zulip no lo dice en el DOM, y ese módulo ya lo sabe porque se lo
   pregunta a la API para pintar los checks. */
.message_row.mass34-propio .message_content {
    margin-left: auto;
    background-color: var(--m34-dm-propia);
    border-radius: 12px 12px 4px 12px;
}

/* La esquina cerrada marca de qué lado sale el mensaje. Repetida en
   cinco seguidos deja de señalar a nadie y pasa a ser textura: se queda
   solo en el último de cada tanda, que es donde WhatsApp pone la cola.

Un mensaje no es el último de su tanda cuando al siguiente no le
   toca abrir tanda nueva, o sea cuando le sigue otro del mismo
   remitente. Eso es lo que pregunta el `:has()`. */
.message_row:has(+ .message_row:not(.messagebox-includes-sender))
    .message_content {
    border-radius: 12px;
}

/* --- 68.3 Lo que sobra en los propios ---------------------------------

El nombre ajeno se conserva —en un canal es lo único que identifica a
   cada una de las veinte personas—, pero el propio sobra: la burbuja ya
   está a la derecha y en su color, y repetir el nombre de uno mismo en
   cada mensaje no informa a nadie.

El avatar se esconde con `visibility` y no con `display` para que
   siga ocupando su celda: sobre ella se apoya la sangría del texto, y
   quitarlo desalinearía los mensajes cada vez que alternan. */
.message_row.mass34-propio .messagebox-content > .message-avatar {
    visibility: hidden;
}

.message_row.mass34-propio .message_sender {
    display: none;
}

.message_row .message_sender .sender_name {
    font-size: 12px;
    font-weight: 600;
    color: var(--m34-acento);
}

/* --- 68.4 El contenido sobre la burbuja propia ------------------------

Sobre el verde, lo que Zulip pinta con sus propios colores deja de
   leerse. */
.message_row.mass34-propio .message_content a {
    color: var(--m34-acento);
    text-decoration: underline;
}

.message_row.mass34-propio .message_content code {
    background-color: rgba(11, 20, 26, 0.08);
    color: var(--m34-dm-texto);
}

.message_row.mass34-propio .message_content blockquote {
    border-left-color: var(--m34-acento);
    color: var(--m34-dm-texto);
}

/* --- 68.5 Los avisos del sistema se quedan fuera ----------------------

Los mensajes del bot de bienvenida y los avisos de Zulip —"Try
   starting a conversation in this channel"— no son de nadie: darles
   burbuja de interlocutor los convertiría en un participante más de la
   conversación. Mantienen su tarjeta neutra, centrada. */
.message_row .message_content:has(.rendered_markdown > p > .bot-message),
.message_row.mass34-aviso .message_content {
    margin-left: auto;
    margin-right: auto;
    background-color: var(--m34-superficie-alt);
    box-shadow: none;
}

/* ============================================================
   69. EL VISTO, PEGADO AL MENSAJE; LAS ACCIONES, FUERA

Dos problemas con la misma causa. La rejilla de `.messagebox-content`
   reparte cinco columnas —avatar, mensaje, controles, check, hora— y la
   de los controles **reserva su ancho siempre**, aunque los botones
   estén invisibles hasta que el ratón pasa por encima.

Con la cronología plana daba igual: el mensaje ocupaba todo el ancho
   y la hora vivía al final de la fila. Con la burbuja ceñida al texto,
   esa columna vacía abre un hueco de más de cien píxeles entre el
   mensaje y su visto, que es justo lo que no puede pasar: el check
   certifica ESE mensaje y tiene que leerse con él. Y cuando los botones
   aparecen, ocupan ese hueco: caen en medio de la conversación.
   ============================================================ */

/* Se repite la rejilla entera porque `grid-template-columns` no admite
   cambiar una sola columna. Las otras cuatro se copian tal cual de la
   sección 32.1; la tercera pasa de `max-content` a `0`. */
.message_row .messagebox-content:not(.content_edit_mode) {
    position: relative;
    grid-template-columns:
        var(--message-box-avatar-column-width) minmax(0, 1fr) 0
        max-content
        max-content;
    column-gap: 6px;
}

/* Fuera de la rejilla y fuera de la burbuja: a la izquierda de los
   mensajes propios, a la derecha de los ajenos. Siempre del lado
   contrario al que habla, que es el lado que está vacío.

En píldora y no en caja cuadrada: flota sobre la conversación, y una
   forma redondeada se lee como algo que está por encima en vez de como
   un bloque más de la lista.

`visibility` además de `opacity` porque con la opacidad a cero los
   botones se siguen pudiendo pulsar sin verlos. */
.message_row .message_controls {
    position: absolute;
    grid-area: auto;
    top: -12px;
    right: 14px;
    left: auto;
    bottom: auto;
    z-index: 10;
    transform: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border: 1px solid var(--m34-borde);
    border-radius: 999px;
    background: var(--m34-flotante, var(--m34-superficie, #ffffff));
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--m34-transicion), visibility var(--m34-transicion);
}

.message_row.mass34-propio .message_controls {
    left: auto;
    right: auto;
}

.message_row:not(.mass34-propio) .message_controls {
    left: auto;
    right: auto;
}

.message_row:hover .message_controls,
.message_row:focus-within .message_controls,
.message_row.selected_msg_for_touchscreen .message_controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Alineados abajo, no al centro: con una burbuja de varias líneas el
   centrado los dejaba a media altura, apuntando a ninguna parte. Abajo
   quedan a la altura de la última línea, que es donde termina lo que
   certifican. */
.message_row .message_time,
.message_row .mass34-check {
    align-self: end;
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--m34-dm-hora);
    white-space: nowrap;
}

.message_row .mass34-check {
    margin-left: 0;
}

/* ============================================================
   70. LAS DOS COLUMNAS, EN EL ROSA DE LA CASA

Las columnas eran blancas pegadas a una conversación clara: sin corte
   entre navegación y trabajo, la pantalla se lee como una sola
   superficie plana.

Se les da **el mismo rojo de MAS 34, llevado a pastel.** El tono es
   idéntico al del logotipo —no es un rosa cualquiera— pero con la
   saturación al mínimo y la luminosidad casi al tope. Así las columnas
   se reconocen como de la marca sin gritarla, y el rojo pleno queda
   libre para lo que de verdad avisa.

Esto es lo que distingue una paleta corporativa de una decoración:
   todos los tonos salen del mismo matiz. El fondo, el hover, lo abierto
   y el borde son el mismo rojo a distintas alturas, no cuatro colores
   que se parecen. Se declaran como escala para que quien la retoque
   mueva un peldaño y no invente un color.

Las dos columnas pasan a **enmarcar** la conversación —mismo tono a
   izquierda y derecha, el lienzo cálido en medio—, y la jerarquía se
   lee de un vistazo: lo de los lados es contexto, lo del centro es el
   trabajo.

Se probó antes en carbón oscuro, que es el patrón de Slack o Linear,
   y se descartó: pesa demasiado al lado de una conversación clara, y
   una herramienta que se mira ocho horas no gana nada con un bloque
   negro a un lado.
   ============================================================ */

:root {
    /* Escala pizarra luminosa y fresca, unificada en toda la columna lateral */
    --m34-nav-fondo: #edf2f7;
    --m34-nav-fondo-2: #ffffff;
    --m34-nav-hover: rgba(255, 255, 255, 0.68);
    --m34-nav-activo: #ffffff;
    --m34-nav-borde: #cbd5e1;
    --m34-nav-texto: #0f172a;
    --m34-nav-texto-2: #475569;
}

.dark-theme:root {
    --m34-nav-fondo: #111827;
    --m34-nav-fondo-2: #1e293b;
    --m34-nav-hover: rgba(255, 255, 255, 0.08);
    --m34-nav-activo: #1e293b;
    --m34-nav-borde: #334155;
    --m34-nav-texto: #f8fafc;
    --m34-nav-texto-2: #94a3b8;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-nav-fondo: #111827;
        --m34-nav-fondo-2: #1e293b;
        --m34-nav-hover: rgba(255, 255, 255, 0.08);
        --m34-nav-activo: #1e293b;
        --m34-nav-borde: #334155;
        --m34-nav-texto: #f8fafc;
        --m34-nav-texto-2: #94a3b8;
    }
}

/* --- 70.1 Las superficies --------------------------------------------
   El color se pinta de forma continua y limpia en toda la columna. */
#left-sidebar,
.app-main .column-left,
.column-left .left-sidebar,
#right-sidebar,
#right-sidebar-container {
    background-color: var(--m34-nav-fondo) !important;
}

#left-sidebar,
.app-main .column-left {
    border-right: 1px solid var(--m34-nav-borde) !important;
}

#right-sidebar,
#right-sidebar-container {
    border-left: 1px solid var(--m34-nav-borde) !important;
}

#left-sidebar .left-sidebar-navigation-area,
#left-sidebar #streams_list,
#left-sidebar #global_filters,
#left-sidebar .narrows_panel,
#left-sidebar-navigation-list,
#stream_filters,
#direct-messages-list,
#left-sidebar .dm-box,
#left-sidebar .top_left_row,
#stream_filters li,
#direct-messages-list li,
#left-sidebar-navigation-list li,
#right-sidebar > *,
#right-sidebar header,
#right-sidebar section,
#right-sidebar .simplebar-wrapper,
#right-sidebar .simplebar-mask,
#right-sidebar .simplebar-offset,
#right-sidebar .simplebar-content-wrapper,
#right-sidebar .simplebar-content,
#right-sidebar #buddy_list_wrapper,
#right-sidebar #buddy_list_wrapper_padding,
#right-sidebar .buddy-list-section,
#right-sidebar .invite-user-shortcut,
#right-sidebar ul,
#right-sidebar li,
#right-sidebar [class*="panel-header"],
#right-sidebar [class*="sidebar-header"] {
    background-color: transparent !important;
}

/* --- 70.2 El texto, en dos niveles nítidos ---------------------------- */
#left-sidebar,
#left-sidebar a,
#stream_filters a,
#left-sidebar-navigation-list a,
#global_filters a,
#direct-messages-list a,
#left-sidebar .narrow-filter a,
#left-sidebar .left-sidebar-navigation-label,
#left-sidebar .stream-name,
#left-sidebar .dm-name,
#right-sidebar,
#right-sidebar a,
#right-sidebar .user-name {
    color: var(--m34-nav-texto) !important;
}

#left-sidebar .left-sidebar-title,
#left-sidebar .stream-list-subsection-header,
#left-sidebar .stream-list-subsection-header a,
#left-sidebar .stream-list-subsection-header span,
#subscribe-to-more-streams .subscribe-more-label,
#subscribe-to-more-streams .subscribe-more-link,
#stream_filters .zoom-in-hide a,
#left-sidebar .bottom_left_row,
#left-sidebar .bottom_left_row a,
#right-sidebar .buddy-list-heading,
#right-sidebar .user-status {
    color: var(--m34-nav-texto-2) !important;
}

/* --- 70.3 Lo abierto, destacado con cuerpo y relieve ------------------ */
#stream_filters .active-filter::before,
#left-sidebar-navigation-list .active-filter::before,
#global_filters .active-filter::before {
    content: none;
}

#left-sidebar-navigation-list li.active-filter,
#stream_filters li.active-filter,
#global_filters li.active-filter,
#direct-messages-list .active-sub-filter,
#direct-messages-list li.active-sub-filter,
#direct-messages-list li.active-sub-filter .dm-box,
#left-sidebar .active-filter,
#left-sidebar .active-sub-filter,
#right-sidebar .user_sidebar_entry.active-user {
    background-color: var(--m34-nav-activo) !important;
    border-left: 3.5px solid var(--m34-acento, #dc2626) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    border-radius: var(--m34-radio-m) !important;
    color: var(--m34-nav-texto) !important;
    font-weight: 700 !important;
}

#left-sidebar-navigation-list li:hover:not(.active-filter),
#stream_filters li:hover:not(.active-filter),
#direct-messages-list li:hover:not(.active-sub-filter),
#left-sidebar .narrow-filter:hover,
#right-sidebar li:hover,
#right-sidebar .user_sidebar_entry:hover {
    background-color: var(--m34-nav-hover) !important;
    border-radius: var(--m34-radio-m);
}

/* --- 70.4 Elementos interactivos (búsqueda y botones) ----------------- */
#left-sidebar input[type="text"],
#left_bar_filter input,
#left-sidebar .input-append input,
#right-sidebar button,
#right-sidebar .mass34-panel-boton,
#right-sidebar .mass34-panel-tarjeta {
    background-color: var(--m34-nav-fondo-2) !important;
    border: 1px solid var(--m34-nav-borde) !important;
    color: var(--m34-nav-texto) !important;
    border-radius: var(--m34-radio-m) !important;
}

#left-sidebar input[type="text"]::placeholder,
#left_bar_filter input::placeholder {
    color: var(--m34-nav-texto-2) !important;
}

#left-sidebar input[type="text"]:focus,
#left_bar_filter input:focus {
    border-color: var(--m34-acento, #dc2626) !important;
    box-shadow: 0 0 0 3px var(--m34-acento-tenue-fuerte) !important;
}

#right-sidebar button:hover,
#right-sidebar .mass34-panel-boton:hover {
    background-color: var(--m34-nav-hover) !important;
    border-color: color-mix(in srgb, var(--m34-acento) 30%, transparent) !important;
}

/* La equis de cerrar */
#right-sidebar .mass34-context-close,
#right-sidebar .close {
    background-color: transparent !important;
    border: 0 !important;
    color: var(--m34-nav-texto-2) !important;
}

/* --- 70.5 Cabeceras, pies y separadores ------------------------------- */
#left-sidebar .top_left_row,
.realm-name-container,
#right-sidebar [class*="panel-header"],
#right-sidebar [class*="sidebar-header"] {
    border-bottom: 1px solid var(--m34-nav-borde) !important;
}

#left-sidebar .bottom_left_row {
    background-color: var(--m34-nav-fondo) !important;
    border-top: 1px solid var(--m34-nav-borde) !important;
    padding: 10px 12px;
    font-size: 11px;
}

#right-sidebar hr,
#right-sidebar .buddy-list-section + .buddy-list-section {
    border-color: var(--m34-nav-borde) !important;
}

/* ============================================================
   71. LOS ICONOS DE LA COLUMNA

Dos problemas. Los iconos de Zulip están dibujados a trazo de 1,5px
   sobre una retícula de 16, pensados para ir en medio de un texto: en
   una barra de navegación no se sostienen. Y van todos al mismo gris,
   digan lo que digan, así que hay que leer las cuatro etiquetas para
   saber dónde se está.

Se engordan y reciben un color por destino.

**El color se sale del criterio de la casa a propósito.** El
   CLAUDE.md dice que el rojo es el único color y el resto va en grises,
   para que el rojo no pierda fuerza. Aquí entran seis colores más, y se
   sostiene por dos motivos: son **destinos fijos** que no cambian nunca
   —un color por destino es una etiqueta permanente, no una alerta— y el
   rojo **sigue siendo el único que avisa**, porque estos colores no
   aparecen en ningún estado, solo en la identidad del icono.

Todo va con `!important` por la regla de la sección 24,
   `#left-sidebar .zulip-icon { color: ... !important }`, escrita cuando
   la barra era roja y todos sus iconos tenían que ir en blanco. La
   barra dejó de ser roja pero la regla sigue ahí, pintando de gris lo
   que se declare después. **Lo correcto sería quitarla**, que es donde
   está el problema de verdad; no se toca porque es de otra sección y
   cambiarla a ciegas arriesga los estados que dependen de ella. Queda
   apuntado para borrar las dos cosas a la vez.
   ============================================================ */

/* El tamaño hace la mitad del trabajo: 17px sobre una retícula de 16
   engorda el trazo proporcionalmente, sin deformar el dibujo. El
   contorno hace la otra mitad: `-webkit-text-stroke` pinta un borde del
   mismo color alrededor del glifo, así que un trazo de 1,5px pasa a
   2,1px. Tres décimas es el límite: a partir de ahí los huecos
   interiores —el ojo de la arroba, las puntas de la estrella— se
   cierran y el icono se convierte en una mancha.

El halo sale del propio color del icono, así que cada uno lleva el
   suyo sin declararlo dos veces. Al 13 % da cuerpo sin convertirlo en
   un botón. */
#left-sidebar-navigation-list .filter-icon .zulip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 17px;
    border-radius: 8px;
    background-color: color-mix(in srgb, currentColor 13%, transparent);
    -webkit-text-stroke: 0.3px currentColor;
    transition: background-color var(--m34-transicion);
}

/* --- 71.1 Un color por destino ---------------------------------------

Van por el nombre del icono y no por la posición del elemento: la
   barra tiene nueve `li`, no cuatro —cada vista arrastra además su
   icono de no leídos y su menú de tres puntos—, así que contar
   posiciones apunta a cualquier cosa. Preguntado al navegador después
   de fallar una vez contándolos a ojo.

Tonos a 600 de una escala de interfaz: mismo peso óptico los siete,
   para que ninguno destaque sobre los demás. Un azul brillante al lado
   de un ámbar apagado desequilibra la columna. */
#left-sidebar-navigation-list .filter-icon .zulip-icon-inbox {
    color: #2563eb !important;        /* lo que llega */
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-recent {
    color: #0891b2 !important;        /* lo que acaba de pasar */
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-all-messages {
    color: #4f46e5 !important;        /* todo junto */
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-at-sign {
    color: #7c3aed !important;        /* alguien te nombra */
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-smile {
    color: #db2777 !important;        /* la respuesta emocional */
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-star {
    color: #d97706 !important;        /* lo que apartas para luego */
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-drafts {
    color: #0d9488 !important;        /* lo empezado y sin enviar */
}

/* El `#` de los canales, en el rojo de la casa: es la marca del canal,
   no un destino con identidad propia. */
#stream_filters .zulip-icon-hashtag {
    color: var(--m34-acento) !important;
}

/* El candado dice una propiedad del canal, no que haya algo que hacer.
   Y el punto de no leídos y el menú de tres puntos comparten contenedor
   con el icono del destino: sin esto heredarían su color y su halo, y
   cada fila acabaría con tres manchas del mismo tono. */
#stream_filters .zulip-icon-lock,
#stream_filters .zulip-icon-globe,
#left-sidebar-navigation-list .zulip-icon-masked-unread,
#left-sidebar-navigation-list .zulip-icon-more-vertical {
    color: var(--m34-nav-texto-2) !important;
}

#left-sidebar-navigation-list .zulip-icon-masked-unread,
#left-sidebar-navigation-list .zulip-icon-more-vertical {
    width: auto;
    height: auto;
    background-color: transparent;
    -webkit-text-stroke: 0;
}

/* --- 71.2 El estado refuerza el halo, no cambia el color -------------

El color es la identidad del destino; cambiarlo al pasar el ratón
   sería como renombrarlo. Lo que crece es el halo. */
#left-sidebar-navigation-list li:hover .filter-icon .zulip-icon,
#left-sidebar-navigation-list li.active-filter .filter-icon .zulip-icon {
    background-color: color-mix(in srgb, currentColor 22%, transparent);
}

#left-sidebar-navigation-list li.active-filter .filter-icon .zulip-icon {
    -webkit-text-stroke: 0.45px currentColor;
}

/* --- 71.3 En oscuro, un paso más claros ------------------------------

Los tonos a 600 se apagan contra el fondo oscuro: suben al 400, que
   mantiene el matiz y recupera el contraste. */
.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-inbox {
    color: #60a5fa !important;
}

.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-recent {
    color: #22d3ee !important;
}

.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-all-messages {
    color: #818cf8 !important;
}

.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-at-sign {
    color: #a78bfa !important;
}

.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-smile {
    color: #f472b6 !important;
}

.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-star {
    color: #fbbf24 !important;
}

.dark-theme #left-sidebar-navigation-list .filter-icon .zulip-icon-drafts {
    color: #2dd4bf !important;
}

/* --- 71.4 El contador, la única nota plena ---------------------------

La sección 24 ajustó los contadores a la barra roja: fondo claro y
   número oscuro, que es lo que funciona sobre rojo. La barra volvió al
   blanco y se quedaron con aquellos colores, y sobre claro un contador
   de fondo claro no cuenta nada: hay que buscarlo.

Vuelven al rojo pleno. Al vivir en el extremo saturado de la misma
   escala que las columnas, destacan sin introducir ningún color nuevo:
   es exactamente el papel que el CLAUDE.md le reserva al acento.

`tabular-nums` fija el ancho de las cifras —sin él, pasar de 9 a 10
   hace saltar la fila entera— y el `min-width` iguala la pastilla de
   uno y dos dígitos, que si no sale una redonda y otra ovalada. */
#left-sidebar .unread_count,
#right-sidebar .unread_count {
    min-width: 19px;
    padding: 1px 0.42em;
    background-color: var(--m34-acento) !important;
    color: #ffffff !important;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    line-height: 16px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: none;
}

/* El "Activo" de un directo marca la conversación seleccionada */
#direct-messages-list .active-sub-filter .dm-box::after,
#direct-messages-list .active-sub-filter::after {
    background: #fee2e2 !important;
    color: var(--m34-acento) !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
}

#direct-messages-list li.active-sub-filter {
    border: 1px solid var(--m34-nav-borde) !important;
}

/* ============================================================
   72. RITMO Y JERARQUÍA EN LA COLUMNA

La barra funcionaba pero no estaba compuesta: cada bloque llegó de
   una sección distinta y traía su propio tamaño de letra, su alto de
   fila y su margen. Entre "CREAR UN CANAL" y "MENSAJES DIRECTOS" había
   el triple de aire que entre dos canales.

Tres sistemas, y nada más.

**Escala tipográfica.** Tres tamaños: 10,5px para los rótulos de
   sección, 13,5px para los destinos, 11px para los datos. Un cuarto
   tamaño no añade jerarquía, añade ruido.

**Ritmo de 4.** Todos los espaciados son múltiplos de cuatro. Cuando
   los huecos comparten divisor, el ojo percibe alineación aunque no
   pueda medirla; cuando no lo comparten, percibe descuido aunque
   tampoco sepa por qué.

**Una sola columna de texto.** Iconos de 26px más 10 de separación:
   las etiquetas arrancan en el mismo punto tengan icono, almohadilla o
   avatar.
   ============================================================ */

/* Los rótulos van en versalitas anchas: el texto en mayúsculas necesita
   tracking o las letras se tocan y se lee como un bloque. Ocho
   centésimas de em es el estándar para cuerpos pequeños en caja alta.

Y separan de verdad: 22px por arriba, 6 por abajo. Un rótulo debe
   estar más cerca de lo que titula que de lo que lo precede, o parece
   el pie de la sección anterior. */
#left-sidebar .left-sidebar-title,
#left-sidebar .stream-list-subsection-header,
#right-sidebar .buddy-list-heading {
    margin: 22px 0 6px;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#left-sidebar .left-sidebar-title:first-child {
    margin-top: 8px;
}

/* Mismo alto, mismo relleno y mismo radio, sea una vista, un canal o
   una conversación. Es lo que convierte tres listas sueltas en una sola
   barra. */
#left-sidebar-navigation-list li,
#stream_filters li,
#direct-messages-list li {
    min-height: 32px;
    margin: 0 6px 1px;
    padding: 0 6px;
    border-radius: var(--m34-radio-s);
}

#left-sidebar-navigation-list li a,
#stream_filters li a,
#direct-messages-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.3;
}

/* Contadores y estados son metadatos: informan de algo que pasa en el
   destino, no son el destino. Van empujados al final de la fila. */
#left-sidebar .unread_count,
#left-sidebar .dm-box .unread_count {
    margin-left: auto;
}

/* El buscador, con el mismo alto que una fila y los mismos márgenes
   laterales: sin eso queda flotando sobre la lista en vez de
   encabezarla. */
#left_bar_filter,
#left-sidebar .input-append {
    margin: 8px 6px 4px;
}

#left-sidebar input[type="text"],
#left_bar_filter input {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: var(--m34-radio-s);
}

/* ============================================================
   73. EL PANEL DE DETALLES, ANCLADO A LA VENTANA

Al bajar por la conversación el panel de la derecha se iba con ella y
   detrás quedaba una franja del fondo. Preguntado al navegador por su
   cadena de contenedores, en lugar de deducirlo:

#right-sidebar-container  position: absolute   alto  745
          << DIV                 position: relative   alto 2152
             << BODY                                  alto  956

El panel está **en posición absoluta dentro de un contenedor de 2152
   píxeles**, tres veces la ventana. Una caja absoluta se ancla a su
   contenedor, no a la pantalla: mientras el contenedor se desplaza,
   ella va detrás.

Dos intentos fallaron antes de medir, y conviene dejarlos escritos
   para que nadie los repita:

- **`position: sticky` no hace nada sobre un elemento absoluto**, y
     no avisa. La regla se escribe, el navegador la acepta, y el fallo
     parece del navegador.
   - **Cerrar el scroll del documento** con `overflow: hidden` en `html`
     y `body` sí fija el panel, y de paso deja la conversación sin poder
     moverse: el scroll del historial cuelga de ahí, y cerrando el de
     arriba se cierran todos los de abajo.

La vía que queda es `fixed`, que ancla a la ventana. Exige dar las
   medidas a mano, porque un elemento fijo sale del flujo y pierde las
   que heredaba; las de aquí están medidas sobre la interfaz en marcha,
   no elegidas.
   ============================================================ */

/* Solo en pantalla ancha. Por debajo de 80em manda la sección 64, que
   convierte el panel en un cajón flotante a demanda: ahí ya es `fixed`
   y con sus propias medidas, y esto lo pisaría. */
@media (min-width: 80.01em) {
    #right-sidebar-container {
        position: fixed;
        /* La cabecera de la conversación ocupa de 0 a 70, así que el
           panel empieza donde ella termina y donde arranca la lista de
           mensajes: los tres bloques comparten línea de salida. */
        top: 70px;
        /* A ras del borde de la ventana, como la barra lateral izquierda:
           los 15px que llevaba antes dejaban una franja de fondo vacío
           entre el panel y el borde, que se leía como un hueco sin
           explicación en vez de como margen a propósito. */
        right: 0;
        width: 329px;
        /* Zulip trae su propio `max-width: var(--right-sidebar-max-width)`
           —en `em`, pensado para SU ancho nativo de 354px— y en el
           contexto de fuente de este panel ese `em` vale menos de lo que
           parece: el tope salía en unos 247px, por debajo de los 329 de
           arriba, y como `max-width` gana siempre que es menor que
           `width`, el panel se quedaba encogido sin que `width: 329px`
           sirviera de nada. Sin ese tope ajeno, manda el nuestro. */
        max-width: 329px !important;
        height: calc(100dvh - 70px);
        max-height: calc(100dvh - 70px);
        /* El compositor es fijo y algunos estados de foco crean su propio
           contexto de apilamiento. El panel debe cubrirlo hasta el borde
           inferior, igual que el drawer de portatil. */
        z-index: 1201;
    }

/* El relleno de arriba lo reservaba el panel cuando vivía dentro del
       flujo y tenía que esquivar la barra superior por dentro. Al pasar
       a `fixed` y arrancar ya por debajo de la cabecera, dejó de hacer
       falta y se quedó como una franja vacía de 139 píxeles.

Es un caso que se repite al fijar elementos: se corrige la
       posición, el desfase sigue, y resulta que el espaciado interno se
       sumaba al que antes hacía falta fuera. Conviene medir el primer
       hijo, no solo el contenedor. */
    #right-sidebar {
        /* Sin ancho propio, `#right-sidebar` sigue usando el nativo de
           Zulip —`width: var(--right-sidebar-width)`, 354px— que ya no
           coincide con los 329px del contenedor de arriba. Nunca estuvo
           pensado para medirse contra ese contenedor: antes se posicionaba
           `fixed` por su cuenta (ver la nota encima de la sección 67) y
           el contenedor era solo un envoltorio sin forma propia. Ahora
           que el contenedor manda, el panel tiene que llenarlo, no traer
           su propia medida. */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        /* Zulip trae aquí un `transform: translateX(-16px)` propio —de
           cuando el panel se desliza al abrirse con su ancho nativo— y un
           `padding-left: 5px` a juego. Con el ancho ya puesto al 100% del
           contenedor ninguno de los dos pinta nada: el primero lo saca
           16px hacia la izquierda de donde debería estar, y el segundo
           sobra del hueco que dejaba la animación. Los dos a cero. */
        transform: none !important;
        padding-left: 0 !important;
        height: 100%;
        max-height: 100%;
        padding-top: 0 !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

/* La cabecera contextual queda al lado de la cabecera de la
       conversacion. Ambas deben compartir alto y borde inferior. */
    #right-sidebar::before {
        box-sizing: border-box;
        min-height: 70px;
    }

#right-sidebar > * {
        margin-top: 0 !important;
    }

#right-sidebar .mass34-context-close,
    #right-sidebar > button {
        top: 18px !important;
        right: 12px !important;
    }
}

/* Los tooltips se montan al final del body y pueden quedar por encima del
   lateral aunque el control que los origino este detras. Al abrir Detalles
   se oculta solo ese globo transitorio para que no invada el panel. */
body.mass34-panel-derecho-visible
    [data-tippy-root]:has(.tippy-box[role="tooltip"]) {
    visibility: hidden !important;
}

/* ============================================================
   74. LOS ICONOS DE VISTAS, EN EMOJI

Se pidieron dibujos a color en vez de trazos. Los iconos de la fuente
   son `::before` con `content`, así que se sustituyen por el emoji
   correspondiente sin tocar una sola imagen.

**Lo que hay que saber si se mantiene:** un emoji no lo dibuja esta
   hoja, lo dibuja el sistema operativo de quien mira. El mismo carácter
   se ve distinto en Windows, en Android, en iPhone y en Mac. En un
   centro de llamadas donde todos usan el mismo Windows no se nota; en
   cuanto alguien abra el chat desde el móvil, sí.

Los colores por destino de la sección 71 siguen declarados debajo: no
   se ven mientras haya emoji, pero vuelven solos si se borra esta
   sección. Es la vuelta atrás, y por eso se dejan.

Se les quita el halo y el engrosado que llevaban los de trazo: un
   emoji ya trae su color y su peso, y ponerle fondo detrás lo convierte
   en una pegatina sobre otra pegatina.
   ============================================================ */

#left-sidebar-navigation-list .filter-icon .zulip-icon::before,
#left-sidebar-navigation-list-condensed .filter-icon .zulip-icon::before {
    /* La familia va explícita para que Windows use Segoe UI Emoji y no
       intente dibujarlo con la fuente de iconos, que no lo tiene. */
    font-family: "Segoe UI Emoji", "Apple Color Emoji",
        "Noto Color Emoji", sans-serif !important;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
}

#left-sidebar-navigation-list .filter-icon .zulip-icon,
#left-sidebar-navigation-list-condensed .filter-icon .zulip-icon,
#left-sidebar-navigation-list li:hover .filter-icon .zulip-icon,
#left-sidebar-navigation-list li.active-filter .filter-icon .zulip-icon,
#left-sidebar-navigation-list-condensed li:hover .filter-icon .zulip-icon,
#left-sidebar-navigation-list-condensed
    li.selected-home-view
    .filter-icon
    .zulip-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    -webkit-text-stroke: 0 !important;
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-inbox::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-inbox::before {
    content: "📥";
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-recent::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-recent::before {
    content: "🕒";
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-all-messages::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-all-messages::before {
    content: "💬";
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-at-sign::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-at-sign::before {
    content: "🔔";
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-smile::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-smile::before {
    content: "😊";
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-star::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-star::before {
    content: "⭐";
}

#left-sidebar-navigation-list .filter-icon .zulip-icon-drafts::before,
#left-sidebar-navigation-list-condensed
    .filter-icon
    .zulip-icon-drafts::before {
    content: "📝";
}

/* ============================================================
   75. EL AZUL DE «LEÍDO»

Los mensajes leídos salían con doble check gris en vez de azul. El
   cálculo era correcto —la API devolvía bien el acuse— y el color se
   había perdido por el camino: la sección 69, al recoger la hora y el
   check contra la burbuja, los pinta a los dos del gris de los
   metadatos, y esa regla le gana a `.mass34-check-leido` por tener más
   clases y ir después.

Un descuido fácil de cometer y difícil de ver: el estado se seguía
   calculando bien y el doble trazo aparecía; solo faltaba el color que
   distingue «entregado» de «leído». Mirando la pantalla parecía un
   fallo de la lógica de acuses, que es donde no estaba.

El azul se declara como variable, que es lo que debió hacerse desde
   el principio: así el día que alguien vuelva a tocar los estilos del
   check, no se lo lleva por delante sin enterarse.
   ============================================================ */

:root {
    /* El único color de la interfaz que no sale de la paleta de marca,
       y es a propósito: «leído» en azul es un convenio que la gente ya
       trae aprendido de otras aplicaciones, y pelearse con él solo
       confundiría. Está explicado en la sección 2511. */
    --m34-check-leido: #2b8ae6;
}

.dark-theme:root {
    /* Sobre fondo oscuro el azul a 600 se apaga: sube al 400. */
    --m34-check-leido: #5eb3f5;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-check-leido: #5eb3f5;
    }
}

.message_row .mass34-check.mass34-check-leido,
.message_row .mass34-check.mass34-check-leido svg,
.message_row .mass34-check-leido .mass34-check-cuenta {
    color: var(--m34-check-leido);
    fill: currentColor;
}

/* «Entregado» y «enviado» se quedan en el gris de los metadatos: son
   estados de tránsito y no piden que los mires. */
.message_row .mass34-check.mass34-check-entregado,
.message_row .mass34-check.mass34-check-enviado {
    color: var(--m34-dm-hora);
}

/* ============================================================
   76. LAS FILAS DE LA BARRA, SIN PISARSE

La fila bajo el ratón se comía a las de arriba y abajo. Costó tres
   intentos porque eran tres causas distintas superpuestas, y ninguna
   se ve mirando la lista en reposo.

**El fondo lo pintaba una capa interna.** No lo hacía la fila sino
   `.top_left_row` (sección 3916), un contenedor que además lleva su
   propio relleno vertical (2065 y 3727). Dos capas pintando lo mismo y
   la de dentro más alta que la de fuera: el resultado era una tarjeta
   despegada de la lista.

**La fila crecía al pasar el ratón.** Al aparecer el menú de tres
   puntos y el contador, el elemento se estiraba para darles sitio y,
   como ya no cabía en su hueco, invadía el de la vecina. Es un fallo
   que solo existe en movimiento: en reposo la lista está perfecta, así
   que buscándolo por colores y bordes no aparece nunca. La pista está
   en que la fila señalada es la única que muestra los tres puntos.

**Y el fondo llegaba de canto a canto.** Ya sin solaparse, el color
   seguía tocando el texto de la fila vecina. Un fondo de estado no
   tiene por qué ocupar todo el alto: dejando un par de píxeles se lee
   como «esta fila está señalada» y no como «hay un bloque de color».
   ============================================================ */

/* --- 76.1 El alto, fijo ----------------------------------------------

Se reserva el sitio desde el principio y se reparte el contenido en
   horizontal: los controles aparecen y desaparecen dentro de ese alto,
   sin cambiarlo. */
#left-sidebar-navigation-list li,
#stream_filters li,
#direct-messages-list li,
#global_filters li {
    display: flex;
    align-items: center;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    overflow: hidden;
    /* Tres píxeles arriba y abajo que el fondo no va a pintar, gracias
       a `background-clip`. La fila conserva su alto y su zona de clic
       entera; lo único que cambia es hasta dónde llega el color. */
    padding: 3px 6px;
    margin: 0 6px 2px;
    background-clip: content-box;
    border-radius: 7px;
}

/* El contenedor interno ocupa la fila y centra su contenido. Su relleno
   vertical se retira: sumaba al alto y era parte de lo que hacía crecer
   la fila. */
#left-sidebar-navigation-list .top_left_row,
#stream_filters .bottom_left_row,
#global_filters .top_left_row,
#direct-messages-list .dm-box,
#left-sidebar-navigation-list li > a,
#left-sidebar-navigation-list .left-sidebar-navigation-label-container,
#stream_filters li > a,
#direct-messages-list li > a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* La regla de layout anterior usa display:flex !important y gana a una
 * clase de ocultación de menor especificidad. Estos selectores tienen la
 * misma estructura de la fila y fuerzan la ocultación de las tres vistas. */
#left-sidebar-navigation-list li.top_left_all_messages,
#left-sidebar-navigation-list li.top_left_my_reactions,
#left-sidebar-navigation-list li.top_left_reactions,
#left-sidebar-navigation-list li.top_left_scheduled_messages,
#left-sidebar-navigation-list li.top_left_reminders,
#left-sidebar-navigation-list li.top_left_reminder,
#global_filters li.top_left_all_messages,
#global_filters li.top_left_my_reactions,
#global_filters li.top_left_reactions,
#global_filters li.top_left_scheduled_messages,
#global_filters li.top_left_reminders,
#global_filters li.top_left_reminder {
    display: none !important;
}

/* --- 76.2 Una sola capa pinta ----------------------------------------

La interna se calla; el estado lo dice la fila y solo la fila. */
#left-sidebar-navigation-list li:hover .top_left_row,
#left-sidebar-navigation-list li:focus-within .top_left_row,
#global_filters li:hover .top_left_row,
#left-sidebar-navigation-list .active-filter .top_left_row,
#global_filters .active-filter .top_left_row,
#stream_filters li.active-filter .bottom_left_row,
#stream_filters li:hover .bottom_left_row,
#left-sidebar-navigation-list li:hover > a,
#stream_filters li:hover > a,
#direct-messages-list li:hover > a {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- 76.3 Los dos estados --------------------------------------------

Lo abierto es el peldaño más saturado de la escala de la sección 70;
   el hover, el intermedio. Sin borde, sin sombra y sin moverse: es lo
   que hace cualquier barra lateral, y ninguna levanta el elemento. */
#left-sidebar-navigation-list li:hover:not(.active-filter),
#stream_filters li:hover:not(.active-filter),
#direct-messages-list li:hover:not(.active-sub-filter),
#global_filters li:hover:not(.active-filter),
#left-sidebar .narrow-filter:hover,
#right-sidebar li:hover,
#right-sidebar .user_sidebar_entry:hover {
    background-color: var(--m34-nav-hover) !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: auto !important;
}

#left-sidebar-navigation-list li.active-filter,
#stream_filters li.active-filter,
#direct-messages-list li.active-sub-filter,
#global_filters li.active-filter,
#left-sidebar .active-filter,
#left-sidebar .active-sub-filter,
#right-sidebar .user_sidebar_entry.active-user {
    background-color: var(--m34-nav-activo) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* --- 76.4 Lo que no debe estirar la fila ------------------------------

El menú de tres puntos y el contador, al final y sin encogerse por un
   nombre largo. Y el nombre, recortado con puntos suspensivos: una
   segunda línea también haría crecer la fila. */
#left-sidebar-navigation-list .zulip-icon-more-vertical,
#stream_filters .zulip-icon-more-vertical,
#direct-messages-list .zulip-icon-more-vertical,
#left-sidebar .unread_count {
    flex-shrink: 0;
    align-self: center;
}

#left-sidebar-navigation-list .left-sidebar-navigation-label,
#stream_filters .stream-name,
#direct-messages-list .dm-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#stream_filters
    :is(
        li[data-stream-id="1"],
        li[data-stream-id="3"],
        li[data-stream-id="10"],
        li[data-stream-id="38"]
    )
    .stream-name {
    text-transform: capitalize;
}

/* ============================================================
   77. SUPERFICIES DEL CHAT EN LA PALETA MASS 34

Conserva la geometría de las burbujas y la alineación alternada,
   pero sustituye el beige y el verde heredados por una escala cálida
   derivada del rojo corporativo. El contraste entre mensajes propios y
   ajenos sigue siendo inmediato sin parecer una copia de otra marca.
   ============================================================ */

:root {
    --m34-dm-lienzo: #f8fafc;
    --m34-dm-lienzo-profundo: #f1f5f9;
    --m34-dm-propia: #f0fdf4;
    --m34-dm-propia-hover: #dcfce7;
    --m34-dm-propia-borde: #bbf7d0;
    --m34-dm-ajena: #ffffff;
    --m34-dm-ajena-hover: #f8fafc;
    --m34-dm-ajena-borde: #e2e8f0;
    --m34-dm-texto: #0f172a;
    --m34-dm-hora: #64748b;
    --m34-chat-sombra: rgba(15, 23, 42, 0.05);
}

.dark-theme:root {
    --m34-dm-lienzo: #0b0f17;
    --m34-dm-lienzo-profundo: #111827;
    --m34-dm-propia: #064e3b;
    --m34-dm-propia-hover: #065f46;
    --m34-dm-propia-borde: #047857;
    --m34-dm-ajena: #1e293b;
    --m34-dm-ajena-hover: #243044;
    --m34-dm-ajena-borde: #334155;
    --m34-dm-texto: #f8fafc;
    --m34-dm-hora: #94a3b8;
    --m34-chat-sombra: rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-dm-lienzo: #0b0f17;
        --m34-dm-lienzo-profundo: #111827;
        --m34-dm-propia: #064e3b;
        --m34-dm-propia-hover: #065f46;
        --m34-dm-propia-borde: #047857;
        --m34-dm-ajena: #1e293b;
        --m34-dm-ajena-hover: #243044;
        --m34-dm-ajena-borde: #334155;
        --m34-dm-texto: #f8fafc;
        --m34-dm-hora: #94a3b8;
        --m34-chat-sombra: rgba(0, 0, 0, 0.28);
    }
}

.column-middle > .column-middle-inner {
    background: var(--m34-dm-lienzo) !important;
}

.message_row .message_content {
    box-sizing: border-box;
    background-color: var(--m34-dm-ajena) !important;
    border: 1px solid var(--m34-dm-ajena-borde) !important;
    border-radius: 14px 14px 14px 4px !important;
    box-shadow: 0 1px 3px var(--m34-chat-sombra), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
    color: var(--m34-dm-texto) !important;
}

.message_row.mass34-propio .message_content {
    background-color: var(--m34-dm-propia) !important;
    border: 1px solid var(--m34-dm-propia-borde) !important;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow: 0 1px 3px var(--m34-chat-sombra) !important;
    color: var(--m34-dm-texto) !important;
}

.message_row .message_sender .sender_name {
    color: var(--m34-acento-activo) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
}

.message_row .mass34-check {
    color: #10b981 !important;
}

.message_row:hover .message_content,
.message_row.selected_message .message_content {
    background-color: var(--m34-dm-ajena-hover) !important;
}

.message_row.mass34-propio:hover .message_content,
.message_row.mass34-propio.selected_message .message_content {
    background-color: var(--m34-dm-propia-hover) !important;
}

.message_row .message_content:has(.rendered_markdown > p > .bot-message),
.message_row.mass34-aviso .message_content {
    border-color: var(--m34-dm-ajena-borde) !important;
}

.unread_marker {
    border: 1px solid color-mix(in srgb, var(--m34-acento) 20%, var(--m34-dm-ajena-borde));
    background-color: color-mix(in srgb, var(--m34-dm-ajena) 95%, transparent);
    box-shadow: 0 4px 14px var(--m34-chat-sombra);
    backdrop-filter: blur(10px);
}

/* Los separadores posteriores (Hoy, Ayer, etc.) usan un timerender directo,
   mientras la primera fecha de la conversacion vive en recipient_row_date.
   Se igualan las dos presentaciones para que toda la cronologia sea uniforme. */
.date_row > .timerender-content {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 12px;
    align-items: center;
    color: var(--m34-texto-tenue);
    font-size: 11px;
    line-height: 14px;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: 999px;
    box-shadow: none;
    backdrop-filter: none;
}

/* ============================================================
   78. MENÚ MODERNO DE ACCIONES DEL MENSAJE

Las mismas acciones y el mismo DOM de Zulip: solo se mejora jerarquía,
   espaciado, estados y legibilidad. Eliminar conserva una señal visual
   destructiva propia; reenviar y confirmaciones usan colores semánticos.
   ============================================================ */

#message-actions-menu-dropdown {
    min-width: 195px !important;
    max-width: 220px !important;
    max-height: 290px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent !important;
    padding: 6px 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.15),
        0 2px 8px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(12px) !important;
}

#message-actions-menu-dropdown::-webkit-scrollbar {
    width: 4px !important;
}
#message-actions-menu-dropdown::-webkit-scrollbar-track {
    background: transparent !important;
}
#message-actions-menu-dropdown::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4) !important;
    border-radius: 999px !important;
}

#message-actions-menu-dropdown .popover-menu-list {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#message-actions-menu-dropdown .popover-menu-list-item {
    margin: 0 !important;
    list-style: none !important;
}

#message-actions-menu-dropdown .popover-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 38px !important;
    padding: 8px 16px !important;
    border-radius: 0 !important;
    color: #334155 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-decoration: none !important;
    transition: background 120ms ease, color 120ms ease !important;
}

#message-actions-menu-dropdown .popover-menu-link:hover,
#message-actions-menu-dropdown .popover-menu-link:focus-visible {
    color: #0f172a !important;
    background-color: #f8fafc !important;
    transform: none !important;
    outline: none !important;
}

#message-actions-menu-dropdown .popover-menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: #475569 !important;
    font-size: 16px !important;
}

#message-actions-menu-dropdown .popover-menu-icon svg {
    width: 16px !important;
    height: 16px !important;
}

#message-actions-menu-dropdown .popover-menu-label {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
}

/* Copiar texto con divisor vertical y chevron › */
#message-actions-menu-dropdown .mass34-copiar-sep {
    display: inline-block !important;
    width: 1px !important;
    height: 15px !important;
    background: #cbd5e1 !important;
    margin-left: auto !important;
    margin-right: 8px !important;
}

#message-actions-menu-dropdown .mass34-copiar-chevron {
    display: inline-flex !important;
    align-items: center !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

/* Eliminar mensaje en rojo con borde separador */
#message-actions-menu-dropdown .popover-menu-list-item:has(> .delete_message),
#message-actions-menu-dropdown .popover-menu-list-item.mass34-menu-item-eliminar {
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
}

#message-actions-menu-dropdown .delete_message,
#message-actions-menu-dropdown .delete_message .popover-menu-label,
#message-actions-menu-dropdown .delete_message .popover-menu-icon,
#message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link,
#message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-label,
#message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-icon {
    color: #ef4444 !important;
}

#message-actions-menu-dropdown .delete_message:hover,
#message-actions-menu-dropdown .delete_message:focus-visible,
#message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link:hover,
#message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link:focus-visible {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

.dark-theme #message-actions-menu-dropdown,
.color-scheme-dark #message-actions-menu-dropdown {
    background: #202c33 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.45),
        0 3px 12px rgba(0, 0, 0, 0.25) !important;
}

.dark-theme #message-actions-menu-dropdown .popover-menu-link,
.color-scheme-dark #message-actions-menu-dropdown .popover-menu-link {
    color: #d1d7db !important;
}

.dark-theme #message-actions-menu-dropdown .popover-menu-link:hover,
.color-scheme-dark #message-actions-menu-dropdown .popover-menu-link:hover {
    color: #f0f2f5 !important;
    background-color: #2a3942 !important;
}

.dark-theme #message-actions-menu-dropdown .popover-menu-icon,
.color-scheme-dark #message-actions-menu-dropdown .popover-menu-icon {
    color: #8696a0 !important;
}

.dark-theme #message-actions-menu-dropdown .mass34-copiar-sep,
.color-scheme-dark #message-actions-menu-dropdown .mass34-copiar-sep {
    background: #374248 !important;
}

.dark-theme #message-actions-menu-dropdown .popover-menu-list-item:has(> .delete_message),
.dark-theme #message-actions-menu-dropdown .popover-menu-list-item.mass34-menu-item-eliminar,
.color-scheme-dark #message-actions-menu-dropdown .popover-menu-list-item:has(> .delete_message),
.color-scheme-dark #message-actions-menu-dropdown .popover-menu-list-item.mass34-menu-item-eliminar {
    border-top-color: #2a3942 !important;
}

.dark-theme #message-actions-menu-dropdown .delete_message,
.dark-theme #message-actions-menu-dropdown .delete_message .popover-menu-label,
.dark-theme #message-actions-menu-dropdown .delete_message .popover-menu-icon,
.dark-theme #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link,
.dark-theme #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-label,
.dark-theme #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-icon,
.color-scheme-dark #message-actions-menu-dropdown .delete_message,
.color-scheme-dark #message-actions-menu-dropdown .delete_message .popover-menu-label,
.color-scheme-dark #message-actions-menu-dropdown .delete_message .popover-menu-icon,
.color-scheme-dark #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link,
.color-scheme-dark #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-label,
.color-scheme-dark #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-icon {
    color: #f87171 !important;
}

.dark-theme #message-actions-menu-dropdown .delete_message:hover,
.dark-theme #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link:hover,
.color-scheme-dark #message-actions-menu-dropdown .delete_message:hover,
.color-scheme-dark #message-actions-menu-dropdown .mass34-menu-item-eliminar .popover-menu-link:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

/* ============================================================
   84. CIERRE RESPONSIVO DE LA CABECERA DE TEMAS

La cabecera movil dispone de 352 px utiles. El relleno heredado de
   escritorio dejaba solo 281 px para una rejilla de 328 px y expulsaba
   el menu de tres puntos 17 px fuera de la pantalla.
   ============================================================ */

@media (max-width: 50em) {
    .message-header-contents.mass34-stitch-room-header {
        padding: 8px 12px !important;
        grid-template-columns: minmax(0, 1fr) 36px 36px 92px !important;
    }
}

/* ============================================================
   85. CONVERSACIONES RECIENTES COMO PANEL CORPORATIVO

Esta vista usa dos tablas separadas y una barra de filtros propia. Se
   modernizan como una sola superficie sin alterar filtros, ordenacion ni
   enlaces de navegacion de Zulip.
   ============================================================ */

#recent_view {
    box-sizing: border-box;
    min-height: 100dvh;
    padding-bottom: 170px;
    background:
        radial-gradient(
            circle at 8% 8%,
            color-mix(in srgb, var(--m34-acento) 5%, transparent),
            transparent 24rem
        ),
        linear-gradient(
            180deg,
            var(--m34-superficie-alt) 0%,
            var(--m34-superficie) 72%
        );
}

#recent_view .recent_view_container {
    box-sizing: border-box;
    width: calc(100% - 32px);
    height: auto;
    margin: 0 16px;
    overflow: hidden;
    border: 1px solid var(--m34-borde);
    border-radius: 16px;
    background: color-mix(in srgb, var(--m34-flotante) 97%, transparent);
    box-shadow:
        0 18px 44px rgba(43, 32, 34, 0.10),
        0 2px 8px rgba(43, 32, 34, 0.05);
    backdrop-filter: blur(14px);
}

#recent_view_table {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

#recent_view_filter_buttons {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    height: auto;
    min-height: 66px;
    padding: 14px 16px;
    grid-template-columns: minmax(0, auto) minmax(260px, 1fr);
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--m34-borde);
    background: var(--m34-flotante);
}

#recent_filters_group {
    display: flex;
    width: auto;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#recent-view-filter_widget,
#recent_view .button-recent-filters {
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 12px;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--m34-borde-fuerte);
    border-radius: 10px;
    background: var(--m34-superficie);
    color: var(--m34-texto-suave);
    font-family: var(--m34-font-ui);
    font-size: 13px;
    font-weight: 650;
    line-height: 20px;
    transition:
        color 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease;
}

#recent-view-filter_widget {
    min-width: 166px;
    justify-content: space-between;
}

#recent_view .button-recent-filters:hover,
#recent_view .button-recent-filters:focus-visible,
#recent-view-filter_widget:hover,
#recent-view-filter_widget:focus-visible {
    border-color: color-mix(in srgb, var(--m34-acento) 48%, var(--m34-borde));
    background: var(--m34-acento-tenue);
    color: var(--m34-acento);
    outline: none;
}

#recent_view .button-recent-filters[aria-checked="true"] {
    border-color: color-mix(in srgb, var(--m34-acento) 62%, var(--m34-borde));
    background: color-mix(in srgb, var(--m34-acento) 11%, var(--m34-superficie));
    color: var(--m34-acento);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m34-acento) 8%, transparent);
}

#recent_view .button-recent-filters > i {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

#recent-view-search-wrapper {
    min-width: 260px;
    height: 38px;
    margin: 0;
}

#recent_view_search {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 8px 38px 8px 36px;
    border: 1px solid var(--m34-borde-fuerte) !important;
    border-radius: 10px !important;
    background: var(--m34-superficie) !important;
    color: var(--m34-texto) !important;
    font-family: var(--m34-font-ui);
    font-size: 14px;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease;
}

#recent_view_search:focus {
    border-color: var(--m34-acento) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--m34-acento-halo);
}

#recent-view-search-wrapper .input-icon {
    color: var(--m34-texto-tenue);
}

#recent_view .recent-view-container {
    height: auto;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
}

#recent_view .recent-view-container > .table,
#recent-view-content-table {
    width: 100%;
    table-layout: fixed;
}

#recent-view-table-headers th {
    height: 44px;
    padding: 11px 16px;
    color: var(--m34-texto-suave);
    background: var(--m34-superficie-alt);
    border-top: 0;
    border-bottom: 1px solid var(--m34-borde);
    font-size: 11px;
    font-weight: 750;
    line-height: 18px;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#recent-view-table-headers th:first-child {
    padding-left: 20px;
}

#recent-view-table-headers th:last-child {
    padding-right: 20px;
}

#recent-view-table-headers th.active {
    color: var(--m34-acento);
}

#recent-view-content-table {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 6px 16px 0;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: transparent;
}

#recent-view-content-table > tbody > tr {
    background: transparent !important;
    filter: drop-shadow(0 4px 12px rgba(43, 32, 34, 0.055));
}

#recent-view-content-table > tbody > tr > td {
    box-sizing: border-box;
    min-height: 54px;
    padding: 10px 14px;
    vertical-align: middle;
    background: color-mix(in srgb, var(--m34-flotante) 98%, transparent);
    border-top: 1px solid var(--m34-borde);
    border-bottom: 1px solid var(--m34-borde);
    transition:
        background-color 140ms ease,
        border-color 140ms ease;
}

#recent-view-content-table > tbody > tr > td:first-child {
    padding-left: 16px;
    border-left: 1px solid var(--m34-borde);
    border-radius: 12px 0 0 12px;
}

#recent-view-content-table > tbody > tr > td:last-child {
    padding-right: 16px;
    border-right: 1px solid var(--m34-borde);
    border-radius: 0 12px 12px 0;
}

#recent-view-content-table > tbody > tr:hover > td,
#recent-view-content-table > tbody > tr:focus-within > td {
    background: color-mix(in srgb, var(--m34-acento) 5%, var(--m34-flotante));
    border-color: color-mix(in srgb, var(--m34-acento) 22%, var(--m34-borde));
}

#recent_view .recent-view-table-link {
    color: var(--m34-texto);
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    text-decoration: none;
}

#recent_view .recent_topic_name .recent-view-table-link {
    color: var(--m34-texto-suave);
    font-weight: 550;
}

#recent_view .recent-view-table-link:hover,
#recent_view .recent-view-table-link:focus-visible {
    color: var(--m34-acento);
    text-decoration: none;
    outline: none;
}

#recent_view .stream-privacy.filter-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--m34-superficie-alt);
    color: var(--m34-texto-suave) !important;
}

#recent_view .recent_view_participants {
    min-height: 34px;
    padding: 3px 6px;
    align-items: center;
    border: 1px solid var(--m34-borde);
    border-radius: 10px;
    background: var(--m34-superficie-alt);
}

#recent_view .recent_view_participant_avatar {
    width: 26px;
    height: 26px;
    border: 2px solid var(--m34-flotante);
    border-radius: 9px;
    object-fit: cover;
}

#recent_view .last_msg_time a {
    display: inline-flex;
    min-height: 30px;
    padding: 5px 10px;
    align-items: center;
    border-radius: 999px;
    background: var(--m34-superficie-alt);
    color: var(--m34-texto-suave);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
}

#recent_view .recent_topic_actions {
    min-width: 28px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

#recent_view .recent_topic_actions:hover {
    background: var(--m34-acento-tenue);
    color: var(--m34-acento);
}

#recent_view .recent-view-load-more-container {
    border-color: var(--m34-borde);
    border-radius: 12px;
    background: var(--m34-superficie-alt);
}

@media (max-width: 50em) {
    #recent_view {
        padding-bottom: 150px;
    }

#recent_view .recent_view_container {
        width: calc(100% - 20px);
        margin: 10px 10px 0;
        border-radius: 14px;
    }

#recent_view_filter_buttons {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px;
        gap: 10px;
    }

#recent_filters_group {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

#recent-view-filter_widget,
    #recent_view .button-recent-filters {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 7px 9px;
        font-size: 12px;
    }

#recent-view-search-wrapper {
        width: 100%;
        min-width: 0;
    }

#recent-view-table-headers th {
        height: 40px;
        padding: 9px 10px;
        font-size: 10px;
    }

#recent-view-content-table {
        width: calc(100% - 20px);
        margin: 4px 10px 0;
        border-spacing: 0 7px;
    }

#recent-view-content-table > tbody > tr > td {
        min-height: 58px;
        padding: 9px 10px;
    }

#recent-view-content-table > tbody > tr > td:first-child {
        padding-left: 10px;
    }

#recent-view-content-table > tbody > tr > .recent_topic_name {
        padding-right: 10px;
        border-right: 1px solid var(--m34-borde);
        border-radius: 0 12px 12px 0;
    }

#recent_view .stream-privacy.filter-icon {
        width: 26px;
        height: 26px;
    }

#recent_view .recent-view-table-link {
        font-size: 13px;
    }
}

/* ============================================================
   86. CENTRO DE AJUSTES PERSONAL Y DE ORGANIZACION

Todas las secciones comparten el mismo contenedor: perfil, privacidad,
   notificaciones, permisos, usuarios, bots, emojis, enlaces y opciones de
   organizacion. Las reglas se apoyan en esa estructura comun para cubrir el
   modulo completo, incluidas tablas y formularios que se cargan al cambiar
   de apartado.
   ============================================================ */

#settings_overlay_container {
    background: rgba(20, 17, 19, 0.48);
    backdrop-filter: blur(6px) saturate(0.9);
    z-index: 1500 !important;
}

#settings_page.overlay-container {
    width: min(1280px, calc(100vw - 48px));
    height: min(94dvh, 980px);
    max-width: none;
    max-height: none;
    overflow: hidden;
    border: 1px solid var(--m34-borde);
    border-radius: 20px;
    background: var(--m34-superficie);
    box-shadow:
        0 32px 80px rgba(32, 20, 23, 0.28),
        0 8px 24px rgba(32, 20, 23, 0.12);
}

#settings_page .sidebar-wrapper {
    box-sizing: border-box;
    width: 300px;
    border-right: 1px solid var(--m34-borde);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--m34-acento) 4%, var(--m34-superficie-alt)),
            var(--m34-superficie-alt) 36%
        );
}

#settings_page .tab-container {
    box-sizing: border-box;
    height: 64px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m34-borde);
    background: var(--m34-flotante);
}

#settings_page .tab-switcher {
    box-sizing: border-box;
    display: grid;
    min-height: 40px;
    padding: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    border: 1px solid var(--m34-borde);
    border-radius: 11px;
    background: var(--m34-superficie-alt);
}

#settings_page .tab-switcher .ind-tab {
    min-width: 0;
    min-height: 30px;
    padding: 5px 10px;
    margin: 0;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--m34-texto-suave);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

#settings_page .tab-switcher .ind-tab:hover {
    background: var(--m34-acento-tenue);
    color: var(--m34-acento);
}

#settings_page .tab-switcher .ind-tab.selected {
    background: var(--m34-acento);
    color: #ffffff;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--m34-acento) 24%, transparent);
}

#settings_page .sidebar.left {
    top: 64px;
    width: 300px;
    height: calc(100% - 64px);
    background: transparent;
}

#settings_page .sidebar-list {
    padding: 10px;
}

#settings_page .sidebar-list ul {
    padding: 0;
    margin: 0;
}

#settings_page .sidebar-item {
    box-sizing: border-box;
    display: grid;
    min-height: 48px;
    padding: 9px 11px;
    margin: 2px 0;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--m34-texto-suave);
    font-size: 13px;
    font-weight: 600;
    transition:
        color 140ms ease,
        border-color 140ms ease,
        background-color 140ms ease,
        transform 140ms ease;
}

#settings_page .sidebar-item:hover,
#settings_page .sidebar-item:focus-visible {
    border-color: var(--m34-borde);
    background: var(--m34-flotante);
    color: var(--m34-texto);
    outline: none;
    transform: translateX(2px);
}

#settings_page .sidebar-item.active {
    border-color: color-mix(in srgb, var(--m34-acento) 18%, var(--m34-borde));
    background: color-mix(in srgb, var(--m34-acento) 9%, var(--m34-flotante));
    color: var(--m34-acento);
    box-shadow: inset 3px 0 0 var(--m34-acento);
}

#settings_page .sidebar-item-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--m34-texto-tenue);
    font-size: 16px;
}

#settings_page .sidebar-item.active .sidebar-item-icon {
    background: var(--m34-acento-tenue);
    color: var(--m34-acento);
}

#settings_page .sidebar-item .locked {
    justify-self: end;
    color: var(--m34-texto-tenue);
    font-size: 12px;
}

#settings_page .collapse-settings-button {
    margin-top: 8px;
    border-top: 1px solid var(--m34-borde);
    border-radius: 0;
    color: var(--m34-acento);
}

#settings_page .content-wrapper.right {
    width: calc(100% - 300px);
    background: var(--m34-superficie-alt);
}

#settings_page .settings-header {
    box-sizing: border-box;
    min-height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid var(--m34-borde);
    background: color-mix(in srgb, var(--m34-flotante) 97%, transparent);
    backdrop-filter: blur(14px);
}

#settings_page .settings-header h1 {
    color: var(--m34-texto);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#settings_page .settings-header h1 .section {
    color: var(--m34-texto-tenue);
    font-weight: 550;
}

#settings_page .settings-header .exit {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--m34-texto-suave);
}

#settings_page .settings-header .exit:hover {
    background: var(--m34-acento-tenue);
    color: var(--m34-acento);
}

#settings_content {
    box-sizing: border-box;
    height: calc(100% - 64px);
    background:
        radial-gradient(
            circle at 92% 2%,
            color-mix(in srgb, var(--m34-acento) 5%, transparent),
            transparent 25rem
        ),
        var(--m34-superficie-alt);
}

#settings_content .organization-box,
#settings_content .settings-section {
    box-sizing: border-box;
    width: 100%;
}

#settings_content .settings-section.show {
    max-width: 980px;
    padding: 24px;
    margin: 0 auto;
}

#settings_content .banner-wrapper {
    margin: 0 0 16px;
}

#settings_content .banner {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--m34-acento) 18%, var(--m34-borde));
    border-radius: 11px;
    background: color-mix(in srgb, var(--m34-acento) 7%, var(--m34-flotante));
    color: var(--m34-texto-suave);
    box-shadow: none;
}

#settings_content .settings-subsection-parent {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    margin: 0 0 16px;
    border: 1px solid var(--m34-borde);
    border-radius: 14px;
    background: color-mix(in srgb, var(--m34-flotante) 98%, transparent);
    box-shadow: 0 8px 24px rgba(43, 32, 34, 0.055);
}

#settings_content .subsection-header {
    display: flex;
    min-height: 34px;
    margin: 0 0 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--m34-borde);
}

#settings_content .subsection-header h3 {
    padding: 0 0 12px;
    margin: 0;
    color: var(--m34-texto);
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

#settings_content .organization-settings-parent,
#settings_content .settings-section .settings-form,
#settings_content .settings-section .settings-form-wrapper {
    box-sizing: border-box;
    display: grid !important;
    width: 100% !important;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px 18px;
}

#settings_content .input-group {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
}

#settings_content .input-group.control-label-disabled,
#settings_content .input-group:has(textarea),
#settings_content .dependent-settings-block,
#settings_content .settings-section table,
#settings_content .settings-section .table-responsive {
    grid-column: 1 / -1;
}

#settings_content .settings-field-label,
#settings_content .input-group > label:not(.checkbox) {
    display: flex;
    min-height: 20px;
    margin: 0 0 7px;
    align-items: center;
    gap: 6px;
    color: var(--m34-texto-suave);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

#settings_content :is(
        input[type="text"],
        input[type="email"],
        input[type="url"],
        input[type="number"],
        input[type="password"],
        textarea,
        select,
        .settings_select,
        .settings_text_input,
        .settings_url_input,
        .dropdown-widget-button
    ) {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--m34-borde-fuerte);
    border-radius: 10px;
    background: var(--m34-superficie);
    color: var(--m34-texto);
    font-family: var(--m34-font-ui);
    font-size: 13px;
    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background-color 140ms ease;
}

#settings_content :is(input, textarea, select, .dropdown-widget-button):focus {
    border-color: var(--m34-acento);
    outline: none;
    box-shadow: 0 0 0 3px var(--m34-acento-halo);
}

#settings_content :is(input, textarea, select, button):disabled {
    color: var(--m34-texto-tenue);
    background: color-mix(in srgb, var(--m34-superficie-alt) 88%, var(--m34-superficie));
    opacity: 0.82;
}

#settings_content textarea {
    min-height: 96px;
    resize: vertical;
}

#settings_content .input-group.control-label-disabled {
    display: grid;
    min-height: 44px;
    padding: 10px 12px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border: 1px solid var(--m34-borde);
    border-radius: 10px;
    background: var(--m34-superficie-alt);
}

#settings_content .input-group.control-label-disabled > label.inline {
    margin: 0;
    color: var(--m34-texto-suave);
    font-size: 13px;
    line-height: 20px;
}

#settings_content .rendered-checkbox {
    border-radius: 5px;
}

#settings_content .dependent-settings-block {
    box-sizing: border-box;
    width: 100%;
    padding: 14px;
    margin: 0;
    border-left: 3px solid color-mix(in srgb, var(--m34-acento) 48%, var(--m34-borde));
    border-radius: 0 10px 10px 0;
    background: var(--m34-superficie-alt);
}

#settings_content .save-button-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#settings_content .action-button {
    min-height: 38px;
    border-radius: 9px;
}

#settings_content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}

#settings_content table th {
    padding: 9px 12px;
    color: var(--m34-texto-tenue);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#settings_content table td {
    padding: 10px 12px;
    background: var(--m34-superficie);
    border-top: 1px solid var(--m34-borde);
    border-bottom: 1px solid var(--m34-borde);
}

#settings_content table td:first-child {
    border-left: 1px solid var(--m34-borde);
    border-radius: 10px 0 0 10px;
}

#settings_content table td:last-child {
    border-right: 1px solid var(--m34-borde);
    border-radius: 0 10px 10px 0;
}

#settings_content .image_upload_widget,
#settings_content .image-block {
    border-radius: 14px;
}

@media (max-width: 50em) {
    #settings_page.overlay-container {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        border-radius: 16px;
    }

#settings_page .sidebar-wrapper,
    #settings_page .sidebar.left {
        width: 100%;
    }

#settings_page .content-wrapper.right {
        width: 100%;
    }

#settings_page .settings-header {
        min-height: 58px;
        padding: 0 16px;
    }

#settings_page .settings-header h1 {
        font-size: 14px;
    }

#settings_content {
        height: calc(100% - 58px);
    }

#settings_content .settings-section.show {
        padding: 14px;
    }

#settings_content .settings-subsection-parent {
        padding: 15px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

#settings_content .dropdown_widget_with_label_wrapper,
    #settings_content .dropdown-widget-button,
    #settings_content .settings_select,
    #settings_content .settings_text_input,
    #settings_content textarea {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

#settings_content .subsection-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

#settings_content .subsection-header h3 {
        font-size: 16px;
    }
}

/* ============================================================
   87. CIERRE DEL TEMA OSCURO EN LAS COLUMNAS LATERALES

La seccion 70 habia agrupado `:root` y `.dark-theme:root`, por lo que
   las columnas conservaban deliberadamente la paleta clara incluso al
   elegir el tema oscuro. Eso dejaba la aplicacion partida en dos temas y
   reducia el contraste de nombres y estados. Se mantiene la misma escala
   calida, pero trasladada a superficies oscuras. El modo automatico recibe
   exactamente los mismos valores cuando el sistema operativo esta oscuro.
   ============================================================ */

.dark-theme:root {
    --m34-nav-fondo: #14171d;
    --m34-nav-fondo-2: #1c2028;
    --m34-nav-hover: #222731;
    --m34-nav-activo: #332327;
    --m34-nav-borde: rgba(255, 255, 255, 0.10);
    --m34-nav-texto: #eef0f4;
    --m34-nav-texto-2: #a8afbb;
}

.dark-theme #left-sidebar .unread_count,
.dark-theme #right-sidebar .unread_count {
    color: var(--m34-sobre-acento) !important;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
        --m34-nav-fondo: #14171d;
        --m34-nav-fondo-2: #1c2028;
        --m34-nav-hover: #222731;
        --m34-nav-activo: #332327;
        --m34-nav-borde: rgba(255, 255, 255, 0.10);
        --m34-nav-texto: #eef0f4;
        --m34-nav-texto-2: #a8afbb;
    }

.color-scheme-automatic #left-sidebar .unread_count,
    .color-scheme-automatic #right-sidebar .unread_count {
        color: var(--m34-sobre-acento) !important;
    }
}

/* ============================================================
   88. CONTROLES SEGMENTADOS DEL MENÚ PERSONAL

Tamaño de letra e interlineado son dos controles equivalentes. Cada uno
   debe leerse como una sola pieza de tres acciones, no como tres botones
   independientes con bordes y radios superpuestos.
   ============================================================ */

#personal-menu-dropdown .info-density-controls {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    padding: 4px 10px 8px;
    gap: 8px;
    align-items: center;
}

#personal-menu-dropdown .info-density-controls .button-group {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    height: 34px;
    overflow: hidden;
    background: var(--m34-superficie-alt);
    border: 1px solid var(--m34-borde-fuerte);
    border-radius: 8px;
}

#personal-menu-dropdown
    .info-density-controls
    .info-density-button-container {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 32px;
    align-items: stretch;
}

#personal-menu-dropdown
    .info-density-controls
    .info-density-button-container
    + .info-density-button-container {
    border-left: 1px solid var(--m34-borde-fuerte);
}

#personal-menu-dropdown .info-density-controls .info-density-button {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--m34-texto);
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

#personal-menu-dropdown .info-density-controls .info-density-button i {
    display: block;
    margin: 0;
    color: currentColor;
    font-size: 16px;
    line-height: 1;
}

#personal-menu-dropdown
    .info-density-controls
    .info-density-button:hover:not(:disabled) {
    color: var(--m34-acento);
    background: var(--m34-acento-tenue);
}

#personal-menu-dropdown
    .info-density-controls
    .info-density-button:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--m34-acento);
}

#personal-menu-dropdown
    .info-density-controls
    .info-density-button.default-button:disabled {
    color: var(--m34-texto-suave);
    opacity: 1;
    cursor: default;
}

/* Los tres temas deben repartirse todo el selector. Zulip deja las etiquetas
   con ancho de contenido y por eso los iconos se amontonan a la izquierda. */
#personal-menu-dropdown .tab-picker.popover-menu-tab-group {
    display: flex;
    align-items: center;
}

#personal-menu-dropdown
    .tab-picker.popover-menu-tab-group
    > .tab-option-content {
    box-sizing: border-box;
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

#personal-menu-dropdown
    .tab-picker.popover-menu-tab-group
    > .tab-option-content
    > i {
    display: flex;
    width: 20px;
    height: 20px;
    margin: 0;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 20px;
}

#personal-menu-dropdown
    .tab-picker.popover-menu-tab-group
    > .slider {
    width: calc(100% / 3);
}

/* ============================================================
   89. NUEVO CHAT Y LISTA DE MENSAJES DIRECTOS

La seleccion de destinatarios permanece visible hasta confirmar. Con
   una persona se abre un chat directo; con dos o mas se crea el grupo.
   La lista lateral usa una unica reticula para que ninguna tarjeta quede
   desplazada o con alturas distintas.
   ============================================================ */

body.mass34-nuevo-chat-seleccionando
    #compose-recipient.compose-recipient-direct-selected {
    display: flex;
}

body.mass34-nuevo-chat-seleccionando #compose-direct-recipient {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
}

body.mass34-nuevo-chat-seleccionando
    #compose-direct-recipient
    .pill-container {
    min-width: 0;
    flex: 1 1 auto;
}

.mass34-confirmar-nuevo-chat {
    box-sizing: border-box;
    display: inline-flex;
    min-width: 92px;
    height: 30px;
    padding: 0 13px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font: 700 12px/1 var(--m34-font-ui);
    white-space: nowrap;
    background: var(--m34-acento);
    border: 1px solid var(--m34-acento);
    border-radius: var(--m34-radio-m);
    cursor: pointer;
}

.mass34-confirmar-nuevo-chat:hover:not(:disabled) {
    background: var(--m34-acento-hover);
    border-color: var(--m34-acento-hover);
}

.mass34-confirmar-nuevo-chat:focus-visible {
    outline: 2px solid var(--m34-acento-halo);
    outline-offset: 2px;
}

.mass34-confirmar-nuevo-chat:disabled {
    color: var(--m34-texto-tenue);
    background: var(--m34-superficie-alt);
    border-color: var(--m34-borde);
    cursor: default;
}

#direct-messages-list .dm-list.mass34-dm-list-ordenada {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding: 0 15px 8px !important;
    margin: 0 !important;
    flex-direction: column;
    gap: 6px;
}

#direct-messages-list .dm-list-item {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--m34-nav-hover) 56%,
        transparent
    ) !important;
    background-clip: border-box;
    border: 1px solid color-mix(
        in srgb,
        var(--m34-borde) 62%,
        transparent
    ) !important;
    border-radius: 9px;
}

#direct-messages-list .dm-list-item .dm-box {
    box-sizing: border-box;
    display: flex !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 12px !important;
    align-items: center;
    gap: 9px;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
}

#direct-messages-list .dm-list-item:hover:not(.active-sub-filter) {
    background-color: var(--m34-nav-hover) !important;
    border-color: color-mix(
        in srgb,
        var(--m34-acento) 16%,
        var(--m34-borde)
    ) !important;
}

#direct-messages-list .dm-list-item.active-sub-filter {
    background-color: var(--m34-nav-activo) !important;
    border-color: color-mix(
        in srgb,
        var(--m34-acento) 24%,
        var(--m34-borde)
    ) !important;
}

/* ============================================================
   90. UNA SOLA RETICULA PARA TODA LA BARRA IZQUIERDA

Vistas y canales ya usaban filas compactas, pero la lista de mensajes
   directos habia quedado como una coleccion de tarjetas mas altas, con
   borde y otro radio. Se normalizan las tres listas: mismo alto, misma
   separacion, una sola capa de fondo y estado activo claramente visible.
   ============================================================ */

#direct-messages-list .dm-list.mass34-dm-list-ordenada {
    padding: 0 0 8px !important;
    gap: 0;
}

#left-sidebar-navigation-list li,
#stream_filters li,
#direct-messages-list .dm-list-item {
    box-sizing: border-box;
    width: auto;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 3px 6px !important;
    margin: 0 6px 2px !important;
    overflow: hidden;
    background-color: transparent !important;
    background-clip: content-box;
    border: 0 !important;
    border-radius: 7px;
    box-shadow: none !important;
}

#left-sidebar-navigation-list .top_left_row,
#stream_filters .bottom_left_row,
#direct-messages-list .dm-list-item .dm-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 !important;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#left-sidebar-navigation-list li:hover:not(.active-filter),
#stream_filters li:hover:not(.active-filter),
#direct-messages-list .dm-list-item:hover:not(.active-sub-filter) {
    background-color: var(--m34-nav-hover) !important;
    border: 0 !important;
}

#left-sidebar-navigation-list li.active-filter,
#stream_filters li.active-filter,
#direct-messages-list .dm-list-item.active-sub-filter {
    background-color: var(--m34-nav-activo) !important;
    border: 0 !important;
}

/* «Vistas» no debe parecer otra tarjeta: comparte el tratamiento limpio de
   los encabezados «Canales» y «Mensajes directos». */
#left-sidebar #views-label-container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* El rótulo vive dentro de una fila de 28 px. El margen vertical general
   de los encabezados lo bajaba respecto del triángulo y de los accesos
   condensados; aquí la propia retícula ya aporta toda la separación. */
#left-sidebar #views-label-container .left-sidebar-title {
    margin: 0 !important;
    align-self: center;
}

/* ============================================================
   90. CABECERA DE LA BARRA LATERAL (BUSCADOR Y ACCIONES)

Fila superior de la columna izquierda. Se compone con flexbox para que
   el campo ocupe todo el espacio disponible y las acciones queden
   alineadas a la derecha sin huecos muertos cuando el rol asesor oculta
   el botón de añadir canales.
   
   La lupa queda perfectamente contenida dentro del campo con espaciado
   limpio y sin solaparse con el borde ni con el texto.
   ============================================================ */

#left-sidebar-search {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    transform: none !important;
    background-color: var(--m34-nav-fondo) !important;
    border-bottom: 1px solid var(--m34-nav-borde) !important;
}

#left-sidebar-search > .input-wrapper-for-tooltip {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#left-sidebar-search .left-sidebar-search-section {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#left-sidebar-search .left-sidebar-search-input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 28px 0 34px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    font-family: inherit !important;
    color: var(--m34-nav-texto) !important;
    background: #ffffff !important;
    border: 1px solid var(--m34-nav-borde, #e2e8f0) !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

#left-sidebar-search .left-sidebar-search-input::placeholder {
    /* #94a3b8 daba 2,56:1 sobre el campo blanco: medido, no se leía. */
    color: #64748b !important;
    opacity: 1 !important;
    font-size: 12.5px !important;
}

#left-sidebar-search .left-sidebar-search-input:hover {
    background: #ffffff !important;
    border-color: #94a3b8 !important;
}

#left-sidebar-search .left-sidebar-search-input:focus {
    background: #ffffff !important;
    border-color: var(--m34-acento) !important;
    box-shadow: 0 0 0 3px var(--m34-acento-halo) !important;
}

#left-sidebar-search :is(.input-icon, .search-icon, .zulip-icon-search) {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 13px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    margin: 0 !important;
}

#left-sidebar-search .input-close-filter-button {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    border: none !important;
    background: transparent !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
}

#left-sidebar-search .input-close-filter-button:hover {
    color: #1e293b !important;
    background: rgba(0, 0, 0, 0.07) !important;
}

#left-sidebar-search #add_streams_tooltip,
#left-sidebar-search .channel-folders-sidebar-menu-icon {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #64748b !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    flex: 0 0 30px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

/* Esta regla de tamaño le gana por especificidad a la que lo esconde para
 * asesores (`.mass34-asesor #streams_inline_icon`, sección "Canales y
 * grupos: usar sí, administrar no"): dos ids pesan más que un id y una
 * clase, y el `display: inline-flex !important` de aquí no pretendía
 * pelearse con esa —solo daba tamaño al icono—, pero lo hacía de todos
 * modos. Se repone después, con la misma especificidad más la clase
 * `.mass34-asesor` por delante para ganar siempre. */
.mass34-asesor #left-sidebar-search #streams_inline_icon {
    display: none !important;
}

#left-sidebar-search #streams_inline_icon,
#left-sidebar-search #add_streams_inline_icon,
#left-sidebar-search .channel-folders-sidebar-menu-icon > .zulip-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 15px !important;
    margin: 0 !important;
}

#left-sidebar-search #add_streams_tooltip:hover,
#left-sidebar-search .channel-folders-sidebar-menu-icon:hover {
    color: var(--m34-acento) !important;
    background: var(--m34-nav-hover) !important;
}

#left-sidebar-search .channel-folders-sidebar-menu-icon:active,
#left-sidebar-search .channel-folders-sidebar-menu-icon.active {
    background: var(--m34-acento-tenue) !important;
    color: var(--m34-acento) !important;
}

/* Modo oscuro para la cabecera del buscador. Iba como un solo bloque que
   mezclaba un selector con un @media, y el navegador descarta una regla así
   entera: ni el oscuro elegido a mano ni el automático la recibían. */
.dark-theme #left-sidebar-search .left-sidebar-search-input {
    background: var(--m34-nav-fondo-2) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--m34-nav-texto) !important;
}

.dark-theme #left-sidebar-search .left-sidebar-search-input::placeholder {
    color: var(--m34-nav-texto-2) !important;
}

.dark-theme #left-sidebar-search .left-sidebar-search-input:hover {
    border-color: rgba(255, 255, 255, 0.28) !important;
}

.dark-theme #left-sidebar-search :is(.input-icon, .search-icon, .zulip-icon-search) {
    color: var(--m34-nav-texto-2) !important;
}

.dark-theme #left-sidebar-search .channel-folders-sidebar-menu-icon,
.dark-theme #left-sidebar-search #add_streams_tooltip {
    color: var(--m34-nav-texto-2) !important;
}

.dark-theme #left-sidebar-search .channel-folders-sidebar-menu-icon:hover,
.dark-theme #left-sidebar-search #add_streams_tooltip:hover {
    background: var(--m34-nav-hover) !important;
    color: var(--m34-acento) !important;
}

@media (prefers-color-scheme: dark) {
    .color-scheme-automatic #left-sidebar-search .left-sidebar-search-input {
        background: var(--m34-nav-fondo-2) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        color: var(--m34-nav-texto) !important;
    }

.color-scheme-automatic #left-sidebar-search .left-sidebar-search-input::placeholder {
        color: var(--m34-nav-texto-2) !important;
    }

.color-scheme-automatic #left-sidebar-search .left-sidebar-search-input:hover {
        border-color: rgba(255, 255, 255, 0.28) !important;
    }

.color-scheme-automatic #left-sidebar-search :is(.input-icon, .search-icon, .zulip-icon-search) {
        color: var(--m34-nav-texto-2) !important;
    }

.color-scheme-automatic #left-sidebar-search .channel-folders-sidebar-menu-icon,
    .color-scheme-automatic #left-sidebar-search #add_streams_tooltip {
        color: var(--m34-nav-texto-2) !important;
    }

.color-scheme-automatic #left-sidebar-search .channel-folders-sidebar-menu-icon:hover,
    .color-scheme-automatic #left-sidebar-search #add_streams_tooltip:hover {
        background: var(--m34-nav-hover) !important;
        color: var(--m34-acento) !important;
    }
}

/* ============================================================
   91. ACCIONES DE LA CABECERA DE CANAL DENTRO DEL PANEL

La cabecera personalizada comparte reticula con los directos, donde hay
   tres acciones sueltas de 36 px. En un canal, en cambio, la ultima celda es
   `recipient_bar_controls`: un grupo que contiene Editar, Seguir y Mas
   opciones. Darle solo 36 px hace que los otros dos botones desborden por la
   derecha. Se reserva el ancho real del grupo y se mantiene un margen seguro
   respecto del borde del panel; los directos y grupos no cambian.
   ============================================================ */

.message-header-contents.mass34-stitch-room-header:has(> .stream_topic) {
    box-sizing: border-box;
    width: 100%;
    padding-right: 20px;
    grid-template-columns:
        minmax(0, 1fr)
        18px
        minmax(0, min(18rem, 28vw))
        max-content;
    column-gap: 8px;
}

.message-header-contents.mass34-stitch-room-header
    > .stream_topic_separator {
    grid-column: 2;
    justify-self: center;
}

.message-header-contents.mass34-stitch-room-header > .stream_topic {
    min-width: 0;
    max-width: none;
    grid-column: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-header-contents.mass34-stitch-room-header
    > .recipient_bar_controls {
    width: max-content;
    min-width: max-content;
    grid-column: 4;
    justify-self: end;
    flex: 0 0 auto;
}

/* ============================================================
   92. UNA SOLA SUPERFICIE PARA LAS DOS CABECERAS

La barra global y la fila de la conversacion estaban dejando que sus
   piezas transparentes heredaran tres fondos distintos: blanco en la marca,
   gris en el buscador y rosa en la cabecera de la barra lateral. Se fija la
   misma superficie en todos los tramos para que las dos filas se lean como
   una cabecera continua. Los campos conservan su fondo propio para seguir
   pareciendo controles y el color del canal queda reservado a su avatar.
   ============================================================ */

#navbar-fixed-container,
#top_navbar,
#top_navbar.header-main,
#navbar-middle,
#navbar-middle > .column-middle-inner,
#message_view_header,
#message_view_header > .message-header-contents,
.message-header-contents.mass34-stitch-room-header {
    background-color: var(--m34-navbar-fondo) !important;
    background-image: none !important;
}

/* `.column-left` y `.column-right` aquí NO son las columnas laterales que
 * enmarcan la conversación (esas usan `--m34-nav-fondo`, ver la sección
 * "70.1 Las superficies" y su comentario): Zulip reutiliza los mismos dos
 * nombres de clase dentro de `#top_navbar` para el tramo del logo y el
 * tramo del avatar. Confundirlos aquí pintaba la barra superior en tres
 * franjas de color —gris bajo el logo, blanco bajo el buscador, gris bajo
 * el avatar, con una línea vertical entre cada una— en vez de la única
 * superficie que dice el principio de esta sección. Van con el resto. */
#top_navbar > .column-left,
#top_navbar > .column-right {
    background-color: var(--m34-navbar-fondo) !important;
    background-image: none !important;
}

/* El tramo del nombre de la organización va con la barra superior, sea
 * cual sea la paleta: la franja de arriba es UNA sola pieza de lado a
 * lado. Se probó a pintarlo con el color de la barra lateral y, en cuanto
 * las dos barras eran distintas, la franja quedaba partida en dos. Lo
 * único que se ajusta aquí es el color del texto, que calcula la paleta
 * (mass34_marca.py) para que se lea sobre la barra superior. */
#top_navbar > .column-left .mass34-workspace-brand,
#top_navbar > .column-left .mass34-workspace-copy strong {
    color: var(--m34-navbar-lateral-texto, var(--m34-navbar-texto));
}

#top_navbar > .column-left .mass34-workspace-copy small {
    color: var(--m34-navbar-lateral-sede, #059669);
}

#left-sidebar-search {
    background-color: var(--m34-nav-fondo) !important;
    border-bottom: 1px solid var(--m34-nav-borde) !important;
}

#message_view_header {
    border-bottom-color: var(--m34-navbar-borde) !important;
}

/* ============================================================
   93. ELIMINAR CANAL DESDE SUS AJUSTES

Archivar ya tiene un icono, pero el borrado definitivo necesita una accion
   inequivoca: se muestra con texto junto al archivo y conserva el rojo de
   peligro en los tres temas. La confirmacion posterior sigue exigiendo
   escribir el nombre exacto del canal.
   ============================================================ */

.stream_settings_header .button-group .mass34-borrar-canal {
    box-sizing: border-box;
    display: inline-flex;
    min-height: 36px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--m34-acento);
    font-weight: 700;
    background: var(--m34-acento-tenue);
    border: 1px solid color-mix(in srgb, var(--m34-acento) 34%, var(--m34-borde));
    border-radius: 9px;
}

.stream_settings_header .button-group .mass34-borrar-canal:hover,
.stream_settings_header .button-group .mass34-borrar-canal:focus-visible {
    color: var(--m34-acento-hover);
    background: var(--m34-acento-tenue-fuerte);
    border-color: color-mix(in srgb, var(--m34-acento) 55%, var(--m34-borde));
}

.stream_settings_header .button-group .mass34-borrar-canal:focus-visible {
    outline: 2px solid var(--m34-acento-halo);
    outline-offset: 2px;
}

.stream_settings_header .button-group .mass34-borrar-canal svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* El buscador lleva margen interior respecto de la columna. El primer tramo
   del fondo de la columna cubre ese margen para que no quede un marco rosa
   alrededor de la segunda fila; debajo vuelve a empezar el fondo lateral. */
#left-sidebar {
    background-image: linear-gradient(
        to bottom,
        var(--m34-navbar-lateral, var(--m34-navbar-fondo)) 0,
        var(--m34-navbar-lateral, var(--m34-navbar-fondo)) 70px,
        var(--m34-nav-fondo) 70px,
        var(--m34-nav-fondo) 100%
    ) !important;
}

/* ============================================================
   93. ALINEACION DEL ESTADO ACTIVO EN MENSAJES DIRECTOS

El nombre ocupaba toda la altura de la fila pero colocaba su texto desde
   arriba, mientras el estado se centraba por su propia linea de 16 px. Ambos
   bloques comparten ahora la altura y el mismo centrado vertical.
   ============================================================ */

#direct-messages-list .dm-list-item .conversation-partners {
    display: flex !important;
    height: 100%;
    align-items: center;
}

#direct-messages-list .active-sub-filter .dm-box::after {
    position: absolute;
    top: 50%;
    right: 10px;
    display: flex;
    height: 18px;
    align-items: center;
    line-height: 1;
    transform: translateY(-50%);
}

/* El estado no participa en el reparto horizontal de flex: queda centrado
   contra la fila, y el nombre deja de crecer debajo de él. */
#direct-messages-list .active-sub-filter .dm-box {
    position: relative;
}

#direct-messages-list .active-sub-filter .conversation-partners {
    margin-right: 56px !important;
}

/* ============================================================
   94. CANALES Y TEMAS EN FLUJO VERTICAL

Un listado de canal se estaba convirtiendo en flex horizontal. Al abrir un
   tema, su fila aparecia al costado de «bienvenida» y el menu terminaba
   superpuesto. Cada elemento vuelve a ocupar una linea completa: primero el
   canal y, debajo, sus temas con su sangria nativa.
   ============================================================ */

#stream_filters .stream-list-section {
    display: block !important;
    width: 100%;
}

#stream_filters .stream-list-section > li {
    display: flex;
    width: auto;
    max-width: 100%;
}

#stream_filters .bottom_left_row {
    width: 100%;
    min-width: 0;
}

#stream_filters .bottom_left_row > .subscription_block {
    min-width: 0;
    flex: 1 1 auto;
}

/* ============================================================
   94. CANALES EN LA BARRA LATERAL IZQUIERDA SIN ÁRBOL DE TEMAS
   Los canales se muestran de forma limpia como una fila única (34px)
   sin desplegar el árbol de temas (Avisos Urgentes, Prueba Menciones, etc.).
   ============================================================ */

#stream_filters .topic-list,
#stream_filters ul.topic-list,
#stream_filters .topic-list-item,
#stream_filters li.topic-list-item,
#stream_filters .show-more-topics,
#stream_filters .topic-box,
#stream_filters .topic-list-has-topics::before,
#stream_filters .topic-list-has-topics::after,
#stream_filters ul.topic-list::before,
#stream_filters ul.topic-list::after,
#stream_filters .stream-expanded > .topic-list-item,
#stream_filters .stream-expanded > ul.topic-list,
#stream_filters .stream-expanded > .topic-list,
#left-sidebar #stream_filters .topic-list,
#left-sidebar #stream_filters ul.topic-list,
#left-sidebar #stream_filters .topic-list-item,
#left-sidebar #stream_filters li.topic-list-item,
#left-sidebar #stream_filters .show-more-topics,
#left-sidebar #stream_filters .topic-box,
#left-sidebar #stream_filters .topic-list-has-topics::before,
#left-sidebar #stream_filters .topic-list-has-topics::after,
#left-sidebar #stream_filters ul.topic-list::before,
#left-sidebar #stream_filters ul.topic-list::after,
#left-sidebar #stream_filters .stream-expanded > .topic-list-item,
#left-sidebar #stream_filters .stream-expanded > ul.topic-list,
#left-sidebar #stream_filters .stream-expanded > .topic-list {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#stream_filters li.stream-expanded,
#left-sidebar #stream_filters li.stream-expanded {
    display: flex !important;
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

#stream_filters li.stream-expanded > .bottom_left_row,
#left-sidebar #stream_filters li.stream-expanded > .bottom_left_row {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    width: 100% !important;
}

/* ============================================================
   95. DESPLAZAMIENTO INDEPENDIENTE DE LA BARRA IZQUIERDA

Al desplegar un canal, SimpleBar conservaba el contenido pero su capa
   desplazable quedaba con `overflow-y: hidden`. El resultado era que los
   mensajes directos situados al final quedaban fuera de la vista sin que
   la rueda pudiera alcanzarlos. El scroll se habilita en su capa nativa,
   no en la pagina ni en cada lista: asi Vistas, Canales y Directos se
   desplazan juntos como una sola columna.
   ============================================================ */

#left-sidebar .simplebar-content-wrapper {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
}

#left-sidebar .simplebar-content {
    min-height: 100%;
}

/* Retícula única de la barra lateral: vistas, canales y mensajes directos
 * deben ocupar exactamente la misma altura visual. */
#left-sidebar-navigation-list > li,
#global_filters > li,
#stream_filters li:not(.stream-expanded),
#direct-messages-list .dm-list-item {
    box-sizing: border-box;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

#left-sidebar-navigation-list > li > a,
#global_filters > li > a,
#stream_filters li:not(.stream-expanded) > a,
#direct-messages-list .dm-list-item > a,
#direct-messages-list .dm-list-item .dm-box {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
}

#left-sidebar-navigation-list .filter-icon .zulip-icon,
#global_filters .filter-icon .zulip-icon,
#direct-messages-list .mass34-dm-avatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.mass34-sidebar-section {
    min-height: 34px;
    box-sizing: border-box;
    padding-top: 7px;
    padding-bottom: 3px;
}

/* Las filas principales comparten altura; los temas anidados conservan su
 * propia retícula para no superponerse con el canal padre. */
#left-sidebar #global_filters > li,
#left-sidebar #left-sidebar-navigation-list > li,
#left-sidebar #direct-messages-list .dm-list-item {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

#left-sidebar #global_filters > li > a,
#left-sidebar #left-sidebar-navigation-list > li > a,
#left-sidebar #direct-messages-list .dm-list-item > a,
#left-sidebar #direct-messages-list .dm-list-item .dm-box {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
}

#left-sidebar #stream_filters li.stream-expanded {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

#left-sidebar #stream_filters li.stream-expanded > .bottom_left_row {
    box-sizing: border-box !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    width: 100% !important;
}

#left-sidebar #views-label-container,
#left-sidebar .mass34-sidebar-section,
#left-sidebar #streams_header,
#left-sidebar #direct-messages-section-header {
    box-sizing: border-box !important;
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 4px !important;
}

/* El cambio de Canales a Mensajes directos es una sola continuidad visual;
 * no debe reservar una zona vacía entre ambos bloques. */
#left-sidebar .mass34-sidebar-canales,
#left-sidebar #streams_list,
#left-sidebar #stream_filters {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

#left-sidebar .mass34-sidebar-directos {
    margin-top: 0 !important;
    padding-top: 4px !important;
}

#left-sidebar .mass34-sidebar-directos + #direct-messages-list {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Vistas usa filas internas que no son hijas directas de #global_filters;
 * igualarlas aquí evita que queden visualmente comprimidas frente a Canales. */
#left-sidebar #global_filters li {
    box-sizing: border-box !important;
    display: flex !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 6px 2px !important;
    padding: 3px 6px !important;
    align-items: center !important;
}

#left-sidebar #global_filters li > a,
#left-sidebar #global_filters li .top_left_row,
#left-sidebar #global_filters li .left-sidebar-navigation-label-container {
    box-sizing: border-box !important;
    display: flex !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: center !important;
}

/* Contenedor de VISTAS: anular el CSS Grid nativo de Zulip (grid-auto-rows de 22px)
 * para evitar el solapamiento vertical entre filas y con la sección de CANALES. */
#left-sidebar #left-sidebar-navigation-list,
#left-sidebar-navigation-area #left-sidebar-navigation-list,
#left-sidebar-navigation-list,
#left-sidebar #global_filters,
#global_filters {
    display: flex !important;
    flex-direction: column !important;
    grid-auto-rows: unset !important;
    grid-template-rows: unset !important;
    grid-template-columns: unset !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 2px !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#left-sidebar .left-sidebar-navigation-area,
#left-sidebar-navigation-area {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

/* Filas de Vistas: altura uniforme de 34px, idéntica a Canales y Mensajes directos */
#left-sidebar .left-sidebar-navigation-area #left-sidebar-navigation-list > li,
#left-sidebar #left-sidebar-navigation-list > li,
#left-sidebar-navigation-list > li,
#left-sidebar #global_filters > li,
#global_filters > li {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 0 0 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 6px 2px 6px !important;
    padding: 0 8px !important;
    border-radius: var(--m34-radio-s, 7px) !important;
    overflow: hidden !important;
    position: relative !important;
}

#left-sidebar .left-sidebar-navigation-area #left-sidebar-navigation-list > li > a,
#left-sidebar #left-sidebar-navigation-list > li > a,
#left-sidebar-navigation-list > li > a,
#left-sidebar #left-sidebar-navigation-list > li > a.left-sidebar-navigation-label-container,
#left-sidebar #global_filters > li > a {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    text-decoration: none !important;
    background: transparent !important;
}

#left-sidebar #left-sidebar-navigation-list > li .top_left_row,
#left-sidebar-navigation-list .top_left_row,
#left-sidebar #global_filters > li .top_left_row {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

#left-sidebar #left-sidebar-navigation-list > li .filter-icon,
#left-sidebar #global_filters > li .filter-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
}

#left-sidebar #left-sidebar-navigation-list > li .left-sidebar-navigation-label,
#left-sidebar #global_filters > li .left-sidebar-navigation-label {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#left-sidebar #left-sidebar-navigation-list > li .unread_count,
#left-sidebar #global_filters > li .unread_count {
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

#left-sidebar #left-sidebar-navigation-list > li .sidebar-menu-icon,
#left-sidebar #global_filters > li .sidebar-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    margin-left: 4px !important;
    padding: 0 2px !important;
    opacity: 0.6;
}

#left-sidebar #left-sidebar-navigation-list > li:hover .sidebar-menu-icon,
#left-sidebar #left-sidebar-navigation-list > li.active-filter .sidebar-menu-icon {
    opacity: 1;
}
/* Hilos en chats directos y grupales. */
.mass34-hilo-boton {
    border: 0;
    background: transparent;
    color: var(--color-icon-default, #64748b);
    cursor: pointer;
    font-size: 15px;
    line-height: 28px;
}
.mass34-hilo-boton:hover { color: var(--color-primary, #2563eb); }
.mass34-hilo-panel {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    width: min(380px, 92vw);
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--color-background, #fff);
    border-left: 1px solid var(--color-border, #d7dde5);
    box-shadow: -8px 0 28px rgba(15, 23, 42, .15);
}
.mass34-hilo-cabeza { display: flex; justify-content: space-between; align-items: center; font-size: 18px; }
.mass34-hilo-cerrar { border: 0; background: transparent; font-size: 26px; cursor: pointer; }
.mass34-hilo-raiz { margin: 18px 0 12px; padding: 12px; border-left: 3px solid #2563eb; background: #f1f5f9; color: #334155; }
.mass34-hilo-respuestas { flex: 1; overflow-y: auto; }
.mass34-hilo-respuesta { padding: 11px 0; border-bottom: 1px solid #e2e8f0; }
.mass34-hilo-autor { display: block; font-size: 13px; }
.mass34-hilo-cuerpo { margin: 5px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mass34-hilo-imagen { display: block; max-width: 100%; max-height: 260px; margin: 8px 0; border-radius: 8px; object-fit: contain; }
.mass34-hilo-audio { display: block; width: 100%; margin: 8px 0; }
.mass34-hilo-archivo { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 8px 0; padding: 9px 11px; border: 1px solid #dbe3ef; border-radius: 10px; background: #f8fafc; color: #2563eb; text-decoration: none; font-size: 13px; overflow-wrap: anywhere; }
.mass34-hilo-archivo:hover { background: #eff6ff; border-color: #bfdbfe; }
.mass34-hilo-archivo svg { flex: 0 0 18px; width: 18px; height: 18px; }
.mass34-hilo-imagen-boton { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; text-align: left; }
.mass34-hilo-descargar { display: inline-block; margin: 2px 0 8px; color: #2563eb; font-size: 12px; font-weight: 650; text-decoration: none; }
.mass34-hilo-descargar:hover { color: #1d4ed8; text-decoration: underline; }
.mass34-hilo-previsualizacion { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(15, 23, 42, .76); }
.mass34-hilo-preview-caja { width: min(760px, 96vw); max-height: 92vh; overflow: auto; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.mass34-hilo-preview-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: #172033; }
.mass34-hilo-preview-cerrar { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #f1f5f9; color: #475569; font-size: 22px; cursor: pointer; }
.mass34-hilo-preview-imagen { display: block; width: 100%; max-height: 76vh; object-fit: contain; border-radius: 10px; background: #f8fafc; }
.mass34-hilo-galeria-navegacion { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 8px; }
.mass34-hilo-galeria-flecha { width: 38px; height: 52px; border: 1px solid #dbe3ef; border-radius: 10px; background: #f8fafc; color: #2563eb; font-size: 34px; line-height: 1; cursor: pointer; }
.mass34-hilo-galeria-flecha:hover:not(:disabled) { border-color: #93c5fd; background: #eff6ff; }
.mass34-hilo-galeria-flecha:disabled { opacity: .35; cursor: default; }
.mass34-hilo-galeria-contador { display: block; margin-top: 8px; color: #64748b; text-align: center; }
.mass34-hilo-zoom-controles { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.mass34-hilo-zoom-boton,
.mass34-hilo-zoom-porcentaje { min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid #dbe3ef; border-radius: 8px; background: #f8fafc; color: #334155; cursor: pointer; font-weight: 700; }
.mass34-hilo-zoom-porcentaje { min-width: 58px; font-size: 12px; font-weight: 600; }
.mass34-hilo-zoom-boton:hover,
.mass34-hilo-zoom-porcentaje:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.mass34-hilo-preview-descargar { margin-top: 12px; }
.mass34-hilo-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 9px;
}
.mass34-hilo-acciones .mass34-hilo-descargar,
.mass34-hilo-acciones .mass34-hilo-responder {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #f8fafc;
    color: #2563eb;
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
}
.mass34-hilo-acciones .mass34-hilo-descargar:hover,
.mass34-hilo-acciones .mass34-hilo-responder:hover {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
}
.mass34-hilo-responder { border: 0; background: transparent; color: #2563eb; cursor: pointer; padding: 2px 0 6px; font-size: 12px; }
.mass34-hilo-reacciones { display: flex; gap: 5px; flex-wrap: wrap; }
.mass34-hilo-reaccion { border: 1px solid #cbd5e1; border-radius: 12px; background: #f8fafc; cursor: pointer; padding: 2px 7px; }
.mass34-hilo-reaccion-add { opacity: .7; }
.mass34-hilo-form { display: flex; gap: 6px; padding-top: 12px; flex-wrap: wrap; }
.mass34-hilo-form textarea { min-height: 48px; width: 100%; resize: vertical; }
.mass34-hilo-adjuntar { border: 1px solid #cbd5e1; border-radius: 7px; background: #f8fafc; cursor: pointer; padding: 6px 8px; }
.mass34-hilo-adjunto-estado { flex: 1; align-self: center; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mass34-hilo-enviar { align-self: end; border: 0; border-radius: 8px; padding: 9px 12px; background: #2563eb; color: #fff; cursor: pointer; }
.mass34-hilo-vacio { color: #64748b; font-size: 13px; }
.mass34-hilo-error { margin: 18px; color: #b42318; font-size: 13px; line-height: 1.45; }
@media (max-width: 600px) { .mass34-hilo-panel { width: 100vw; } }

/* Barra de acciones flotante del mensaje estilo WhatsApp:
 * Se posiciona dinámicamente al costado de cada mensaje (a la derecha en mensajes
 * recibidos, a la izquierda en mensajes propios) vía mass34-acciones.js.
 * Píldora redondeada, colores sobrios adecuados para la vista, modo claro y oscuro. */
.message_row .message_controls,
.message_row.mass34-propio .message_controls,
.message_row:not(.mass34-propio) .message_controls {
    position: absolute !important;
    z-index: 15 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 3px 5px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.92);
    transition: opacity 120ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1), visibility 120ms ease;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}

.dark-theme .message_row .message_controls,
.dark-theme .message_row.mass34-propio .message_controls,
.dark-theme .message_row:not(.mass34-propio) .message_controls,
.color-scheme-dark .message_row .message_controls,
.color-scheme-dark .message_row.mass34-propio .message_controls,
.color-scheme-dark .message_row:not(.mass34-propio) .message_controls {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: #202c33 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45) !important;
}

.message_row:hover .message_controls,
.message_row:focus-within .message_controls,
.message_row.selected_msg_for_touchscreen .message_controls {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
}

/* Ocultar botones secundarios de la barra flotante para que permanezca compacta */
.message_row .message_controls .star_container,
.message_row .message_controls .edit_content,
.message_row .message_controls .mass34-eliminar-boton {
    display: none !important;
}

/* Orden visual garantizado de los 4 botones principales */
.message_row .message_controls .reaction_button {
    order: 1 !important;
}
.message_row .message_controls .mass34-responder {
    order: 2 !important;
}
.message_row .message_controls .mass34-hilo-boton {
    order: 3 !important;
}
.message_row .message_controls .actions_hover {
    order: 4 !important;
}

/* Suprimir duplicación de emoji ocultando el pseudo-elemento font-icon */
.message_row .message_controls .reaction_button .zulip-icon-smile::before,
.message_row .message_controls .reaction_button i.zulip-icon::before {
    display: none !important;
    content: "" !important;
}

/* Ocultar botón secundario 'mover' dentro del contenedor de edición */
.message_row .message_controls .edit_content .move_message_button {
    display: none !important;
}

/* Dimensiones y estética unificada de todos los botones de la barra.
 *
 * `.star_container`, `.edit_content` y `.mass34-eliminar-boton` NO van
 * aquí: están arriba con `display: none !important` a propósito, para que
 * la barra flotante se quede en los 4 botones principales. Añadirlos
 * aquí los volvía a mostrar —misma especificidad, mismo `!important`, y
 * esta regla carga después, así que ganaba ella—, y encima era
 * redundante para `.edit_content`: ya hereda este tamaño por
 * `.message_control_button`, la otra clase que trae de Zulip. */
.message_row .message_controls .message_control_button,
.message_row .message_controls .mass34-hilo-boton,
.message_row .message_controls .mass34-responder,
.message_row .message_controls .reaction_button,
.message_row .message_controls .actions_hover {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    scroll-snap-align: start !important;
    border-radius: 8px !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background-color 100ms ease, color 100ms ease !important;
}

.message_row .message_controls .message_control_button:hover,
.message_row .message_controls .mass34-hilo-boton:hover,
.message_row .message_controls .mass34-responder:hover,
.message_row .message_controls .reaction_button:hover,
.message_row .message_controls .actions_hover:hover,
.message_row .message_controls .edit_content:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

/* Botón eliminar directo en la barra flotante */
.message_row .message_controls .mass34-eliminar-boton {
    color: #ef4444 !important;
}
.message_row .message_controls .mass34-eliminar-boton:hover {
    color: #dc2626 !important;
    background: #fef2f2 !important;
}
.message_row .message_controls .mass34-eliminar-boton svg {
    width: 16px !important;
    height: 16px !important;
}

.dark-theme .message_row .message_controls .mass34-eliminar-boton,
.color-scheme-dark .message_row .message_controls .mass34-eliminar-boton {
    color: #f87171 !important;
    background: transparent !important;
}
.dark-theme .message_row .message_controls .mass34-eliminar-boton:hover,
.color-scheme-dark .message_row .message_controls .mass34-eliminar-boton:hover {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

/* Prohibir eliminar mensajes a asesores */
.mass34-asesor .message_controls .mass34-eliminar-boton {
    display: none !important;
}

/* Botón estrella: resaltado dorado */
.message_row .message_controls .star_container:hover {
    color: #eab308 !important;
    background: #fefce8 !important;
}
.message_row .message_controls .star_container:not(.empty-star) {
    color: #eab308 !important;
}
.message_row .message_controls .star_container i.star {
    font-size: 15px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Botón editar */
.message_row .message_controls .edit_content .edit_content_button {
    font-size: 15px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.dark-theme .message_row .message_controls .message_control_button,
.dark-theme .message_row .message_controls .mass34-hilo-boton,
.dark-theme .message_row .message_controls .mass34-responder,
.dark-theme .message_row .message_controls .reaction_button,
.dark-theme .message_row .message_controls .actions_hover,
.dark-theme .message_row .message_controls .star_container,
.dark-theme .message_row .message_controls .edit_content,
.color-scheme-dark .message_row .message_controls .message_control_button,
.color-scheme-dark .message_row .message_controls .mass34-hilo-boton,
.color-scheme-dark .message_row .message_controls .mass34-responder,
.color-scheme-dark .message_row .message_controls .reaction_button,
.color-scheme-dark .message_row .message_controls .actions_hover,
.color-scheme-dark .message_row .message_controls .star_container,
.color-scheme-dark .message_row .message_controls .edit_content {
    color: #8696a0 !important;
    background: transparent !important;
}

.dark-theme .message_row .message_controls .message_control_button:hover,
.dark-theme .message_row .message_controls .mass34-hilo-boton:hover,
.dark-theme .message_row .message_controls .mass34-responder:hover,
.dark-theme .message_row .message_controls .reaction_button:hover,
.dark-theme .message_row .message_controls .actions_hover:hover,
.dark-theme .message_row .message_controls .edit_content:hover,
.color-scheme-dark .message_row .message_controls .message_control_button:hover,
.color-scheme-dark .message_row .message_controls .mass34-hilo-boton:hover,
.color-scheme-dark .message_row .message_controls .mass34-responder:hover,
.color-scheme-dark .message_row .message_controls .reaction_button:hover,
.color-scheme-dark .message_row .message_controls .actions_hover:hover,
.color-scheme-dark .message_row .message_controls .edit_content:hover {
    color: #e9edef !important;
    background: #2a3942 !important;
}

.dark-theme .message_row .message_controls .star_container:hover,
.color-scheme-dark .message_row .message_controls .star_container:hover {
    color: #facc15 !important;
    background: #2a3942 !important;
}
.dark-theme .message_row .message_controls .star_container:not(.empty-star),
.color-scheme-dark .message_row .message_controls .star_container:not(.empty-star) {
    color: #facc15 !important;
}

/* Envoltorio del botón de emoji */
.message_row .message_controls .reaction_button .emoji-message-control-button-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.message_row .message_controls .mass34-hilo-boton svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
    stroke: none !important;
}

.message_row .message_controls svg {
    display: block !important;
}

/* Tooltips limpios y legibles estilo screenshot */
.tippy-box[data-theme~="zulip"],
.tippy-box {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 2px 4px !important;
}

.tippy-box .tippy-content {
    color: #0f172a !important;
    padding: 2px 6px !important;
}

.tippy-box .tippy-arrow {
    color: #ffffff !important;
}

.dark-theme .tippy-box[data-theme~="zulip"],
.dark-theme .tippy-box,
.color-scheme-dark .tippy-box[data-theme~="zulip"],
.color-scheme-dark .tippy-box {
    background-color: #202c33 !important;
    color: #e9edef !important;
    border-color: #374248 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.dark-theme .tippy-box .tippy-content,
.color-scheme-dark .tippy-box .tippy-content {
    color: #e9edef !important;
}

.dark-theme .tippy-box .tippy-arrow,
.color-scheme-dark .tippy-box .tippy-arrow {
    color: #202c33 !important;
}

/* Iconos de Zulip dentro de los botones */
.message_row .message_controls i.zulip-icon,
.message_row .message_controls .message-controls-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    padding: 0;
    margin: 0;
}

/* Espacio adecuado para las reacciones bajo la burbuja */
.message_row .message_reactions {
    margin-top: 6px !important;
    margin-bottom: 4px !important;
}

/* Presentación moderna del panel de hilos. Se deja al final para ganar a
   las reglas generales del white-label sin tocar su comportamiento. */
.mass34-hilo-panel {
    --m34-hilo-azul: #2563eb;
    --m34-hilo-azul-suave: #eff6ff;
    --m34-hilo-borde: #e5e7eb;
    width: min(430px, 100vw);
    padding: 0;
    overflow: hidden;
    background: #f8fafc;
    border-left: 1px solid #dbe3ef;
    box-shadow: -18px 0 42px rgba(15, 23, 42, .18);
    color: #172033;
}
.mass34-hilo-cabeza {
    min-height: 72px;
    box-sizing: border-box;
    padding: 0 20px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--m34-hilo-borde);
}
.mass34-hilo-cabeza strong {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.02em;
}
.mass34-hilo-cabeza strong::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 9px 2px 0;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px #dcfce7;
}
.mass34-hilo-cerrar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #64748b;
    font-size: 23px;
    line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.mass34-hilo-cerrar:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.mass34-hilo-raiz {
    position: relative;
    margin: 18px 18px 10px;
    padding: 15px 16px 15px 18px;
    border: 1px solid #dbeafe;
    border-left: 3px solid var(--m34-hilo-azul);
    border-radius: 0 14px 14px 0;
    background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 4px 14px rgba(37, 99, 235, .06);
}
.mass34-hilo-respuestas {
    padding: 4px 18px 20px;
    scrollbar-color: #cbd5e1 transparent;
}
.mass34-hilo-respuesta {
    position: relative;
    margin: 8px 0;
    padding: 14px 15px 12px;
    border: 1px solid var(--m34-hilo-borde);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}
.mass34-hilo-autor {
    display: block;
    color: #172033;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.mass34-hilo-cuerpo {
    margin: 8px 0 8px;
    color: #334155;
    font-size: 14px;
    line-height: 1.45;
}
.mass34-hilo-responder {
    margin: 0 0 7px;
    padding: 0;
    color: var(--m34-hilo-azul);
    font-size: 12px;
    font-weight: 650;
}
.mass34-hilo-responder:hover { color: #1d4ed8; text-decoration: underline; }
.mass34-hilo-reacciones { gap: 6px; }
.mass34-hilo-reaccion {
    min-width: 38px;
    min-height: 28px;
    padding: 3px 9px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.mass34-hilo-reaccion:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
    background: var(--m34-hilo-azul-suave);
}
.mass34-hilo-reaccion-add { opacity: 1; }
.mass34-hilo-form {
    flex: 0 0 auto;
    box-sizing: border-box;
    gap: 8px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--m34-hilo-borde);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .06);
}
.mass34-hilo-form textarea {
    min-height: 48px;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mass34-hilo-form textarea:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}
.mass34-hilo-adjuntar,
.mass34-hilo-enviar {
    min-height: 38px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mass34-hilo-adjuntar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid #d5deeb;
    background: #fff;
    color: #475569;
}
.mass34-hilo-adjuntar svg,
.mass34-hilo-enviar svg { width: 17px; height: 17px; }
.mass34-hilo-adjuntar span,
.mass34-hilo-enviar span { line-height: 1; }
.mass34-hilo-adjuntar:hover {
    transform: translateY(-1px);
    background: #f8fafc;
}
.mass34-hilo-enviar {
    padding: 0 16px;
    border: 0;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 5px 12px rgba(37, 99, 235, .22);
}
.mass34-hilo-enviar:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(37, 99, 235, .3);
}
.mass34-hilo-adjunto-estado { font-size: 11px; }
.mass34-hilo-vacio {
    margin: 28px 8px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}
@media (max-width: 600px) {
    .mass34-hilo-panel { width: 100vw; }
    .mass34-hilo-form { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ============================================================
   80. ALERTAS Y PRIORIDAD DE RESPUESTA EN MENCIONES
   
   Alerta flotante emergente cuando alguien menciona al usuario,
   y distintivo de máxima prioridad en la burbuja del mensaje.
   ============================================================ */

.mass34-alertas-contenedor {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    width: min(520px, calc(100vw - 32px));
}

.mass34-alerta-mencion {
    pointer-events: auto;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #fecaca;
    border-top: 4px solid var(--m34-acento, #dc2626);
    box-shadow: 0 20px 48px -10px rgba(220, 38, 38, 0.28), 0 8px 20px rgba(15, 23, 42, 0.1);
    padding: 16px 18px 14px;
    animation: mass34-alerta-anim 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes mass34-alerta-anim {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mass34-alerta-mencion.mass34-alerta-saliendo {
    opacity: 0;
    transform: translateY(-16px) scale(0.95);
}

.mass34-alerta-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mass34-alerta-badge-prioridad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mass34-punto-pulso {
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    animation: mass34-pulso 1.5s infinite;
}

@keyframes mass34-pulso {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

.mass34-alerta-cerrar {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.mass34-alerta-cerrar:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.mass34-alerta-cuerpo {
    margin-bottom: 14px;
}

.mass34-alerta-remitente {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.mass34-alerta-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fee2e2;
}

.mass34-alerta-info-texto {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mass34-alerta-nombre {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.mass34-alerta-contexto {
    font-size: 12px;
    color: #64748b;
}

.mass34-alerta-mensaje {
    background: #f8fafc;
    border-left: 3px solid #f87171;
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
    word-break: break-word;
}

.mass34-alerta-acciones {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mass34-alerta-btn-ir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mass34-alerta-btn-ir:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
}

.mass34-alerta-btn-descartar {
    background: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.mass34-alerta-btn-descartar:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Distintivo de prioridad dentro del propio mensaje */
.message_row.mass34-mensaje-mencionado-prioridad {
    border-left: 4px solid #dc2626 !important;
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.7) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.mass34-mencion-banner-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 4px 10px;
    margin-bottom: 8px;
    width: fit-content;
}

.mass34-mencion-tag-prioridad {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #dc2626;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mass34-mencion-tag-desc {
    color: #7f1d1d;
    font-size: 11.5px;
    font-weight: 500;
}

.mass34-mencion-foco-pulso {
    animation: mass34-foco-glow 2.5s ease-out;
}

@keyframes mass34-foco-glow {
    0% {
        background-color: rgba(220, 38, 38, 0.28) !important;
        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.22);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* ============================================================
   93. OCULTACIÓN DE AJUSTES Y CORREO EN PERFIL
   ============================================================ */

/* Ocultar enlace y fila de Ajustes en el menú personal */
#personal-menu-dropdown li:has(.open-profile-settings),
#personal-menu-dropdown .open-profile-settings,
#personal-menu-dropdown a[href*="#settings"],
#personal-menu-dropdown li:has(a[href*="#settings"]),
.mass34-asesor #gear-menu-dropdown {
    display: none !important;
}

/* Ocultar campo Correo en la interfaz de Ver tu perfil de usuario y popovers */
#user-profile-modal #email,
#user-profile-modal .default-field#email,
#user-profile-modal [data-field-name="email"],
#user-profile-modal .user-profile-email,
#profile-tab #email,
#profile-tab .default-field#email,
.user-card-popover-email-field,
.user_popover_email,
.user-card-email-wrapper {
    display: none !important;
}

/* ============================================================
   94. INSIGNIA DE HILO CREADO EN LA CONVERSACIÓN
   ============================================================ */

.mass34-hilo-badge {
    grid-area: hilo !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
    margin-bottom: 2px !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    background: #f0f7ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease !important;
    user-select: none !important;
    width: fit-content !important;
}
.mass34-hilo-badge:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    transform: translateY(-1px) !important;
}
.mass34-hilo-badge-icon {
    flex-shrink: 0 !important;
    color: #2563eb !important;
}
.mass34-hilo-badge-arrow {
    font-size: 13px !important;
    opacity: 0.7 !important;
    margin-left: 2px !important;
}
.dark-theme .mass34-hilo-badge,
.color-scheme-dark .mass34-hilo-badge {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    color: #93c5fd !important;
}
.dark-theme .mass34-hilo-badge:hover,
.color-scheme-dark .mass34-hilo-badge:hover {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}
.message_row.mass34-propio .mass34-hilo-badge {
    justify-self: end !important;
}

/* ============================================================
   95. ACCIONES DE RESPUESTA EN HILO (EDITAR Y ELIMINAR)
   ============================================================ */

.mass34-hilo-acciones {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 4px 0 6px !important;
}

.mass34-hilo-editar,
.mass34-hilo-eliminar {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: color 120ms ease !important;
}
.mass34-hilo-editar {
    color: #64748b !important;
}
.mass34-hilo-editar:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}
.mass34-hilo-eliminar {
    color: #ef4444 !important;
}
.mass34-hilo-eliminar:hover {
    color: #dc2626 !important;
    text-decoration: underline !important;
}

.mass34-hilo-edit-box {
    margin: 6px 0 10px !important;
}
.mass34-hilo-edit-input {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font: inherit !important;
    font-size: 13.5px !important;
    outline: none !important;
    resize: vertical !important;
}
.mass34-hilo-edit-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}
.mass34-hilo-edit-botones {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
}
.mass34-hilo-btn-guardar,
.mass34-hilo-btn-cancelar {
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
}
.mass34-hilo-btn-guardar {
    background: #2563eb !important;
    color: #ffffff !important;
}
.mass34-hilo-btn-cancelar {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

.dark-theme .mass34-hilo-edit-input,
.color-scheme-dark .mass34-hilo-edit-input {
    background: #111b21 !important;
    color: #e9edef !important;
    border-color: #2a3942 !important;
}
.dark-theme .mass34-hilo-btn-cancelar,
.color-scheme-dark .mass34-hilo-btn-cancelar {
    background: #202c33 !important;
    color: #d1d7db !important;
    border-color: #374248 !important;
}

/* --- Purga de mensajes y archivos (Admin / Superadmin) --- */
.mass34-purga-impacto {
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde-fuerte, rgba(0, 0, 0, 0.1));
    border-radius: var(--m34-radio-m, 8px);
    padding: 14px;
    margin: 16px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
}

.mass34-purga-impacto-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mass34-purga-impacto-valor {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--m34-acento, #2563eb);
}

.mass34-purga-impacto-etiqueta {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--m34-texto-suave, #64748b);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mass34-purga-check-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
    padding: 10px 14px;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-m, 8px);
}

.mass34-purga-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.mass34-purga-check-item input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
    accent-color: #dc2626;
}

.mass34-boton-purga {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600 !important;
}

.mass34-menu-item-purga a {
    color: #dc2626 !important;
}

.mass34-menu-item-purga:hover a {
    background-color: rgba(220, 38, 38, 0.08) !important;
}

/* =====================================================================
   46. Panel de hilo (mass34-hilos.js)
   ---------------------------------------------------------------------
   Cabecera «‹ Hilo ×», tarjeta del mensaje original, respuestas por día
   con barra flotante (reaccionar · responder · ⋮), menú de tres puntos y
   compositor «+ 😊 Escribe un mensaje 🎤». Solo usa tokens --m34-*, que
   ya cambian en los tres temas, así que no necesita bloques por tema.
   Prefijo propio (m34h-) para no heredar las reglas del panel anterior.
   ===================================================================== */
.m34h-tema {
    --m34h-acento: var(--m34-acento, #a50004);
    --m34h-tenue: var(--m34-acento-tenue, rgba(165, 0, 4, .09));
    --m34h-superficie: var(--m34-superficie, #fff);
    --m34h-fondo: var(--m34-chat-lienzo-neutro, var(--m34-fondo, #f5f6f8));
    --m34h-flotante: var(--m34-flotante, #fff);
    --m34h-texto: var(--m34-texto, #111c2d);
    --m34h-suave: var(--m34-texto-suave, #45464d);
    --m34h-tenue-texto: var(--m34-texto-tenue, #6a6b72);
    --m34h-borde: var(--m34-borde-fuerte, #c6c6cd);
    --m34h-borde-suave: var(--m34-borde, rgba(198, 198, 205, .55));
    --m34h-sombra: var(--m34-sombra-flotante, 0 8px 24px rgba(16, 20, 28, .16));
    --m34h-hover: color-mix(in srgb, var(--m34h-texto) 7%, transparent);
    color: var(--m34h-texto);
    font-family: inherit;
}
.m34h-tema *, .m34h-tema *::before, .m34h-tema *::after { box-sizing: border-box; }
.m34h-tema button { font: inherit; color: inherit; }
.m34h-tema svg { display: block; flex: none; }

.m34h-panel {
    position: fixed;
    z-index: 1300; /* por encima de #right-sidebar-container (1201) */
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--m34h-fondo);
    border-left: 1px solid var(--m34h-borde-suave);
    box-shadow: -12px 0 36px rgba(16, 20, 28, .16);
    animation: m34h-entrar 180ms ease-out;
}
@keyframes m34h-entrar { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Cabecera */
.m34h-cabeza {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 0 8px;
    background: var(--m34h-superficie);
    border-bottom: 1px solid var(--m34h-borde-suave);
    box-shadow: 0 1px 3px rgba(16, 20, 28, .05);
}
.m34h-titulo { flex: 1; margin: 0; color: var(--m34h-texto); font-size: 17px; font-weight: 700; line-height: 1.2; }
.m34h-cabeza-boton {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--m34h-suave) !important;
    cursor: pointer;
}
.m34h-cabeza-boton:hover { background: var(--m34h-hover); color: var(--m34h-texto) !important; }
.m34h-cabeza-boton:focus-visible,
.m34h-barra-boton:focus-visible,
.m34h-compositor-boton:focus-visible,
.m34h-enviar:focus-visible,
.m34h-menu-opcion:focus-visible,
.m34h-emoji:focus-visible,
.m34h-reaccion:focus-visible { outline: 2px solid var(--m34h-acento); outline-offset: 1px; }

/* Lista con scroll */
.m34h-lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 12px 8px;
}
.m34h-cargando { padding: 8px 2px; color: var(--m34h-tenue-texto); font-size: 13px; }

/* Mensaje original */
.m34h-raiz {
    position: relative;
    padding: 10px 12px 12px;
    border-left: 4px solid var(--m34h-acento);
    border-radius: 12px;
    background: var(--m34h-superficie);
    box-shadow: var(--m34-sombra-suave, 0 1px 2px rgba(16, 20, 28, .06));
}
.m34h-raiz-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
    padding-right: 30px;
}
.m34h-raiz-autor { font-size: 12px; font-weight: 700; color: var(--color-markdown-link, #007ab8); }
.m34h-raiz-pastillas { display: flex; gap: 6px; flex-wrap: wrap; }
.m34h-pastilla {
    padding: 3px 10px;
    border: 1px solid var(--m34h-borde-suave);
    border-radius: 999px;
    background: var(--m34h-superficie);
    color: var(--m34h-suave);
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.m34h-pastilla-hora { background: var(--m34h-fondo); color: var(--m34h-tenue-texto); font-weight: 500; }
.m34h-raiz-texto { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.m34h-raiz-texto > :first-child { margin-top: 0; }
.m34h-raiz-texto > :last-child { margin-bottom: 0; }
.m34h-barra.m34h-barra-raiz {
    top: 6px; right: 6px; left: auto;
    opacity: 1; transform: none; pointer-events: auto;
    border-color: transparent; background: transparent; box-shadow: none;
}

/* Adjuntos (raíz y respuestas) */
.m34h-adjuntos { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.m34h-archivo {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--m34h-borde-suave);
    border-radius: 10px;
    background: color-mix(in srgb, var(--m34h-texto) 4%, var(--m34h-superficie));
    color: var(--m34h-texto) !important;
    text-decoration: none !important;
    transition: background 140ms ease, border-color 140ms ease;
}
.m34h-archivo:hover { border-color: var(--m34h-borde); background: color-mix(in srgb, var(--m34h-texto) 8%, var(--m34h-superficie)); }
.m34h-archivo-icono { color: var(--m34h-suave); }
.m34h-archivo-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.m34h-archivo-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.m34h-archivo-datos small { color: var(--m34h-tenue-texto); font-size: 11px; }
.m34h-archivo-bajar { color: var(--m34h-texto); }
.m34h-imagen { display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: transparent; cursor: zoom-in; max-width: 100%; }
.m34h-imagen img { display: block; max-width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; }
.m34h-audio { display: block; width: 260px; max-width: 100%; height: 40px; }

/* Separador de día */
.m34h-separador { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.m34h-separador::before, .m34h-separador::after { content: ""; flex: 1; height: 1px; background: var(--m34h-borde-suave); }
.m34h-separador span {
    padding: 3px 10px; border-radius: 999px;
    background: var(--m34h-tenue); color: var(--m34h-acento);
    font-size: 11px; font-weight: 700;
}

/* Respuestas */
.m34h-msg {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start;
    margin: 0 0 12px;
    padding-top: 2px;
    border-radius: 10px;
    transition: background 300ms ease;
}
.m34h-msg.m34h-propio { align-items: flex-end; }
.m34h-msg-meta { display: flex; align-items: baseline; gap: 6px; margin: 0 4px 3px; font-size: 11px; }
.m34h-msg:not(.m34h-propio) .m34h-msg-meta { flex-direction: row-reverse; }
.m34h-msg-hora { color: var(--m34h-tenue-texto); }
.m34h-msg-autor { color: var(--m34h-acento); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.m34h-burbuja {
    max-width: 86%;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--m34h-borde-suave);
    border-radius: 4px 14px 14px 14px;
    background: var(--m34h-superficie);
    box-shadow: 0 1px 1px rgba(16, 20, 28, .04);
}
.m34h-burbuja[hidden] { display: none; }
.m34h-propio .m34h-burbuja {
    border-radius: 14px 4px 14px 14px;
    border-color: color-mix(in srgb, var(--m34h-acento) 22%, transparent);
    background: color-mix(in srgb, var(--m34h-acento) 9%, var(--m34h-superficie));
}
.m34h-texto { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.m34h-editado { display: block; margin-top: 2px; color: var(--m34h-tenue-texto); font-size: 11px; font-style: italic; text-align: right; }
.m34h-resaltado { background: var(--m34h-tenue); }
.m34h-saliendo { opacity: 0; transform: translateX(16px); transition: opacity 160ms ease, transform 160ms ease; }

/* Cita (respuesta a otro mensaje) */
.m34h-cita {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0;
    margin: 0 0 6px;
    padding: 5px 9px;
    border-left: 3px solid var(--m34h-acento);
    border-radius: 6px;
    background: color-mix(in srgb, var(--m34h-texto) 6%, transparent);
    font-size: 12px; line-height: 1.35;
}
.m34h-cita[role="button"] { cursor: pointer; }
.m34h-cita strong { color: var(--m34h-acento); font-size: 12px; }
.m34h-cita span { color: var(--m34h-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }

/* Reacciones: una por persona, la propia resaltada */
.m34h-reacciones { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 2px 0; }
.m34h-reacciones[hidden] { display: none; }
.m34h-reaccion {
    display: inline-flex; align-items: center; gap: 4px;
    height: 26px; padding: 0 8px;
    border: 1px solid var(--m34h-borde-suave);
    border-radius: 999px;
    background: var(--m34h-superficie);
    cursor: pointer;
    font-size: 12px;
    transition: transform 120ms ease, border-color 120ms ease;
}
.m34h-reaccion:hover { border-color: var(--m34h-borde); transform: translateY(-1px); }
.m34h-reaccion-emoji { font-size: 15px; line-height: 1; }
.m34h-reaccion-total { font-weight: 700; color: var(--m34h-suave); }
.m34h-reaccion-mia { border-color: var(--m34h-acento); background: var(--m34h-tenue); }
.m34h-reaccion-mia .m34h-reaccion-total { color: var(--m34h-acento); }

/* Barra flotante del mensaje (😊 ↩ ⋮) */
.m34h-barra {
    position: absolute;
    top: -14px;
    right: 6px;
    z-index: 2;
    display: flex; gap: 2px;
    padding: 2px;
    border: 1px solid var(--m34h-borde-suave);
    border-radius: 10px;
    background: var(--m34h-flotante);
    box-shadow: 0 2px 8px rgba(16, 20, 28, .12);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}
.m34h-msg:not(.m34h-propio) .m34h-barra { right: auto; left: 40%; }
.m34h-msg:hover .m34h-barra,
.m34h-msg:focus-within .m34h-barra,
.m34h-msg.m34h-activo .m34h-barra,
.m34h-msg.m34h-menu-abierto .m34h-barra { opacity: 1; transform: none; pointer-events: auto; }
.m34h-barra-boton {
    display: grid; place-items: center;
    width: 30px; height: 28px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--m34h-suave) !important;
    cursor: pointer;
}
.m34h-barra-boton:hover { background: var(--m34h-hover); color: var(--m34h-texto) !important; }
@media (hover: none) {
    .m34h-msg:hover:not(.m34h-activo):not(.m34h-menu-abierto) .m34h-barra { opacity: 0; pointer-events: none; }
}

/* Flotantes: menú, reacción rápida y selector de emoji */
.m34h-flotante {
    position: fixed;
    z-index: 100050; /* sobre las alertas de prioridad (100000) */
    border: 1px solid var(--m34h-borde-suave);
    border-radius: 12px;
    background: var(--m34h-flotante);
    box-shadow: var(--m34h-sombra);
    animation: m34h-aparecer 120ms ease-out;
}
@keyframes m34h-aparecer { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.m34h-menu { min-width: 190px; padding: 4px 0; }
.m34h-menu-grupo { padding: 4px 0; }
.m34h-menu-grupo + .m34h-menu-grupo { border-top: 1px solid var(--m34h-borde-suave); }
.m34h-menu-opcion {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 9px 16px;
    border: 0;
    background: transparent;
    color: var(--m34h-texto) !important;
    font-size: 14px !important;
    text-align: left;
    cursor: pointer;
}
.m34h-menu-opcion svg { color: var(--m34h-suave); }
.m34h-menu-opcion:hover, .m34h-menu-opcion:focus-visible { background: var(--m34h-hover); }
.m34h-menu-peligro, .m34h-menu-peligro svg { color: var(--m34h-acento) !important; }
.m34h-menu-peligro:hover { background: var(--m34h-tenue); }
.m34h-reaccion-rapida { display: flex; gap: 2px; padding: 4px; }
.m34h-emojis { display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 6px; }
.m34h-emoji {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0; border-radius: 8px;
    background: transparent;
    font-size: 20px !important; line-height: 1;
    cursor: pointer;
    transition: transform 100ms ease, background 100ms ease;
}
.m34h-emoji:hover { background: var(--m34h-hover); transform: scale(1.15); }
.m34h-emoji-marcado { background: var(--m34h-tenue); box-shadow: inset 0 0 0 1px var(--m34h-acento); }
.m34h-emoji-mas { font-size: 18px !important; font-weight: 700; color: var(--m34h-suave) !important; }

/* Edición en línea */
.m34h-edicion { width: min(86%, 360px); }
.m34h-edicion-texto {
    display: block;
    width: 100%; min-height: 40px; resize: none;
    padding: 8px 10px;
    border: 1px solid var(--m34h-acento);
    border-radius: 10px;
    background: var(--m34h-superficie);
    color: var(--m34h-texto);
    font: inherit; font-size: 14px; line-height: 1.4;
    outline: none;
    box-shadow: 0 0 0 3px var(--m34-acento-halo, rgba(165, 0, 4, .2));
}
.m34h-edicion-botones { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.m34h-edicion-botones small { flex: 1; color: var(--m34h-tenue-texto); font-size: 11px; }
.m34h-boton {
    height: 32px; padding: 0 14px;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 13px !important; font-weight: 600;
    cursor: pointer;
}
.m34h-boton:disabled { opacity: .55; cursor: default; }
.m34h-boton-suave { border-color: var(--m34h-borde); background: var(--m34h-superficie); color: var(--m34h-texto) !important; }
.m34h-boton-suave:hover { background: var(--m34h-hover); }
.m34h-boton-principal, .m34h-boton-peligro { background: var(--m34h-acento); color: var(--m34-sobre-acento, #fff) !important; }
.m34h-boton-principal:hover:not(:disabled), .m34h-boton-peligro:hover:not(:disabled) { background: var(--m34-acento-hover, #c40005); }

/* Vacío */
.m34h-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 16px; text-align: center; color: var(--m34h-tenue-texto); font-size: 13px; }
.m34h-vacio strong { color: var(--m34h-suave); font-size: 14px; }

/* Pie: tira de respuesta, adjuntos pendientes y compositor */
.m34h-pie {
    background: var(--m34h-superficie);
    border-top: 1px solid var(--m34h-borde-suave);
    padding: 6px 10px max(8px, env(safe-area-inset-bottom));
}
.m34h-tira { display: flex; align-items: center; gap: 6px; padding: 4px 0 6px; }
.m34h-tira[hidden], .m34h-pendientes[hidden], .m34h-subida[hidden] { display: none; }
.m34h-tira-cuerpo { flex: 1; min-width: 0; }
.m34h-tira-cuerpo .m34h-cita { margin: 0; }
.m34h-tira-cerrar, .m34h-pendiente-quitar {
    display: grid; place-items: center; flex: none;
    width: 28px; height: 28px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--m34h-suave) !important;
    cursor: pointer;
}
.m34h-tira-cerrar:hover, .m34h-pendiente-quitar:hover { background: var(--m34h-hover); }
.m34h-pendientes { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; }
.m34h-pendiente {
    display: flex; align-items: center; gap: 6px; flex: none;
    max-width: 200px; height: 36px; padding: 0 2px 0 6px;
    border: 1px solid var(--m34h-borde-suave); border-radius: 8px;
    background: var(--m34h-fondo);
    font-size: 12px;
}
.m34h-pendiente img { width: 26px; height: 26px; object-fit: cover; border-radius: 5px; }
.m34h-pendiente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m34h-subida { padding: 2px 4px 6px; color: var(--m34h-acento); font-size: 12px; font-weight: 600; }
.m34h-compositor { display: flex; align-items: flex-end; gap: 2px; margin: 0; }
.m34h-compositor-boton {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--m34h-suave) !important;
    cursor: pointer;
}
.m34h-compositor-boton:hover { background: var(--m34h-hover); color: var(--m34h-texto) !important; }
.m34h-panel .m34h-entrada {
    flex: 1; min-width: 0;
    height: 40px; min-height: 40px; max-height: 140px;
    margin: 0 4px;
    padding: 10px 14px;
    border: 0;
    border-radius: 20px;
    background: var(--m34h-fondo);
    color: var(--m34h-texto);
    font: inherit; font-size: 14px; line-height: 20px;
    resize: none;
    outline: none;
    box-shadow: none;
}
.m34h-panel .m34h-entrada:focus { box-shadow: 0 0 0 2px var(--m34-acento-halo, rgba(165, 0, 4, .25)); }
.m34h-entrada::placeholder { color: var(--m34h-tenue-texto); opacity: 1; }
.m34h-enviar {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--m34h-suave) !important;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.m34h-enviar:hover { background: var(--m34h-hover); }
.m34h-enviar[data-modo="enviar"], .m34h-enviar[data-modo="detener"] { background: var(--m34h-acento); color: var(--m34-sobre-acento, #fff) !important; }
.m34h-enviar[data-modo="detener"] { animation: m34h-latido 1.2s ease-in-out infinite; }
.m34h-enviar:disabled { opacity: .55; cursor: default; }
@keyframes m34h-latido { 50% { box-shadow: 0 0 0 6px var(--m34-acento-halo, rgba(165, 0, 4, .25)); } }

/* Aviso (toast) */
.m34h-aviso {
    position: absolute;
    left: 50%; bottom: 84px;
    z-index: 5;
    max-width: calc(100% - 32px);
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--m34h-texto);
    color: var(--m34h-superficie);
    font-size: 13px; font-weight: 600;
    box-shadow: var(--m34h-sombra);
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}
.m34h-aviso.m34h-visible { opacity: 1; transform: translate(-50%, 0); }
.m34h-aviso.m34h-aviso-error { background: var(--m34h-acento); color: var(--m34-sobre-acento, #fff); }

/* Diálogo de confirmar eliminación */
.m34h-modal-fondo {
    position: fixed; inset: 0; z-index: 100100;
    display: grid; place-items: center;
    padding: 16px;
    background: rgba(10, 12, 16, .5);
    animation: m34h-aparecer 120ms ease-out;
}
.m34h-modal {
    width: min(420px, 100%);
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    padding: 18px;
    border-radius: 14px;
    background: var(--m34h-flotante);
    box-shadow: var(--m34h-sombra);
}
.m34h-modal-titulo { margin: 0 0 8px; color: var(--m34h-texto); font-size: 17px; font-weight: 700; }
.m34h-modal-texto { margin: 0; color: var(--m34h-suave); font-size: 14px; line-height: 1.45; }
.m34h-modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

@media (max-width: 600px) {
    .m34h-panel { width: 100vw; border-left: 0; }
    .m34h-burbuja { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) {
    .m34h-panel, .m34h-flotante, .m34h-modal-fondo, .m34h-enviar[data-modo="detener"] { animation: none; }
}
/* La galería de imágenes del hilo también va sobre las alertas. */
.mass34-hilo-previsualizacion { z-index: 100100; }

/* =====================================================================
   47. Diálogo «Reenviar mensaje» (mass34-reenviar.js)
   ---------------------------------------------------------------------
   Sustituye al reenvío de Zulip, que volcaba la cita en markdown en la
   caja de escribir. Va sobre las alertas de prioridad (100000) porque lo
   abre la propia persona. Usa los tokens de .m34h-tema (sección 46).
   ===================================================================== */
.m34r-fondo {
    position: fixed; inset: 0; z-index: 100100;
    display: grid; place-items: center;
    padding: 16px;
    background: rgba(10, 12, 16, .5);
    animation: m34h-aparecer 120ms ease-out;
}
.m34r-caja {
    width: min(452px, 100%);
    max-height: min(720px, calc(100vh - 32px));
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--m34h-flotante);
    box-shadow: var(--m34h-sombra);
}
.m34r-cabeza {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 14px 18px;
    border-bottom: 1px solid var(--m34h-borde-suave);
}
.m34r-titulo { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--m34h-texto); font-size: 16px; font-weight: 700; }
.m34r-titulo-icono { color: var(--m34h-acento); }
.m34r-cerrar {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--m34h-suave) !important;
    cursor: pointer;
}
.m34r-cerrar:hover { background: var(--m34h-hover); color: var(--m34h-texto) !important; }
.m34r-previa {
    padding: 10px 18px 12px;
    background: color-mix(in srgb, var(--m34h-texto) 3%, var(--m34h-flotante));
    border-bottom: 1px solid var(--m34h-borde-suave);
}
.m34r-previa small { display: block; margin-bottom: 6px; color: var(--m34h-tenue-texto); font-size: 12px; }
.m34r-previa-tarjeta {
    display: flex; align-items: center; gap: 6px;
    min-width: 0;
    padding: 7px 12px;
    border-left: 4px solid var(--m34h-acento);
    border-radius: 6px;
    background: var(--m34h-superficie);
    color: var(--m34h-texto);
    font-size: 14px;
}
.m34r-previa-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m34r-buscador {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 18px 6px;
    padding: 0 12px;
    height: 42px;
    border: 1px solid var(--m34h-borde);
    border-radius: 8px;
    background: var(--m34h-superficie);
    color: var(--m34h-tenue-texto);
    cursor: text;
}
.m34r-buscador:focus-within { border-color: var(--m34h-acento); box-shadow: 0 0 0 3px var(--m34-acento-halo, rgba(165, 0, 4, .2)); }
.m34r-buscador input,
.m34r-buscador input:focus {
    flex: 1; min-width: 0; height: 100%;
    margin: 0; padding: 0;
    border: 0; outline: none; box-shadow: none;
    background: transparent;
    color: var(--m34h-texto);
    font: inherit; font-size: 15px;
}
.m34r-buscador input::placeholder { color: var(--m34h-tenue-texto); opacity: 1; }
.m34r-lista { flex: 1; min-height: 120px; overflow-y: auto; padding: 4px 8px 8px; }
.m34r-seccion {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 10px 6px;
    color: var(--m34h-suave);
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.m34r-fila {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent; border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.m34r-fila:hover { background: var(--m34h-hover); }
.m34r-fila:focus-visible { outline: 2px solid var(--m34h-acento); outline-offset: -2px; }
.m34r-fila.m34r-elegida { border-color: var(--m34h-acento); background: var(--m34h-tenue); }
.m34r-avatar {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: 50%;
    color: #fff;
    font-size: 14px; font-weight: 800;
}
.m34r-avatar-grupo { background: #2563eb; }
.m34r-avatar-canal { background: #0f766e; }
.m34r-avatar-directo { background: #7c3aed; }
.m34r-fila-textos { display: flex; flex-direction: column; min-width: 0; }
.m34r-fila-textos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--m34h-texto); font-size: 14px; font-weight: 700; }
.m34r-fila-textos small { color: var(--m34h-tenue-texto); font-size: 12px; }
.m34r-vacio { margin: 24px 8px; color: var(--m34h-tenue-texto); font-size: 13px; text-align: center; }
.m34r-pie {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--m34h-borde-suave);
}
.m34r-boton {
    height: 40px;
    border: 0; border-radius: 8px;
    font-size: 14px !important; font-weight: 700;
    cursor: pointer;
}
.m34r-boton-cancelar { background: color-mix(in srgb, var(--m34h-texto) 7%, var(--m34h-flotante)); color: var(--m34h-texto) !important; }
.m34r-boton-cancelar:hover { background: color-mix(in srgb, var(--m34h-texto) 12%, var(--m34h-flotante)); }
.m34r-boton-enviar { background: var(--m34h-acento); color: var(--m34-sobre-acento, #fff) !important; }
.m34r-boton-enviar:hover:not(:disabled) { background: var(--m34-acento-hover, #c40005); }
.m34r-boton-enviar:disabled { background: color-mix(in srgb, var(--m34h-texto) 12%, var(--m34h-flotante)); color: var(--m34h-tenue-texto) !important; cursor: default; }
.m34r-aviso {
    position: fixed; left: 50%; bottom: 28px; z-index: 100200;
    max-width: calc(100vw - 32px);
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--m34h-texto); color: var(--m34h-superficie);
    font-size: 13px; font-weight: 600;
    box-shadow: var(--m34h-sombra);
    opacity: 0; transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}
.m34r-aviso.m34r-visible { opacity: 1; transform: translate(-50%, 0); }
.m34r-aviso.m34r-aviso-error { background: var(--m34h-acento); color: var(--m34-sobre-acento, #fff); }
@media (max-width: 480px) {
    .m34r-fondo { padding: 0; place-items: end stretch; }
    .m34r-caja { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .m34r-pie { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* =====================================================================
   71. La barra de filtros de la Bandeja de entrada
   ---------------------------------------------------------------------
   «Todos los temas» y «Filtrar» llegaban con el aspecto por defecto del
   navegador —esquinas a 90°, borde fino plano, sin foco visible a juego—
   mientras el resto de la interfaz usa inputs y botones redondeados con
   los mismos tokens `--m34-*`. Se les da el mismo lenguaje que ya tienen
   `#left-sidebar-search` (el buscador de la barra lateral) y
   `#compose_select_recipient_widget` (el desplegable del destinatario al
   escribir): mismo radio, mismo borde, mismo halo de foco en el acento.
   ===================================================================== */
#inbox-filters {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    background: var(--m34-superficie) !important;
    border-bottom: 1px solid var(--m34-borde) !important;
}

#inbox-filter_widget.dropdown-widget-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--m34-texto) !important;
    background-color: var(--m34-superficie-alt) !important;
    border: 1px solid var(--m34-borde) !important;
    border-radius: var(--m34-radio-m) !important;
    transition: background-color var(--m34-transicion), border-color var(--m34-transicion) !important;
}

#inbox-filter_widget.dropdown-widget-button:hover {
    background-color: var(--m34-superficie) !important;
    border-color: var(--m34-acento) !important;
}

#inbox-filter_widget .dropdown_widget_value {
    font-weight: 600 !important;
}

.inbox-search-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 320px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.inbox-search-wrapper #inbox-search {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 28px 0 32px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: var(--m34-texto) !important;
    background: var(--m34-superficie-alt) !important;
    border: 1px solid var(--m34-borde) !important;
    border-radius: var(--m34-radio-m) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--m34-transicion), box-shadow var(--m34-transicion), background-color var(--m34-transicion) !important;
}

.inbox-search-wrapper #inbox-search::placeholder {
    color: var(--m34-texto-tenue) !important;
    opacity: 1 !important;
}

.inbox-search-wrapper #inbox-search:hover {
    border-color: var(--m34-borde-fuerte, var(--m34-acento)) !important;
}

.inbox-search-wrapper #inbox-search:focus {
    background: var(--m34-superficie) !important;
    border-color: var(--m34-acento) !important;
    box-shadow: 0 0 0 3px var(--m34-acento-halo) !important;
}

.inbox-search-wrapper .input-icon {
    position: absolute !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 15px !important;
    height: 15px !important;
    color: var(--m34-texto-tenue) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.inbox-search-wrapper .input-close-filter-button {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--m34-texto-tenue) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: background-color var(--m34-transicion), color var(--m34-transicion) !important;
}

.inbox-search-wrapper .input-close-filter-button:hover {
    color: var(--m34-texto) !important;
    background: var(--m34-acento-tenue) !important;
}

/* =====================================================================
   72. Las filas de la Bandeja de entrada
   ---------------------------------------------------------------------
   La barra de filtros (sección 71) ya hablaba el idioma de la app; lo de
   debajo seguía con el aspecto plano de Zulip: cabeceras sin aire y
   filas pegadas unas a otras sobre un fondo blanco liso, sin nada que
   las distinga ni marque cuál está bajo el ratón. Se les da el mismo
   lenguaje que el resto de la interfaz: superficie, radio, sombra suave
   y un hover que marca lo accionable — igual que las tarjetas de otros
   paneles propios (asignar conversación, roles y permisos).

Vale tanto para «MENSAJES DIRECTOS» como para los canales: las dos
   cabeceras (`.inbox-header`, con o sin el id `inbox-dm-header`) salen
   de la misma plantilla de Zulip, y las filas de dentro —una
   conversación directa o un tema de canal— son siempre `.inbox-row`.
   ===================================================================== */

#inbox-list {
    padding: 2px 10px 18px !important;
    background: var(--m34-fondo) !important;
}

.inbox-header {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 32px !important;
    margin-top: 12px !important;
    padding: 0 6px !important;
    border-radius: var(--m34-radio-s) !important;
    transition: background-color var(--m34-transicion) !important;
}

.inbox-header:first-child {
    margin-top: 6px !important;
}

.inbox-header:hover {
    background: var(--m34-acento-tenue) !important;
}

.inbox-header-name-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--m34-texto-tenue) !important;
}

.inbox-header .collapsible-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
    border-radius: 6px !important;
    color: var(--m34-texto-tenue) !important;
    transition: background-color var(--m34-transicion), color var(--m34-transicion) !important;
}

.inbox-header .collapsible-button:hover {
    background: var(--m34-acento-tenue) !important;
    color: var(--m34-acento) !important;
}

/* El menú ⋮ de cada canal, con el mismo hover que cualquier otro
   botón-icono de la aplicación (sección 2, `.icon-button`). */
.inbox-header .inbox-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 auto !important;
    border-radius: var(--m34-radio-s) !important;
    color: var(--m34-texto-tenue) !important;
    transition: background-color var(--m34-transicion), color var(--m34-transicion) !important;
}

.inbox-header .inbox-action-button:hover {
    background: var(--m34-acento-tenue) !important;
    color: var(--m34-acento) !important;
}

/* Las filas: cada conversación directa o cada tema, como una tarjeta
   suelta en vez de una línea pegada a la siguiente. */
.inbox-row {
    display: flex !important;
    align-items: center !important;
    margin: 5px 0 !important;
    padding: 0 10px !important;
    min-height: 42px !important;
    background: var(--m34-superficie) !important;
    border: 1px solid var(--m34-borde) !important;
    border-radius: var(--m34-radio-m) !important;
    box-shadow: var(--m34-sombra-suave) !important;
    transition:
        border-color var(--m34-transicion),
        box-shadow var(--m34-transicion) !important;
}

.inbox-row:hover {
    border-color: var(--m34-acento) !important;
    box-shadow: var(--m34-sombra-flotante) !important;
}

.inbox-row .inbox-left-part-wrapper,
.inbox-row .inbox-left-part {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.inbox-row .recipients_info,
.inbox-row .inbox-topic-name {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.inbox-row .user_block {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.inbox-row .recipients_name,
.inbox-row .inbox-topic-name a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--m34-texto) !important;
}

.inbox-row .user-circle,
.inbox-row .conversation-partners-icon,
.inbox-row .zulip-icon-bot {
    flex: 0 0 auto !important;
}

.inbox-row .unread_count {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}

/* El icono de "marcar como leído" que aparece al pasar el ratón por el
   contador: mismo radio y mismo hover que el resto de botones-icono. */
.inbox-row .on_hover_dm_read,
.inbox-row .on_hover_topic_read {
    border-radius: var(--m34-radio-s) !important;
}

/* El libro de temas de cada canal se recoge un poco más adentro, para
   que la jerarquía (canal > tema) se note sin depender solo del color. */
.inbox-topic-container {
    margin-left: 4px !important;
}

/* =====================================================================
   73. Los avisos sobre la caja de escribir
   ---------------------------------------------------------------------
   «Esta conversación podría tener mensajes no visibles en esta vista»,
   «Tu mensaje se ha programado», el aviso de invitados en un directo…
   Todos salen de la misma plantilla de Zulip (`.main-view-banner`) y
   llegaban con esquinas a 90°, sin sombra y el botón de acción como un
   enlace azul suelto. Se les da la misma geometría de tarjeta que el
   resto de la interfaz SIN tocar el color de fondo: ese ya es semántico
   —éxito, aviso, error, información— y pintarlo de corporativo le
   quitaría el significado.

El botón y la equis de cerrar usan `color-mix() con currentColor`,
   igual que la tarjeta de cita (sección 40): el aviso cambia de color
   según el tipo y así no hace falta redeclarar nada en los tres temas.
   ===================================================================== */

.main-view-banner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 6px 14px !important;
    padding: 6px 10px !important;
    border-radius: var(--m34-radio-s) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.main-view-banner-elements-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.main-view-banner .banner_content {
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.main-view-banner-action-button {
    flex: 0 0 auto !important;
    height: 24px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    color: inherit !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent) !important;
    border-radius: var(--m34-radio-s) !important;
    cursor: pointer !important;
    transition: background-color var(--m34-transicion) !important;
}

.main-view-banner-action-button:hover {
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
}

.main-view-banner-close-button {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    opacity: 0.65 !important;
    transition: background-color var(--m34-transicion), opacity var(--m34-transicion) !important;
}

.main-view-banner-close-button:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, currentColor 14%, transparent) !important;
}

/* =====================================================================
   74. La cabecera de tanda en mensajes directos
   ---------------------------------------------------------------------
   La sección 47 ya la dejó plana y opaca a propósito —lo pide el
   `sticky`, y antes dos cabeceras se superponían al desplazar—. Lo que
   quedaba por dentro era el icono y el nombre al tamaño y peso por
   defecto de Zulip, y la fecha de la derecha como texto suelto sin
   ninguna forma. Se les da el mismo lenguaje de chip/etiqueta que usa
   el resto de la interfaz, sin tocar ni el fondo ni el `sticky`.
   ===================================================================== */

.message_header .private_message_header_icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 7px !important;
    background: var(--m34-acento-tenue) !important;
    color: var(--m34-acento) !important;
}

.private_message_header_name,
.message-header-stream-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--m34-texto) !important;
}

.recipient_row_date {
    padding: 3px 9px !important;
    border-radius: var(--m34-radio-pastilla) !important;
    background: var(--m34-superficie-alt) !important;
    border: 1px solid var(--m34-borde) !important;
    letter-spacing: 0.03em !important;
}

/* =====================================================================
   75. La estrella de favoritos y la sección «Favoritos»
   ---------------------------------------------------------------------
   Una estrella junto al nombre, en la lista de verdad de «Mensajes
   directos», para marcar una conversación. La pone `mass34-favoritos.js`,
   que además construye —ENTRE Canales y Mensajes directos, no dentro de
   ninguno de los dos— una sección aparte con una copia de esas filas.

Esa copia vive fuera de `#direct-messages-list`, así que no hereda
   nada de lo que ya viste esa lista (sección 89 y alrededores): hay que
   vestirla aquí de cero, con los mismos números, para que a ojo sean la
   misma tarjeta.
   ===================================================================== */

#direct-messages-list .dm-box {
    position: relative !important;
}

.mass34-favorito {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 2px !important;
    border-radius: 6px !important;
    color: var(--m34-borde-fuerte) !important;
    cursor: pointer !important;
    transition: color var(--m34-transicion), background-color var(--m34-transicion) !important;
}

.mass34-favorito:hover {
    background: var(--m34-acento-tenue) !important;
    color: var(--m34-texto-tenue) !important;
}

.mass34-favorito.activa {
    color: #f59e0b !important;
}

.mass34-favorito.activa svg {
    fill: currentColor !important;
}

.mass34-favorito:focus-visible {
    outline: 2px solid var(--m34-acento-halo) !important;
    outline-offset: 1px !important;
}

/* --- El bloque, entre Canales y Mensajes directos ---------------------- */

/* El mismo padding-top (4px) que trae `.mass34-sidebar-directos`
   (sección 89): así el hueco entre Canales y esta cabecera es igual al
   hueco entre esta lista y «Mensajes directos» — la misma distancia a
   los dos lados, que es justo lo que se pidió. */
#mass34-favoritos-seccion {
    flex: 0 0 auto;
    padding-top: 4px;
}

/* Misma cabecera que «Canales» y «Mensajes directos»
   (`.mass34-sidebar-section`, sección 89): mayúsculas pequeñas, sin ser
   un botón. Esa clase base trae `justify-content: space-between` —ahí
   tiene sentido, separa la etiqueta del botón «+»— pero aquí solo hay
   etiqueta, así que con `space-between` la estrella se iba a un extremo
   y el texto al otro. Se fuerza a que vayan juntos a la izquierda. */
.mass34-sidebar-favoritos {
    justify-content: flex-start !important;
    gap: 6px !important;
}

.mass34-sidebar-favoritos::before {
    content: "" !important;
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 auto !important;
    background: #f59e0b !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.5 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6-4.4-4.2 6-.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

#mass34-favoritos-lista {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
    margin: 0;
    padding: 0 15px 8px;
    list-style: none;
}

/* La misma tarjeta que una fila de verdad (sección 89): mismo alto, mismo
   fondo, mismo borde y el mismo radio. */
#mass34-favoritos-lista .mass34-fila-favorita {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--m34-nav-hover) 56%, transparent);
    border: 1px solid color-mix(in srgb, var(--m34-borde) 62%, transparent);
    border-radius: 9px;
}

#mass34-favoritos-lista .mass34-fila-favorita:hover {
    background-color: var(--m34-nav-hover);
    border-color: color-mix(in srgb, var(--m34-acento) 16%, var(--m34-borde));
}

#mass34-favoritos-lista .dm-box {
    display: flex !important;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px !important;
    align-items: center;
    gap: 9px;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    position: relative;
}

#mass34-favoritos-lista .conversation-partners {
    display: block !important;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
}

#mass34-favoritos-lista .conversation-partners-list,
#mass34-favoritos-lista .conversation-partners-list:link,
#mass34-favoritos-lista .conversation-partners-list:visited,
#mass34-favoritos-lista .dm-box a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--m34-texto) !important;
}

#mass34-favoritos-lista .conversation-partners-icon {
    display: none;
}

#mass34-favoritos-lista .mass34-dm-avatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

#mass34-favoritos-lista .dm-markers-and-unreads {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

#mass34-favoritos-lista .unread_count.zero_count {
    display: none !important;
}

/* El filo ámbar que distingue a una fila favorita de un vistazo. */
#mass34-favoritos-lista .mass34-fila-favorita .dm-box {
    box-shadow: inset 2px 0 0 #f59e0b;
}

/* =====================================================================
   76. «Más conversaciones», al final de Mensajes directos
   ---------------------------------------------------------------------
   Zulip pinta esta fila con `dm-list-item` Y `dm-box` juntas en el MISMO
   `<li>` — en el resto de filas van en nodos distintos, una el contenedor
   y otra el enlace de dentro—. La sección 89 fuerza 34px de alto y
   `overflow: hidden` dando por hecho esa estructura habitual, y aquí se
   lo aplicaba a un elemento que la mezcla: el enlace quedaba recortado y
   el clic no caía donde debía. Se le devuelve una caja normal, sin ese
   forzado.
   ===================================================================== */

#direct-messages-list #show-more-direct-messages {
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
}

#direct-messages-list #show-more-direct-messages .dm-name {
    cursor: pointer !important;
    color: var(--m34-acento) !important;
    font-weight: 600 !important;
}

/* =====================================================================
   77. El panel «Auditoría» (mass34-auditoria.js)
   ---------------------------------------------------------------------
   Una tabla de muchas columnas dentro del mismo modal que el resto de
   paneles propios: más ancho que `.mass34-modal-ancho` y con la tabla en
   su propia caja con scroll, para que filtros y botones no se vayan de
   la pantalla al haber mil filas.
   ===================================================================== */

.mass34-modal.mass34-auditoria {
    width: min(1180px, calc(100vw - 32px));
    max-width: min(1180px, calc(100vw - 32px));
}

.mass34-auditoria-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mass34-auditoria-filtros .mass34-modal-campo {
    width: auto;
    flex: 0 1 auto;
    margin: 0;
}

.mass34-auditoria-filtros input[type="search"] {
    flex: 1 1 200px;
    min-width: 160px;
}

.mass34-auditoria-tabla-caja {
    max-height: 56vh;
    overflow: auto;
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-s);
    background: var(--m34-superficie);
}

.mass34-auditoria-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.4;
}

.mass34-auditoria-tabla th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 7px 9px;
    text-align: left;
    font-weight: 700;
    color: var(--m34-texto-suave);
    background: var(--m34-superficie-alt);
    border-bottom: 1px solid var(--m34-borde-fuerte);
    white-space: nowrap;
}

.mass34-auditoria-tabla td {
    padding: 6px 9px;
    vertical-align: top;
    color: var(--m34-texto);
    border-bottom: 1px solid var(--m34-borde);
}

.mass34-auditoria-tabla tbody tr:hover td {
    background: var(--m34-acento-tenue);
}

.mass34-auditoria-fecha,
.mass34-auditoria-ip {
    white-space: nowrap;
    color: var(--m34-texto-suave) !important;
    font-variant-numeric: tabular-nums;
}

.mass34-auditoria-accion {
    font-weight: 600;
    white-space: nowrap;
}

.mass34-auditoria-detalle {
    max-width: 380px;
    color: var(--m34-texto-suave) !important;
    word-break: break-word;
}

.mass34-auditoria-fila {
    cursor: pointer;
}

.mass34-auditoria-que {
    min-width: 360px;
    color: var(--m34-texto) !important;
}

.mass34-auditoria-fila:focus-visible td {
    outline: none;
    background: var(--m34-acento-tenue);
}

.mass34-auditoria-flecha {
    width: 14px;
    color: var(--m34-texto-tenue) !important;
    transition: transform var(--m34-transicion);
}

.mass34-auditoria-fila.esta-abierta .mass34-auditoria-flecha {
    transform: rotate(90deg);
}

.mass34-auditoria-fila.esta-abierta td {
    background: var(--m34-acento-tenue);
    border-bottom-color: transparent;
}

/* La categoría, como etiqueta pequeña delante de la acción. */
.mass34-auditoria-cat {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--m34-texto-suave);
    background: var(--m34-superficie-alt);
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-pastilla);
}

/* La ficha: etiqueta a la izquierda, valor a la derecha, todo a la
   vista sin recortar —es donde se mira el detalle, no la tabla—. */
.mass34-auditoria-ficha td {
    padding: 4px 9px 12px 32px;
    background: var(--m34-acento-tenue);
}

.mass34-auditoria-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 5px 16px;
    margin: 0;
    padding: 12px 14px;
    background: var(--m34-superficie);
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-m);
}

.mass34-auditoria-dl dt {
    font-weight: 700;
    color: var(--m34-texto-suave);
}

.mass34-auditoria-dl dd {
    margin: 0;
    color: var(--m34-texto);
    word-break: break-word;
}

/* Un inicio de sesión fallido es lo primero que hay que ver de un
   vistazo: va con el acento de marca, que aquí sí significa "ojo". */
.mass34-auditoria-alerta td {
    background: var(--m34-acento-tenue);
}

.mass34-auditoria-alerta .mass34-auditoria-accion {
    color: var(--m34-acento);
}

/* =====================================================================
   78. El panel «Paleta de colores» (mass34-paleta.js)
   ---------------------------------------------------------------------
   Cada color como en la hoja de diseño de la empresa: una muestra grande
   con su nombre y su código, y debajo la tira de tonos. Los colores de
   las muestras los pone el script; aquí solo va la forma.
   ===================================================================== */

.mass34-modal.mass34-paleta {
    width: min(760px, calc(100vw - 32px));
    max-width: min(760px, calc(100vw - 32px));
}

.mass34-paleta-preajustes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.mass34-paleta-preajuste {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--m34-texto);
    background: var(--m34-superficie-alt);
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-pastilla);
    cursor: pointer;
    transition: border-color var(--m34-transicion);
}

.mass34-paleta-preajuste:hover {
    border-color: var(--m34-acento);
}

.mass34-paleta-bolas {
    display: inline-flex;
}

.mass34-paleta-bolas span {
    width: 12px;
    height: 12px;
    margin-left: -3px;
    border: 1.5px solid var(--m34-superficie);
    border-radius: 50%;
}

.mass34-paleta-bolas span:first-child {
    margin-left: 0;
}

.mass34-paleta-filas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mass34-paleta-fila {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--m34-borde);
    border-radius: var(--m34-radio-l);
    background: var(--m34-superficie);
}

.mass34-paleta-muestra {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 92px;
    transition: background-color var(--m34-transicion);
}

.mass34-paleta-cab {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px 0;
    font-size: 12.5px;
}

.mass34-paleta-hex {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
}

.mass34-paleta-tira {
    display: flex;
    height: 22px;
}

.mass34-paleta-tira span {
    flex: 1 1 0;
}

.mass34-paleta-lado {
    padding: 8px 12px 12px;
}

.mass34-paleta-lado .mass34-modal-nota {
    margin: 0 0 8px;
}

.mass34-paleta-controles {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mass34-paleta-selector {
    width: 40px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--m34-borde-fuerte);
    border-radius: var(--m34-radio-s);
    background: var(--m34-superficie);
    cursor: pointer;
}

.mass34-paleta-texto {
    flex: 1 1 auto;
    margin: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    text-transform: uppercase;
}

.mass34-paleta-revision {
    margin: 14px 0 6px;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
}

.mass34-paleta-revision li {
    padding: 2px 0;
    color: var(--m34-texto-suave);
}

/* Verde y rojo de semáforo, fijos: la revisión de contraste no puede
   depender del color que se está revisando. */
.mass34-paleta-revision .esta-bien .mass34-paleta-icono {
    color: #15803d;
    font-weight: 800;
}

.mass34-paleta-revision .esta-mal {
    color: #b91c1c;
    font-weight: 600;
}

@media (max-width: 640px) {
    .mass34-paleta-filas {
        grid-template-columns: 1fr;
    }
}

/* El lápiz de editar, la estrella y la papelera vieja, fuera de la barra
 * flotante — al final del archivo a propósito.
 *
 * `.edit_content` trae también la clase `.message_control_button`, así que
 * cualquier regla de ese archivo que la use para dar tamaño a los botones
 * —y hay varias, es el nombre genérico que usa Zulip— vuelve a enseñarlo:
 * misma especificidad, mismo `!important`, y gana la que esté más abajo en
 * el archivo. La regla de la sección 44 ya no lo intenta evitar ahí arriba
 * porque no se puede, hay que ganar por posición. Esta es la última línea
 * del archivo a propósito: nada que venga después puede volver a ganarle. */
.message_row .message_controls .star_container,
.message_row .message_controls .edit_content,
.message_row .message_controls .mass34-eliminar-boton {
    display: none !important;
}