/* Contenedor principal del chat */
		
		 .chat-container {
            display: flex;
            flex-direction: column;
            height: 85vh; /* Ocupa toda la altura de la ventana */
            width: 100%;
            margin: 0 auto;
            border: 1px solid #ccc;
            background: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        
        }

        /* Encabezado */
        .chat-header {
            background-color:#ACBBD2;
            color: white;
            padding: 5px;
			height:50px;
            
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        /* Área de mensajes */
        .chat-messages {
            flex-grow: 1; /* Toma todo el espacio disponible entre el encabezado y la barra de entrada */
            padding: 10px;
            background: white;
            margin-bottom: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column; /* Mantener los mensajes en el orden original */
            overflow-y: auto; /* Barra de desplazamiento interna para los mensajes */
            max-height: 100%; /* Se asegura de que el contenedor no se estire más allá de la ventana */
        }

        /* Estilos de los mensajes */
        .chat-message {
            max-width: 75%;
            padding: 8px;
            border-radius: 8px;
            margin-bottom: 5px;
            word-wrap: break-word;
        }

        .user {
            align-self: flex-end;
        }
 
        .bot {
            align-self: flex-start;
			
        }
		
		 .user .flex-grow-1 {
            background-color: #DEF1FA;
            color: #000000;
        }
 
        .bot .flex-grow-1 {
            background-color: #e9ecef;
        }

.chat-messagever {
    position: relative;
    
    padding: 10px 15px;
    margin: 5px;
    border-radius: 15px;

}

/* Agrega la puntica en la parte superior izquierda */
.chat-messagever::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #e0e0e0 transparent transparent transparent;
}

 
 
 
        /* Barra de entrada de mensajes */
        .chat-input {
            display: flex;
            padding: 0px;
            background-color: white;
            border-top: 1px solid #ccc;
            position: sticky;
            bottom: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 10;
        }

        /* Input del mensaje */
        .chat-input input {
            flex-grow: 1;
            margin-right: 10px;
        }

        /* Botón de enviar */
        .chat-input button {
            flex-shrink: 0;
        }

.file-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 250px; /* Tamaño del área de previsualización */
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    position: relative;
}

.preview-content img, 
.preview-content embed {
    max-width: 90%;
    max-height: 220px;
    border-radius: 8px;
}

.remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}
		

/* Estilo del div en pantalla completa */
.pantalla-completa {
    position: fixed !important; /* Se asegura que ocupe toda la pantalla */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: auto;
}

/* Botón de cierre */
.cerrar-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    border: none;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10000; /* Asegurar que esté por encima */
}

.ck-toolbar .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
   
    color: #FFFFFF !important;
    border: none !important;
}

.ck-toolbar .btn-calificar {
    background-color: #33CC33 !important; /* Gris Bootstrap */
	
}

.ck-toolbar .btn-adjuntar {
    background-color: #0033CC !important; /* Gris Bootstrap */
}
	
.ck-toolbar .btnck span {
    color: #FFFFFF !important;
}	
.ck-toolbar .btnck i {
    color: #FFFFFF !important;
}

.ck-editor {
    width: 100% !important;
}

.ck-editor__editable {
    width: 100% !important;

  
    min-height: auto !important; /* Evita altura mínima innecesaria */
	padding-left:8px !important;
	padding-right: 8px !important;
	padding-bottom:0px !important;  /* Reduce el padding interno */
	padding-top:0px !important;  /* Reduce el padding interno */
   
}

.ck-toolbar-ajustada {
    display: flex;
    flex-wrap: wrap;
    max-width: 100% !important;
    overflow: hidden;
}

.ck-toolbar__items {
    display: flex;
    flex-wrap: wrap;
}

.ck-custom-buttons {
    display: flex;
    align-items: center;
    gap: 5px;
}

#buscar {
    width: 100%;
}

#resultado {
    position: absolute;
    width: 100%;
    max-height: 200px; /* Evita que sea demasiado alto */
    overflow-y: auto; /* Permite desplazarse si hay muchos resultados */
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
}

.input-container {
  display: flex;
  align-items: flex-end; /* mantiene el botón abajo */
  gap: 8px; /* espacio entre textarea y botón */
}

.input-container textarea {
  flex: 1;              /* ocupa todo el espacio disponible */
  min-height: 40px;     /* altura mínima */
  max-height: 150px;    /* altura máxima */
  resize: none;         /* evita el "arrastrar" manual */
  overflow-y: auto;     /* agrega scroll si pasa el límite */
}