/* Estilos generales y del chat */
        #chat-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #f6571e;
            color: white;
            border: none;
            padding: 20px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            font-size: 20px;
            z-index: 1000;
        }
        #chat-button:hover {
            background-color: #fea568;
        }

        #chat-button.transparent {
            background-color: rgba(246, 87, 30, 0.5); /* Color con transparencia */
            box-shadow: none; /* Elimina la sombra para más transparencia */
        }

        .chat-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 350px;
            height: 570px;
            background-color: #f0f0f0;
            border-radius: 10px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 1000;
            transition: transform 0.3s ease, visibility 0.3s ease;
            transform: translateY(100%);
            visibility: hidden;
        }
        .chat-container.active {
            transform: translateY(0);
            visibility: visible;
        }
        .chat-header {
            background-color: #f6571e;
            color: white;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .chat-header-title {
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px; /* Espacio entre el título y los tres puntos */
        }
        .chat-expand {
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            margin-left: auto; /* Mueve el ícono de expandir hacia el lado derecho */
            margin-right: 10px; /* Añade espacio entre el ícono de expandir y cerrar */
            display: none; /* Oculto por defecto */
        }

        .chat-informacion {
            margin-left: 8px; /* Espacio entre los tres puntos y el título */
            display: inline-block;
            cursor: pointer;
            flex-grow: 1; /* Asegura que el título ocupe el espacio restante */
        }

        .chat-close {
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }

        @media screen and (min-width: 1024px) {
            .chat-expand {
                display: inline-block;
            }
        }
        #chat-box {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px;
            background-color: #e5ddd5;
            display: flex;
            flex-direction: column;
            max-height: 100%;
        }
        #chat-box::-webkit-scrollbar {
            width: 8px;
        }
        #chat-box::-webkit-scrollbar-thumb {
            background-color: #f6571e;
            border-radius: 10px;
        }
        #chat-box::-webkit-scrollbar-thumb:hover {
            background-color: #c64415;
        }
        #chat-box::-webkit-scrollbar-track {
            background-color: #f1f1f1;
            border-radius: 10px;
        }
        #chat-box {
            scrollbar-width: thin;
            scrollbar-color: #f6571e #f1f1f1;
        }
        .message {
            padding: 8px 12px 20px 12px;
            margin: 5px 0;
            border-radius: 10px;
            position: relative;
            max-width: 70%;
            display: inline-block;
            background-color: #ffffff;
            color: #000000;
        }
        .message.left {
            background-color: #ffffff;
            align-self: flex-start;
            border-top-left-radius: 0;
        }
        .message.right {
            background-color: #dcf8c6;
            align-self: flex-end;
            border-top-right-radius: 0;
        }
        .message.admin {
            color: red;
        }
        .message-time {
            font-size: 0.75em;
            color: #666;
            position: absolute;
            bottom: 5px;
            right: 10px;
        }
        #chat-form {
            display: flex;
            border-top: 1px solid #ccc;
            background-color: #f9f9f9;
            padding: 10px;
        }
        #message-input {
            flex-grow: 1;
            padding: 10px;
            border: none;
            border-radius: 20px;
            resize: none;
            background-color: #ffffff;
            outline: none;
        }
        #send-button {
            background-color: #f6571e;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            margin-left: 10px;
            text-align: center;
            justify-content: center;
            align-items: center;
        }
        #send-button:hover {
            background-color: #fea568;
        }
        @media screen and (max-width: 480px) {
            .chat-container {
                width: 90%;
                height: 60vh;
                right: 5%;
                bottom: 5%;
            }
        }
        @media screen and (max-width: 768px) {
            .chat-container {
                width: 80%;
                height: 70vh;
                right: 10%;
                bottom: 5%;
            }
        }
        .chat-date {
            text-align: center;
            color: #999;
            font-size: 0.9em;
            margin: 10px 0;
            border-top: 1px solid #ccc;
            padding-top: 5px;
        }
        .informacion-popup {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 1001;
            color: black;
        }
        .informacion-popup.active {
            opacity: 1;
            visibility: visible;
        }
        .informacion-popup h2 {
            margin-bottom: 20px;
        }
        .informacion-popup .back-boton {
            position: absolute;
            top: 10px;
            left: 10px;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
        }