/* ================================================================
   CHAT DE LA COMUNIDAD  (/chat)
   ================================================================
   Concepto: REGISTRO DE LA LIGA, no mensajería.

   Se descarta la burbuja alternada (izquierda/derecha) a propósito: es
   el patrón por defecto de cualquier clon de WhatsApp y desperdicia
   media pantalla en aire. Un log denso alineado a la izquierda cabe al
   doble de mensajes, se lee de una pasada y se parece más a la consola
   de una sala de combate que a un móvil.

   Lo propio se distingue por el filo rojo del sistema, no por la
   posición. El color del nick sale de la PALETA DE TIPOS que ya define
   el sitio (--type-*): 17 colores estables por identidad, así que
   reconoces a alguien por el color antes de leer el nombre.

   Identidad heredada: esquinas de carta (12px 4px), display Bricolage
   en nicks y titulares, filo rojo de sección. Sin gradientes
   decorativos, sin glows y sin desplazamientos al pasar el ratón.
   ================================================================ */

.chat-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 15px 60px;
}

/* Etiqueta solo para lectores de pantalla (el sitio no traía utilidad propia). */
.chat-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Cabecera -------------------------------------------------- */
.chat-head {
    margin: 18px 0 26px;
}

.chat-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 6px;
}

.chat-head h1 {
    font-size: clamp(29px, 5vw, 42px);
    line-height: 1.08;
    margin: 0 0 12px;
    color: var(--text-main);
}

.chat-head > p {
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 64ch;
    margin: 0;
}

/* --- Rejilla principal ----------------------------------------- */
.chat-app {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 216px;
    gap: 14px;
    align-items: start;
}

.chat-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px 4px 12px 4px;
    box-shadow: var(--shadow-sm);
}

/* --- Columna de canales ---------------------------------------- */
.chat-canales {
    padding: 14px 0;
    position: sticky;
    top: 86px;
}

.chat-col-titulo {
    font-family: var(--font-display, inherit);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 16px;
    margin: 0 0 10px;
}

.chat-canales-lista {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
}

/* Separa las salas fijas de los privados abiertos. */
.chat-col-privados {
    padding-top: 14px;
}

.chat-canal {
    appearance: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    padding: 9px 16px;
    font-family: var(--font-display, inherit);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.chat-canal:hover {
    color: var(--text-main);
    background: var(--bg-card-hover);
}

.chat-canal[aria-current="true"] {
    color: var(--text-main);
    border-left-color: var(--primary);
    background: var(--bg-card-hover);
}

.chat-canal-num {
    margin-left: auto;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* Privados abiertos: misma lista, marcados con el filo ámbar para que
   no se confundan con un canal público de un vistazo. */
.chat-canal.es-privado[aria-current="true"] {
    border-left-color: var(--accent-text);
}

/* Fila de un privado: el canal y su aspa son hermanos, no uno dentro del
   otro (un botón anidado en otro botón es HTML inválido). */
.chat-canal-fila {
    display: flex;
    align-items: stretch;
}

.chat-canal-fila .chat-canal {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-canal-cerrar {
    appearance: none;
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0 12px 0 4px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.chat-canal-cerrar:hover {
    color: var(--primary);
}

/* --- Columna central: el registro ------------------------------ */
.chat-hilo {
    display: flex;
    flex-direction: column;
    height: min(66vh, 620px);
    overflow: hidden;
}

.chat-hilo-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 auto;
}

/* min-width:0 para que el text-overflow de la descripción funcione: sin
   esto el hijo flex no baja de su ancho de contenido y nunca recorta. */
.chat-hilo-cabecera > div {
    min-width: 0;
}

.chat-hilo-nombre {
    font-family: var(--font-display, inherit);
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main);
    margin: 0;
}

.chat-hilo-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un solo indicador y con etiqueta. Una luz que no informa de nada es
   decoración, y la decoración que parece un estado confunde. */
.chat-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.chat-estado-luz {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #cbd5e1;
}

.chat-estado.conectado .chat-estado-luz {
    background: #2f855a;
}

.chat-estado.cortado .chat-estado-luz {
    background: var(--primary);
}

.chat-registro {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0;
    scrollbar-width: thin;
}

/* --- Una línea del registro ------------------------------------ */
/* Dos columnas: la pegatina y el cuerpo. La columna del avatar existe
   SIEMPRE, también en las continuaciones (donde va vacía), para que todo el
   texto de una misma tanda quede alineado en la misma vertical. */
.chat-linea {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    padding: 1px 16px;
    border-left: 3px solid transparent;
    line-height: 1.5;
}

/* Aire solo al empezar una tanda nueva: dentro de una misma tanda las líneas
   van pegadas, que es lo que las hace leerse como un bloque. */
.chat-linea:not(.seguida) {
    padding-top: 7px;
}

.chat-avatar {
    display: block;
    width: 26px;
    height: 26px;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px 3px 8px 3px;
    background: var(--bg-card-hover);
}

.chat-jefe {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 1px;
}

.chat-linea:hover {
    background: var(--bg-card-hover);
}

.chat-linea.es-mia {
    border-left-color: var(--primary);
}

.chat-hora {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    user-select: none;
}

.chat-cuerpo {
    min-width: 0;
}

.chat-autor {
    font-family: var(--font-display, inherit);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--nick, var(--text-main));
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.chat-autor:hover {
    text-decoration: underline;
}

/* El discriminador va apagado y a menor peso: sirve para desempatar
   nombres iguales, no para leerse en cada línea. */
.chat-tag {
    font-family: var(--font-primary);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Los invitados nunca cogen color de tipo. La diferencia se ve de un
   vistazo, y es el argumento más honesto para registrarse. */
.chat-linea.es-invitado .chat-autor {
    color: var(--text-muted);
    font-weight: 700;
}

.chat-texto {
    font-size: 14.5px;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.chat-texto a {
    color: var(--accent-text);
    font-weight: 600;
}

/* Avisos del sistema y del propio chat: en el flujo, pero apagados. */
.chat-sistema {
    padding: 4px 16px 4px 19px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-style: italic;
}

.chat-marca-privado {
    display: inline-block;
    margin-right: 6px;
    font-family: var(--font-display, inherit);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
}

/* --- Redactor -------------------------------------------------- */
.chat-redactor {
    flex: 0 0 auto;
    border-top: 1px solid var(--border-color);
    padding: 11px 12px;
    display: flex;
    gap: 9px;
    align-items: flex-end;
}

.chat-redactor textarea {
    flex: 1 1 auto;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 12px;
    font-family: var(--font-primary);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--text-main);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px 3px 10px 3px;
}

.chat-redactor textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: transparent;
}

.chat-enviar {
    appearance: none;
    flex: 0 0 auto;
    padding: 11px 20px;
    font-family: var(--font-display, inherit);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-inverse);
    background: var(--primary);
    border: 0;
    border-radius: 10px 3px 10px 3px;
    cursor: pointer;
    transition: background 0.18s ease;
}

.chat-enviar:hover {
    background: var(--primary-hover);
}

.chat-enviar:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.chat-contador {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    padding: 0 12px 8px;
    text-align: right;
}

.chat-contador.pasado {
    color: var(--primary);
    font-weight: 700;
}

/* --- Columna de conectados ------------------------------------- */
.chat-gente {
    padding: 14px 0;
    position: sticky;
    top: 86px;
    max-height: min(66vh, 620px);
    display: flex;
    flex-direction: column;
}

.chat-gente-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.chat-gente-lista li {
    padding: 0;
}

.chat-persona .chat-avatar {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.chat-persona {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: 0;
    padding: 6px 16px;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--nick, var(--text-main));
    transition: background 0.18s ease;
}

.chat-persona:hover {
    background: var(--bg-card-hover);
}

/* Etiqueta del equipo de moderación. Va en la lista de conectados para que
   se vea de un vistazo si hay alguien del equipo delante: disuade, y da a
   quién dirigirse cuando pasa algo. */
.chat-staff {
    margin-left: auto;
    padding: 1px 6px;
    font-family: var(--font-primary);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary);
    border-radius: 5px 2px 5px 2px;
}

/* Sin color de tipo y en gris: se distinguen de las cuentas de un vistazo,
   que es el argumento visual para registrarse. No se pueden pulsar porque
   no se les puede escribir en privado. */
.chat-persona.es-invitado {
    color: var(--text-muted);
    font-weight: 700;
    cursor: default;
}

.chat-persona.es-invitado:hover {
    background: none;
}

/* Salvo para el staff, que sí necesita alcanzarlos para moderar aunque no
   hayan escrito nada todavía. */
.chat-gente-lista.moderable .chat-persona.es-invitado {
    cursor: pointer;
}

.chat-gente-lista.moderable .chat-persona.es-invitado:hover {
    background: var(--bg-card-hover);
}

/* Los invitados salen en la lista como todo el mundo, en gris.

   Antes iban como un recuento al pie ("1 invitado sin cuenta") y no
   funcionaba: por muchas vueltas que se le diera al estilo, una línea
   suelta bajo una lista se lee como una sección rota, y además la lista
   mentía sobre cuánta gente había. Se probó con estilo de título y con
   un punto delante; las dos versiones fallaron por el mismo motivo. */

/* --- Menú de una persona --------------------------------------- */
/* El menú se cuelga del <body>, así que compite con las capas de TODO el
   sitio, no solo con las de /chat. El mapa que hay que respetar es:

     100  cabecera         900  barra social     940  widget del chat
    1000  menús de la nav  1100 modal del foro  1300 panel de emotes
   99999  aviso de cookies

   Va a 1200: por encima del widget (si no, se abría DETRÁS del panel
   flotante, que es donde más se usa) y por debajo del aviso de cookies.
   El 200 de antes venía de cuando el chat solo vivía en su propia página,
   donde lo más alto era la cabecera. */
.chat-menu {
    position: fixed;
    z-index: 1200;
    min-width: 178px;
    /* Red de seguridad para el menú del staff (diez opciones) en pantallas
       bajas: antes de salirse, se desplaza por dentro. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px 3px 10px 3px;
    box-shadow: var(--shadow-lg);
    padding: 5px 0;
}

.chat-menu-nombre {
    padding: 7px 14px 8px;
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}

.chat-menu button {
    appearance: none;
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 8px 14px;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 13.5px;
    color: var(--text-main);
    cursor: pointer;
}

.chat-menu button:hover {
    background: var(--bg-card-hover);
}

.chat-menu button:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    background: none;
}

.chat-menu button.peligro:hover {
    color: var(--primary);
}

/* --- Aviso fijado: la última noticia ---------------------------
   Es una CINTA, no una tarjeta. Va anclada entre la cabecera del hilo y
   el registro, así que compite en vertical con los mensajes: cuanto más
   plana, mejor. Una miniatura pequeña, el titular y nada más.

   El filo rojo de la izquierda es el mismo recurso que marca tus propios
   mensajes, y el barrido foil es el del resto del sitio, así que la tira
   se lee como parte del chat y no como un banner pegado encima. */
.chat-fijado {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px 9px 11px;
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    text-decoration: none;
    color: inherit;
}

.chat-fijado-media {
    flex: 0 0 auto;
    line-height: 0;
}

.chat-fijado-media img {
    width: 74px;
    height: 42px;
    object-fit: cover;
    border-radius: 8px 3px 8px 3px;
    display: block;
}

.chat-fijado-texto {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.chat-fijado-kicker {
    font-family: var(--font-display, inherit);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.chat-fijado-titular {
    font-family: var(--font-display, inherit);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-main);
    /* Dos líneas como techo: un titular largo no puede comerse el hilo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-fijado-fecha {
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* La flecha sí se mueve al pasar el ratón: es la señal de "esto lleva a
   otro sitio". Lo que no se mueve es la tira entera. */
.chat-fijado-ir {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 13px;
    color: var(--primary);
    transition: transform 0.18s ease;
}

.chat-fijado:hover .chat-fijado-ir {
    transform: translateX(3px);
}

.chat-fijado:hover .chat-fijado-titular {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-fijado:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

@media (max-width: 560px) {
    .chat-fijado-media img {
        width: 56px;
        height: 32px;
    }

    .chat-fijado-titular {
        font-size: 13.5px;
        -webkit-line-clamp: 2;
    }

    /* La fecha sobra en pantalla estrecha: el titular manda. */
    .chat-fijado-fecha {
        display: none;
    }
}

/* --- Avisos ---------------------------------------------------- */
.chat-aviso {
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 16px;
    font-size: 13px;
    color: var(--accent-text);
    background: #fffbeb;
    border-bottom: 1px solid var(--border-color);
}

.chat-aviso a {
    color: var(--accent-text);
    font-weight: 700;
}

/* --- Estado de sanción propia ---------------------------------
   Cuando te suspenden, el redactor se bloquea y aquí se explica por qué y
   hasta cuándo. Una caja de texto muerta sin explicación se lee como una
   web rota, no como una sanción. */
.chat-sancion {
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #9b2c2c;
    background: #fff5f5;
    border-bottom: 1px solid var(--border-color);
}

.chat-redactor textarea:disabled {
    background: var(--bg-card-hover);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* --- Herramientas de moderación --------------------------------
   El aspa de borrar solo existe para el staff y solo aparece al pasar por
   encima de la línea: moderar es la excepción, no el modo por defecto, y
   un botón permanente en cada mensaje ensuciaría la lectura de todos. */
.chat-linea.con-moderacion {
    position: relative;
}

.chat-borrar {
    appearance: none;
    position: absolute;
    top: 2px;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 15px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 6px 2px 6px 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.chat-linea:hover .chat-borrar,
.chat-borrar:focus-visible {
    opacity: 1;
}

.chat-borrar:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.chat-menu-staff {
    margin: 5px 0 3px;
    padding: 7px 14px 4px;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-display, inherit);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* El veto es la acción que más cuesta deshacer: se marca en rojo desde el
   principio, no solo al pasar por encima. */
.chat-menu button.grave {
    color: var(--primary);
    font-weight: 600;
}

/* En pantallas sin puntero el hover no existe, así que el aspa se queda
   siempre visible para el staff. */
@media (hover: none) {
    .chat-borrar {
        opacity: 1;
    }
}

/* --- Contenido editorial bajo el chat -------------------------- */
.chat-info {
    max-width: 760px;
    margin: 48px auto 0;
}

.chat-info section + section {
    margin-top: 34px;
}

.chat-info h2 {
    font-size: clamp(21px, 3.2vw, 26px);
    line-height: 1.2;
    color: var(--text-main);
    margin: 0 0 12px;
}

.chat-info h3 {
    font-size: 16.5px;
    color: var(--text-main);
    margin: 20px 0 7px;
}

.chat-info p,
.chat-info li {
    color: var(--text-muted);
    font-size: 15.5px;
    line-height: 1.7;
}

.chat-info p {
    margin: 0 0 12px;
}

.chat-info ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.chat-info li {
    margin-bottom: 6px;
}

.chat-info a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.chat-info a:hover {
    border-bottom-color: var(--primary);
}

/* --- Alternativa sin JavaScript -------------------------------- */
.chat-sinjs {
    padding: 22px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
}

/* --- Responsive ------------------------------------------------ */
@media (max-width: 980px) {
    .chat-app {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-canales,
    .chat-gente {
        position: static;
        max-height: none;
    }

    /* Los canales pasan a fila desplazable: en móvil una columna lateral
       se comería el ancho que necesita el texto. */
    .chat-canales {
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .chat-canales .chat-col-titulo {
        display: none;
    }

    .chat-canales-lista {
        display: flex;
        margin: 0;
    }

    .chat-canal {
        width: auto;
        white-space: nowrap;
        border-left: 0;
        border-bottom: 3px solid transparent;
        padding: 11px 15px;
    }

    .chat-canal[aria-current="true"] {
        border-left-color: transparent;
        border-bottom-color: var(--primary);
    }

    .chat-canal.es-privado[aria-current="true"] {
        border-bottom-color: var(--accent-text);
    }

    .chat-canal-num {
        margin-left: 4px;
    }

    .chat-hilo {
        height: min(70vh, 560px);
    }

    /* La lista de conectados va debajo y plegada: en móvil interesa el
       hilo, no quién está. */
    .chat-gente {
        display: block;
    }

    .chat-gente-lista {
        display: flex;
        flex-wrap: wrap;
        max-height: 132px;
    }

    .chat-gente-lista li {
        width: auto;
    }
}

@media (max-width: 560px) {
    /* La columna de la pegatina se mantiene también en móvil: es lo que
       hace reconocible quién habla de un vistazo. Solo se estrecha. */
    .chat-linea {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        padding: 1px 13px;
    }

    .chat-linea:not(.seguida) {
        padding-top: 6px;
    }

    .chat-avatar {
        width: 22px;
        height: 22px;
    }

    .chat-enviar {
        padding: 11px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-canal,
    .chat-enviar,
    .chat-persona,
    .chat-linea,
    .chat-fijado-ir {
        transition: none;
    }

    .chat-fijado:hover .chat-fijado-ir {
        transform: none;
    }
}