/* --- FUENTE GLOBAL --- */ /* Esta regla se aplica a toda la página. Establece la fuente 'Inter' como la principal. 'sans-serif' es una fuente de respaldo por si 'Inter' no se puede cargar. */ body { font-family: 'Inter', sans-serif; } /* --- DEFINICIÓN DE PALETAS DE COLORES CON VARIABLES CSS --- */ /* Este es un enfoque de arquitectura CSS moderno. En lugar de escribir colores fijos por todos lados, definimos "variables" de color. Esto hace que cambiar un color en toda la web sea tan fácil como cambiarlo en un solo lugar. El navegador reemplazará 'var(--color-bg-primary)' por el valor correspondiente al tema activo ('light' o 'dark'). */ /* TEMA CLARO (Paleta 2) */ /* Cuando la etiqueta tiene la clase '.light', estas variables se activan. */ .light { --color-bg-primary: #F9F6F2; /* Marfil suave para el fondo general */ --color-bg-secondary: #FFFFFF; /* Blanco para las tarjetas */ --color-bg-tertiary: #E3E3E3; /* Gris humo claro para fondos de contraste */ --color-text-primary: #2B2B2B; /* Gris oscuro para títulos y texto principal */ --color-text-secondary: #68686B; /* Gris medio para texto secundario */ /* Colores de acento para elementos interactivos */ --color-accent-red: #C1443C; /* Rojo terracota */ --color-accent-yellow: #D6A800; /* Mostaza dorado */ --color-accent-green: #5A7D6B; /* Verde oliva */ --color-accent-blue: #3F6B94; /* Azul petróleo */ /* Colores específicos para la caja de resultados */ --color-win-bg: #e8f5e9; /* Fondo cuando ganas */ --color-win-text: #2e7d32; /* Texto cuando ganas */ --color-lose-bg: #f5f5f5; /* Fondo cuando no ganas */ --color-lose-text: #424242; /* Texto cuando no ganas */ } /* TEMA OSCURO (Paleta 1) */ /* Cuando la etiqueta tiene la clase '.dark', estas variables se activan. */ .dark { --color-bg-primary: #001117; /* Negro azulado profundo */ --color-bg-secondary: #161B22; /* Gris carbón suave */ --color-bg-tertiary: #2d3748; /* Un gris intermedio */ --color-text-primary: #E6E6E6; /* Gris claro */ --color-text-secondary: #A0A0A0; /* Gris medio */ --color-accent-red: #B3261E; /* Rojo rubí profundo */ --color-accent-yellow: #E0A400; /* Ámbar opaco */ --color-accent-green: #1E4D3A; /* Verde botella oscuro */ --color-accent-blue: #2B6CB0; /* Azul cobalto profundo */ --color-win-bg: #1E4D3A; /* Fondo cuando ganas */ --color-win-text: #E6E6E6; /* Texto cuando ganas */ --color-lose-bg: #2d3748; /* Fondo cuando no ganas */ --color-lose-text: #A0A0A0; /* Texto cuando no ganas */ } /* --- APLICACIÓN DE VARIABLES A LA UI --- */ /* Estas clases genéricas son usadas en el HTML. Toman su valor de las variables que definimos arriba. Así, cuando cambiamos de tema, estas clases automáticamente usan los colores correctos. */ .bg-primary { background-color: var(--color-bg-primary); } .bg-secondary { background-color: var(--color-bg-secondary); } .bg-tertiary { background-color: var(--color-bg-tertiary); } .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } /* --- ESTILOS PARA LAS ESFERAS (BALLS) --- */ /* Estos estilos definen la apariencia de los números. */ .number-ball-container { display: flex; flex-direction: column; align-items: center; gap: 4px; } .number-ball { transition: all 0.3s ease; /* Hace que cualquier cambio (color, tamaño) sea suave. */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Una sombra sutil. */ } /* Estilos que se aplican cuando una esfera es seleccionada por el usuario. */ .number-ball.selected { background-color: var(--color-accent-red); /* Usa el rojo de acento del tema. */ color: white; transform: scale(1.1); /* La hace un poco más grande. */ } /* Estilo para las esferas ganadoras en la tómbola. */ .number-ball.winner { background-color: var(--color-accent-green); /* Usa el verde de acento. */ color: white; } /* Estilo para los números del usuario que coinciden con los ganadores. */ .number-ball.match { background-color: var(--color-accent-yellow); /* Usa el amarillo de acento. */ color: white; animation: pulse-match 1.5s infinite; /* Aplica la animación de parpadeo. */ } .ball-label { font-size: 0.75rem; font-weight: 500; } /* --- CLASES REUTILIZABLES PARA BOTONES --- */ .btn { transition: all 0.2s ease-in-out; border: none; cursor: pointer; } .btn:hover { filter: brightness(1.1); /* Aclara un poco el botón al pasar el ratón. */ } .btn-primary { background-color: var(--color-accent-red); color: white; } .btn-secondary { background-color: var(--color-accent-blue); color: white; } .btn-tertiary { background-color: #4A6C6F; color: white; } .btn-tertiary:hover { background-color: #3f5d60; } /* --- ANIMACIONES --- */ /* '@keyframes' define una animación. Le damos un nombre ('pulse-match') y definimos los estilos en diferentes puntos (0%, 50%, 100%). */ @keyframes pulse-match { 0%, 100% { transform: scale(1.1); box-shadow: 0 0 0 0 rgba(224, 164, 0, 0.7); /* Sombra que se expande. */ } 50% { transform: scale(1.2); box-shadow: 0 0 10px 10px rgba(224, 164, 0, 0); /* La sombra se desvanece. */ } } /* Animación de caída para las esferas del sorteo. */ .tumbler-ball { position: absolute; /* Permite posicionarla dentro de su contenedor. */ opacity: 0; /* Empieza invisible. */ animation: fallAndSettle 1s forwards; /* 'forwards' mantiene los estilos del final de la animación. */ } @keyframes fallAndSettle { 0% { transform: translateY(-200px) scale(0.5); /* Empieza arriba y pequeña. */ opacity: 0; } 50% { opacity: 1; /* Se hace visible a mitad de camino. */ } 100% { transform: translateY(0) scale(1); /* Termina en su posición y tamaño normal. */ opacity: 1; } } /* --- ESTILOS PARA LA CAJA DE RESUMEN DE PREMIOS --- */ .prize-summary-box { background-color: var(--color-lose-bg); color: var(--color-lose-text); } .prize-summary-box.win { background-color: var(--color-win-bg); color: var(--color-win-text); } /* --- ESTILOS PARA LA TARJETA DE HISTORIAL --- */ .history-card { border-left: 4px solid var(--color-accent-red); /* Usa el rojo del tema para el borde. */ } /* --- ESTILO PARA LEYENDA DE COINCIDENCIAS --- */ .number-ball-inline { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; /* Alinea el círculo con el texto */ margin-right: 6px; /* Espacio entre el círculo y el texto */ }