@charset "UTF-8";
/*!
 * Estilos personalizados para La Riferia.
 * Este archivo contiene las personalizaciones y estilos específicos del sitio.
 * El framework de Bootstrap se carga desde un CDN en el archivo index.php.
 */

/* --- 1. Variables y Estilos Globales --- */

/* La variable --bs-red-dark se ha eliminado para unificar el tema.
   Los colores ahora se gestionan centralmente desde dark-mode.css */
body {
  /* Aseguramos que la fuente principal sea Roboto, cargada desde Google Fonts en index.php. */
  font-family: 'Roboto', sans-serif;
  /* Añadimos una sombra interior sutil para dar profundidad a la página */
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
}

/* --- 2. Clases de Utilidad --- */

/* La clase .bg-red-dark ya no se utiliza en el diseño actual. */

/* --- 3. Estilos de Componentes Específicos --- */

/* Header */
.site-header {
  background-color: var(--card-bg, #1a1a1a); /* Usamos la variable del fondo de tarjeta para el header */
  /* Borde superior e inferior con el color de acento principal del tema */
  border-top: 5px solid var(--primary-accent, #ebc155);
  border-bottom: 5px solid var(--primary-accent, #ebc155);
  transition: box-shadow 0.3s ease-in-out; /* Transición para la sombra */
}

/* Transición para el tamaño del logo */
.navbar-brand img {
    transition: height 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Estilos del header cuando el usuario hace scroll */
.site-header.scrolled {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra sutil para dar profundidad */
}

.site-header.scrolled .navbar-brand img {
    height: 80px !important; /* Reducimos el tamaño del logo */
    width: 80px !important;  /* Usamos !important para sobreescribir el estilo en línea */
}

/* Aumenta el tamaño de la fuente de los enlaces de navegación */
.navbar-nav .nav-link {
  font-size: 1.15rem;
}

/* Estilos para la sección de héroe */
.hero-text {
    font-size: 1.2rem; /* Hacemos el texto de la descripción un poco más grande */
    line-height: 1.6; /* Mejoramos la legibilidad del párrafo */
}

/* Estilos para centrar los detalles de pago con botón de copiar */
.payment-info-details .input-group {
    justify-content: center; /* Centra el contenido del grupo (input + botón) */
}

.payment-info-details .input-group .form-control {
    flex: 0 1 auto; /* Evita que el input se expanda para llenar el espacio */
    width: auto;    /* El ancho se ajusta al contenido del texto */
    text-align: center; /* Centra el texto dentro del input para un mejor acabado */
}

/* Estilos para hacer el botón de copiar más grande y llamativo */
.copy-btn {
    font-size: 1.4rem; /* Aumenta el tamaño del icono */
    padding: 0.25rem 0.75rem; /* Añade padding para más área de clic */
    text-decoration: none; /* Quita el subrayado si se usa btn-link */
    transition: transform 0.2s ease, color 0.2s ease;
}

.copy-btn:hover, .copy-btn:focus {
    color: var(--primary-accent, #198754) !important; /* Color de acento (verde o dorado) */
    transform: scale(1.2); /* Agrandar un poco al interactuar */
}

/* --- Selección de Método de Pago --- */
.payment-method-link {
  display: block;
  width: 100px;  /* Corregido al tamaño deseado */
  height: 100px; /* Corregido al tamaño deseado */
  flex-shrink: 0; /* Evita que los logos se encojan */
  transition: all 0.2s ease-in-out;
  opacity: 0.7; /* Aumentamos la opacidad para que se vea menos tenue */
  filter: grayscale(60%); /* Reducimos el filtro de escala de grises para devolver algo de color */
  border: 3px solid transparent;
  border-radius: 0.75rem;
  overflow: hidden; /* Asegura que la imagen no se salga del borde redondeado */
}

.payment-method-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payment-method-link.selected {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
  border-color: #198754; /* Color de éxito de Bootstrap */
}

/* Contenedor de métodos de pago con scroll horizontal */
#paymentMethodsContainer {
  flex-wrap: nowrap; /* Evita que los elementos salten a la siguiente línea */
  overflow-x: auto;  /* Habilita el scroll horizontal si es necesario */
  padding-bottom: 1rem; /* Espacio para que la barra de scroll no pegue con el contenido */
}

/* Checkmark (tilde) de selección */
.payment-checkmark {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 1.8rem;
  color: #198754;
  background-color: white;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease-in-out;
  z-index: 2;
}

.payment-method-link.selected .payment-checkmark {
  opacity: 1;
  transform: scale(1);
}

/* Píldora de resumen de compra final */
.summary-pill {
  border: 4px solid var(--primary-accent, #ebc155);
  /* Eliminamos el fondo fijo para que herede el del tema oscuro */
}

/* Cambia el color del texto de éxito dentro de la píldora de resumen al color de acento principal */
.summary-pill .text-success {
  color: var(--primary-accent, #ebc155) !important; /* Usamos !important para sobreescribir la clase de Bootstrap */
}

/* Cambia el color del enlace de "Mis Datos Personales" al dorado oscuro */
#raffleForm .text-danger {
    color: var(--text-muted-color, #b4882f) !important;
    text-decoration-color: var(--text-muted-color, #b4882f) !important; /* Asegura que el subrayado también cambie */
}

/* Cambia el color de los enlaces genéricos (como políticas de Google) */
.text-muted a {
    color: var(--link-color, #ebc155);
    text-decoration-color: var(--link-color, #ebc155); /* Asegura que el subrayado también cambie */
}

/* Caja para subir archivo de comprobante */
.file-upload-box {
  display: block;
  border: 1px dashed var(--card-border, #ced4da); /* Borde más fino y con color del tema */
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.file-upload-box:hover {
  background-color: var(--card-bg, #f8f9fa); /* Fondo de tarjeta al pasar el mouse */
  border-color: var(--primary-accent, #adb5bd); /* Color de acento al pasar el mouse */
}

/* Estilo para el nuevo botón de generar boletos */
#generateTicketsBtn {
    font-size: 3.2rem; /* Aumentamos aún más el tamaño de la fuente */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Se eliminan los estilos que lo hacían funcionar como un contenedor de boletos. */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    min-width: 600px; /* Aumentamos el ancho mínimo para mayor presencia */
    padding: 1.2rem 1.5rem; /* Aumentamos el padding para un marco más grande */

    /* Estilos para el nuevo diseño del botón */
    background-color: var(--bg-color, #000); /* Fondo negro */
    color: var(--primary-accent, #ebc155); /* Texto e iconos en dorado vivo */
    border: 4px solid var(--primary-accent, #ebc155); /* Borde dorado aún más grueso */
}

#generateTicketsBtn:hover, #generateTicketsBtn:focus {
    background-color: var(--primary-accent, #ebc155); /* Fondo dorado al pasar el mouse */
    color: var(--bg-color, #000); /* Texto e iconos en negro */
    border-color: var(--primary-accent, #ebc155);
}

/* Estilo para el botón de completar compra */
#completePurchaseBtn {
    font-size: 1.5rem; /* Más grande que el btn-lg por defecto (1.25rem) */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    font-weight: 700; /* Más grueso */
    letter-spacing: 1px; /* Un poco más de espacio entre letras */
}

/* Estilo para la píldora de resumen de total */
.total-summary-pill {
    background-color: var(--card-bg, #1a1a1a);
    color: var(--text-color, #ebc155);
    border: 2px solid var(--primary-accent, #ebc155);
}

/* --- 4. Tipografía --- */

/* Título de sección unificado */
.section-title {
  /* El color ahora es manejado por la regla global en dark-mode.css
     para mantener la consistencia con todos los demás títulos. */
  font-weight: 700; /* Texto en negrita */
  text-transform: uppercase; /* Texto en mayúsculas */
  font-size: 2.2rem; /* Tamaño más grande */
  margin-bottom: 1.5rem; /* Espaciado inferior consistente */
}

@media (max-width: 768px) {
  .section-title {
    font-size: 1.8rem; /* Tamaño ajustado para móviles */
  }

  #generateTicketsBtn {
    font-size: 1.8rem; /* Tamaño de fuente más grande para móviles */
    min-width: 90%;   /* Ocupa casi todo el ancho disponible */
    padding: 1rem 1.2rem; /* Padding aumentado para móviles */
  }
}

h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
h2, .h2 { font-size: calc(1.325rem + 0.9vw); }
h3, .h3 { font-size: calc(1.3rem + 0.6vw); }
h4, .h4 { font-size: calc(1.275rem + 0.3vw); }

@media (min-width: 1200px) {
  h1, .h1 { font-size: 2.5rem; }
  h2, .h2 { font-size: 2rem; }
  h3, .h3 { font-size: 1.75rem; }
  h4, .h4 { font-size: 1.5rem; }
}

/* --- 5. Estilo de Boleto Personalizado --- */
.ticket-shape {
    background-color: var(--card-bg, #f8f9fa) !important; /* Fondo del boleto con fallback */
    color: var(--text-color, #212529) !important; /* Color del texto con fallback */
    border: 1px solid var(--card-border, #dee2e6);
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.25rem;
    position: relative; /* Necesario para los pseudo-elementos */
    margin: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden; /* Oculta las partes de los círculos que se salen */
}

/* Pseudo-elementos para crear las muescas del boleto */
.ticket-shape::before,
.ticket-shape::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 20px; /* Ancho de la muesca */
    height: 20px; /* Alto de la muesca */
    background-color: var(--bg-color, #fff); /* Debe coincidir con el fondo del contenedor */
    border-radius: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--card-border, #dee2e6);
}

.ticket-shape::before {
    left: -11px; /* Posiciona la muesca izquierda */
}

.ticket-shape::after {
    right: -11px; /* Posiciona la muesca derecha */
}

/* --- 5. Animación de "Elegir a la Suerte" --- */
#luck-animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none; /* No interfiere con los clics */
    opacity: 0;
    background: radial-gradient(circle, transparent 0%, var(--primary-accent) 10%, var(--bg-color) 60%);
    background-repeat: no-repeat;
    background-position: center;
}

#luck-animation-overlay.active {
    animation: luck-pulse 0.9s ease-out forwards;
}

@keyframes luck-pulse {
    0% { background-size: 0% 0%; opacity: 0.8; }
    50% { background-size: 300% 300%; opacity: 1; }
    99% { background-size: 300% 300%; opacity: 0; }
    100% { background-size: 0% 0%; opacity: 0; } /* Estado final invisible */
}

/* Contenedor de la figura central de la animación */
#luck-animation-figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

/* --- Propuesta 1: Animación de Moneda Giratoria --- */
.coin-animation {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle at 30% 30%, #fff, #ebc155 40%, #b4882f 100%);
    border-radius: 50%;
    box-shadow: 0 0 30px #ebc155, inset 0 0 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #b4882f;
    font-weight: bold;
    animation: coin-pulse 0.9s ease-out forwards, spin-3d 0.9s linear forwards;
}
.coin-animation::before {
    content: '★'; /* Estrella en la moneda */
}

@keyframes spin-3d {
    from { transform: translate(-50%, -50%) rotateY(0deg); }
    to   { transform: translate(-50%, -50%) rotateY(1080deg); } /* 3 giros completos */
}

@keyframes coin-pulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotateY(0deg); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotateY(540deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotateY(1080deg); }
}

/* --- Propuesta 3: Animación de Estrella Explosiva --- */
.star-animation {
    color: var(--primary-accent);
    font-size: 250px;
    text-shadow: 0 0 15px var(--primary-accent), 0 0 30px var(--primary-accent), 0 0 50px #fff;
    animation: star-burst 0.9s ease-out forwards;
}
.star-animation::before {
    content: '★'; /* Usamos el caracter de estrella */
}

@keyframes star-burst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(0deg); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(180deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(360deg); }
}

/* Animación para texto con brillo alternante */
@keyframes text-glow-animation {
    0%, 100% {
        /* El color del texto no se cambia, solo la sombra. Usamos un brillo sutil. */
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); /* Dorado con opacidad */
    }
    50% {
        /* Hacemos el brillo más intenso en el pico de la animación. */
        text-shadow: 0 0 16px rgba(255, 250, 205, 0.9); /* Amarillo claro con más opacidad */
    }
}
.text-glow-1 {
    animation: text-glow-animation 2.5s ease-in-out infinite;
}
.text-glow-2 {
    animation: text-glow-animation 2.5s ease-in-out infinite;
    animation-delay: 1.25s; /* La mitad de la duración para que se alternen */
}