.titulo-chat-en-linea {
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 19px;
    border-radius: 3px;
    border-bottom: 2px solid var(--color-azul-principal);
}

#CHAT-CONTENEDOR {
    display: flex;
    height: calc(100% - 33px);
}


/* ----- MODULO ESTADO-ETIQUETA-CANAL ----- */
.chat-estado-etiqueta {
    width: 10%;
    background-color: var(--color-gris-terciario);
    height: 100%;
    border-radius: 2px;
    position: relative;
    box-shadow: 6px 0 12px -4px rgba(0,0,0,0.35);
    margin-right: 10px;
    user-select: none;
}

.titulo-estado {
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid white;
    margin-top: 10px;
}

.actualizar-chat {
    display: block;
    width: 100%;
    padding-left: 8px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: var(--color-blanco);
    color: var(--color-azul-principal);
    margin-bottom: 2px;
    font-size: 14px;
    border: 1px solid var(--color-azul-principal);
    border-radius: 3px;
    user-select: none;
}

.actualizar-chat:hover {
    background-color: var(--color-azul-principal);
    cursor: pointer;
    color: var(--color-blanco);
}

.opcion-estado {
    display: block;
    width: 100%;
    padding-left: 8px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: var(--color-blanco);
    color: var(--color-azul-principal);
    margin-bottom: 2px;
    font-size: 14px;
}

.opcion-estado span {
    margin-left: 4px;
}

.opcion-estado:hover {
    background-color: var(--color-azul-principal);
    cursor: pointer;
    color: var(--color-blanco);
}

.titulo-etiqueta {
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid white;
    margin-top: 10px;
}

.opcion-etiqueta {
    display: block;
    width: 100%;
    padding-left: 8px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: var(--color-blanco);
    color: var(--color-azul-principal);
    margin-bottom: 2px;
    font-size: 14px;
}

.opcion-etiqueta:hover {
    background-color: var(--color-azul-principal);
    cursor: pointer;
    color: var(--color-blanco);
}

.titulo-canales {
    display: block;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid white;
    margin-top: 10px;
}

.opcion-canal {
    display: block;
    width: 100%;
    padding-left: 8px;
    padding-right: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: var(--color-blanco);
    color: var(--color-azul-principal);
    margin-bottom: 2px;
    font-size: 14px;
}

.opcion-canal:hover {
    background-color: var(--color-azul-principal);
    cursor: pointer;
    color: var(--color-blanco);
}

/* ----- FIN MODULO ESTADO-ETIQUETA-CANAL ----- */


/* ----- MODULO MENSAJES-BURBUJAS ----- */
.chat-mensajes {
    width: 20%;
    background-color: var(--color-blanco);
    height: 100%;
    border-radius: 2px;
    position: relative;
    box-shadow: 6px 0 12px -4px rgba(0,0,0,0.35);
    margin-right: 10px;
    user-select: none;
}

.buscador-filtro {
    display: block;
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

#BUSCAR-CHAT-MENSAJES {
    width: 85%;
    padding: 5px;
    border: 1px solid var(--color-gris-terciario);
    border-radius: 3px;
    height: 30px;
    font-size: 16px;
}

#BUSCAR-CHAT-MENSAJES:hover {
    border: 1px solid var(--color-azul-principal);
}

#BUSCAR-CHAT-MENSAJES:focus {
    border: 1px solid var(--color-negro);
    outline: none;
}

.buscador-filtro i {
    margin-left: 2.4%;
    padding: 6px;
    background-color: var(--color-gris-terciario);
    border-radius: 3px;
    height: 29px;
}

.buscador-filtro i:hover {
    cursor: pointer;
    background-color: var(--color-azul-principal);
    color: var(--color-blanco);
}

#CONTENEDOR-CHAT-BURBUJA {
    overflow-y: auto;
    height: calc(100% - 8%);
}

#CONTENEDOR-CHAT-BURBUJA::-webkit-scrollbar {
    width: 0;
}

.chat-burbuja {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    height: 70px;
    margin-bottom: 5px;
    display: flex;
}

.chat-burbuja:hover {
    background-color: var(--color-gris-terciario);
    cursor: pointer;
}

.chat-avatar-burbuja {
    display: block;
    width: 18%;
    height: 100%;
    text-align: center;
    align-content: center;
    position: relative;
}

.chat-avatar-burbuja .img-avatar-burbuja {
    width: 85%;
    height: 85%;
}

.chat-avatar-burbuja .img-red-social {
    width: 32%;
    height: 30%;
    position: absolute;
    bottom: 0;
    right: 0;
}

.chat-avatar-burbuja .img-red-social:hover {
    cursor: pointer;
}

.chat-avatar-burbuja .img-agente-asignado {
    width: 42%;
    height: 38%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 50%;
}

.chat-avatar-burbuja .img-agente-asignado:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
}

.chat-contenido-burbuja {
    display: block;
    width: 82%;
    padding-left: 5px;
    padding-top: 5px;
    position: relative;
}

.chat-nombre-usuario {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-azul-principal);
}

.chat-hora {
    font-size: 10px;
    color: var(--color-gris-oscuro);
}

.chat-fecha {
    font-size: 10px;
    color: var(--color-gris-oscuro);
    margin-right: 6px;
}

.badge-no-leidos {
    background-color: var(--color-rojo);
    border-radius: 50%;
    width: 18px;            /* ancho fijo */
    height: 18px;           /* alto fijo */
    display: flex;          /* permite centrar */
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: var(--color-blanco);
    position: absolute;
    right: 2px;
    bottom: 17px;
}

.chat-contenido-burbuja .ico-etiqueta-seleccion {
    color: var(--color-negro);
    font-size: 15px;

}

.chat-contenido-burbuja .ico-etiqueta-seleccion:not(:first-child) {
    margin-left: 0px;
    font-size: 14px;
}

.chat-contenido-burbuja .ico-etiqueta-seleccion:hover {
    color: var(--color-azul-principal);
}

.chat-ultimo-mensaje {
    display: block;
    font-size: 14px;
    color: var(--color-negro);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}

/* ----- FIN MODULO MENSAJES-BURBUJAS ----- */


/* ----- MODULO CONVERSACION ----- */
.chat-conversacion {
    width: 50%;
    background-color: var(--color-blanco);
    height: 100%;
    border-radius: 2px;
    position: relative;
    box-shadow: 6px 0 12px -4px rgba(0,0,0,0.35);
    margin-right: 10px;
}

.conversacion-header {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid var(--color-gris-terciario);
    display: flex;
    height: 65px !important;
}

.conversacion-header-izquierda {
    width: 50%;
}

.conversacion-header-izquierda .conversacion-avatar {
    width: 15%;
    height: 100%;
}

.conversacion-header-izquierda .conversacion-usuario {
    width: 80%;
    padding-left: 5px;
    font-size: 18px;
    color: var(--color-negro);
}

.conversacion-header-derecha {
    width: 50%;
    justify-content: right;
    display: flex;
}

.contenedor-estado-conversacion {
    margin-right: 20px;
    width: 232px;
    display: flex;
}

.mover-finalizado {
    align-content: center;
    color: var(--color-blanco);
    font-size: 15px;
}

.mover-finalizado span {
    padding-top: 5px;
    padding-bottom: 6px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--color-verde);
    border-radius: 3px;
    transition: opacity 0.2s ease;
}

.mover-finalizado span:hover {
    cursor: pointer;
    opacity: 0.7;
}

.seleccion-estado-conversacion {
    width: 30px;
    align-content: center;
    text-align: center;
    font-size: 19px;
    transition: opacity 0.2s ease;
}

.seleccion-estado-conversacion:hover {
    cursor: pointer;
    opacity: 0.7;
}

.seleccion-estado-conversacion i {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: var(--color-verde);
    border-radius: 3px;
    color: var(--color-blanco);
}

.perfil-asignar-agente {
    width: 52px;
    align-content: center;
    text-align: center;
    margin-left: 3px;
}

.perfil-asignar-agente .conversacion-avatar-agente {
    width: 100% !important;
    height: 100%;
    border-radius: 25px;
}

.perfil-asignar-agente .conversacion-avatar-agente:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,0.35);
}

.icono-expandir-conversacion {
    font-size: 24px;
    color: var(--color-negro);
    cursor: pointer;
}

.icono-expandir-conversacion i {
    margin-right: 1px;
}

.icono-expandir-conversacion i:hover {
    color: var(--color-gris-oscuro);
}

.activoChat {
    background-color: var(--color-gris-terciario);
}

/* ----- CHAT EN VIVO ----- */
.conversacion-chat-en-vivo {
    height: 634px;
    overflow-y: auto;
    padding: 10px;
}

.inicio-conversacion {
    text-align: center;
    color: var(--color-gris-oscuro);
    font-style: italic;
    font-size: 14px;
    padding: 5px;
    width: 100%;
    margin-bottom: 20px;
}

.burbuja-mensaje-cliente {
    background-color: var(--color-gris-terciario);
    padding: 7px;
    border-radius: 7px;
    margin-bottom: 20px;
    text-align: left;
    width: fit-content;
    max-width: 500px;
    margin-right: auto;
}

.mensaje-cliente {
    display: block;
}

.hora-mensaje-cliente {
    font-size: 11px;
    color: var(--color-gris-oscuro);
    margin-top: 5px;
}

.burbuja-mensaje-agente {
    background-color: var(--color-azul-principal);
    color: var(--color-blanco);
    padding: 7px;
    border-radius: 7px;
    margin-bottom: 20px;
    text-align: right;
    width: fit-content;
    max-width: 500px;
    margin-left: auto;
}

.mensaje-agente {
    display: block;
}

.hora-mensaje-agente {
    font-size: 11px;
    color: var(--color-gris-terciario);
    margin-top: 5px;
}

.contenedor-imagen-chat {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
}

.img-chat {
    max-width: 220px;
    border-radius: 8px;
    cursor: pointer;
}

/* Contenedor del sticker */
.contenedor-sticker-chat {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 90px;   /* 🔥 controla tamaño máximo */
    max-height: 90px;
}

/* Imagen del sticker */
.sticker-chat {
    width: 100%;
    height: auto;
    border-radius: 20px;      /* 🔥 si quieres más redondo súbelo a 20px */
    object-fit: contain;
}
/* ----- FIN CHAT EN VIVO ----- */

.conversacion-footer {
    border-top: 1px solid var(--color-gris-oscuro);
}

.entrada-texto {
    position: relative;
}

.conversacion-footer textarea {
    width: 100%;
    height: 60px;
    border: none;
    resize: none;
    padding: 10px;
    font-size: 16px;
}

.opciones-entrada {
    display: flex;
    border-top: 1px solid var(--color-gris-oscuro);
}

.opciones-entrada-izquierda {
    width: 50%;
    height: 100%;
}

.ico-opcion-mejora {
    padding: 5px;
    border: 1px solid var(--color-gris-oscuro);
    border-radius: 3px;
    margin-right: 5px;
    margin-top: 5px;
}

.ico-opcion-mejora:hover {
    cursor: pointer;
    background-color: var(--color-azul-claro);
    color: var(--color-blanco);
    border: 1px solid var(--color-azul-claro);
}

.opciones-entrada-derecha {
    width: 50%;
    height: 100%;
    text-align: right;
}

.ico-opcion-entrada {
    padding: 5px;
    border: 1px solid var(--color-gris-oscuro);
    border-radius: 3px;
    margin-left: 5px;
}

.ico-opcion-entrada:hover {
    cursor: pointer;
    background-color: var(--color-azul-claro);
    color: var(--color-blanco);
    border: 1px solid var(--color-azul-claro);
}

.opciones-entrada-derecha button {
    background-color: var(--color-azul-claro);
    color: var(--color-blanco);
    border: none;
    padding: 8px;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.opciones-entrada-derecha button:hover {
    opacity: 0.8;
}

#btnAudio.grabando {
    color: red !important;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#grabandoContainer {
    display:none;
    align-items:center;
    gap:8px;
    height: 60px;
    padding-left: 3px;
}

#grabandoPunto {
    width:12px;
    height:12px;
    border-radius:50%;
    background:red;
    animation:pulse 1s infinite;
}

#grabandoTiempo {
    color:red; 
    font-weight:bold;
}

.emoji-panel {
    position: absolute;
    bottom: 70px; /* ajusta si lo necesitas */
    right: 10px;
    width: 280px;
    height: 220px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 50;
}

.emoji-panel span {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.1s;
}

.emoji-panel span:hover {
    transform: scale(1.25);
}

.emoji-activo {
    background-color: var(--color-azul-claro) !important;
    color: white !important;
    border-color: var(--color-azul-claro) !important;
}

#previewImagenes {
    display:none;
    position:absolute;
    bottom:70px;         /* Justo encima del textarea */
    left:10px;
    right:10px;
    padding:8px;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
    z-index:3;
    flex-wrap:wrap;
    gap:8px;
}

.preview-item {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 12px;
    border-radius: 50%;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}



/* ----- FIN MODULO CONVERSACION ----- */


/* ----- MODULO HERRAMIENTAS ----- */
.chat-herramientas {
    width: 20%;
    background-color: var(--color-blanco);
    height: 100%;
    border-radius: 2px;
    position: relative;
}

.chat-header-herramientas {
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
    border-radius: 3px;
    display: flex;
    border-bottom: 1px solid var(--color-gris-terciario);
}

.chat-header-herramientas .d-none {
    display: none;
}

.ico-header-heramientas {
    width: 33.33%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--color-negro);
}

.ico-header-heramientas:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
    background-color: var(--color-gris-terciario);
    border-radius: 2px;
}

.ico-header-heramientas.activo {
    background-color: var(--color-gris-terciario);
    color: var(--color-azul-principal);
    border-radius: 2px;
}

/* ----- Usuarios ----- */
.contenido-usuario-herramientas {
    padding: 10px;
    width: 100%;
    height: 660px;
    background-color: var(--color-gris-terciario);
    overflow-y: auto;
}

.titulo-sistema {
    color: var(--color-gris-oscuro);
    padding: 5px;
    margin-bottom: 5px;
}

.img-usuario-herramientas {
    text-align: left;
    padding: 5px;
    margin-bottom: 5px;
}

.img-usuario-herramientas img {
    border-radius: 3px;
    width: 80px;
    height: 85px;
}

.img-usuario-herramientas img {
    cursor: pointer;
}

.canal-usuario-herramientas {
    padding: 5px;
    margin-bottom: 5px;
    display: flex;
    align-content: center;
}

.canal-usuario-herramientas .canal-nombre-herramientas {
    align-content: center;
    margin-left: 5px;
    color: var(--color-gris-oscuro);
}

.nombre-usuario-herramientas {
    font-size: 14px;
    padding: 5px;
    margin-bottom: 5px;
    position: relative;
}

.usuario-herramientas {
    color: var(--color-gris-oscuro);
}

.valor-usuario-herramientas {
    position: absolute;
    right: 22px;
}

.nombre-usuario-herramientas i {
    position: absolute;
    right: 0;
    bottom: 5px;
}

.nombre-usuario-herramientas i:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

.nombres-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
}

.label-nombres{
    color: var(--color-gris-oscuro);
}

.valor-nombres {
    position: absolute;
    right: 22px;
}

.nombres-herramientas i {
    position: absolute;
    right: 0;
    bottom: 5px;
}

.nombres-herramientas i:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

.apellidos-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
}

.label-apellidos {
    color: var(--color-gris-oscuro);
}

.valor-apellidos {
    position: absolute;
    right: 22px;
}

.apellidos-herramientas i {
    position: absolute;
    right: 0;
    bottom: 5px;
}

.apellidos-herramientas i:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

.telefono-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
}

.valor-telefono {
    margin-left: 5px;
}

.telefono-herramientas .ico-editar-telefono {
    margin-left: 5px;
}

.telefono-herramientas .ico-editar-telefono:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

.email-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
}

.valor-email {
    margin-left: 5px;
}

.email-herramientas .ico-editar-email {
    margin-left: 5px;
}

.email-herramientas .ico-editar-email:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

.subscrito-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
}

.label-subscrito {
    color: var(--color-gris-oscuro);
}

.valor-subscrito {
    position: absolute;
    right: 0;
}

.ultima-accion-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
}

.label-ultima-accion {
    color: var(--color-gris-oscuro);
}

.valor-ultima-accion {
    position: absolute;
    right: 0;
}

.subscrito-atraves-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
}

.label-subscrito-atraves {
    color: var(--color-gris-oscuro);
}

.valor-subscrito-atraves {
    position: absolute;
    right: 0;
    font-weight: 500;
}

.estado-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
    height: 34px;
    align-content: center;
}

.label-estado {
    color: var(--color-gris-oscuro);
}

.content-estado-herramientas {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 3px;
    background-color: var(--color-azul-principal);
    color: var(--color-blanco);
    position: absolute;
    right: 22px;
    bottom: 5px;
}

.estado-herramientas .editar-etiqueta {
    position: absolute;
    right: 0;
}

.estado-herramientas .editar-etiqueta:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

.etiqueta-herramientas {
    padding: 5px;
    font-size: 14px;
    margin-bottom: 5px;
    position: relative;
    height: 34px;
    align-content: center;
}

.label-etiqueta {
    color: var(--color-gris-oscuro);
}

.content-etiqueta-herramientas {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    padding-right: 7px;
    border-radius: 3px;
    background-color: var(--color-blanco);
    color: var(--color-azul-principal);
    position: absolute;
    right: 22px;
    bottom: 5px;
}

.etiqueta-herramientas .editar-etiqueta {
    position: absolute;
    right: 0;
}

.etiqueta-herramientas .editar-etiqueta:hover {
    cursor: pointer;
    color: var(--color-azul-principal);
}

/* ----- Historial ----- */
.contenido-historial-herramientas {
    padding: 10px;
    width: 100%;
    height: 78%;
    background-color: var(--color-gris-terciario);
}

/* ----- Variables ----- */
.contenido-variables-herramientas {
    padding: 10px;
    width: 100%;
    height: 78%;
    background-color: var(--color-gris-terciario);
}

.chat-footer-herramientas {
    font-size: 14px;
}

.status-respuesta-herramientas {
    margin-top: 10px;
    background-color: var(--color-verde);
    padding: 3px;
    color: var(--color-blanco);
    text-align: center;
    border-radius: 3px;
    margin-bottom: 8px;
}

.estatus-respuesta-quien {
    font-weight: 500;
}

.contador-respuesta-herramientas {
    margin-bottom: 5px;
    text-align: center;
    border: 1px solid var(--color-amarillo);
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 3px;
}

.link-chat-en-vivo {
    color: var(--color-azul-claro);
}

.link-chat-en-vivo:hover {
    cursor: pointer;
    text-decoration: underline;
}

/* ----- FIN MODULO HERRAMIENTAS ----- */

/* ----- CHAT NO SELECCIONADO ----- */
.conversacion-no-seleccionada {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    font-size: 20px;
    color: var(--color-gris-oscuro);
    padding-left: 15px;
    padding-right: 15px;
}

.conversacion-no-seleccionada img {
    width: 120px;
}

.conversacion-no-seleccionada span {
    margin-left: 10px;
}
/* ----- FIN CHAT NO SELECCIONADO ----- */


/* =================================== */
/* =========== MEDIA QUERYS ========== */

/* Estilos cuando el ANCHO sea 1440px o menos (MONITORES MEDIANOS) */
@media (max-width: 1440px) {

    /* CHAT ESTADO-ETIQUETA */
    .chat-estado-etiqueta {
        width: 12%;
    }

    /* CHAT MENSAJES */
    .chat-mensajes {
        width: 23%;
    }

    .chat-avatar-burbuja .img-avatar-burbuja {
        width: 85%;
        height: 75%;
    }

    .chat-burbuja {
        height: 65px;
    }

    .chat-avatar-burbuja .img-avatar-burbuja {
        width: 82%;
        height: 82%;
    }

    .chat-contenido-burbuja {
        display: block;
        width: 82%;
        padding-left: 5px;
        padding-top: 4px;
    }

    /* CHAT CONVERSACION */
    .chat-conversacion {
        width: 45%;
    }

    .seleccion-estado-conversacion {
        margin-left: 1px;
    }

    .perfil-asignar-agente .conversacion-avatar-agente {
        width: 35px;
        height: 100%;
    }

    .opciones-entrada-izquierda {
        width: 35%;
    }

    .opciones-entrada-derecha {
        width: 65%;
    }

    .ico-opcion-mejora {
        margin-right: 3px;
    }

    .ico-opcion-entrada {
        margin-left: 3px;
    }

    /* CHAT HERRAMIENTAS */
    .chat-herramientas {
        width: 20%;
    }

    .titulo-sistema {
        font-size: 15px;
    }

    .img-usuario-herramientas img {
        width: 65px;
        height: 65px;
    }

    .canal-usuario-herramientas img {
        width: 20px;
        height: 20px;
    }

    .canal-nombre-herramientas {
        font-size: 14px;
    }

    .telefono-herramientas, .email-herramientas, .nombre-usuario-herramientas, .nombres-herramientas, .apellidos-herramientas, 
    .subscrito-herramientas, .ultima-accion-herramientas, .subscrito-atraves-herramientas, .estado-herramientas,
    .etiqueta-herramientas {
        font-size: 12px;
    }

    .valor-apellidos {
        right: 18px;
    }

    .apellidos-herramientas i {
        bottom: 4px;
    }

    .chat-ultimo-mensaje {
        font-size: 13px;
    }

    .conversacion-no-seleccionada img {
        width: 60px;
    }

}

/* Estilos cuando la ALTURA sea 900px o menos (MONITORES MEDIANOS) */
@media (max-height: 900px) {

    /* CHAT CONVERSACION */
    .conversacion-chat-en-vivo {
        height: 452px;
    }

    .conversacion-header {
        height: auto;
    }

    .conversacion-header-izquierda .conversacion-avatar {
        width: 18%;
    }

    /* CHAT HERRAMIENTAS */
    .contenido-usuario-herramientas {
        height: 485px;
        overflow-y: auto;
    }

}

/* =========== FIN MEDIA QUERYS ========== */
/* ======================================= */