/* Reset Básico */
body { 
    background-color: #f3f4f6; 
    -webkit-tap-highlight-color: transparent; 
}

/* Animações */
.fade-enter { opacity: 0; transform: translateY(10px); }
.fade-enter-active { opacity: 1; transform: translateY(0); transition: opacity 300ms, transform 300ms; }

.ai-pulse { animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
@keyframes pulse-ring { 
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(147, 0, 137, 0.7); } 
    70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(147, 0, 137, 0); } 
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(147, 0, 137, 0); } 
}

/* Componentes Loto */
.loto-ball { 
    width: 36px; height: 36px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-weight: bold; font-size: 0.9rem; transition: all 0.2s; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; 
}

.ball-selected { 
    background: linear-gradient(135deg, #930089 0%, #d65db1 100%); 
    color: white; transform: scale(1.1); 
    box-shadow: 0 4px 6px rgba(147, 0, 137, 0.4); 
}

.ball-unselected { 
    background-color: white; color: #374151; border: 1px solid #e5e7eb; 
}

.ball-sm { 
    width: 28px; height: 28px; font-size: 0.75rem; 
    border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; font-weight: bold; 
    background: white; border: 1px solid #e5e7eb; color: #374151; 
}

/* Slider Customizado */
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; height: 24px; width: 24px; 
    border-radius: 50%; background: #930089; cursor: pointer; 
    margin-top: -10px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
}
input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; height: 4px; cursor: pointer; background: #ddd; border-radius: 2px; 
}

/* Navegação e Cards */
.nav-item.active { color: #930089; }
.nav-item.active i { transform: translateY(-2px); }

.ticket-card { 
    background: white; 
    background-image: radial-gradient(#f3f4f6 1px, transparent 1px); 
    background-size: 10px 10px; 
    position: relative; overflow: hidden; 
}
.ticket-card::before { 
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; 
    width: 4px; background: #930089; 
}

/* Modal */
#customModal { transition: opacity 0.3s ease; }
#customModal.hidden { pointer-events: none; opacity: 0; }
#customModal:not(.hidden) { pointer-events: auto; opacity: 1; }