:root {
    /* Modo claro */
    --background-color: #f0f2f5;
    --text-color: #333;
    --background-color-dark: #1e1e1e;
    --text-color-dark: #ccc;
--primary-color: #6C63FF; /* Morado */
--secondary-color: #5A55D6; /* Morado oscuro */
--accent-color: #FFC107; /* Amarillo */
--text-color: #333;
--background-color: #f0f2f5;
--card-background: #fff;
--transition-speed: 0.3s;
--border-radius: 10px;
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.dark-mode {
--background-color: var(--background-color-dark);
--text-color: var(--text-color-dark);
/* ... asignar otras variables de color para el modo oscuro ... */
}

/* Estilos generales */
body, html {
height: 100%;
margin: 0;
font-family: 'Poppins', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
display: flex;
flex-direction: column;
}
header {
background-color: var(--primary-color);
padding: 20px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}

header h1 {
margin: 0;
font-size: 28px;
color: white;
}

.auth-buttons {
display: flex;
align-items: center;
}

.auth-buttons button {
margin-left: 10px;
padding: 8px 16px;
background-color: #fff;
color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 5px;
cursor: pointer;
transition: background-color var(--transition-speed) ease;
}

.auth-buttons button:hover {
background-color: var(--secondary-color);
color: #fff;
}

main {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

#chat-container {
width: 100%;
max-width: 700px;
background-color: var(--card-background);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}

#chat-box {
flex: 1;
overflow-y: auto;
padding: 20px;
background-image: url('https://www.transparenttextures.com/patterns/diamond-upholstery.png');
}
#chat-box ul {
list-style: none;
padding: 0;
margin: 0;
}

#chat-box li {
margin-bottom: 15px;
padding: 10px 15px;
border-radius: var(--border-radius);
background-color: #e6ffe6;
max-width: 80%;
word-wrap: break-word;
animation: fadeIn 0.5s ease;
}
#chat-box li.chatbot-message {
background-color: var(--primary-color); /* Morado */
color: white;
align-self: flex-start;
}

#chat-box li.user-message {
background-color: #ccffcc; /* Verde claro */
align-self: flex-end;
}
#chat-box li.typing-indicator {
font-style: italic;
color: #888;
}
#chat-box li.chatbot-message {
background-color: var(--primary-color); /* Morado */
color: white; /* Asegúrate de que el color sea blanco */
align-self: flex-start;
}
#input-container {
display: flex;
padding: 15px;
background-color: #fff;
border-top: 1px solid #eee;
}


#input-container input[type="text"] {
flex: 1;
padding: 12px 15px;
border: 2px solid #ccc;
border-radius: var(--border-radius);
font-size: 16px;
margin-right: 10px;
transition: border-color var(--transition-speed) ease;
}

#input-container input[type="text"]:focus {
border-color: var(--primary-color);
outline: none;
}

#input-container button {
padding: 12px 20px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color var(--transition-speed) ease;
}

#input-container button:hover {
background-color: var(--secondary-color);
}

#input-container button:active {
transform: scale(0.95);
}

#diagnostic-button {
margin-left: 10px;
}

footer {
background-color: var(--primary-color);
color: white;
text-align: center;
padding: 10px 0;
box-shadow: var(--box-shadow);
}
footer p {
margin: 0;
}
/* Modales */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.6);
}

.modal-content {
background-color: var(--card-background);
margin: 10% auto;
padding: 30px;
border-radius: var(--border-radius);
width: 90%;
max-width: 400px;
box-shadow: var(--box-shadow);
animation: slideDown 0.5s ease;
position: relative;
}

.modal-content h2 {
margin-top: 0;
color: var(--primary-color);
text-align: center;
}

.input-group {
margin-bottom: 20px;
}

.input-group label {
display: block;
margin-bottom: 5px;
color: var(--text-color);
}

.input-group input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: var(--border-radius);
font-size: 16px;
transition: border-color var(--transition-speed) ease;
}

.input-group input:focus {
border-color: var(--primary-color);
outline: none;
}

.modal-content button {
width: 100%;
padding: 12px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 16px;
transition: background-color var(--transition-speed) ease;
}

.modal-content button:hover {
background-color: var(--secondary-color);
}

.close {
color: var(--text-color);
position: absolute;
right: 20px;
top: 20px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
transition: color var(--transition-speed) ease;
}

.close:hover,
.close:focus {
color: var(--primary-color);
}

/* Animaciones */
@keyframes slideDown {
from { transform: translateY(-30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

/* Animaciones */
/* Animaciones */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Media Queries para Responsividad */
@media (max-width: 768px) {
header {
    flex-direction: column;
    align-items: flex-start;
}

.auth-buttons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.auth-buttons button {
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
}

header h1 {
    margin-bottom: 10px;
    text-align: left;
}

#chat-box li {
    max-width: 100%;
}

#input-container {
    flex-direction: column;
}

#input-container input[type="text"] {
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
}

#input-container button {
    width: 100%;
    margin-bottom: 10px;
}

#input-container button:last-child {
    margin-bottom: 0;
}

#input-container {
    padding: 10px;
}
}

@media (max-width: 480px) {
header h1 {
    font-size: 20px;
}

#input-container button i {
    font-size: 20px;
}

.auth-buttons button {
    font-size: 14px;
    padding: 6px 10px;
}
}