/* style-part3.css - Modals, Bingo Logic, Effects & Responsive */

/* --- Modals --- */
.modal-backdrop {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
z-index: 100; display: flex; justify-content: center; align-items: center;
}
.modal-glass {
background: #12121f; border: 1px solid rgba(255,255,255,0.1);
border-radius: 1.5rem; padding: 1.5rem; position: relative;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.animate-scale-in { animation: scaleIn 0.3s ease-out; }

/* --- Bingo Balls (Grid) --- */
.card-item-container {
display: flex; flex-direction: column; align-items: center;
cursor: pointer; transition: transform 0.1s;
}
.card-item-container:hover { transform: scale(1.1); }

.bingo-ball {
width: 40px; height: 40px; border-radius: 50%;
display: flex; justify-content: center; align-items: center;
font-weight: 900; font-size: 14px; position: relative;
background: #1e1e2e; border: 2px solid #333; color: white;
box-shadow: inset 0 -3px 5px rgba(0,0,0,0.5);
}

/* --- ESTADOS DE LAS BOLAS (MEJORADO) --- */

/* DISPONIBLE (Morado Neon) */
.status-available .bingo-ball { 
border-color: #a855f7; 
color: white; 
background: #1e1e2e; 
box-shadow: 0 0 5px rgba(168, 85, 247, 0.2);
}

/* SELECCIONADO (Amarillo Intenso) */
.status-selected .bingo-ball { 
background: #facc15 !important; 
color: black !important; 
border-color: #facc15 !important; 
box-shadow: 0 0 20px #facc15; 
transform: scale(1.1);
z-index: 10;
}

/* VENDIDA (Verde Sólido) */
.status-sold .bingo-ball { 
background: #166534 !important; 
border-color: #4ade80 !important; 
color: #4ade80 !important; 
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
opacity: 0.8;
}

/* RESERVADA/EN REVISIÓN (Naranja Pulsante - CRÍTICO) */
.status-reserved .bingo-ball { 
background: #651ca5 !important; /* Naranja fuerte */
border-color: #7e22cf !important; 
color: white !important;
animation: pulseOrange 1.5s infinite alternate; /* Animación de luz */
box-shadow: 0 0 15px #ae6de7;
}

@keyframes pulseOrange {
0% { box-shadow: 0 0 5px #7e22cf; border-color: #320f50; }
100% { box-shadow: 0 0 25px #7e22cf, 0 0 10px #9951d8 inset; border-color: white; }
}

.ver-tag {
font-size: 8px; font-weight: bold; background: #333; color: white;
padding: 1px 4px; border-radius: 4px; margin-top: -8px; z-index: 2; border: 1px solid #444;
}

/* --- Line Tabs --- */
.tab-line {
flex: 1; padding: 0.75rem; color: #94a3b8; font-weight: 700;
transition: all 0.3s; white-space: nowrap;
}
.tab-line.active { color: white; background: rgba(255,255,255,0.1); border-radius: 0.5rem; }

/* --- Line Numbers --- */
.line-number {
width: 50px; height: 50px; border-radius: 12px;
display: flex; justify-content: center; align-items: center;
font-weight: 900; font-size: 1.2rem; cursor: pointer;
transition: all 0.2s; border: 2px solid transparent;
}
.line-number.libre { background: rgba(126, 34, 207, 0.2); border-color: var(--neon-purple); color: white; }
.line-number.seleccionado { background: var(--accent); color: black; transform: scale(1.1); box-shadow: 0 0 15px var(--accent); }
.line-number.reservado { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; color: #fca5a5; opacity: 0.7; cursor: not-allowed; }
.line-number.vendido { background: rgba(22, 163, 74, 0.2); border-color: #16a34a; color: #86efac; opacity: 0.7; cursor: not-allowed; }

/* --- Mobile Nav --- */
.nav-link {
color: #94a3b8; font-weight: 600; font-size: 0.9rem; transition: color 0.3s;
}
.nav-link:hover { color: var(--accent); }

/* --- Store Closed Overlay --- */
.closed-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: #050510; z-index: 9999; display: flex;
justify-content: center; align-items: center;
}

/* --- EFECTO AURA DE RAYOS (LIGHTNING) --- */
.card-lightning {
position: relative;
z-index: 0;
border-radius: 1rem; 
}

.card-lightning::before {
content: ""; position: absolute; inset: -4px; border-radius: inherit;
background: conic-gradient(from 0deg, transparent 0deg, transparent 80deg, #00ff88 100deg, transparent 140deg, transparent 200deg, #00ff88 240deg, transparent 360deg);
filter: blur(8px); z-index: -1; animation: rotateLightning 4s linear infinite;
}

.card-lightning::after {
content: ""; position: absolute; inset: -2px; border-radius: inherit;
background: conic-gradient(from 0deg, transparent 0deg, transparent 80deg, #ffffff 100deg, transparent 140deg, transparent 200deg, #ffffff 240deg, transparent 360deg);
z-index: -1; animation: rotateLightning 4s linear infinite;
}

@keyframes rotateLightning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* --- EFECTO GLOBO FLOTANTE --- */
@keyframes floatBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

@keyframes pulseExplosion {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); transform: scale(1); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); transform: scale(1.05); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); transform: scale(1); }
}

.balloon-container { animation: floatBounce 2s ease-in-out infinite; }
.balloon-body { animation: pulseExplosion 1.5s infinite; }

/* =======================================================
OMNIS PERFORMANCE BOOSTER (Optimización Extrema)
======================================================= */
.card-item-container, #cardListContainer > div {
content-visibility: auto; 
contain-intrinsic-size: 80px 100px; 
contain: layout paint style;
}

.sala-card, .btn-glow-gold, .hero-slide, .floating-container {
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
will-change: transform, opacity;
}

@media (max-width: 768px) {
.glass-panel, .glass-header, .modal-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10, 10, 25, 0.95) !important; 
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.1);
}
.floating-container { opacity: 0.3; display: none; }
* { box-shadow: none !important; text-shadow: none !important; }
.btn-glow-gold { box-shadow: 0 0 10px rgba(250, 204, 21, 0.5) !important; }
}

/* --- WIDGET BCV FLOTANTE --- */
.bcv-widget {
position: fixed; top: 80px; right: 20px; z-index: 9999;
display: flex; align-items: center; padding: 10px 15px;
border-radius: 50px; border: 1px solid rgba(250, 204, 21, 0.3);
background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px);
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
animation: floatBag 3s ease-in-out infinite; transition: all 0.3s;
}
.bcv-widget:hover { transform: scale(1.05); border-color: #facc15; }
.bcv-icon-container {
background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%);
width: 40px; height: 40px; border-radius: 50%;
display: flex; justify-content: center; align-items: center;
margin-right: 10px; box-shadow: 0 0 15px rgba(250, 204, 21, 0.6);
}
.bcv-icon { color: #000; font-size: 1.2rem; animation: shakeBag 5s infinite; }
.bcv-info { display: flex; flex-direction: column; line-height: 1.1; }
.bcv-label { font-size: 0.6rem; color: #aaa; font-weight: bold; letter-spacing: 1px; }
.bcv-price { font-size: 1.1rem; font-weight: 900; color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
.bcv-date { font-size: 0.65rem; color: #facc15; font-family: monospace; margin-top: 2px; }

@keyframes floatBag { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes shakeBag { 0%, 90% { transform: rotate(0deg); } 92% { transform: rotate(-10deg); } 94% { transform: rotate(10deg); } 96% { transform: rotate(-10deg); } 98% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } }
@media (max-width: 480px) { .bcv-widget { top: auto; bottom: 20px; right: 20px; padding: 8px 12px; } .bcv-price { font-size: 0.9rem; } }

/* --- ADMIN TAGS --- */
.admin-card-tag {
display: inline-flex; align-items: center; background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2); padding: 2px 8px;
border-radius: 4px; margin: 2px; font-size: 0.8rem; color: #fbbf24; font-weight: bold;
}
.admin-card-remove { margin-left: 6px; color: #ef4444; cursor: pointer; font-weight: 900; padding: 0 4px; border-radius: 50%; }
.admin-card-remove:hover { background: #ef4444; color: white; }

/* --- PARCHE RESPONSIVE --- */
.winner-avatar { flex-shrink: 0; width: 45px; height: 45px; overflow: hidden; border-radius: 50%; border: 2px solid var(--accent); margin-right: 12px; background: #000; }
.winner-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; border: none !important; margin: 0 !important; }
.winner-item { min-width: 200px; display: flex; align-items: center; }

.sala-content .grid { align-items: stretch; }
.sala-content .btn-primary, .sala-content .btn-secondary, .sala-content .btn-secondaryxx {
display: flex; justify-content: center; align-items: center;
height: 100%; min-height: 48px; margin: 0; line-height: 1.2; white-space: nowrap; font-size: 0.85rem;
}
@media (max-width: 380px) {
.sala-content .grid { grid-template-columns: 1fr !important; gap: 0.8rem; }
.sala-content .btn-primary, .sala-content .btn-secondary { width: 100%; padding: 12px; }
}

#omnisToast { font-family: 'Outfit', sans-serif; box-shadow: 0 5px 15px rgba(0,0,0,0.5); pointer-events: none; }

@keyframes blob {
0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
33% { transform: translate(5px, -10px) scale(1.1) rotate(120deg); }
66% { transform: translate(-5px, 10px) scale(0.9) rotate(240deg); }
100% { transform: translate(0px, 0px) scale(1) rotate(360deg); }
}
.animate-blob { animation: blob 7s infinite; mix-blend-mode: screen; }
.animation-delay-2000 { animation-delay: 2s; }
#salesBlockedModal h3 { letter-spacing: -1px; }