.marcelacontenedor {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 90vh;
}

.chatcontainer {
    width: 100%;
    overflow-y: auto; /* Scroll vertical activado */
    overflow-x: hidden; /* Evita el scroll horizontal en todo el contenedor */
    background-color: #fff;
    flex-direction: column;
    justify-content: flex-end;
    display: flex;
    height: 100vh; /* Altura completa de la ventana */
}

.chatcontainertareas {
    width: 100%!important;
    overflow-y: auto; /* Scroll vertical activado */
    overflow-x: hidden; /* Evita el scroll horizontal en todo el contenedor */
    background-color: #fff;
    flex-direction: column;
    justify-content: initial;
    display: flex;
    
}



#chatMessages {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Asegura el scroll vertical para los mensajes */
    overflow-x: hidden; /* Evita el scroll horizontal innecesario */
}

.message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    max-width: 80%; /* Limita el ancho de los mensajes para que no ocupen toda la pantalla */
    font-size: 24px; /* Aumenta el tamaño del texto */
}

.message-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.message-content {
    padding: 10px;
    border-radius: 10px;
    min-width: 99%;
    margin-left: auto;
    margin-right: auto;
    /*white-space: normal;*/ /* Permite que el texto fluya en una línea normal sin saltos innecesarios */
    /*word-wrap: break-word;*/ /* Asegura que las palabras largas se rompan cuando sea necesario */
    /*line-height: 1.5;*/ /* Ajusta la altura de línea para mejorar la legibilidad */
}

.user-message {
    align-self: flex-end; /* Alineado a la derecha */
    background-color: #dcf8c6; /* Color verde claro estilo WhatsApp */
    color: #000;
    border-radius: 20px 20px 0px 20px; /* Bordes redondeados como WhatsApp */
    padding: 10px 15px;
    max-width: 80%; /* Ancho máximo del mensaje */
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Sombra para dar profundidad */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bot-message {
    align-self: flex-start; /* Alineado a la izquierda */
    background-color: #fff; /* Fondo blanco para el bot */
    color: #000;
    min-width: 100%; /* Ancho máximo del mensaje */
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-top: 10px;
    margin-bottom: 10px;
}

#inputContainer {
    display: flex;
    margin-top: 10px;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 25px;
}

#userInput {
    flex: 1;
    padding: 15px; /* Aumenta el padding para hacer el campo más grande */
    font-size: 18px; /* Aumenta el tamaño del texto */
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 70px; /* Asegura que el input tenga un buen tamaño */
}

.sendButton {
    padding: 15px 20px;
    margin-left: 10px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px; /* Aumenta el tamaño del texto en el botón */
}

    .sendButton:hover {
        background-color: #01A982;
    }

/* Asegura que el contenedor del chat siempre esté visible y ajustado al contenido */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.message-text {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 10px;
    max-width: 70%;
}

.nombre {
    font-size: 60px;
}

.barrahistoria {
    border-right: dotted 1px;
    border-color: #371460;
}
.loadcontenedor {

    width: 100px;
    height: 100px; /* Asegúrate de que la altura también sea grande lo suficiente para centrar verticalmente */
    display: flex;
    justify-content: center; /* Para centrar horizontalmente */
    align-items: center; /* Para centrar verticalmente */
}
.loader {

    border-radius: 50%;
    border-top: 16px solid #01A982;
    width: 64px;
    height: 64px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    box-shadow: 6px 6px 6px 6px rgba(0,0,0,0.10);
}
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    /* Estilo general del editor */
    trix-editor {
    height: 500px;
    max-height: 500px;
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
}

/* Estilo de botones del toolbar */
trix-toolbar .trix-button {
    background-color: #007bff;
    color: white;
    border-radius: 3px;
    padding: 5px;
    margin: 2px;
}

/* Estilo de enlaces dentro del editor */
trix-editor a {
    color: #007bff;
    text-decoration: underline;
}

/* Estilo de las imágenes dentro del editor */
trix-editor img {
    max-width: 100%;
    height: auto;
}

/* Estilos para diferentes tipos de fuente */
.arial {
    font-family: Arial, sans-serif;
}

.times {
    font-family: 'Times New Roman', serif;
}

.georgia {
    font-family: Georgia, serif;
}

#fontSelector {
    margin-right: 10px;
    padding: 5px;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

/* Definir las clases CSS para las fuentes */
.font-arial {
    font-family: Arial, sans-serif;
}

.font-times {
    font-family: 'Times New Roman', serif;
}

.font-courier {
    font-family: 'Courier New', monospace;
}

.font-georgia {
    font-family: Georgia, serif;
}

.font-verdana {
    font-family: Verdana, sans-serif;
}

.trix-container {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.trix-container__inner {
    background: var(--color-white);
    box-shadow: -4px 4px 20px rgba(var(--rgb-black), 0.1);
    flex: 1;
    padding: 0 1.5em 1.5em 1.5em;
}

@media (min-width: 48em) {
    .trix-container {
        margin-inline: auto;
        position: relative;
        width: min(100%, 43em);
    }

    .trix-container__inner {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        padding: 1em 2.5em 2.5em 2.5em;
        position: relative;
        z-index: 2;
    }

    .trix-container:before {
        background: var(--color-white);
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        bottom: 0;
        box-shadow: -2px 2px 10px rgba(var(--rgb-black), 0.1);
        content: '';
        left: -1em;
        position: absolute;
        right: 0;
        top: 1em;
        z-index: 1;
    }
}

.chatinput {
    width: 100%;
    height: 160px;
    padding: 10px 10px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 20px;
    resize: none;
}

.donut-button {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    padding: 2px;
    background-color: #000;
    color: white;
    /* Color de fondo */
}

    .donut-button:hover {
        background-color: #7a517a; /* Cambia de color al pasar el ratón */
    }

    .donut-button::before,
    .donut-button::after {
        content: "";
        display: block;
        position: absolute;
        top: -50%;
        left: -50%;
    }

    .donut-button::after {
        top: -10%;
        left: -30%;
    }

/* Identificar cuando el div tiene una tabla para tema de comparaciones */
/* Aplica el estilo solo a la tabla dentro del div con ID #chatMessages */
#chatMessages table {
    border-collapse: collapse;
    width: 100%;
}

    #chatMessages table th,
    #chatMessages table td {
        border: 1px solid black; /* Agrega líneas horizontales y verticales */
        padding: 8px;
        text-align: left;
    }

    #chatMessages table th {
        background-color: #f2f2f2;
    }
#chatMessages code {
    display: block;
    padding: 1px;
    background-color: #191212; /* Fondo oscuro típico de Visual Studio */
    border-radius: 8px;
    color: #dcdcdc; /* Color de texto claro */
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto; /* Desplazamiento horizontal si el contenido se desborda */
    white-space: pre-wrap; /* Mantener los saltos de línea */
}

    /* Personalizando el color de las palabras clave */
    #chatMessages code .hljs-keyword,
    #chatMessages code .hljs-selector-tag {
        color: #569cd6; /* Azul brillante */
    }

    #chatMessages code .hljs-string,
    #chatMessages code .hljs-literal {
        color: #d69d85; /* Amarillo claro */
    }

    #chatMessages code .hljs-comment {
        color: #6a9955; /* Verde grisáceo */
    }

    #chatMessages code .hljs-function {
        color: #dcdcaa; /* Amarillo claro */
    }

    #chatMessages code .hljs-title {
        color: #4ec9b0; /* Verde claro */
    }

    /* Resaltando las etiquetas HTML */
    #chatMessages code .hljs-tag {
        color: #ff7b72; /* Color más claro para las etiquetas HTML */
    }

    #chatMessages code .hljs-attr {
        color: #f78c6c; /* Color claro para los atributos HTML */
    }

    #chatMessages code .hljs-name {
        color: #ffd700; /* Amarillo brillante para los nombres de las etiquetas */
    }
#preview table {
    border-collapse: collapse;
    width: 100%;
}

    #preview table th,
    #preview table td {
        border: 1px solid black; /* Agrega líneas horizontales y verticales */
        padding: 8px;
        text-align: left;
    }

    #preview table th {
        background-color: #f2f2f2;
    }

#preview code {
    display: block;
    padding: 1px;
    background-color: #1e1e1e; /* Fondo oscuro típico de Visual Studio */
    border-radius: 8px;
    color: #dcdcdc; /* Color de texto claro */
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    overflow-x: auto; /* Desplazamiento horizontal si el contenido se desborda */
    white-space: pre-wrap; /* Mantener los saltos de línea */
}

.grabando {
    animation: blinker 1.20s infinite;
}

@keyframes blinker {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
/* =======================================================
   CORRECCIÓN SUMMERNOTE PANTALLA COMPLETA (FULLSCREEN)
   ======================================================= */

/* 1. Forzar que el editor ocupe la capa más alta (Z-Index) */
.note-editor.note-frame.fullscreen {
    z-index: 99999 !important; /* Encima de menús, modales y loaders */
    background-color: #ffffff !important; /* Fondo blanco obligatorio */
    position: fixed !important; /* Fijo a la pantalla */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    /* 2. Asegurar que el área de escritura tenga fondo blanco */
    .note-editor.note-frame.fullscreen .note-editable {
        background-color: #ffffff !important;
    }

    /* 3. Corrección para que la barra de herramientas no se pierda */
    .note-editor.note-frame.fullscreen .note-toolbar {
        z-index: 100000 !important; /* Un poco más que el editor para que los dropdowns funcionen */
    }

/* 4. Opcional: Si querías "bordes" o un margen visual (estilo hoja) en fullscreen */
/* Si prefieres que ocupe TODA la pantalla sin bordes, ignora este bloque. */
/*
.note-editor.note-frame.fullscreen .note-editable {
    max-width: 1000px;
    margin: 0 auto;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
*/


.marcyface64 {
    width: 64px!important;
    height: 64px!important;
    border-radius: 50%;
    
}

.marcyface64 {
    width: 96px;
    height: 96px;
    border-radius: 50%;
}