/*
 * Archivo: style.css
 * Descripción: Estilos generales para el dashboard del usuario,
 * incluyendo variables CSS, reset global, utilidades, header, footer,
 * formularios, botones, mensajes, y modales de confirmación/términos.
 * Este archivo ha sido extendido con una paleta de colores robusta, utilidades de espaciado,
 * tipografía, flexbox, grid, posicionamiento, animaciones, estilos para el panel de administración
 * (aunque no se use directamente en este dashboard), y scrollbars personalizados.
 * También incluye los estilos específicos para la página de inicio (sección de introducción,
 * carrusel de premios, y modal de detalles de rifa) para mantener todo en un solo archivo.
 *
 * NOTA IMPORTANTE: Se ha ajustado específicamente el CSS del carrusel de imágenes
 * para asegurar la correcta visualización de las fotos dentro del modal.
 *
 * NUEVA FUNCIONALIDAD: Se ha añadido un estilo para agrandar el modal de premios principales en desktop.
 * NUEVA FUNCIONALIDAD: Estilos para el contador de boletas y el botón de proceder al pago,
 * ubicándolos en la misma línea en pantallas grandes y apilándolos en móvil.
 *
 * ¡ACTUALIZACIÓN IMPORTANTE! Se han corregido los estilos para la funcionalidad
 * de menú hamburguesa responsivo, asegurando su correcta visualización y alternancia
 * de íconos en dispositivos móviles, basándose en la clase 'menu-open' en el header.
 *
 * ¡CORRECCIÓN! Se han mejorado los estilos del modal de Términos y Condiciones
 * para asegurar una visualización estética, un ancho adecuado y scroll vertical.
 * Se ha aplicado un `max-width` más generoso y `overflow-y: auto` al contenido del modal.
 *
 * ¡NUEVO CAMBIO! Se ha modificado el estilo del botón 'Regístrate Ahora' dentro del menú
 * hamburguesa para que se vea como un enlace normal, no como un botón azul.
 */
/* ==========================================================================
   0. Variables CSS (Colores y Espaciados)
   ========================================================================== */
:root {
    /* Paleta de Colores Primarios */
    --color-primary-blue: #0A0F2C; /* Azul oscuro de fondo */
    --color-primary-cyan: #00e0ff; /* Cian brillante */
    --color-primary-pink: #FF69B4; /* Rosa vibrante (ajustado de 00e0ff para mayor contraste) */
    --color-accent-orange: #FFA500; /* Naranja para detalles */
    --raffle-price-color: var(--color-accent-orange);
    --color-text-light: #E0E0E0; /* Texto claro general (más suave) */
    --color-text-dark: #212529; /* Texto oscuro para contraste */
    --color-bg-card: #1a2035; /* Fondo de tarjetas y contenedores */
    --color-success: #28a745; /* Verde para éxito */
    --color-error: #dc3545; /* Rojo para errores */
    --color-border-dark: #3a4768; /* Borde oscuro */
    --color-label-light: #b0bec5; /* Etiquetas grises claras (más visible) */
    --color-shadow-light: rgba(0, 0, 0, 0.2);
    --color-shadow-dark: rgba(0, 0, 0, 0.4);
    /* Nuevas variables para los bordes de progreso */
    --border-color-default-accent: #6c757d; /* Gris para bajo progreso */
    --border-color-secondary-accent: var(--color-accent-orange); /* Naranja para progreso medio */
    --border-color-primary-accent: var(--color-primary-cyan); /* Cian para alto progreso */
    /* Sombras Adicionales para Profundidad */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-deep: 0 8px 25px rgba(0, 0, 0, 0.6);
    --shadow-neon-cyan: 0 0 20px rgba(0, 224, 255, 0.7);
    --shadow-neon-pink: 0 0 20px rgba(255, 105, 180, 0.7);
    /* Espaciado General (escalado) */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem;  /* 8px */
    --spacing-md: 1rem;    /* 16px */
    --spacing-lg: 1.5rem;  /* 24px */
    --spacing-xl: 2rem;    /* 32px */
    --spacing-2xl: 2.5rem; /* 40px */
    --spacing-3xl: 3rem;   /* 48px */
    --spacing-4xl: 4rem;   /* 64px */
    /* Tamaños de Fuente */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.5rem; /* 56px - tamaño aumentado para el título YESAM */
    /* Line-heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    /* Bordes de radio */
    --rounded-sm: 0.25rem;
    --rounded-md: 0.5rem;
    --rounded-lg: 0.75rem;
    --rounded-xl: 1rem;
    --rounded-full: 9999px;
    /* Transiciones */
    --transition-fast: all 0.15s ease-in-out;
    --transition-normal: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    /* Ancho de scrollbar (calculado por JS para evitar saltos de layout) */
    --scrollbar-width: 0px;
}
/* ==========================================================================
   1. Estilos Generales y Reset (Actualizados)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base para rem */
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-primary-blue);
    color: var(--color-text-light);
    line-height: var(--line-height-normal);
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* Previene el scroll horizontal */
    -webkit-font-smoothing: antialiased; /* Mejora la legibilidad en WebKit */
    -moz-osx-font-smoothing: grayscale; /* Mejora la legibilidad en Firefox */
    display: flex;
    flex-direction: column; /* Asegura que el footer se quede abajo */
}
/* IMPORTANTE: Esta clase se añade al body cuando un modal está activo para prevenir el scroll */
body.modal-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width); /* Compensa la barra de scroll */
}
a {
    color: var(--color-primary-cyan);
    text-decoration: none;
    transition: var(--transition-normal);
}
a:hover {
    color: var(--color-primary-pink);
    text-decoration: underline;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-light); /* Todos los encabezados en color texto claro por defecto */
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 224, 255, 0.3); /* Sombra de texto suave */
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }
p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}
img {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra debajo de las imágenes */
}
button, input[type="submit"] {
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--rounded-md);
    transition: var(--transition-normal);
    outline: none;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--rounded-md);
    background-color: #2b354d; /* Un poco más claro que el fondo de la tarjeta */
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    outline: none;
    transition: var(--transition-normal);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary-cyan);
    box-shadow: 0 0 8px rgba(0, 224, 255, 0.5);
}
/* ==========================================================================
   2. Clases de Utilidad (Extendidas)
   ========================================================================== */
/* --- Espaciado (Margin & Padding) --- */
/* m = margin, p = padding */
/* t = top, b = bottom, l = left, r = right */
/* x = left/right, y = top/bottom */
/* 0, auto, 1 (0.25rem), 2 (0.5rem), ... , 16 (4rem) */
.m-0 { margin: 0; } .p-0 { padding: 0; }
.m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
/* Margins */
.mt-1 { margin-top: var(--spacing-xs); } .mt-2 { margin-top: var(--spacing-sm); } .mt-3 { margin-top: var(--spacing-md); } .mt-4 { margin-top: var(--spacing-lg); } .mt-5 { margin-top: var(--spacing-xl); } .mt-6 { margin-top: var(--spacing-2xl); } .mt-7 { margin-top: var(--spacing-3xl); } .mt-8 { margin-top: var(--spacing-4xl); }
.mb-1 { margin-bottom: var(--spacing-xs); } .mb-2 { margin-bottom: var(--spacing-sm); } .mb-3 { margin-bottom: var(--spacing-md); } .mb-4 { margin-bottom: var(--spacing-lg); } .mb-5 { margin-bottom: var(--spacing-xl); } .mb-6 { margin-bottom: var(--spacing-2xl); } .mb-7 { margin-bottom: var(--spacing-3xl); } .mb-8 { margin-bottom: var(--spacing-4xl); }
.ml-1 { margin-left: var(--spacing-xs); } .ml-2 { margin-left: var(--spacing-sm); } .ml-3 { margin-left: var(--spacing-md); } .ml-4 { margin-left: var(--spacing-lg); } .ml-5 { margin-left: var(--spacing-xl); } .ml-6 { margin-left: var(--spacing-2xl); } .ml-7 { margin-left: var(--spacing-3xl); } .ml-8 { margin-left: var(--spacing-4xl); }
.mr-1 { margin-right: var(--spacing-xs); } .mr-2 { margin-right: var(--spacing-sm); } .mr-3 { margin-right: var(--spacing-md); } .mr-4 { margin-right: var(--spacing-lg); } .mr-5 { margin-right: var(--spacing-xl); } .mr-6 { margin-right: var(--spacing-2xl); } .mr-7 { margin-right: var(--spacing-3xl); } .mr-8 { margin-right: var(--spacing-4xl); }
.mx-1 { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); } .mx-2 { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); } .mx-3 { margin-left: var(--spacing-md); margin-right: var(--spacing-md); } .mx-4 { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); } .mx-5 { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); } .mx-6 { margin-left: var(--spacing-2xl); margin-right: var(--spacing-2xl); } .mx-7 { margin-left: var(--spacing-3xl); margin-right: var(--spacing-3xl); } .mx-8 { margin-left: var(--spacing-4xl); margin-right: var(--spacing-4xl); }
.my-1 { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .my-2 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .my-3 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); } .my-4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .my-5 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .my-6 { margin-top: var(--spacing-2xl); margin-bottom: var(--spacing-2xl); } .my-7 { margin-top: var(--spacing-3xl); margin-bottom: var(--spacing-3xl); } .my-8 { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-4xl); }
.m-1 { margin: var(--spacing-xs); } .m-2 { margin: var(--spacing-sm); } .m-3 { margin: var(--spacing-md); } .m-4 { margin: var(--spacing-lg); } .m-5 { margin: var(--spacing-xl); } .m-6 { margin: var(--spacing-2xl); } .m-7 { margin: var(--spacing-3xl); } .m-8 { margin: var(--spacing-4xl); }
/* Paddings */
.pt-1 { padding-top: var(--spacing-xs); } .pt-2 { padding-top: var(--spacing-sm); } .pt-3 { padding-top: var(--spacing-md); } .pt-4 { padding-top: var(--spacing-lg); } .pt-5 { padding-top: var(--spacing-xl); } .pt-6 { padding-top: var(--spacing-2xl); } .pt-7 { padding-top: var(--spacing-3xl); } .pt-8 { padding-top: var(--spacing-4xl); }
.pb-1 { padding-bottom: var(--spacing-xs); } .pb-2 { padding-bottom: var(--spacing-sm); } .pb-3 { padding-bottom: var(--spacing-md); } .pb-4 { padding-bottom: var(--spacing-lg); } .pb-5 { padding-bottom: var(--spacing-xl); } .pb-6 { padding-bottom: var(--spacing-2xl); } .pb-7 { padding-bottom: var(--spacing-3xl); } .pb-8 { padding-bottom: var(--spacing-4xl); }
.pl-1 { padding-left: var(--spacing-xs); } .pl-2 { padding-left: var(--spacing-sm); } .pl-3 { padding-left: var(--spacing-md); } .pl-4 { padding-left: var(--spacing-lg); } .pl-5 { padding-left: var(--spacing-xl); } .pl-6 { padding-left: var(--spacing-2xl); } .pl-7 { padding-left: var(--spacing-3xl); } .pl-8 { padding-left: var(--spacing-4xl); }
.pr-1 { padding-right: var(--spacing-xs); } .pr-2 { padding-right: var(--spacing-sm); } .pr-3 { padding-right: var(--spacing-md); } .pr-4 { padding-right: var(--spacing-lg); } .pr-5 { padding-right: var(--spacing-xl); } .pr-6 { padding-right: var(--spacing-2xl); } .pr-7 { padding-right: var(--spacing-3xl); } .pr-8 { padding-right: var(--spacing-4xl); }
.px-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } .px-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); } .px-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .px-4 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); } .px-5 { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); } .px-6 { padding-left: var(--spacing-2xl); padding-right: var(--spacing-2xl); } .px-7 { padding-left: var(--spacing-3xl); padding-right: var(--spacing-3xl); } .px-8 { padding-left: var(--spacing-4xl); padding-right: var(--spacing-4xl); }
.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); } .py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .py-5 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); } .py-6 { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); } .py-7 { padding-top: var(--spacing-3xl); padding-bottom: var(--spacing-3xl); } .py-8 { padding-top: var(--spacing-4xl); padding-bottom: var(--spacing-4xl); }
.p-1 { padding: var(--spacing-xs); } .m-2 { margin: var(--spacing-sm); } .p-3 { padding: var(--spacing-md); } .p-4 { padding: var(--spacing-lg); } .p-5 { padding: var(--spacing-xl); } .p-6 { padding: var(--spacing-2xl); } .p-7 { padding: var(--spacing-3xl); } .p-8 { padding: var(--spacing-4xl); }
/* --- Flexbox y Grid --- */
.d-flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.flex-grow { flex-grow: 1; }
.flex-shrink { flex-shrink: 1; }
.gap-1 { gap: var(--spacing-xs); } .gap-2 { gap: var(--spacing-sm); } .gap-3 { gap: var(--spacing-md); } .gap-4 { gap: var(--spacing-lg); } .gap-5 { gap: var(--spacing-xl); }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Ajustado para miniaturas */
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(0, 1fr)); }
.grid-gap-1 { grid-gap: var(--spacing-xs); } .grid-gap-2 { grid-gap: var(--spacing-sm); } .grid-gap-3 { grid-gap: var(--spacing-md); } .grid-gap-4 { grid-gap: var(--spacing-lg); } .grid-gap-5 { grid-gap: var(--spacing-xl); }
/* --- Posicionamiento --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.static { position: static; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; }
.z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; }
.z-modal-overlay { z-index: 1000; }
.z-modal-content { z-index: 1001; }
.z-highest { z-index: 9999; } /* Para elementos que deben estar absolutamente al frente */
/* --- Ancho y Altura --- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; }
/* --- Fondo --- */
.bg-transparent { background-color: transparent; }
.bg-primary { background-color: var(--color-primary-blue); }
.bg-danger { background-color: var(--color-error); }
.bg-warning { background-color: var(--color-accent-orange); }
.bg-info { background-color: var(--color-primary-cyan); }
.bg-card { background-color: var(--color-bg-card); }
/* --- Texto --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-dark { color: var(--color-text-dark); }
.text-light { color: var(--color-text-light); }
.text-primary { color: var(--color-primary-blue); }
.text-danger { color: var(--color-error); }
.text-warning { color: var(--color-accent-orange); }
.text-info { color: var(--color-primary-cyan); }
.text-label-light { color: var(--color-label-light); }
.text-brand-cyan { color: var(--color-primary-cyan); }
.text-brand-pink { color: var(--color-primary-pink); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.italic { font-style: italic; }
/* --- Bordes y Radios --- */
.border { border: 1px solid var(--color-border-dark); }
.border-t { border-top: 1px solid var(--color-border-dark); }
.border-b { border-bottom: 1px solid var(--color-border-dark); }
.border-l { border-left: 1px solid var(--color-border-dark); }
.border-r { border-right: 1px solid var(--color-border-dark); }
.border-none { border: none; }
.border-primary { border-color: var(--color-primary-blue); }
.border-dark { border-color: var(--color-border-dark); }
.border-cyan { border-color: var(--color-primary-cyan); }
.border-pink { border-color: var(--color-primary-pink); }
/* Nuevas clases de borde para el progreso de la rifa */
.border-default-accent { border-color: var(--border-color-default-accent); }
.border-secondary-accent { border-color: var(--border-color-secondary-accent); }
.border-primary-accent { border-color: var(--color-primary-cyan); }
.rounded-sm { border-radius: var(--rounded-sm); }
.rounded-md { border-radius: var(--rounded-md); }
.rounded-lg { border-radius: var(--rounded-lg); }
.rounded-xl { border-radius: var(--rounded-xl); }
.rounded-full { border-radius: var(--rounded-full); }
.rounded-t-lg { border-top-left-radius: var(--rounded-lg); border-top-right-radius: var(--rounded-lg); }
.rounded-b-lg { border-bottom-left-radius: var(--rounded-lg); border-bottom-right-radius: var(--rounded-lg); }
/* --- Sombras --- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-deep { box-shadow: var(--shadow-deep); }
.shadow-neon-cyan { box-shadow: var(--shadow-neon-cyan); }
.shadow-neon-pink { box-shadow: var(--shadow-neon-pink); }
/* --- Visibilidad / Display --- */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
/* --- Transiciones --- */
.transition-all { transition: var(--transition-normal); }
.transition-fast { transition: var(--transition-fast); }
.transition-slow { transition: var(--transition-slow); }
.transition-opacity { transition: opacity var(--transition-normal); }
.transition-transform { transition: transform var(--transition-normal); }
.transition-colors { transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal); }
/* --- Transformaciones --- */
.translate-x-neg50 { transform: translateX(-50%); }
.translate-y-neg50 { transform: translateY(-50%); }
.translate-xy-neg50 { transform: translate(-50%, -50%); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
/* ==========================================================================
   3. Header y Navegación (Mejorados)
   ========================================================================== */
.header {
    background-color: var(--color-bg-card);
    color: #ffffff;
    padding: 18px 16px;
    /* Usar Grid para posicionar de forma consistente logo (centro) y controles a los extremos */
    display: grid;
    grid-template-columns: auto 1fr auto; /* izquierda / centro / derecha */
    align-items: center; /* Centra verticalmente */
    column-gap: 1rem;
    border-bottom: 2px solid #2f343a;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-self: center; /* Centro horizontal dentro de la columna central */
    position: relative; /* Evita solapamientos por absolute */
    margin: 0;
}

/* Ajustes puntuales para elementos del header cuando se usa grid */
.hamburger-toggle { justify-self: start; }
.nav { justify-self: end; }

/* Ensure header-logo elements (used in some pages) are centered vertically */
.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ajustes responsivos: en pantallas pequeñas el logo vuelve al flujo normal
   para evitar solapamientos con el menú hamburguesa */
@media (max-width: 768px) {
    .logo {
        position: static;
        transform: none;
        margin: 0 auto;
        justify-content: center;
    }
    .logo-text {
        font-size: var(--font-size-4xl);
        text-align: center;
        display: block;
        margin: 0 auto;
    }
    /* Asegurar que el botón hamburguesa se muestre en móvil */
    .hamburger-toggle { display: block; }
}
.logo-text {
    font-size: var(--font-size-6xl); /* Título YESAM más grande */
    font-weight: 800;
    color: var(--color-primary-cyan);
    text-shadow: 0 0 10px rgba(0, 224, 255, 0.7);
    letter-spacing: 0.05em;
    text-align: center; /* Asegura centrado incluso si el contenedor cambia */
    display: block;
    margin: 0 auto;
}

/* Logo SVG sizing */
.logo-svg {
    height: 72px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

/* Visually hidden text for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}
.nav {
    display: flex; /* Activa Flexbox para la barra de navegación */
    align-items: center; /* Alinea sus contenidos verticalmente */
    gap: 2rem; /* Añade espacio entre los grupos de enlaces */
}
.nav-links, .auth-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Alinea los elementos de la lista horizontalmente */
    gap: 1.5rem; /* Espacio entre los enlaces */
    align-items: center;
}
.nav-links li a {
    font-size: var(--font-size-lg);
    font-weight: 700;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--rounded-md);
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light); /* Enlaces con el color de texto claro */
}
.nav-links li a:hover {
    background-color: var(--color-primary-cyan);
    color: var(--color-primary-blue);
    box-shadow: 0 0 12px rgba(0, 224, 255, 0.6);
    transform: translateY(-2px);
}
/* Estilos para los botones de autenticación en el header */
.auth-nav-links {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
}
.auth-nav-links .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--rounded-md);
    font-weight: 700;
    text-align: center;
    transition: var(--transition-normal);
    white-space: nowrap; /* Evita que el texto se rompa */
    box-shadow: var(--shadow-sm);
    border: none; /* Asegúrate de que no haya bordes por defecto */
}
.auth-nav-links .primary-btn {
    background-color: var(--color-primary-cyan); /* Usando la variable primary-color para consistencia */
    color: var(--color-primary-blue);
    border: 2px solid var(--color-primary-cyan);
}
.auth-nav-links .primary-btn:hover {
    background-color: #0056b3; /* Darken primary color */
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.auth-nav-links .secondary-btn {
    background-color: transparent;
    color: var(--color-accent-orange); /* Usando accent-color-1 para el borde */
    border: 2px solid var(--color-accent-orange);
}
.auth-nav-links .secondary-btn:hover {
    background-color: var(--color-accent-orange);
    color: var(--color-bg-card); /* Texto oscuro para el fondo claro del hover */
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
/* Menú de Hamburguesa (para móviles) */
.hamburger-toggle, .close-menu-toggle {
    display: none; /* Oculto por defecto en desktop y se controlará en móvil */
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    color: var(--color-primary-cyan);
    cursor: pointer;
    transition: var(--transition-fast);
    padding: var(--spacing-xs);
    border-radius: var(--rounded-md);
}
.hamburger-toggle:hover, .close-menu-toggle:hover {
    background-color: rgba(0, 224, 255, 0.1);
    transform: scale(1.1);
}
/* ==========================================================================
   4. Contenedor Principal (Card) y Dashboard (Mejorados)
   ========================================================================== */
.main-content {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea al inicio verticalmente */
    padding: var(--spacing-3xl) var(--spacing-md);
    min-height: calc(100vh - 150px); /* Ajusta la altura mínima */
    flex-grow: 1; /* Permite que ocupe el espacio restante */
    flex-direction: column; /* Agregado para que las secciones se apilen */
    gap: var(--spacing-3xl); /* Espacio entre secciones */
    text-align: center; /* Centrar texto por defecto */
    width: 100%; /* Ocupa todo el ancho disponible */
}
/* Botones generales */
.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--rounded-lg);
    font-size: var(--font-size-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--shadow-md);
    border: none;
}
.btn.primary-btn {
    background-color: var(--color-primary-cyan);
    color: var(--color-primary-blue);
    border: 2px solid var(--color-primary-cyan);
}
.btn.primary-btn:hover {
    background-color: #0056b3; /* Darken primary color */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 15px rgba(0, 123, 255, 0.3);
    text-decoration: none;
}
.btn.secondary-btn {
    background-color: var(--color-accent-orange);
    color: var(--color-text-dark);
    border: 2px solid var(--color-accent-orange);
}
.btn.secondary-btn:hover {
    background-color: #e0a800; /* Darken accent color 2 */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 15px rgba(255, 193, 7, 0.3);
    text-decoration: none;
}
.card {
    background-color: var(--color-bg-card);
    padding: var(--spacing-2xl) var(--spacing-3xl);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-deep);
    width: 90%;
    max-width: var(--max-w-xl); /* Ajustado a un tamaño más común para tarjetas */
    margin: var(--spacing-lg) auto; /* Centrado con margen superior */
    text-align: center;
    border: 1px solid var(--color-border-dark);
}
.dashboard-card {
    max-width: var(--max-w-4xl); /* Más ancho para el dashboard */
    padding: var(--spacing-3xl) var(--spacing-4xl);
}
.card-title {
    font-size: var(--font-size-4xl);
    color: var(--color-primary-cyan);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: var(--spacing-md);
    text-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
}
.text-light-label {
    color: var(--color-label-light);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm); /* Texto más pequeño */
}
/* Sección de Rifas */
.raffles-section {
    margin-top: var(--spacing-3xl);
    width: 100%;
    text-align: left;
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-dark);
}
.raffles-section h3 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-cyan); /* Más consistente con la paleta principal */
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: var(--spacing-sm);
    text-shadow: 0 0 6px rgba(0, 224, 255, 0.35);
}
.raffles-section p {
    /* Mostrar el texto descriptivo con alineación a la izquierda para listas y subpárrafos */
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--color-label-light);
    max-width: var(--max-w-2xl);
    margin-left: auto;
    margin-right: auto;
}
.raffle-thumbnails-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas y un poco más grandes */
    gap: var(--spacing-2xl);
    justify-content: center;
    padding: var(--spacing-md);
}
/* Centrar las listas dentro de la sección de rifas (anula utilidades como .list-disc y .ml-6) */
.raffles-section ul {
    list-style-position: inside; /* pone el marcador junto al texto */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important; /* evita la sangría impuesta por utilidades */
    text-align: center; /* centra el contenido de cada li */
}
.raffles-section ul li {
    display: list-item; /* asegurar el comportamiento de lista */
    margin-bottom: var(--spacing-sm);
}
@media (max-width: 768px) {
    /* En móvil centramos la descripción para mejor legibilidad */
    .raffles-section p {
        text-align: center;
    }
    /* Reducir ligeramente el tamaño de título en miniaturas en pantallas pequeñas */
    .thumbnail-title {
        font-size: var(--font-size-lg);
    }
}
.raffle-thumbnail {
    background-color: #2b354d; /* Fondo de la miniatura */
    border-radius: var(--rounded-xl);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    cursor: pointer;
    border: 3px solid transparent; /* Borde inicial transparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 380px; /* Altura mínima para consistencia */
}
.raffle-thumbnail:hover {
    transform: translateY(-var(--spacing-sm));
    box-shadow: var(--shadow-neon-cyan);
    border-color: var(--color-primary-cyan);
}
.raffle-thumbnail.selected {
    border-color: var(--color-primary-pink);
    box-shadow: var(--shadow-neon-pink);
}
/* Nuevos estilos para los premios principales */
.raffle-thumbnail.main-prize {
    border-color: var(--color-accent-orange); /* Borde de color naranja */
    box-shadow: 0 0 25px rgba(255, 165, 0, 0.9), 0 0 10px rgba(255, 105, 180, 0.5); /* Sombra naranja y rosa */
    transform: scale(1.03); /* Ligeramente más grande para destacar */
}
.raffle-thumbnail.main-prize:hover {
    transform: translateY(-var(--spacing-sm)) scale(1.05); /* Más grande al pasar el ratón */
    box-shadow: 0 0 30px rgba(255, 165, 0, 1), 0 0 15px rgba(0, 224, 255, 0.7); /* Sombra más intensa */
}
/* Clases de borde por porcentaje de completado */
/* Estas variables se usarán ahora para los bordes */
.raffle-thumbnail.border-primary-accent {
    border-color: var(--border-color-primary-accent);
}
.raffle-thumbnail.border-secondary-accent {
    border-color: var(--border-color-secondary-accent);
}
.raffle-thumbnail.border-default-accent {
    border-color: var(--border-color-default-accent);
}
.thumbnail-img {
    width: 100%;
    height: 180px; /* Altura fija para las imágenes de miniatura */
    border-radius: var(--rounded-lg);
    margin-bottom: var(--spacing-md);
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    transition: transform 0.3s ease;
}
.raffle-thumbnail:hover .thumbnail-img {
    transform: scale(1.05);
}
.thumbnail-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    /* Usar texto claro para garantizar buena legibilidad sobre el fondo oscuro */
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}
.thumbnail-percentage {
    font-size: var(--font-size-sm);
    color: var(--color-label-light);
    margin-bottom: var(--spacing-sm);
}
.thumbnail-price {
    font-size: var(--font-size-lg);
    font-weight: bold;
    /* Mostrar el texto de la boleta en color claro (blanco/gris claro) */
    color: var(--color-text-light);
    margin-top: var(--spacing-md);
}

/* Utility class: aplicar el mismo color del precio de la boleta a cualquier elemento */
.match-price-color {
    color: var(--raffle-price-color) !important;
}
/* Barra de progreso */
.progress-bar-container {
    width: 90%;
    background-color: var(--color-border-dark);
    position: relative; /* Permite posicionar el porcentaje encima de la barra */
    border-radius: var(--rounded-full);
    height: 12px; /* Un poco más alta */
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.progress-bar-container.large {
    height: 18px; /* Barra de progreso más grande en los detalles */
    margin: var(--spacing-lg) auto;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary-cyan), var(--color-primary-pink)); /* Gradiente de progreso */
    width: 0%; /* Se controla con JS */
    border-radius: var(--rounded-full);
    transition: width var(--transition-slow);
}
.progress-text {
    font-size: var(--font-size-sm);
    color: var(--color-label-light);
    margin-top: var(--spacing-sm);
    font-weight: 500;
}

/* Número de porcentaje centrado dentro de la barra */
.progress-bar-percentage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-dark);
    text-shadow: 0 1px 0 #fff, 0 0 6px rgba(0,0,0,0.08);
    pointer-events: none;
}
.progress-bar-container.large .progress-bar-percentage {
    font-size: 1rem;
}
/* Cuando la porción rellena es suficientemente grande, mostrar el texto en blanco para buen contraste */
.progress-bar-percentage.on-filled {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Transiciones suaves para cambios de color y posición */
.progress-bar-percentage {
    transition: color 220ms ease, transform 200ms ease;
}
/* Sección de Video Destacado */
.video-section {
    background-color: #1a2035; /* Color de fondo personalizado */
    padding: 3rem 1.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid #2f343a;
    max-width: 900px; /* Establece un ancho máximo para el contenedor */
    margin: 4rem auto; /* Centra el contenedor en la página */
    text-align: center; /* Centra el texto dentro de la sección */
}
.video-section h3 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-pink);
    margin-bottom: var(--spacing-lg);
}
.video-section p {
    font-size: var(--font-size-lg);
    color: var(--color-label-light);
    margin-bottom: var(--spacing-xl);
}
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--rounded-lg);
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.8); /* Sombra rosa neón más fuerte */
    max-width: var(--max-w-2xl);
    margin: var(--spacing-lg) auto;
    border: 2px solid var(--color-primary-pink);
}
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--rounded-lg);
}
/* ==========================================================================
   5. Formularios y Campos (Mejorados)
   ========================================================================== */
.form-group {
    margin-bottom: var(--spacing-lg);
    text-align: left;
    position: relative;
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-label-light);
    font-weight: 700;
    font-size: var(--font-size-sm);
}
.form-group input[type="text"],
.form-group input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--rounded-md);
    background-color: #2b354d;
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    outline: none;
    transition: var(--transition-normal);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.form-group input:focus,
.form-group select:focus {
    border-color: var(--color-primary-cyan);
    box-shadow: 0 0 8px rgba(0, 224, 255, 0.5), inset 0 1px 3px rgba(0,0,0,0.3);
}
.form-group.success input,
.form-group.success select {
    border-color: var(--color-success);
}
.form-group.error input,
.form-group.error select {
    border-color: var(--color-error);
}
/* Estilos para el texto de error */
.error-message { /* Renombrado de '.error' para evitar conflictos con clases de utilidad */
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: block;
    text-align: left;
}
/* Iconos de validación */
.validation-icon {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-base);
    pointer-events: none;
}
.form-group.success .validation-icon {
    color: var(--color-success);
}
.form-group.error .validation-icon {
    color: var(--color-error);
}
/* Contenedor de contraseña con icono de alternancia */
.password-container {
    position: relative;
    width: 100%;
}
.password-container input {
    padding-right: var(--spacing-xl); /* Espacio para el icono */
}
.password-toggle {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-label-light);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: var(--spacing-xs);
    border-radius: var(--rounded-sm);
    transition: var(--transition-fast);
}
.password-toggle:hover {
    color: var(--color-primary-cyan);
    background-color: rgba(0, 224, 255, 0.1);
}
/* Información de la contraseña */
.password-info {
    font-size: var(--font-size-sm);
    color: var(--color-label-light);
    margin-top: var(--spacing-sm);
    text-align: left;
    background-color: #1a2035;
    border: 1px solid var(--color-primary-cyan);
    border-radius: var(--rounded-md);
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: var(--line-height-tight);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    box-shadow: var(--shadow-md);
}
.password-info.visible {
    max-height: 200px; /* Suficiente para el contenido, ajusta si es necesario */
    opacity: 1;
}
.password-info ul {
    list-style-type: disc;
    margin-left: var(--spacing-xl);
    margin-top: var(--spacing-sm);
}
.password-info li {
    margin-bottom: var(--spacing-xs);
}
/* Campo "Otra ciudad" */
.form-group.hidden-field { /* Renombrado para mayor claridad */
    display: none;
}
/* ==========================================================================
   Sección del Checkbox de Términos y Condiciones (RECREADA DESDE CERO)
   ========================================================================== */
/* Contenedor principal del checkbox */
.terms-checkbox-group {
    display: flex; /* Para alinear el icono y el texto */
    align-items: center; /* Centrar verticalmente los elementos */
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-sm); /* Espacio entre el icono y el texto */
    position: relative; /* Necesario para posicionar el icono visual y el mensaje de error */
    text-align: left;
}
/* NUEVAS CLASES PARA GESTIONAR LA VISIBILIDAD DE FORMA ACCESIBLE */
.terms-checkbox-group.hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden; /* Evita que el contenido "oculto" afecte el layout */
    transition: visibility 0s 0.3s, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}
.terms-checkbox-group.visible {
    visibility: visible;
    opacity: 1;
    height: auto; /* Permite que el contenido tome la altura necesaria */
    margin-top: var(--spacing-lg); /* Restaurar margen para cuando sea visible */
    margin-bottom: var(--spacing-lg);
    padding-top: initial; /* Restaurar padding */
    padding-bottom: initial;
    transition: visibility 0s 0s, opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}
/* 1. OCULTAR EL CHECKBOX NATIVO DE FORMA ACCESIBLE */
/* Esta técnica lo hace invisible pero completamente funcional para lectores de pantalla y navegación por teclado */
.terms-checkbox-group input[type="checkbox"] {
    /* Mueve el checkbox nativo fuera del área visible de la pantalla */
    position: absolute;
    left: -9999px; /* Mantiene fuera de pantalla, pero con width/height/opacity 0 para mayor robustez */
    width: 0;
    height: 0;
    padding: 0;
    margin: -1px; /* Para evitar que ocupe espacio aunque sea 1px */
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* Hace que el área ocupada sea cero para navegadores antiguos */
    white-space: nowrap; /* Evita que el texto de accesibilidad se rompa */
    border: 0;
    opacity: 0; /* Asegura que sea invisible */
}
/* 2. ESTILO DEL LABEL Y EL ICONO VISUAL */
.terms-checkbox-group .terms-link-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-label-light);
    flex-grow: 1; /* Permite que el texto del label ocupe el espacio disponible */
    padding-left: 28px; /* Espacio para nuestro icono visual personalizado */
    position: relative; /* Para el posicionamiento del pseudo-elemento de "check" */
}
/* 3. EL ICONO VISUAL PERSONALIZADO (EL CUADRADO) */
.terms-checkbox-group .terms-link-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 2px solid var(--color-label-light);
    border-radius: 4px;
    background-color: #2b354d; /* Fondo un poco más oscuro */
    transition: var(--transition-normal);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
/* 4. ESTADO CHECKED DEL ICONO VISUAL */
.terms-checkbox-group input[type="checkbox"]:checked + .terms-link-label::before {
    background-color: var(--color-success);
    border-color: var(--color-success);
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}
/* 5. EL "CHULO" DENTRO DEL ICONO VISUAL CUANDO ESTÁ CHECKED */
.terms-checkbox-group input[type="checkbox"]:checked + .terms-link-label::after {
    content: '\f00c'; /* Icono de Font Awesome para un "check" */
    font-family: 'Font Awesome 5 Free'; /* Asegúrate de que Font Awesome esté enlazado */
    font-weight: 900; /* Para que el ícono sea sólido */
    font-size: var(--font-size-sm);
    color: white;
    position: absolute;
    left: 0; /* Lo posicionamos sobre el pseudo-elemento ::before */
    top: 50%;
    transform: translate(calc(0px + 10px), -50%); /* Centra el check dentro del cuadrado de 20px */
    transition: var(--transition-normal);
    pointer-events: none; /* Asegura que no interfiera con el clic en el label */
}
/* 6. ESTADO DE FOCUS PARA ACCESIBILIDAD */
/* Cuando el checkbox oculto está enfocado, mostramos un anillo de foco en el icono visual */
.terms-checkbox-group input[type="checkbox"]:focus + .terms-link-label::before {
    outline: 2px solid var(--color-primary-cyan); /* Anillo de foco */
    outline-offset: 2px; /* Espacio entre el borde y el anillo */
    box-shadow: 0 0 0 4px rgba(0, 224, 255, 0.3); /* Sombra suave para destacar el foco */
}
/* 7. ESTADOS DE VALIDACIÓN VISUAL DEL CHECKBOX (ÉXITO/ERROR) */
/* Aplicamos estos estilos al label para que afecten al ::before */
.form-group.success .terms-link-label::before {
    border-color: var(--color-success);
}
.form-group.error .terms-link-label::before {
    border-color: var(--color-error);
}
.form-group.error input[type="checkbox"]:checked + .terms-link-label::before {
    background-color: var(--color-error);
    border-color: var(--color-error);
}
/* Estilos para el texto de error específico del checkbox */
.terms-checkbox-group .error-message { /* Usamos .error-message para consistencia */
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: block;
    text-align: left;
    position: absolute; /* Lo posiciona debajo del grupo */
    top: 100%;
    left: 0;
    width: 100%;
}
/* ==========================================================================
   6. Botones (Mejorados)
   ========================================================================== */
.submit-btn {
    background: linear-gradient(45deg, var(--color-primary-cyan), var(--color-primary-pink));
    color: var(--color-primary-blue);
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--rounded-lg);
    font-size: var(--font-size-lg);
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-neon-cyan);
    width: 100%;
    margin-top: var(--spacing-lg); /* Añadido margen superior por defecto */
}
.submit-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 224, 255, 0.8), 0 0 15px rgba(255, 105, 180, 0.6);
    opacity: 0.95;
}
.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 224, 255, 0.3);
}
/* Botones específicos del dashboard */
.dashboard-btn {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-lg);
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.dashboard-actions .dashboard-btn {
    background: var(--color-primary-pink);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}
.dashboard-actions .dashboard-btn:hover {
    background: linear-gradient(45deg, var(--color-primary-pink), #ff4a9b);
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.6);
}
.cancel-btn {
    background-color: var(--color-error);
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
    margin-top: var(--spacing-md);
}
.cancel-btn:hover {
    background-color: #c82333;
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.6);
}
.spaced-button {
    margin-top: var(--spacing-lg);
}
/* ==========================================================================
   7. Mensajes (Toast/Snackbar)
   ========================================================================== */
.message-box {
    position: fixed;
    bottom: var(--spacing-2xl);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--rounded-lg);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-base);
    text-align: center;
    z-index: var(--z-highest); /* Asegura que esté por encima de todo */
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    min-width: 250px;
    max-width: 90%;
}
.message-box:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px); /* Un pequeño movimiento hacia arriba */
}
.message-box.success {
    background-color: var(--color-success);
}
.message-box.error {
    background-color: var(--color-error);
}
.message-box.info {
    background-color: var(--color-primary-cyan);
    color: var(--color-primary-blue); /* Texto oscuro para info */
}
/* ==========================================================================
   8. Enlaces de Autenticación (Login/Registro)
   ========================================================================== */
.login-link {
    display: block;
    margin-top: var(--spacing-xl);
    font-size: var(--font-size-base);
    color: var(--color-label-light);
}
.login-link a {
    color: var(--color-primary-pink);
    font-weight: 700;
}
.login-link a:hover {
    color: var(--color-primary-cyan);
}
/* ==========================================================================
   9. Footer (Mejorado)
   ========================================================================== */
.footer {
    background-color: var(--color-bg-card);
    padding: var(--spacing-2xl) var(--spacing-md);
    border-top: 2px solid var(--color-border-dark);
    text-align: center;
    margin-top: auto; /* Para que el footer se pegue al final */
    color: var(--color-label-light);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
}
.footer-container {
    max-width: var(--max-w-6xl);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    gap: var(--spacing-xl);
}
.footer-info, .footer-social {
    flex: 1;
    min-width: 250px;
    padding: var(--spacing-sm);
    text-align: left;
}
.footer-info p {
    color: var(--color-label-light);
}
.footer-title {
    font-size: var(--font-size-xl);
    color: var(--color-primary-cyan);
    margin-bottom: var(--spacing-md);
    font-weight: 800;
    text-shadow: 0 0 5px rgba(0, 224, 255, 0.4);
}
.footer-link {
    color: var(--color-primary-pink);
    text-decoration: underline;
}
.footer-link:hover {
    color: var(--color-primary-cyan);
}
.social-links {
    display: flex;
    justify-content: flex-start; /* Alineado a la izquierda para desktop */
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}
.social-links li a {
    font-size: var(--font-size-2xl);
    color: var(--color-text-light);
    transition: var(--transition-normal);
}
.social-links li a:hover {
    color: var(--color-primary-cyan);
    transform: translateY(-3px) scale(1.1);
}
/* ==========================================================================
   10. Modales (General, Confirmación y Detalles de Rifa - Ajustados y Mejorados)
   ========================================================================== */
/* Overlay oscuro que cubre toda la pantalla */
.modal-overlay {
    display: flex; /* Siempre flex para centrado, visibilidad controlada por opacity/visibility */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo más oscuro para mayor enfoque */
    z-index: 1000;
    justify-content: center; /* Centrar contenido horizontalmente */
    align-items: center; /* Centrar contenido verticalmente */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    backdrop-filter: blur(5px); /* Efecto de desenfoque moderno */
    -webkit-backdrop-filter: blur(5px); /* Para compatibilidad con Safari */
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
/* NUEVO: Clase para modals de premios principales, más ancha en desktop */
@media (min-width: 769px) { /* Aplica solo para pantallas mayores a móviles */
    .raffle-details-container.main-prize-modal {
        max-width: var(--max-w-4xl); /* Más ancho para premios principales en desktop */
    }
}
/* Estilos específicos para el modal de confirmación de cierre de sesión */
/* Tu .modal original ahora actúa como un overlay más específico con su propio contenido */
/* Este es el modal para Términos y Condiciones también */
.modal {
    display: flex; /* Siempre flex, visibilidad controlada por opacity/visibility */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); /* Fondo semitransparente oscuro para el modal de logout */
    z-index: 1002; /* Más alto que el overlay general si ambos pudieran estar activos */
    align-items: center; /* Centrar el contenido horizontalmente */
    justify-content: center; /* Centrar el contenido verticalmente */
    padding: var(--spacing-lg);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
/* Cuando el modal de confirmación está activo, se muestra usando flex para centrado */
.modal.active {
    opacity: 1;
    visibility: visible;
}
.confirm-modal-content, /* Aplica estos estilos al contenido del modal de confirmación */
.modal-content /* Y también al contenido del modal de términos y condiciones */
{
    background-color: var(--color-bg-card);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-primary-cyan);
    border-radius: var(--rounded-xl);
    max-width: var(--max-w-2xl); /* **Ajuste clave: Ancho máximo del modal** */
    width: 90%; /* Asegura que no sea excesivamente ancho en pantallas más pequeñas */
    max-height: 95vh; /* **Ajuste clave: Altura máxima para permitir scroll** */
    overflow-y: auto; /* **Ajuste clave: Habilita el scroll vertical** */
    box-shadow: var(--shadow-neon-cyan);
    text-align: left; /* Alineado a la izquierda para mejor lectura de contrato */
    position: relative; /* Para el botón de cerrar */
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    transform: scale(0.9); /* Comienza más pequeño */
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
}
.modal.active .confirm-modal-content, /* Cuando el modal overlay está activo, el contenido aparece */
.modal.active .modal-content /* Cuando el modal de términos está activo, el contenido aparece */
{
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* Escala a tamaño normal */
}
/* Estilos de scrollbar para el contenido del modal (tanto confirmación como términos) */
.modal-content::-webkit-scrollbar,
.confirm-modal-content::-webkit-scrollbar {
    width: 8px;
}
.modal-content::-webkit-scrollbar-track,
.confirm-modal-content::-webkit-scrollbar-track {
    background: var(--color-primary-blue);
    border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb,
.confirm-modal-content::-webkit-scrollbar-thumb {
    background: var(--color-primary-cyan);
    border-radius: 4px;
}
.modal-content::-webkit-scrollbar-thumb:hover,
.confirm-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-pink);
}
.confirm-modal-content h2 {
    font-size: var(--font-size-2xl);
    color: var(--color-primary-pink);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.4);
    text-align: center; /* Centrar el título de confirmación */
}
.confirm-modal-content p {
    font-size: var(--font-size-lg);
    color: var(--color-label-light);
    margin-bottom: var(--spacing-lg);
    text-align: center; /* Centrar el párrafo de confirmación */
}
.confirm-modal-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}
.confirm-modal-buttons .btn-yes,
.confirm-modal-buttons .btn-no {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--rounded-md);
    font-size: var(--font-size-base);
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-normal);
    flex: 1;
    max-width: 180px;
}
.confirm-modal-buttons .btn-yes {
    background-color: var(--color-success);
    color: white;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.4);
}
.confirm-modal-buttons .btn-yes:hover {
    background-color: #218838;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.6);
}
.confirm-modal-buttons .btn-no {
    background-color: var(--color-error);
    color: white;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
}
.confirm-modal-buttons .btn-no:hover {
    background-color: #c82333;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.6);
}
/* Botón de cierre para los modales */
.close-button {
    color: var(--color-label-light);
    font-size: var(--font-size-3xl);
    font-weight: bold;
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition-normal);
    z-index: var(--z-highest); /* El más alto para ser siempre clicable */
    background-color: rgba(0,0,0,0.3);
    border-radius: var(--rounded-full);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.close-button:hover,
.close-button:focus {
    color: var(--color-primary-cyan);
    background-color: rgba(0,224,255,0.1);
    transform: rotate(90deg) scale(1.1);
}
/* Estilos para el texto de Terminos y Condiciones dentro del modal (si existieran) */
/* Asegúrate de usar una clase específica si estos son para un modal diferente,
   o que tu HTML tenga '.modal-content' como contenedor. */
.modal-content h1, .modal-content h2, .modal-content h3 {
    color: var(--color-primary-cyan);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}
.modal-content h1 {
    font-size: var(--font-size-3xl);
    border-bottom: 2px solid var(--color-border-dark);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}
.modal-content h2 {
    font-size: var(--font-size-2xl);
}
.modal-content h3 {
    font-size: var(--font-size-xl);
    color: var(--color-label-light);
}
.modal-content p, .modal-content ul {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}
.modal-content ul {
    list-style-type: disc;
    margin-left: var(--spacing-2xl);
}
.modal-content li {
    margin-bottom: var(--spacing-xs);
}
.modal-content a {
    color: var(--color-primary-pink);
    text-decoration: underline;
}
.modal-content a:hover {
    color: var(--color-primary-cyan);
}
.modal-date {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-label-light);
    margin-bottom: var(--spacing-lg);
}
.modal-accept-btn {
    margin-top: var(--spacing-xl);
}
/* --- Nuevos estilos para el contador de boletas y botón de pago --- */
.raffle-purchase-options {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-dark);
    text-align: center;
}
.purchase-info {
    font-size: var(--font-size-base);
    color: var(--color-label-light);
    margin-bottom: var(--spacing-md);
}
/* Contenedor Flex para el contador y el botón de pago */
.purchase-controls {
    display: flex;
    justify-content: space-between; /* Espacia los elementos: contador a la izquierda, botón a la derecha */
    align-items: center; /* Centra verticalmente los elementos */
    gap: var(--spacing-md); /* Espacio entre el contador y el botón */
    margin-top: var(--spacing-lg);
    max-width: 500px; /* Limita el ancho del contenedor en desktop */
    margin-left: auto;
    margin-right: auto;
}
.ticket-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    background-color: #2b354d;
    border-radius: var(--rounded-lg);
    border: 1px solid var(--color-border-dark);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xs); /* Pequeño padding para el contenedor del contador */
}
.counter-btn {
    background-color: var(--color-primary-cyan);
    color: var(--color-primary-blue);
    width: 40px;
    height: 40px;
    border-radius: var(--rounded-md);
    font-size: var(--font-size-xl);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-md);
    flex-shrink: 0; /* Evita que los botones se encojan */
}
.counter-btn:hover {
    background-color: var(--color-primary-pink);
    color: var(--color-text-light);
    transform: scale(1.05);
    box-shadow: var(--shadow-neon-pink);
}
.ticket-display {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-light);
    min-width: 40px; /* Asegura un ancho mínimo para el número */
    text-align: center;
    flex-grow: 1; /* Permite que el display ocupe el espacio */
}
.proceed-to-payment {
    flex-grow: 1; /* Permite que el botón ocupe el espacio restante */
    max-width: 250px; /* Ancho máximo para el botón de pago */
    margin: 0; /* Elimina márgenes automáticos si los tenías */
}
/* Fin de nuevos estilos */
/* ==========================================================================
   Estilos específicos de la página de inicio (CONSOLIDADOS AQUÍ)
   ========================================================================== */
/* Sección de introducción */
.intro-section {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    padding: var(--spacing-2xl);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-lg);
    max-width: var(--max-w-4xl); /* Un poco más grande para la intro */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-3xl); /* Margen para separarlo del carrusel */
}
.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-cyan); /* Usando variable global */
    text-shadow: 0 0 10px rgba(0, 224, 255, 0.7);
}
.section-description {
    font-size: var(--font-size-lg);
    color: var(--color-text-light); /* Usando variable global */
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.auth-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
}
/* Sección del Carrusel */
.carousel-section {
    background-color: rgba(255, 255, 255, 0.05); /* Fondo semitransparente */
    padding: var(--spacing-xl);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-lg);
    max-width: var(--max-w-4xl); /* Ancho máximo para la sección del carrusel */
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-3xl); /* Margen para separarlo de otros elementos */
}
.carousel-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-light);
    text-shadow: 0 0 10px var(--color-primary-cyan);
}
.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 450px; /* Altura fija para el carrusel */
    margin-bottom: var(--spacing-md);
    border-radius: var(--rounded-xl);
    overflow: hidden; /* Asegura que las imágenes no se salgan */
    box-shadow: var(--shadow-deep);
}
.carousel-images-wrapper {
    position: relative;
    width: 100%; /* Ocupa todo el ancho del contenedor */
    height: 100%;
    overflow: hidden;
    border-radius: var(--rounded-xl);
    background-color: var(--color-bg-card); /* Fondo para cuando la imagen no cargue */
}
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para cubrir el área */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    cursor: pointer;
    border-radius: var(--rounded-xl);
}
.carousel-image.active {
    opacity: 1;
}

/* Evitar que imágenes ocultas intercepten eventos y añadir una transición limpia */
.carousel-image {
    pointer-events: none;
}
.carousel-image.active {
    pointer-events: auto;
}
.carousel-btn {
    background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro para botones */
    color: var(--color-primary-cyan);
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: var(--rounded-full); /* Botones circulares */
    transition: var(--transition-normal);
    width: 50px; /* Ancho fijo */
    height: 50px; /* Altura fija */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}
.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-neon-cyan);
}
.carousel-btn.prev-btn {
    left: var(--spacing-md);
}
.carousel-btn.next-btn {
    right: var(--spacing-md);
}
.carousel-description {
    font-size: var(--font-size-md);
    color: var(--color-label-light); /* Usando variable global */
    font-style: italic;
    min-height: 40px; /* Espacio para la descripción */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    background-color: rgba(0, 0, 0, 0.3); /* Fondo semitransparente para la descripción */
    border-radius: var(--rounded-md);
    margin-top: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}
/* Modal de Detalles de Rifa (se usa la clase .modal existente como base) */
#raffle-detail-modal.modal {
    z-index: 1005; /* Asegúrate de que este modal esté por encima de otros si es necesario */
}
#raffle-detail-modal .modal-content {
    max-width: var(--max-w-3xl); /* Ancho un poco más grande para el modal de rifa */
    padding: var(--spacing-2xl);
    text-align: center;
    border: 2px solid var(--color-primary-pink); /* Borde rosa para destacar */
    box-shadow: var(--shadow-neon-pink); /* Sombra neón rosa */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
}
#raffle-detail-modal.active .modal-content {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
#raffle-detail-modal .close-button {
    color: var(--color-label-light);
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-lg);
    font-size: var(--font-size-3xl);
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-normal);
    z-index: var(--z-highest);
    background-color: rgba(0,0,0,0.4);
    border-radius: var(--rounded-full);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#raffle-detail-modal .close-button:hover {
    color: var(--color-primary-pink);
    background-color: rgba(255,105,180,0.1);
    transform: rotate(90deg) scale(1.1);
}
.modal-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--rounded-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-dark);
}
.modal-title {
    font-size: var(--font-size-2xl);
    color: var(--color-primary-cyan);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(0, 224, 255, 0.5);
}
.modal-description {
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xl);
}
.modal-apuesta-btn {
    background: linear-gradient(45deg, var(--color-primary-cyan), var(--color-primary-pink));
    color: var(--color-primary-blue);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--rounded-lg);
    font-size: var(--font-size-lg);
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-neon-cyan);
    display: block; /* Asegura que el botón ocupe su propio espacio */
    margin: var(--spacing-lg) auto 0 auto; /* Centrar y margen superior */
    max-width: 300px; /* Limita el ancho del botón */
}
.modal-apuesta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0, 224, 255, 0.8), 0 0 15px rgba(255, 105, 180, 0.6);
}
/* ==========================================================================
   11. Scrollbar Personalizado (Webkit)
   ========================================================================== */
::-webkit-scrollbar {
    width: 12px; /* Un poco más ancho */
    height: 12px; /* Para scrollbars horizontales */
}
::-webkit-scrollbar-track {
    background: #101533; /* Fondo oscuro, más integrado */
    border-radius: var(--rounded-full);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--color-primary-cyan), var(--color-primary-pink)); /* Gradiente en el thumb */
    border-radius: var(--rounded-full);
    border: 3px solid #101533; /* Borde más pronunciado */
    transition: var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(var(--color-primary-pink), var(--color-primary-cyan)); /* Invertir gradiente al pasar el ratón */
    border-color: #2b354d;
}
/* ==========================================================================
   12. Estilos para el Panel de Administración (Extendidos)
   ========================================================================== */
/* Aunque no es parte del dashboard_usuario, se incluyen para un CSS completo */
.admin-dashboard-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-primary-blue);
    color: var(--color-text-light);
}
.admin-sidebar {
    width: 280px;
    background-color: #1a2035;
    padding: var(--spacing-2xl);
    border-right: 2px solid var(--color-border-dark);
    box-shadow: var(--shadow-deep);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0; /* Evita que el sidebar se encoja */
}
.admin-sidebar .logo {
    margin-bottom: var(--spacing-3xl);
    justify-content: center;
    border-bottom: 1px solid rgba(0, 224, 255, 0.3); /* Usando var en lugar de rgba(var...) */
    padding-bottom: var(--spacing-lg);
}
.admin-sidebar .logo .logo-text {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-cyan);
    text-shadow: 0 0 10px rgba(0, 224, 255, 0.8); /* Usando var en lugar de rgba(var...) */
}
.admin-sidebar .logo .logo-icon {
    font-size: var(--font-size-4xl);
    color: var(--color-primary-cyan);
}
.admin-sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    list-style: none;
    padding: 0;
}
.admin-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    border-radius: var(--rounded-md);
    transition: var(--transition-normal);
}
.admin-sidebar-nav li a:hover,
.admin-sidebar-nav li a.active {
    background-color: var(--color-primary-cyan);
    color: var(--color-primary-blue);
    box-shadow: 0 0 10px rgba(0, 224, 255, 0.5);
    transform: translateX(5px);
}
.admin-sidebar-nav li a .fas {
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}
.admin-sidebar-nav li a:hover .fas,
.admin-sidebar-nav li a.active .fas {
    color: var(--color-primary-blue);
}
.admin-main-content {
    flex-grow: 1;
    padding: var(--spacing-3xl);
    background-color: var(--color-primary-blue);
    color: var(--color-text-light);
}
.admin-section {
    background-color: #1a2035;
    padding: var(--spacing-2xl);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-deep);
    margin-bottom: var(--spacing-3xl);
    border: 1px solid var(--color-border-dark);
}
.admin-section h2 {
    color: var(--color-primary-pink);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid rgba(255, 105, 180, 0.4);
    padding-bottom: var(--spacing-md);
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.6);
    font-size: var(--font-size-3xl);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-xl);
}
.admin-table th, .admin-table td {
    border: 1px solid var(--color-border-dark);
    padding: var(--spacing-md);
    text-align: left;
    color: var(--color-text-light);
    font-size: var(--font-size-base);
}
.admin-table th {
    background-color: #2c334d;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    color: var(--color-primary-cyan);
}
.admin-table tbody tr:nth-child(even) {
    background-color: #1f263d;
}
.admin-table tbody tr:hover {
    background-color: #3f4a6e;
    transition: var(--transition-fast);
}
.admin-table .action-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}
.admin-table .action-buttons .btn { /* Usar la clase base btn */
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--rounded-sm);
}
.admin-table .action-buttons .btn-edit {
    background-color: var(--color-info); /* Usando la variable info */
    color: white;
}
.admin-table .action-buttons .btn-edit:hover {
    background-color: #008c9e; /* Un tono más oscuro de info */
}
.admin-table .action-buttons .btn-delete {
    background-color: var(--color-error);
    color: white;
}
.admin-table .action-buttons .btn-delete:hover {
    background-color: #c82333; /* Un tono más oscuro de error */
}
/* ==========================================================================
   13. Media Queries (Diseño Responsivo - Mejoradas)
   ========================================================================== */
/* Teléfonos pequeños y medianos (hasta 768px) */
@media (max-width: 768px) {
    body {
        font-size: var(--font-size-sm);
    }
    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }
    h3 { font-size: var(--font-size-2xl); }
    h4 { font-size: var(--font-size-xl); }
    .header {
        flex-direction: column; /* Mantiene la dirección de columna que el usuario indicó como "funcional" */
        align-items: flex-start;
        padding: var(--spacing-md);
    }
    .header .logo {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-md);
    }
    .header .logo-text {
        font-size: var(--font-size-6xl);
        text-align: center;
        display: block;
        margin: 0 auto;
    }
    .header .logo-icon {
        font-size: var(--font-size-4xl);
    }
    /* Controles de hamburguesa/cierre - Ahora se controlan con .header.menu-open */
    .hamburger-toggle {
        display: block; /* Visible por defecto cuando el menú está CERRADO */
        position: absolute;
        right: var(--spacing-md);
        top: 50%;
        transform: translateY(-50%);
    }
    .close-menu-toggle {
        display: none; /* Oculto por defecto cuando el menú está CERRADO */
        position: absolute;
        top: var(--spacing-lg);
        right: var(--spacing-lg);
        font-size: var(--font-size-3xl);
        color: var(--color-primary-pink);
    }
    /* Lógica para alternar los botones de hamburguesa/cierre cuando el menú está abierto */
    .header.menu-open .hamburger-toggle {
        display: none; /* Oculta la hamburguesa cuando el menú está abierto */
    }
    .header.menu-open .close-menu-toggle {
        display: block; /* Muestra el botón de cierre cuando el menú está abierto */
    }
    /* Navegación móvil: se desliza desde la DERECHA como el usuario indicó como "funcional" */
    .nav {
        position: fixed;
        top: 0;
        right: -100%; /* Inicia fuera de la pantalla a la derecha */
        width: 75%;
        height: 100%;
        background-color: var(--color-bg-card);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4); /* Sombra hacia la izquierda */
        transition: right 0.4s ease-in-out;
        z-index: 600;
        display: flex;
        gap: 2rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: var(--spacing-4xl);
    }
    .nav.active {
        right: 0; /* Muestra el menú deslizándose */
    }
    .nav-links {
        flex-direction: column;
        gap: var(--spacing-2xl);
        width: 100%;
        text-align: center;
    }
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid rgba(224, 224, 224, 0.1);
        padding-bottom: var(--spacing-sm);
    }
    .nav-links li:last-child {
        border-bottom: none;
    }
    .nav-links a {
        display: block;
        padding: var(--spacing-md);
        font-size: var(--font-size-xl);
        border-radius: var(--rounded-lg);
    }
    /* Estilos para los botones de autenticación en el header (móvil) */
    .auth-nav-links {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-sm);
        padding: var(--spacing-lg);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .auth-nav-links .btn {
        width: 100%;
    }
    /* === NUEVO CAMBIO: Estilo para el botón de Regístrate Ahora en el menú hamburguesa === */
    /* Cuando el menú hamburguesa está abierto, los botones de auth-nav-links deben parecer enlaces */
    .nav.active .auth-nav-links .btn.primary-btn {
        background-color: transparent; /* Quita el fondo azul */
        border: none; /* Quita el borde */
        box-shadow: none; /* Quita la sombra */
        color: var(--color-text-light); /* Usa el color de texto normal */
        padding: var(--spacing-md); /* Ajusta el padding para que parezca un enlace */
        transform: none; /* Elimina cualquier transformación (como translateY) */
    }
    .nav.active .auth-nav-links .btn.primary-btn:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Mantener el hover de enlace */
        color: var(--color-primary-cyan);
    }
    .main-content {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
    .dashboard-card {
        padding: var(--spacing-xl);
    }
    .card-title {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-lg);
    }
    .raffles-section h3 {
        font-size: var(--font-size-2xl);
    }
    .raffle-thumbnails-container {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        gap: var(--spacing-lg);
    }
    .raffle-thumbnail {
        padding: var(--spacing-md);
        min-height: 350px; /* Ajuste para móvil */
    }
    .thumbnail-img {
        height: 150px;
    }
    .raffle-detail-image-carousel {
        height: 200px;
    }
    .carousel-arrow {
        font-size: var(--font-size-xl);
        padding: var(--spacing-xs) var(--spacing-sm);
        width: 40px;
        height: 40px;
    }
    .carousel-arrow.left { left: var(--spacing-xs); }
    .carousel-arrow.right { right: var(--spacing-xs); }
    .carousel-image-count {
        font-size: var(--font-size-xs);
        padding: 3px 6px;
    }
    .submit-btn {
        padding: var(--spacing-sm) var(--spacing-xl);
        font-size: var(--font-size-lg);
        min-width: unset;
        width: 100%; /* Ocupa todo el ancho disponible */
    }
    .confirm-modal-content, .modal-content { /* Ajuste clave para modals en móvil */
        max-width: 90%;
        padding: var(--spacing-xl);
    }
    .confirm-modal-buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .message-box {
        width: 90%;
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        bottom: var(--spacing-lg);
    }
    .footer-info, .footer-social {
        min-width: unset; /* Permite que se ajuste completamente */
        max-width: 100%;
    }
    .footer-social .social-links {
        justify-content: center;
    }
    .footer-info p {
        font-size: var(--font-size-xs);
    }
    /* Admin Sidebar en móvil */
    .admin-dashboard-layout {
        flex-direction: column;
    }
    .admin-sidebar {
        width: 100%;
        height: auto;
        max-height: 70vh; /* Para que no ocupe toda la pantalla verticalmente si es muy largo */
        position: relative;
        overflow-y: auto;
        border-right: none;
        border-bottom: 2px solid var(--color-border-dark);
    }
    .admin-sidebar .logo {
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-sm);
    }
    .admin-sidebar-nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .admin-sidebar-nav li {
        flex: 1 1 auto;
        text-align: center;
    }
    .admin-sidebar-nav li a {
        justify-content: center;
        padding: var(--spacing-xs);
        font-size: var(--font-size-sm);
        gap: var(--spacing-xs);
    }
    .admin-main-content {
        padding: var(--spacing-lg);
    }
    .admin-section {
        padding: var(--spacing-lg);
    }
    .admin-table th, .admin-table td {
        font-size: var(--font-size-xs);
        padding: var(--spacing-sm);
    }
    /* Responsive para pantallas pequeñas: volver a columna */
    .purchase-controls {
        flex-direction: column; /* Apila los elementos en pantallas pequeñas */
        align-items: center;
    }
    .ticket-counter, .proceed-to-payment {
        width: 100%; /* Ocupan todo el ancho disponible */
        max-width: 300px; /* Mantén un max-width para que no se estiren demasiado */
        margin-bottom: var(--spacing-md); /* Espacio entre ellos al estar apilados */
    }
}
/* Teléfonos muy pequeños (hasta 480px) */
@media (max-width: 480px) {
    .logo-text {
        font-size: var(--font-size-3xl);
        text-align: center;
    }
    .hamburger-toggle {
        font-size: var(--font-size-xl);
    }
    .card-title {
        font-size: var(--font-size-2xl);
    }
    .raffle-thumbnail {
        padding: var(--spacing-sm);
        min-height: 320px;
    }
    .raffle-thumbnails-container {
        gap: var(--spacing-md);
    }
    .raffle-detail-image-carousel {
        height: 180px;
    }
    .carousel-arrow {
        font-size: var(--font-size-lg);
        width: 35px;
        height: 35px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    .carousel-btn.prev-btn { left: var(--spacing-xs); }
    .carousel-btn.next-btn { right: var(--spacing-xs); }
    .carousel-description {
        font-size: var(--font-size-sm);
        min-height: 30px;
    }
    .close-button {
        font-size: var(--font-size-xl);
    }
    /* Media Queries específicas para la página de inicio (CONSOLIDADOS AQUÍ) */
    .intro-section {
        padding: var(--spacing-lg);
    }
    .section-title {
        font-size: var(--font-size-3xl);
    }
    .section-description {
        font-size: var(--font-size-base);
    }
    .auth-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .carousel-section {
        padding: var(--spacing-lg);
    }
    .carousel-title {
        font-size: var(--font-size-2xl);
    }
    .carousel-container {
        height: 300px; /* Altura ajustada para móvil */
    }
    #raffle-detail-modal .modal-content {
        max-width: 90%;
        padding: var(--spacing-xl);
    }
    #raffle-detail-modal .close-button {
        font-size: var(--font-size-xl);
        width: 35px;
        height: 35px;
    }
    .modal-image {
        max-height: 250px;
    }
    .modal-title {
        font-size: var(--font-size-xl);
    }
    .modal-description {
        font-size: var(--font-size-base);
    }
    .modal-apuesta-btn {
        padding: var(--spacing-sm) var(--spacing-xl);
        font-size: var(--font-size-lg);
        max-width: unset;
        width: 100%;
    }
}

/* ==== MODALES GENERALES ==== */
.modal-overlay {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 999; /* sobre el dashboard */
}

.modal-overlay.active {
  display: block;
}

.raffle-details-container {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1e1e2f; /* Combina con tu estilo */
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  color: white;
}

.raffle-details-container.active {
  display: block;
}

/* Botón de cerrar */
.raffle-details-container .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
}

/* Modal más grande para premios principales */
.raffle-details-container.main-prize-modal {
  max-width: 1000px;
  max-height: 90vh;
}

/* Flechas del carrusel */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  background: rgba(0,0,0,0.4);
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 1001;
  border-radius: 50%;
  transition: background 0.3s;
}
.carousel-arrow:hover {
  background: rgba(0,0,0,0.7);
}
.carousel-arrow.left { left: 10px; }
.carousel-arrow.right { right: 10px; }

/* Imágenes del carrusel */
.raffle-detail-image {
  display: none;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: 8px;
}
.raffle-detail-image.active-carousel-image {
  display: block;
}

/* Contador de imágenes */
.carousel-image-count {
  position: absolute;
  bottom: 10px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #fff;
}



/* ========== INICIO: ADICIONES CHATGPT - MODAL, CARRUSEL Y LEGIBILIDAD MÓVIL ========== */

/* Evita scroll del body cuando un modal está abierto */
body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px); /* Compensa el ancho del scrollbar */
}

/* Overlay específico del modal de rifa (coincide con id/class en tu HTML) */
#raffleModalOverlay,
.modal-overlay {
  display: none; /* oculto por defecto; JS añade .active para mostrar */
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.72);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

/* Muestra el overlay cuando se agrega la clase .active desde JS */
#raffleModalOverlay.active,
.modal-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Contenedor modal de detalles (coincide con id/class en tu HTML) */
#raffle-details-container,
.raffle-details-container {
  display: none; /* oculto hasta que JS agregue .active */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 740px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(16,18,28,0.98), rgba(26,32,53,0.98));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 18px;
  color: var(--color-text-light);
  z-index: 10000;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(0,224,255,0.06);
  -webkit-overflow-scrolling: touch;
  word-break: break-word;
  text-wrap: balance;
}

/* Visible cuando JS añade .active */
#raffle-details-container.active,
.raffle-details-container.active {
  display: block;
}

/* Versión más grande para premios principales */
#raffle-details-container.main-prize-modal,
.raffle-details-container.main-prize-modal {
  max-width: 1000px;
  padding: 22px;
}

/* Botón cerrar (asegúrense de mantener .close-button en el HTML) */
#raffle-details-container .close-button,
.raffle-details-container .close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: var(--color-label-light);
  z-index: 10001;
  font-size: 1.15rem;
  cursor: pointer;
}
#raffle-details-container .close-button:hover {
  transform: rotate(90deg) scale(1.06);
  color: var(--color-primary-cyan);
  background: rgba(0,0,0,0.55);
}

/* Carrusel de imágenes dentro del modal */
.raffle-detail-image-carousel {
  position: relative;
  width: 100%;
  margin: 8px 0 12px 0;
  display: block;
  text-align: center;
}

.raffle-detail-image-carousel img.raffle-detail-image {
  display: none; /* solo activamos la que tenga la clase active-carousel-image */
  width: 100%;
  max-height: 400px;
  object-fit:cover;
  border-radius: 10px;
  margin: 0 auto 8px auto;
  box-shadow: var(--shadow-md);
}
/* Ajustes para imágenes en carrusel dentro de modales */
.modal-content .carousel-item img {
  width: 100%;            /* Ocupar todo el ancho del carrusel */
  height: 350px;          /* Ajusta la altura a lo que necesites */
  object-fit: cover;    /* Mostrar la imagen completa sin deformarla */
  background-color: #fff; /* Fondo blanco para evitar franjas feas */
  border-radius: 12px;    /* Opcional, bordes redondeados */
  padding: 10px;          /* Un poco de espacio interno */
}



.raffle-detail-image-carousel img.raffle-detail-image.active-carousel-image {
  display: block;
}

/* Flechas del carrusel */
.carousel-arrow,
.raffle-detail-image-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #ffffff;
  cursor: pointer;
  z-index: 10005;
  font-size: 1.05rem;
  transition: background 0.18s ease, transform 0.18s;
}
.carousel-arrow:hover { background: rgba(0,0,0,0.7); transform: scale(1.06); }
.carousel-arrow.left { left: 22px; }
.carousel-arrow.right { right: 22px; }

/* Contador de imágenes */
.carousel-image-count {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  z-index: 10006;
  backdrop-filter: blur(2px);
}

/* Texto descriptivo dentro del modal (mejor legibilidad en móvil) */
.raffle-detail-description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-light);
  background: rgba(0,0,0,0.28);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 12px 0;
  text-align: justify;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ajustes para el bloque de progreso y texto */
.raffle-progress-section { margin-top: 8px; }
.progress-bar-container.large { margin: 12px auto; }

/* Controles de compra (contador + botón) ya incluidos en tu CSS base,
   pero reforzamos pequeñas mejoras responsivas aquí */
.purchase-controls { gap: 10px; align-items: center; }
.ticket-counter { min-width: 90px; }
.submit-btn.proceed-to-payment { min-width: 120px; }

/* ===== Responsivo: móviles pequeños ===== */
@media (max-width: 480px) {
  #raffle-details-container, .raffle-details-container {
    width: 96%;
    max-width: 96%;
    padding: 12px;
    border-radius: 10px;
  }
  #raffle-details-container .raffle-detail-title,
  .raffle-detail-title {
    font-size: 1.05rem;
    text-align: center;
    margin-bottom: 8px;
  }
  .raffle-detail-description {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 28px 12px;
    text-align: left;
  }
  .carousel-arrow { width: 36px; height: 36px; font-size: 0.95rem; }
  .carousel-image-count { font-size: 0.68rem; padding: 4px 6px; }
  .ticket-counter { min-width: 70px; }
  .submit-btn.proceed-to-payment { min-width: 100px; padding: 8px 10px; font-size: 0.95rem; }
}

/* ===== Accesibilidad: foco teclado ===== */
#raffle-details-container .close-button:focus,
#raffle-details-container .carousel-arrow:focus,
#raffle-details-container .submit-btn:focus {
  outline: 3px solid rgba(0,224,255,0.18);
  outline-offset: 2px;
}

.modal-content .carousel-item img {
  width: 100%;
  height: 400px;
  object-fit: contain;  /* Se adapta sin recortar */
  background-color: #000; /* Rellena con negro los espacios sobrantes */
}

/* Ajusta la altura y el fit de las imágenes del carrusel en el modal para móviles */
@media (max-width: 480px) {
  .raffle-detail-image-carousel {
    width: 90% !important;   /* más ancho que antes */
    max-width: 350px;        /* límite para que no se deforme */
    margin: 0 auto;          /* centrado */
    height: 170px !important;
  }

  .raffle-detail-image-carousel img.raffle-detail-image,
  .modal-content .carousel-item img {
    width: 150% !important;   /* ocupa todo el ancho del contenedor */
    height: 160px !important; /* controla la altura */
    object-fit: contain !important;
    border-radius: 8px;
  }
}

/* Estilos globales para el menú flotante de redes sociales */
.social-floating-menu {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
}
.social-floating-button {
        background-color: var(--color-primary-cyan);
        color: #1a1a1a;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        transition: transform 0.3s ease;
}
.social-floating-button.active { transform: rotate(180deg); }
.social-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.social-list.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.social-list a { color: #fff; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,0.3); transition: background-color 0.3s ease; }
.social-list a.facebook-icon { background: #1877F2; }
.social-list a.tiktok-icon { background: #000; }
.social-list a.instagram-icon { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.social-list a.whatsapp-icon { background: #25D366; }
.social-list a.facebook-icon:hover { background-color: #1a71db; }
.social-list a.tiktok-icon:hover { background-color: #333333; }
.social-list a.instagram-icon:hover { background: linear-gradient(45deg,#d97929 0%,#d25e36 25%,#c4243e 50%,#b8205b 75%,#a8147d 100%); }
.social-list a.whatsapp-icon:hover { background-color: #2fb55e; }