/* public/assets/styles.css - custom complements to Tailwind for the dashboard */
/* Improve font rendering */
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Home layout — same palette, tighter casino grid */
.home-shell { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .home-shell { padding-left: 1.5rem; padding-right: 1.5rem; } }
.home-section { padding: 2.5rem 0; }
@media (min-width: 768px) { .home-section { padding: 3.5rem 0; } }
.home-kicker {
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: #fbbf24; font-weight: 700; margin: 0 0 8px;
}
.home-title { margin: 0; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
@media (min-width: 768px) { .home-title { font-size: 2.25rem; } }
.home-lead { color: #94a3b8; font-size: 0.95rem; margin: 8px 0 0; max-width: 36rem; }
.home-grid-3 { display: grid; gap: 1rem; }
@media (min-width: 768px) { .home-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.home-grid-winners { display: grid; gap: 1rem; }
@media (min-width: 640px) { .home-grid-winners { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-grid-winners { grid-template-columns: repeat(3, 1fr); } }
.home-card {
	background: linear-gradient(180deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95));
	border: 1px solid #334155; border-radius: 1rem;
}
.home-hero-win {
	display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 900px) {
	.home-hero-win { grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; }
}
.home-num {
	font-variant-numeric: tabular-nums;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
#ganadores, #numeros { scroll-margin-top: 5rem; }
#numeros { padding-bottom: 6.5rem; }
@media (min-width: 1024px) { #numeros { padding-bottom: 2.5rem; } }

/* Number card used in the grid - optimized for more density and mobile */
.number-card {
	display: inline-grid;
	place-items: center;
	width: 100%;
	min-width: 0;
	height: auto;
	aspect-ratio: 1;
	box-sizing: border-box;
	border-radius: 0.375rem;
	background: linear-gradient(135deg, rgba(100,116,139,0.12), rgba(71,85,105,0.18));
	border: 1.5px solid rgba(148,163,184,0.12);
	color: #f1f5f9;
	font-weight: 700;
	font-size: 0.8rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* fixed-width digits for clarity */
	transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	/* Better touch target for mobile */
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	scroll-margin-bottom: 6rem;
}

@media (max-width: 640px) {
	.number-card {
		font-size: 0.7rem;
		font-weight: 600;
	}
}

.number-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.08));
	opacity: 0;
	transition: opacity .15s ease;
}

.number-card:hover::before {
	opacity: 1;
}

.number-card:hover { 
	transform: translateY(-1px) scale(1.03); 
	box-shadow: 0 6px 18px rgba(245,158,11,0.3), 0 0 0 1px rgba(251,191,36,0.25);
	border-color: rgba(251,191,36,0.35);
	z-index: 10;
}

.number-card.unavailable { 
	opacity: 0.3; 
	cursor: not-allowed; 
	transform: none; 
	box-shadow: none;
	background: rgba(30,41,59,0.25);
}

.number-card.unavailable:hover {
	transform: none;
	box-shadow: none;
	border-color: rgba(148,163,184,0.12);
}

.number-card.unavailable::before {
	display: none;
}

.number-card.selected { 
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #0a0a0a;
	border-color: rgba(217,119,6,0.7);
	box-shadow: 0 3px 10px rgba(245,158,11,0.45), 0 0 16px rgba(251,191,36,0.25);
	transform: scale(1.02);
	z-index: 20;
}

.number-card.selected:hover {
	transform: scale(1.04) translateY(-1px);
	box-shadow: 0 5px 16px rgba(245,158,11,0.55), 0 0 24px rgba(251,191,36,0.35);
}

@keyframes card-pop {
	0% { transform: scale(0.9); filter: brightness(1.25); }
	45% { transform: scale(1.12); filter: brightness(1.15); }
	100% { transform: scale(1.02); filter: brightness(1); }
}

@keyframes card-drop {
	0% { transform: scale(1.04); }
	45% { transform: scale(0.9); opacity: 0.7; }
	100% { transform: scale(1); opacity: 1; }
}

.number-card.just-added {
	animation: card-pop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
	z-index: 25;
}

.number-card.just-removed {
	animation: card-drop 0.32s ease;
}

@keyframes cart-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.4); color: #fbbf24; }
	100% { transform: scale(1); }
}

.cart-bump {
	display: inline-block;
	animation: cart-bump 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes cart-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
	40% { box-shadow: 0 0 0 5px rgba(251,191,36,0.45); transform: scale(1.05); }
}

.cart-flash {
	animation: cart-flash 0.45s ease;
}

.cls-fly-chip {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 80;
	pointer-events: none;
	display: grid;
	place-items: center;
	border-radius: 0.375rem;
	background: linear-gradient(135deg, #fbbf24, #f59e0b);
	color: #0a0a0a;
	font-weight: 700;
	font-size: 0.75rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	box-shadow: 0 8px 20px rgba(245,158,11,0.45);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
	will-change: transform, opacity;
}

/* Support older class names if present */
.number-btn { all: unset; }

/* Toast system — above the mobile pay bar */
.cls-toast {
	position: fixed;
	left: 50%;
	right: auto;
	bottom: 5.75rem;
	z-index: 70;
	max-width: min(360px, calc(100vw - 1.5rem));
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .2s ease, transform .2s ease;
}
.cls-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cls-toast .cls-toast-body {
	background: rgba(15,23,42,0.94);
	color: #fff;
	padding: .7rem 1rem;
	border-radius: .6rem;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 10px 32px rgba(2,6,23,0.65);
	border: 1px solid rgba(148,163,184,0.18);
}
.cls-toast--add .cls-toast-body {
	background: linear-gradient(135deg, rgba(245,158,11,0.95), rgba(217,119,6,0.95));
	color: #111;
	border-color: rgba(251,191,36,0.5);
}
.cls-toast--remove .cls-toast-body {
	background: rgba(51,65,85,0.95);
}
@media (min-width: 1024px) {
	.cls-toast {
		left: auto;
		right: 1.25rem;
		bottom: 1.25rem;
		transform: translateY(8px);
	}
	.cls-toast.show { transform: translateY(0); }
}

/* Small responsive niceties */
@media (min-width: 1024px) {
	.number-card {
		font-size: 0.92rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.number-card.just-added,
	.number-card.just-removed,
	.cart-bump,
	.cart-flash,
	.cls-fly-chip {
		animation: none;
		transition: none;
	}
}

/* make scrollbar subtle in the grid wrap */
#numbers-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
#numbers-wrap::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.12); border-radius: 6px; }

/* Light theme overrides */
:root[data-theme='light'] {
	--bg: #f8fafc;
	--panel: #ffffff;
	--muted: #475569;
	--accent: #c2410c;
}

[data-theme='light'] body { background: var(--bg); color: #0f172a; }
[data-theme='light'] .number-card { background: linear-gradient(180deg, rgba(2,6,23,0.03), rgba(2,6,23,0.01)); color: #0f172a; }
[data-theme='light'] .number-card.selected { background: #f59e0b; color: #08111a; }

/* Focus ring for accessibility */
.number-card:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.14); }

/* Skeleton loader for grid */
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.06), rgba(255,255,255,0.03)); animation: pulse 1.2s infinite; border-radius: .5rem; }
@keyframes pulse { 0% { opacity: 0.9 } 50% { opacity: 0.6 } 100% { opacity: 0.9 } }

#checkoutForm input:focus {
	transform: translateY(-1px);
}

/* Loading spinner animation */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.animate-spin {
	animation: spin 1s linear infinite;
}

/* Premium glowing styles */
@keyframes intense-pulse {
  0% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8), 0 0 40px rgba(16, 185, 129, 0.4); transform: scale(1.03); }
  100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2); transform: scale(1); }
}

.btn-quantum-pulse {
  animation: intense-pulse 2s infinite ease-in-out;
}

.btn-quantum-pulse:hover {
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(16, 185, 129, 1);
}

/* machine modal */
        @keyframes fade-in {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        .animate-fade-in {
            animation: fade-in 0.3s ease-out;
        }
        @keyframes pop {
            0% { transform: scale(0); }
            70% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        .animate-pop {
            animation: pop 0.3s ease-out;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
.payment-option { cursor: pointer; }
.payment-option.selected { border-color: #f59e0b !important; background: rgba(245, 158, 11, 0.08); }
.payment-option.selected .check-icon { display: flex !important; }
.toc-section { scroll-margin-top: 100px; }
.toc-link:hover { text-decoration: underline; }
.payment-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.card-input { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(71, 85, 105, 0.5); }
.card-input:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); }
.mp-form-control {
  height: 50px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.5);
  border-radius: 0.5rem;
  padding: 0 1rem;
  color: white;
}
@keyframes pulse-border {
  0%, 100% { border-color: rgba(245, 158, 11, 0.3); }
  50% { border-color: rgba(245, 158, 11, 0.8); }
}
.processing { animation: pulse-border 1.5s infinite; }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        /* Fondo animado con dinero volando */
        @keyframes flyMoney {
            0% {
                transform: translateY(100vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translateY(-100vh) translateX(100px) rotate(720deg);
                opacity: 0;
            }
        }
        
        .flying-money {
            position: absolute;
            font-size: 2rem;
            opacity: 0;
            animation: flyMoney linear infinite;
            pointer-events: none;
            filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
        }
        
        .flying-money:nth-child(1) { left: 5%; animation-duration: 15s; animation-delay: 0s; }
        .flying-money:nth-child(2) { left: 15%; animation-duration: 18s; animation-delay: 2s; }
        .flying-money:nth-child(3) { left: 25%; animation-duration: 12s; animation-delay: 4s; }
        .flying-money:nth-child(4) { left: 35%; animation-duration: 20s; animation-delay: 1s; }
        .flying-money:nth-child(5) { left: 45%; animation-duration: 16s; animation-delay: 3s; }
        .flying-money:nth-child(6) { left: 55%; animation-duration: 14s; animation-delay: 5s; }
        .flying-money:nth-child(7) { left: 65%; animation-duration: 19s; animation-delay: 2.5s; }
        .flying-money:nth-child(8) { left: 75%; animation-duration: 13s; animation-delay: 4.5s; }
        .flying-money:nth-child(9) { left: 85%; animation-duration: 17s; animation-delay: 1.5s; }
        .flying-money:nth-child(10) { left: 95%; animation-duration: 21s; animation-delay: 3.5s; }
        .flying-money:nth-child(11) { left: 10%; animation-duration: 22s; animation-delay: 6s; }
        .flying-money:nth-child(12) { left: 90%; animation-duration: 11s; animation-delay: 7s; }
        
        /* Bolitas flotando en la máquina */
        @keyframes float {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-3px) translateX(2px); }
            50% { transform: translateY(2px) translateX(-2px); }
            75% { transform: translateY(-2px) translateX(-1px); }
        }
        
        @keyframes ballFloat {
            0%, 100% { transform: translateY(0) translateX(0) scale(1); }
            20% { transform: translateY(-4px) translateX(3px) scale(1.05); }
            40% { transform: translateY(2px) translateX(-2px) scale(0.95); }
            60% { transform: translateY(-2px) translateX(-3px) scale(1.02); }
            80% { transform: translateY(3px) translateX(2px) scale(0.98); }
        }
        
        .machine-ball {
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.3);
        }
        
        /* Scrollbar oculta pero funcional */
        .scrollbar-hidden {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
        }
        .scrollbar-hidden::-webkit-scrollbar {
            display: none;  /* Chrome, Safari and Opera */
        }
        
        /* Animación bounce para botón de pagar */
        @keyframes payBounce {
            0%, 100% { transform: scale(1); }
            10% { transform: scale(1.1); }
            20% { transform: scale(1); }
            30% { transform: scale(1.08); }
            40% { transform: scale(1); }
        }
        
        @keyframes payGlow {
            0%, 100% { box-shadow: 0 0 5px rgba(250, 204, 21, 0.5), 0 0 10px rgba(250, 204, 21, 0.3); }
            50% { box-shadow: 0 0 20px rgba(250, 204, 21, 0.8), 0 0 40px rgba(250, 204, 21, 0.5), 0 0 60px rgba(250, 204, 21, 0.3); }
        }
        
        .btn-pay-attention {
            animation: payBounce 1.5s ease-in-out infinite, payGlow 1s ease-in-out infinite;
        }

@media print {
  header, button, .no-print, #verifyModal, #folioModal { display: none !important; }
  body { background: white !important; color: black !important; }
  .bg-slate-800, .bg-slate-900, .bg-slate-900\/50 { background: white !important; border: 1px solid #ddd !important; }
  .text-white, .text-gray-100, .text-amber-400, .text-green-400 { color: black !important; }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.3s ease-out; }
@keyframes pulse-once {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  50% { transform: scale(1.02); box-shadow: 0 0 20px 10px rgba(239, 68, 68, 0.3); }
}
.animate-pulse-once { animation: pulse-once 0.5s ease-in-out 3; }