/* ============================================
   MEJORAS ESTÉTICAS SEGURAS - SOLO CSS
   ============================================ */

/* Tarjetas de eventos - efecto hover */
.evento-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f0f 100%) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.evento-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 30px rgba(0, 212, 255, 0.2) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

/* Imagen con zoom al hover */
.evento-imagen {
    transition: transform 0.5s ease !important;
}

.evento-card:hover .evento-imagen {
    transform: scale(1.05) !important;
}

/* Botones con gradiente más llamativo */
.btn-ver {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
    font-weight: 600 !important;
    transition: opacity 0.3s, transform 0.2s !important;
}

.btn-ver:hover {
    opacity: 0.9 !important;
    transform: scale(1.02) !important;
}

/* Modal mejorado */
.modal-content {
    background: linear-gradient(135deg, #1a1a2e, #0f0f0f) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

.codigo-input {
    font-size: 22px !important;
    letter-spacing: 8px !important;
    text-align: center !important;
    background: #2a2a3e !important;
    border: 1px solid #3a3a4e !important;
    border-radius: 12px !important;
}

.codigo-input:focus {
    border-color: #00d4ff !important;
    outline: none !important;
}

/* Botones del modal */
.btn-confirmar {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
}

.btn-cancelar {
    background: #2a2a3e !important;
    color: white !important;
}

/* Chat flotante mejorado */
.chat-btn {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
    box-shadow: 0 4px 15px rgba(0,212,255,0.3) !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.chat-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0,212,255,0.5) !important;
}

/* Panel del chat */
.chat-panel {
    border: 1px solid rgba(0,212,255,0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.chat-header {
    background: linear-gradient(90deg, #1a1a2e, #0f0f0f) !important;
    border-bottom: 1px solid rgba(0,212,255,0.2) !important;
}

/* Mensajes del chat */
.chat-message {
    border-radius: 18px !important;
}

.chat-message.usuario {
    background: linear-gradient(135deg, #1e2a3a, #16213e) !important;
}

.chat-message.admin {
    background: linear-gradient(135deg, #2a1a3a, #1a0f2a) !important;
    border-left: 3px solid #7c3aed !important;
}

/* Botón de salir mejorado */
.btn-salir {
    background: rgba(220, 53, 69, 0.2) !important;
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    transition: all 0.3s !important;
}

.btn-salir:hover {
    background: rgba(220, 53, 69, 0.4) !important;
    border-color: #dc3545 !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #00d4ff;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7c3aed;
}

/* Barra de navegación mejorada */
.navbar {
    background: linear-gradient(90deg, #0a0a0a 0%, #0f0f0f 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

/* Logo */
.logo {
    font-size: 24px !important;
    letter-spacing: 1px !important;
}

/* Título de sección */
.page-title, .section-title {
    background: linear-gradient(135deg, #fff, #aaa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* Loading animation */
.loading {
    animation: pulse 1.5s infinite !important;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}