/* ================================= TEMA MODERNO OSCURO - LOTERIASRDHOY ================================= */ /* Estilos base - Tema oscuro moderno */ * { transition: all 0.3s ease; } body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important; background-attachment: fixed; color: #e2e8f0 !important; min-height: 100vh; } /* ================================= HEADER MODERNO CON GRADIENTE AZUL/PÚRPURA ================================= */ header { position: relative; overflow: hidden; background: linear-gradient(135deg, #1e40af 0%, #3b82f6 30%, #6366f1 70%, #8b5cf6 100%) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } header::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.08) 45deg, transparent 90deg); animation: rotate 20s linear infinite; pointer-events: none; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Texto del header */ header h1 { color: white !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } header p { color: rgba(255, 255, 255, 0.9) !important; } header .bg-white { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); } /* Búsqueda en header */ header input { background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: white !important; } header input::placeholder { color: rgba(255, 255, 255, 0.8) !important; } header input:focus { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.4) !important; } header button { color: white !important; } /* ================================= CARDS BLANCAS MODERNAS ================================= */ .lottery-card { background: white !important; border: 1px solid #e5e7eb !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; backdrop-filter: blur(10px); color: #1f2937 !important; position: relative; } .lottery-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08) !important; border-color: #3b82f6 !important; } .lottery-card h3 { color: #1f2937 !important; text-shadow: none; } .lottery-card .sorteo-date { color: #6b7280 !important; font-size: 0.875rem !important; /* Aumentado de 0.75rem a 0.875rem */ font-weight: 600 !important; /* Bold/semi-bold */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* Línea decorativa en la parte superior de las cards - Azul sutil */ .lottery-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent); border-radius: 0.5rem 0.5rem 0 0; } /* ================================= NÚMEROS GANADORES CON GRADIENTES VERDES Y GRISES ================================= */ /* Bolas por defecto - Verde para números actuales */ .number-ball { width: 55px; height: 55px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; margin: 0 6px; font-size: 1.2rem; background: linear-gradient(135deg, #22c55e, #15803d) !important; /* Verde claro a oscuro */ border: 2px solid #166534 !important; box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease; color: white !important; } .number-ball:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 35px rgba(34, 197, 94, 0.5), 0 6px 15px rgba(0, 0, 0, 0.4) !important; background: linear-gradient(135deg, #16a34a, #14532d) !important; } /* Distribución específica para Super Kino (7-7-6) */ /* ================================= SUPER KINO TV - GRID CON GRADIENTES VERDES Y GRISES ================================= */ .winning-numbers-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.125rem; max-width: 420px; margin: 0 auto; height: auto; justify-items: center; align-items: center; } .winning-numbers-grid .number-ball { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: bold; margin: 0.125rem; background: linear-gradient(135deg, #22c55e, #15803d) !important; /* Verde por defecto */ border: 1px solid #166534 !important; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease; color: white !important; } .winning-numbers-grid .number-ball:hover { transform: translateY(-2px) scale(1.1); box-shadow: 0 6px 18px rgba(34, 197, 94, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4) !important; } .winning-numbers-grid .number-ball:nth-child(1) { grid-column: 1; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(2) { grid-column: 2; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(3) { grid-column: 3; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(4) { grid-column: 4; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(5) { grid-column: 5; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(6) { grid-column: 6; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(7) { grid-column: 7; grid-row: 1; } .winning-numbers-grid .number-ball:nth-child(8) { grid-column: 1; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(9) { grid-column: 2; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(10) { grid-column: 3; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(11) { grid-column: 4; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(12) { grid-column: 5; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(13) { grid-column: 6; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(14) { grid-column: 7; grid-row: 2; } .winning-numbers-grid .number-ball:nth-child(15) { grid-column: 1; grid-row: 3; } .winning-numbers-grid .number-ball:nth-child(16) { grid-column: 2; grid-row: 3; } .winning-numbers-grid .number-ball:nth-child(17) { grid-column: 3; grid-row: 3; } .winning-numbers-grid .number-ball:nth-child(18) { grid-column: 4; grid-row: 3; } .winning-numbers-grid .number-ball:nth-child(19) { grid-column: 5; grid-row: 3; } .winning-numbers-grid .number-ball:nth-child(20) { grid-column: 6; grid-row: 3; } /* ================================= BOTONES MODERNOS ================================= */ .bg-primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; border: none !important; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important; color: white !important; } .bg-primary:hover { background: linear-gradient(135deg, #6366f1, #4338ca) !important; box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important; transform: translateY(-1px); } .hover\\:bg-green-700:hover { background: linear-gradient(135deg, #6366f1, #4338ca) !important; } .bg-accent { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important; color: white !important; } .bg-accent:hover, .hover\\:bg-red-700:hover { background: linear-gradient(135deg, #f87171, #ef4444) !important; box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important; transform: translateY(-1px); } /* ================================= BOTONES PARA DIFERENTES LOTERÍAS ================================= */ /* 🎯 OVERRIDE PARA PEGA 3 MAS - MISMO COLOR QUE LAS DEMÁS */ #dynamicLotteryMenu a[href*="pega_3_mas"], #mobileLotteryMenu a[href*="pega_3_mas"] { background: transparent !important; box-shadow: none !important; color: #d1d5db !important; /* Color de texto igual que otras loterías */ } #dynamicLotteryMenu a[href*="pega_3_mas"]:hover, #mobileLotteryMenu a[href*="pega_3_mas"]:hover { background-color: #334155 !important; /* Mismo hover que las demás */ box-shadow: none !important; color: white !important; transform: translateX(2px); } /* ================================= NÚMEROS CON HEATMAP MEJORADO PARA TEMA OSCURO ================================= */ .number-cell { transition: all 0.3s ease; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(30, 41, 59, 0.8); color: #e2e8f0; } .number-cell:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(59, 130, 246, 0.3); border: 1px solid rgba(59, 130, 246, 0.4); } /* PALETA HEATMAP OPTIMIZADA PARA FONDO OSCURO */ .heatmap-0 { background: linear-gradient(135deg, #10b981, #059669); color: white; border: 1px solid #047857; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); } /* Verde brillante - 0-10 días */ .heatmap-1 { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; border: 1px solid #15803d; box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); } /* Verde - 11-20 días */ .heatmap-2 { background: linear-gradient(135deg, #84cc16, #65a30d); color: white; border: 1px solid #4d7c0f; box-shadow: 0 4px 15px rgba(132, 204, 22, 0.4); } /* Verde lima - 21-30 días */ .heatmap-3 { background: linear-gradient(135deg, #eab308, #ca8a04); color: #1f2937; border: 1px solid #a16207; box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4); } /* Amarillo - 31-40 días */ .heatmap-4 { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border: 1px solid #b45309; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); } /* Naranja claro - 41-50 días */ .heatmap-5 { background: linear-gradient(135deg, #f97316, #ea580c); color: white; border: 1px solid #c2410c; box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); } /* Naranja - 51-60 días */ .heatmap-6 { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; border: 1px solid #b91c1c; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); } /* Rojo claro - 61-70 días */ .heatmap-7 { background: linear-gradient(135deg, #dc2626, #b91c1c); color: white; border: 1px solid #991b1b; box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4); } /* Rojo - 71-80 días */ .heatmap-8 { background: linear-gradient(135deg, #b91c1c, #991b1b); color: white; border: 1px solid #7f1d1d; box-shadow: 0 4px 15px rgba(185, 28, 28, 0.4); } /* Rojo oscuro - 81-90 días */ .heatmap-9 { background: linear-gradient(135deg, #991b1b, #7f1d1d); color: white; border: 1px solid #450a0a; box-shadow: 0 4px 15px rgba(153, 27, 27, 0.4); } /* Rojo muy oscuro - 91-100 días */ .heatmap-10 { background: linear-gradient(135deg, #7f1d1d, #450a0a); color: white; border: 1px solid #1c0606; box-shadow: 0 4px 15px rgba(127, 29, 29, 0.5); } /* Rojo extremo - 100+ días */ /* ================================= NÚMEROS GANADORES ESPECIALES ================================= */ .winner-today { background: linear-gradient(135deg, #10b981, #059669) !important; color: white !important; border-radius: 50% !important; border: 3px solid #047857 !important; box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), 0 8px 20px rgba(0, 0, 0, 0.3) !important; animation: pulse-green 2s infinite; } .winner-old { background: linear-gradient(135deg, #64748b, #475569) !important; color: white !important; border-radius: 50% !important; border: 3px solid #334155 !important; box-shadow: 0 0 20px rgba(100, 116, 139, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3) !important; } @keyframes pulse-green { 0% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), 0 8px 20px rgba(0, 0, 0, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 35px rgba(16, 185, 129, 1), 0 12px 25px rgba(0, 0, 0, 0.4); transform: scale(1.03); } 100% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.7), 0 8px 20px rgba(0, 0, 0, 0.3); transform: scale(1); } } /* ================================= INPUTS Y CONTROLES OSCUROS ================================= */ input, select { background: rgba(30, 41, 59, 0.8) !important; color: #e2e8f0 !important; border: 1px solid #475569 !important; backdrop-filter: blur(10px); } input:focus, select:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2) !important; background: rgba(30, 41, 59, 0.9) !important; } input::placeholder { color: #94a3b8 !important; } /* ================================= LOADING SPINNER MODERNO ================================= */ .loading-spinner { display: inline-block; width: 32px; height: 32px; border: 4px solid rgba(59, 130, 246, 0.2); border-radius: 50%; border-top-color: #3b82f6; animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ================================= PANELES Y SCROLLBARS OSCUROS ================================= */ .fixed-height-panel { background: rgba(30, 41, 59, 0.9) !important; color: #e2e8f0 !important; border: 1px solid #475569 !important; scrollbar-width: thin; scrollbar-color: #475569 #1e293b; } .fixed-height-panel::-webkit-scrollbar { width: 8px; } .fixed-height-panel::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #475569, #334155); border-radius: 4px; border: 1px solid #64748b; } .fixed-height-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #64748b, #475569); } .fixed-height-panel::-webkit-scrollbar-track { background: #1e293b; border-radius: 4px; } /* ================================= EFECTOS GLASSMORPHISM OSCURO ================================= */ .glass-effect { background: rgba(30, 41, 59, 0.8) !important; backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; color: #e2e8f0 !important; } /* ================================= FOOTER OSCURO MODERNO ================================= */ footer { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; color: #e2e8f0 !important; border-top: 1px solid #334155 !important; } footer h3, footer h4 { color: #f1f5f9 !important; } footer p, footer li, footer a { color: #94a3b8 !important; } footer a:hover { color: #3b82f6 !important; } /* ================================= TÍTULOS Y TEXTOS PRINCIPALES ================================= */ h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .text-4xl { color: #f1f5f9 !important; } .text-lg { color: #cbd5e1 !important; } .text-gray-600 { color: #cbd5e1 !important; } /* ================================= ICONOS ESPECIALES ================================= */ .fa-sun { color: #fbbf24 !important; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } .fa-moon { color: #60a5fa !important; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); } /* ================================= ANIMACIONES MEJORADAS ================================= */ .fade-in { animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hover-lift:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .hover-glow:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.4); } /* ================================= RESPONSIVE MEJORADO ================================= */ @media (max-width: 768px) { .number-cell { padding: 0.75rem; font-size: 0.9rem; } .number-ball { width: 45px; height: 45px; font-size: 1rem; } .winning-numbers-grid { max-width: 280px; gap: 0.1rem; } .winning-numbers-grid .number-ball { width: 2.25rem; height: 2.25rem; font-size: 0.9rem; margin: 0.1rem; } } /* ================================= EFECTOS ESPECIALES DE FONDO ================================= */ /* Efecto de partículas sutil en el fondo */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.03) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(99, 102, 241, 0.03) 0%, transparent 50%); pointer-events: none; z-index: -1; } /* ================================= COMPATIBILIDAD CON CLASES EXISTENTES - CARDS BLANCAS ================================= */ /* Asegurar que las clases de Tailwind mantengan las cards blancas */ .bg-slate-50 { background: white !important; } .dark\\:bg-gray-800 { background: white !important; } .border-slate-200, .dark\\:border-gray-700 { border-color: #e5e7eb !important; } .text-gray-800, .dark\\:text-white { color: #1f2937 !important; } .text-gray-500, .dark\\:text-gray-400 { color: #6b7280 !important; } /* ================================= LAYOUT ESPECIAL PARA LOTO SUPER LOTO MAS ================================= */ /* Contenedor específico para Loto Super Loto Más - Grid 6+2 */ .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; grid-template-rows: auto auto !important; gap: 8px !important; justify-items: center; align-items: center; max-width: 420px; margin: 0 auto; } /* Primeras 6 bolas - Primera fila */ .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(1) { grid-column: 1; grid-row: 1; } .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(2) { grid-column: 2; grid-row: 1; } .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(3) { grid-column: 3; grid-row: 1; } .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(4) { grid-column: 4; grid-row: 1; } .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(5) { grid-column: 5; grid-row: 1; } .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(6) { grid-column: 6; grid-row: 1; } /* Últimas 2 bolas - Segunda fila, MÁS CENTRADAS */ .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(7) { grid-column: 3; grid-row: 2; } /* Debajo de la 3ra bola */ .winning-numbers[data-lottery="Loto_Super_Loto_Mas"] .number-ball:nth-child(8) { grid-column: 4; grid-row: 2; } /* Debajo de la 4ta bola */ /* ================================= NÚMEROS ANTIGUOS - VERSIONES APAGADAS - MÁXIMA ESPECIFICIDAD ================================= */ /* Números antiguos normales (loterías sin colores especiales) - Gris */ .lottery-card .number-ball.winner-old, .lottery-card .winning-numbers .number-ball.winner-old, .lottery-card .winning-numbers-grid .number-ball.winner-old, .lottery-card span.number-ball.winner-old { background: linear-gradient(135deg, #64748b, #475569) !important; border-color: #334155 !important; box-shadow: 0 8px 25px rgba(100, 116, 139, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important; } .lottery-card .number-ball.winner-old:hover, .lottery-card .winning-numbers .number-ball.winner-old:hover, .lottery-card .winning-numbers-grid .number-ball.winner-old:hover, .lottery-card span.number-ball.winner-old:hover { background: linear-gradient(135deg, #475569, #334155) !important; box-shadow: 0 12px 35px rgba(100, 116, 139, 0.5), 0 6px 15px rgba(0, 0, 0, 0.4) !important; } /* Números de hoy - Verde brillante */ .lottery-card .number-ball.winner-today, .lottery-card .winning-numbers .number-ball.winner-today, .lottery-card .winning-numbers-grid .number-ball.winner-today, .lottery-card span.number-ball.winner-today { background: linear-gradient(135deg, #22c55e, #15803d) !important; border-color: #166534 !important; box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3) !important; } .lottery-card .number-ball.winner-today:hover, .lottery-card .winning-numbers .number-ball.winner-today:hover, .lottery-card .winning-numbers-grid .number-ball.winner-today:hover, .lottery-card span.number-ball.winner-today:hover { background: linear-gradient(135deg, #16a34a, #14532d) !important; box-shadow: 0 12px 35px rgba(34, 197, 94, 0.5), 0 6px 15px rgba(0, 0, 0, 0.4) !important; } /* Estilos para timers mejorados */ .lottery-timer { min-height: 10px !important; min-width: 160px !important; max-width: 220px !important; line-height: 1.2; }