/* ========================================================================== BET_PROJECT - SISTEMA DE DISEÑO ESCALABLE Arquitectura: Basada en ITCSS / 7-1 Pattern adaptado. Guía de Estilo: BEM (Block Element Modifier) para selectores. NOTA PARA DESARROLLADORES: - Este archivo es el ÍNDICE. NO escribir CSS directamente aquí. - El orden de los @import es CRÍTICO para la cascada de estilos. - Mantener la estructura de carpetas y nomenclatura de archivos. ========================================================================== */ /* ========================================================================== 1. BASE - Configuración Global y Valores Dinámicos ========================================================================== */ /** * _variables.css * -------------------------------------------------------------------------- * Contiene el "Single Source of Truth" del proyecto. * Define todas las variables CSS utilizadas globalmente: * - Colores (primarios, secundarios, estados, fondos) * - Sombras (cards, flotantes) * - Bordes y acentos * Si necesitas cambiar un color corporativo, hazlo AQUÍ, no en los componentes. */ @import 'base/_variables.css'; /** * _reset.css * -------------------------------------------------------------------------- * Normaliza y limpia los estilos por defecto de los navegadores (User Agent Styles). * - Elimina márgenes y paddings predeterminados. * - Establece box-sizing: border-box para todos los elementos. * - Define estilos base para body y contenedores. */ @import 'base/_reset.css'; /* ========================================================================== 2. COMPONENTS - Piezas Reutilizables (LEGOs) ========================================================================== */ /** * _buttons.css * -------------------------------------------------------------------------- * Estilos base de botones (.btn) y sus modificadores: * - .btn-primary, .btn-secondary, .btn-warning, .btn-danger * - Estados :hover y :active * También incluye utilidades para grupos de acciones (.actions). */ @import 'components/_buttons.css'; /** * _forms.css * -------------------------------------------------------------------------- * Estilización completa de formularios: * - Contenedores (.form-container, .form-group, .form-row) * - Campos de entrada (.form-control) * - Select personalizado con flecha SVG * - Checkbox personalizado (.checkbox-custom) */ @import 'components/_forms.css'; /** * _notifications.css * -------------------------------------------------------------------------- * Mensajes del sistema (Django messages) y notificaciones flotantes estilo CloudBet: * - .messages (success, error) * - .alert (success, danger, warning) * - .cloudbet-notification y variantes (success, error, warning, info) */ @import 'components/_notifications.css'; /** * _tables.css * -------------------------------------------------------------------------- * Estilos para tablas de datos: * - .data-table, .betting-table * - Encabezados fijos, hover en filas * - .status-badge para indicadores de estado (programado, en juego, finalizado) */ @import 'components/_tables.css'; /** * _banners.css * -------------------------------------------------------------------------- * Componentes promocionales: * - .promo-banner (contenedor flexible) * - .banner (gradiente con colores de peligro y naranja) */ @import 'components/_banners.css'; /** * _cards.css * -------------------------------------------------------------------------- * Tarjetas reutilizables para paneles y contenido: * - .dashboard-card, .content-card, .game-card, .status-item, .ticket-item * - Gradientes, sombras y efectos hover (elevación) */ @import 'components/_cards.css'; /** * _countdown.css * -------------------------------------------------------------------------- * Componente de cuenta regresiva: * - .countdown (contenedor flexible) * - .countdown-item, .time-number, .time-title * Usado para mostrar tiempo restante en eventos. */ @import 'components/_countdown.css'; /* ========================================================================== 3. LAYOUT - La "Cáscara" o Esqueleto de la Aplicación ========================================================================== */ /** * _grid.css * -------------------------------------------------------------------------- * Sistemas de cuadrícula reutilizables: * - .dashboard, .content-grid, .games-grid (grid con auto-fit) * Define la disposición de tarjetas y contenedores principales. */ @import 'layout/_grid.css'; /** * _sidebar.css * -------------------------------------------------------------------------- * Estructura del menú lateral fijo: * - .sidebar (ancho, posición fija, scroll interno) * - .sidebar-nav (enlaces, dropdowns con flechas) * - .main-content (desplazamiento por el margen izquierdo) * - Secciones y títulos de contenido * - Dropdowns generales y datos actuales (.current-data) */ @import 'layout/_sidebar.css'; /** * _header.css * -------------------------------------------------------------------------- * Barra superior de la aplicación: * - .top-bar (título y navegación de usuario) * - .user-nav (enlaces de perfil, logout, etc.) */ @import 'layout/_header.css'; /** * _nav.css * -------------------------------------------------------------------------- * Menú principal (horizontal) que puede aparecer bajo la barra superior: * - .main-nav (fondo oscuro, lista horizontal) * - Enlaces con estilo de píldoras */ @import 'layout/_nav.css'; /** * _footer.css * -------------------------------------------------------------------------- * Pie de página: * - footer (fondo, márgenes adaptativos según sidebar y ticket) * - .footer-content (grid de secciones) * - .footer-section (títulos, enlaces) * - .copyright */ @import 'layout/_footer.css'; /* ========================================================================== 4. MODULES - Lógica Específica de Negocio (Betting Core) ========================================================================== */ /** * _betting.css * -------------------------------------------------------------------------- * El corazón visual de las apuestas: * - Secciones de deportes clásicas (.sports-section, .event-item, .event-odds) * - Sección compacta modernizada (.sports-section-compact) * - Tabs deportivos horizontales (.sports-tabs-compact, .sport-tab-compact) * - Tarjetas de eventos con cuotas (.odd-button-compact) * - Estados de juegos (.status-live, .status-finished, .status-scheduled) * Es el módulo más propenso a cambios de UI. */ @import 'modules/_betting.css'; /** * _ticket.css * -------------------------------------------------------------------------- * Boleto de apuestas (ticket) y su comportamiento: * - Ticket flotante lateral (.cloudbet-ticket) * - Cabecera, contenido y footer del ticket * - Lista de selecciones (.cloudbet-bet-item) * - Gestión de stake y payout * - Layout de columnas dinámicas (.main-layout-container, .ticket-column) * - Estilos de scroll personalizados */ @import 'modules/_ticket.css'; /* ========================================================================== 5. OVERRIDES - Adaptabilidad y Parches de Última Instancia ========================================================================== */ /** * _responsive.css * -------------------------------------------------------------------------- * TODAS las Media Queries residen aquí. * Se importa al final para que sus reglas tengan prioridad sobre los estilos base. * Incluye ajustes para pantallas: * - 1200px (tablets landscape) * - 768px (tablets portrait) * - 576px (móviles grandes) * - 480px (móviles pequeños) * Modifica tamaños de sidebar, tickets, grids y tipografía. */ @import 'base/_responsive.css'; /* ===== BOTÓN FLOTANTE ===== */ #cloudbet-ticket-toggle { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-floating); z-index: 10001; /* Suficientemente alto para estar sobre cualquier elemento */ font-size: 1.2rem; border: 2px solid white; transition: all 0.3s ease; } #cloudbet-ticket-toggle:hover { transform: scale(1.1); background: var(--primary-hover); } /* Aseguramos que no se oculte en ningún tamaño */ @media (max-width: 768px) { #cloudbet-ticket-toggle { bottom: 10px; right: 10px; width: 50px; height: 50px; font-size: 1rem; z-index: 10001; /* Mantener alto */ } } /* ===== MODAL DE LOGIN ===== */ .modal { display: none; position: fixed; z-index: 20000; /* Muy alto para estar sobre todo */ left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; } .modal-content { background-color: var(--bg-sidebar); margin: auto; padding: 20px; border: 1px solid var(--border-primary); border-radius: 8px; width: 90%; max-width: 400px; box-shadow: var(--shadow-card); color: var(--text-primary); position: relative; animation: modalFadeIn 0.3s ease; } @keyframes modalFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .close { color: var(--text-muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1; } .close:hover { color: var(--primary); } /* Clase para body cuando el modal está abierto (opcional) */ body.modal-open { overflow: hidden; }