/* 1. FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;700;900&display=swap');

/* 2. ESTILOS GLOBALES */
body {
    background-color: #0B0E12;
    color: #E8EAED;
    font-family: 'Urbanist', sans-serif;
    scroll-behavior: smooth;
}

/* 3. EFECTOS NEÓN y GLOW */
.tech-neon-glow {
    text-shadow: 0 0 5px #00E3F6, 0 0 15px #00E3F6;
    color: #00E3F6;
}

.btn-neon {
    @apply bg-tech-blue/20 text-tech-neon border border-tech-neon transition duration-300 ease-in-out font-bold py-3 px-6 rounded-lg;
    box-shadow: 0 0 10px rgba(0, 227, 246, 0.5);
}
.btn-neon:hover {
    @apply bg-tech-neon/20;
    box-shadow: 0 0 20px rgba(0, 227, 246, 0.8), 0 0 40px rgba(0, 227, 246, 0.6);
}

.card-elegant-glow {
    @apply bg-[#14191F] border border-tech-gray/20 rounded-xl shadow-lg transition duration-500 ease-in-out;
}
.card-elegant-glow:hover {
    border-color: #1E88E5;
    box-shadow: 0 0 20px rgba(30, 136, 229, 0.4);
    transform: translateY(-2px);
}

/* 4. ESTILOS ESPECÍFICOS DE NAVEGACIÓN (Dropdowns) */
.dropdown {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background-color: #14191F;
    border: 1px solid #1E88E5;
    border-radius: 8px;
    padding: 10px 0;
    z-index: 50;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}
.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #A6A9AD;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9rem;
}
.dropdown-menu a:hover {
    background-color: #1E88E520;
    color: #00E3F6;
    padding-left: 25px; /* Efecto hover sutil */
}

/* Indicador de Dropdown */
.dropdown-link::after {
    content: ' \25BC';
    font-size: 0.7em;
    margin-left: 5px;
    transition: transform 0.3s;
}
.dropdown:hover .dropdown-link::after {
    transform: rotate(180deg);
}

/* 5. WIDGET DE NOTIFICACIONES */
#notification-list::-webkit-scrollbar {
    width: 8px;
}
#notification-list::-webkit-scrollbar-thumb {
    background-color: #1E88E5; /* Azul metálico */
    border-radius: 4px;
}
#notification-list::-webkit-scrollbar-track {
    background: #14191F;
}

/* 6. MENÚ MÓVIL (Asegurar que solo se vean en móvil) */
#menu-button { display: none; }
@media (max-width: 1023px) {
    #menu-button { display: block; }
    #desktop-menu { display: none; }

    .mobile-sub-menu {
        display: none;
        padding-left: 15px;
        margin-top: 5px;
        border-left: 2px solid #1E88E5;
    }
    .mobile-sub-menu a {
        padding: 8px 0;
        display: block;
        color: #A6A9AD;
        font-size: 0.9rem;
    }
    .mobile-dropdown-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
    .mobile-dropdown-header i {
        transition: transform 0.3s;
    }
    .mobile-dropdown-header.active i {
        transform: rotate(180deg);
    }
}

/* 7. ESTILOS DEL WIDGET DE CHAT */
.chat-message {
    @apply p-3 rounded-lg max-w-[80%] mb-2 shadow-md relative flex flex-col; /* Convertido a flex-col para apilar texto y hora */
}
.chat-avatar {
    @apply w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center text-tech-neon text-lg;
}
.chat-label {
    @apply text-xs font-bold mb-1;
}
.chat-timestamp {
    @apply text-xs text-tech-gray/70 mt-2 text-right; /* Estilo para la hora */
}
.chat-message-user {
    @apply bg-tech-blue text-white;
    border-bottom-right-radius: 4px; /* Redondeo suave en la esquina de la cola */
}
.chat-message-bot {
    @apply bg-gray-700 text-tech-light;
    border-bottom-left-radius: 4px; /* Redondeo suave en la esquina de la cola */
}
/* Cola del bocadillo para el BOT (izquierda) */
.chat-message-bot::after {
    content: '';
    position: absolute;
    left: -10px;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 15px solid #374151; /* Mismo color que bg-gray-700 */
    border-left: 15px solid transparent;
}
/* Cola del bocadillo para el USUARIO (derecha) */
.chat-message-user::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 15px solid #1E88E5; /* Mismo color que bg-tech-blue */
    border-right: 15px solid transparent;
}
.message-container {
    @apply flex items-center mb-4 gap-x-3; /* Contenedor para cada mensaje, con espacio para avatar */
}
.justify-end {
    justify-content: flex-end; /* Asegura que la clase para alinear a la derecha funcione */
}
.chat-message-thinking {
    @apply bg-gray-700 text-tech-gray italic;
    border-bottom-left-radius: 0;
}
#chat-message-list::-webkit-scrollbar {
    width: 6px;
}
#chat-message-list::-webkit-scrollbar-thumb {
    background-color: #1E88E5;
    border-radius: 3px;
}
#chat-message-list::-webkit-scrollbar-track {
    background: #14191F;
}
/* Animación para el botón flotante */
.animate-float {
    animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); }
}