/* assets/css/main.css */

/* 1. FUENTES E IMPORTACIONES */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

/* 2. VARIABLES Y TEMAS (CEREBRO DE COLORES) */
:root {
    --bg-body: #050505; 
    --bg-card: #1e1e1e; 
    --text-main: #ffffff; 
    --text-muted: #b0b0b0;
    --primary: #e62e2e; 
    --primary-dark: #b01e1e; 
    --accent-glow: rgba(230, 46, 46, 0.4);
    --navbar-bg: rgba(10, 10, 10, 0.95); 
    --border-color: #333;
    
    /* Variables del Efecto Líquido */
    --wave-back: #900000; 
    --wave-front: #ff5252; 
    --progress-bg: #000;
    
    /* Ganadores */
    --gold: #ffd700;
}

[data-bs-theme="light"] {
    --bg-body: #f0fdf4; 
    --bg-card: #ffffff; 
    --text-main: #1a1a1a; 
    --text-muted: #666666;
    --primary: #00c853; 
    --primary-dark: #009624; 
    --accent-glow: rgba(0, 200, 83, 0.4);
    --navbar-bg: rgba(255, 255, 255, 0.95); 
    --border-color: #dcfce7;
    
    /* Variables del Efecto Líquido (Verde) */
    --wave-back: #1b5e20; 
    --wave-front: #69f0ae; 
    --progress-bg: #e2e8f0; 
    --gold: #d4af37;
}

/* 3. ESTILOS GENERALES */
body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
}

.navbar-custom { 
    background-color: var(--navbar-bg) !important; 
    border-bottom: 2px solid var(--primary); 
    transition: border-color 0.3s ease; 
}

/* 4. COMPONENTES (BOTONES, SWITCH, CARDS) */
.theme-switch-wrapper { display: flex; align-items: center; }
.theme-switch { display: inline-block; height: 26px; position: relative; width: 50px; }
.theme-switch input { display:none; }
.slider { background-color: #333; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px; }
.slider:before { background-color: #fff; bottom: 4px; content: ""; height: 18px; left: 4px; position: absolute; transition: .4s; width: 18px; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(24px); }
.mode-icon { color: var(--text-main); font-size: 1.2rem; margin: 0 8px; }

.btn-glup { 
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); 
    color: white !important; font-weight: 900; border: none; border-radius: 50px; 
    padding: 12px 30px; box-shadow: 0 4px 15px var(--accent-glow); transition: 0.3s; 
}
.btn-glup:hover { 
    transform: translateY(-3px); box-shadow: 0 6px 25px var(--accent-glow); 
}

.btn-misterio { 
    background: linear-gradient(135deg, #111, #222); color: var(--gold) !important; 
    border: 1px solid var(--gold); font-weight: 900; border-radius: 50px; padding: 12px 30px; 
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); transition: all 0.3s ease;
}
.btn-misterio:hover { 
    background: var(--gold); color: black !important; transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); 
}

.card-premium { 
    background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; overflow: hidden; 
}
.price-badge { 
    background-color: var(--primary); color: white; font-weight: 900; font-size: 1.2rem; 
    padding: 8px 20px; border-radius: 0 0 0 20px; display: block; 
}

/* 5. EFECTO LÍQUIDO (REFRESCO) */
.progress-glup-container { 
    background-color: var(--progress-bg); border-radius: 15px; height: 25px; 
    border: 1px solid var(--border-color); position: relative; overflow: hidden; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); 
}
.progress-glup-liquid { 
    height: 100%; background-color: var(--primary); border-radius: 15px 0 0 15px; 
    position: relative; min-width: 40px; box-shadow: 0 0 15px var(--accent-glow); 
    transition: width 1s ease-in-out; 
}
.progress-glup-liquid::before { 
    content: ""; position: absolute; width: 100px; height: 100px; 
    background-color: var(--wave-back); border-radius: 40%; 
    top: -45px; right: -50px; animation: wave-spin 6s linear infinite; opacity: 0.7; 
}
.progress-glup-liquid::after { 
    content: ""; position: absolute; width: 100px; height: 100px; 
    background-color: var(--wave-front); border-radius: 35%; 
    top: -50px; right: -40px; animation: wave-spin 3s linear infinite; opacity: 0.4; 
}
@keyframes wave-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 6. RULETA Y MODALES */
.wheel-container { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
#wheelCanvas { width: 100%; border-radius: 50%; border: 5px solid var(--primary); box-shadow: 0 0 30px var(--accent-glow); transition: transform 5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.pointer { 
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%); 
    width: 0; height: 0; border-left: 20px solid transparent; 
    border-right: 20px solid transparent; border-top: 40px solid var(--primary); z-index: 10; 
}
.modal-ruleta .modal-content { background: var(--bg-card); border: 1px solid var(--primary); }
.winner-display { display: none; font-size: 2rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 10px rgba(0,0,0,0.5); animation: zoomIn 0.5s; }

/* 7. SECCIONES */
.hero-section { padding: 60px 0; border-bottom: 1px solid var(--border-color); }
.winner-section { padding: 60px 0; border-top: 1px solid var(--border-color); margin-top: 50px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255, 215, 0, 0.03) 50%, rgba(0,0,0,0) 100%); }
.card-winner { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 15px; position: relative; overflow: hidden; transition: 0.3s; }
.card-winner:hover { transform: translateY(-5px); border-color: var(--gold); }
.badge-winner { background: var(--gold); color: black; font-weight: 800; text-transform: uppercase; padding: 5px 15px; border-radius: 50px; display: inline-block; margin-bottom: 15px; box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }

/* 8. VARIABLES ADICIONALES (VER RIFA) */
:root {
    --grid-bg: #0a0a0a; 
    --grid-item-bg: #1a1a1a; 
    --input-bg: #111;
}

[data-bs-theme="light"] {
    --grid-bg: #e2e8f0; 
    --grid-item-bg: #ffffff; 
    --input-bg: #f8fafc;
}

/* 9. FORMULARIOS PERSONALIZADOS */
.form-control, .form-select { 
    background-color: var(--input-bg); 
    border: 1px solid var(--border-color); 
    color: var(--text-main); 
    padding: 12px; 
    border-radius: 10px; 
}
.form-control:focus, .form-select:focus { 
    background-color: var(--input-bg); 
    border-color: var(--primary); 
    color: var(--text-main); 
    box-shadow: 0 0 15px var(--accent-glow); 
}

/* 10. MAPA DE TICKETS (GRID) */
.grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); 
    gap: 6px; 
    max-height: 400px; 
    overflow-y: auto; 
    padding: 15px; 
    background: var(--grid-bg); 
    border-radius: 15px; 
    border: 1px solid var(--border-color); 
}

.grid-item { 
    background-color: var(--grid-item-bg); 
    color: var(--text-muted); 
    text-align: center; 
    padding: 8px 0; 
    border-radius: 8px; 
    font-weight: 800; 
    border: 1px solid var(--border-color); 
    cursor: default; 
}

.grid-item.ocupado { 
    background-color: rgba(220, 53, 69, 0.15); /* Rojo suave */
    color: #dc3545; 
    border-color: rgba(220, 53, 69, 0.3); 
    opacity: 0.6; 
}

.grid-item.mio { 
    background-color: var(--primary); 
    color: #fff; 
    border-color: var(--primary); 
    box-shadow: 0 0 10px var(--accent-glow); 
    transform: scale(1.1); 
    z-index: 2; 
}

/* 11. BOTONES SELECTORES DE CANTIDAD */
.ticket-selector-btn { 
    background: var(--bg-card); 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
    padding: 12px; 
    border-radius: 12px; 
    font-weight: 700; 
    transition: 0.2s; 
}

.ticket-selector-btn:hover, 
.ticket-selector-btn.active { 
    background: var(--primary); 
    border-color: var(--primary); 
    color: white; 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px var(--accent-glow); 
}

/* 12. ESTILOS ESPECÍFICOS DEL ADMIN DASHBOARD */

/* Botón Historial Dinámico (Bordeado) */
.btn-historial-dinamico {
    background: transparent; 
    color: var(--primary) !important; 
    border: 2px solid var(--primary) !important;
    font-weight: 700; 
    text-transform: uppercase; 
    border-radius: 50px; 
    padding: 5px 15px; 
    font-size: 0.85rem;
    transition: all 0.3s ease; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center;
}
.btn-historial-dinamico:hover { 
    background: var(--primary); 
    color: white !important; 
    box-shadow: 0 0 10px var(--accent-glow); 
    transform: translateY(-1px); 
}

/* Tablas Admin (Transparentes y limpias) */
.table { 
    --bs-table-bg: transparent; 
    --bs-table-color: var(--text-main); 
    border-color: var(--border-color); 
}
.table thead th { 
    background-color: var(--bg-body); 
    color: var(--primary); 
    text-transform: uppercase; 
    font-size: 0.8rem; 
    border-bottom: 2px solid var(--primary); 
}
.table td { 
    vertical-align: middle; 
    border-color: var(--border-color); 
}

/* Botones de Acción (Ojo, Lápiz, Basura) */
.btn-action { 
    width: 35px; height: 35px; border-radius: 50%; 
    display: inline-flex; align-items: center; justify-content: center; 
    transition: 0.2s; 
}
.btn-action:hover { transform: scale(1.1); }

/* Ajustes de Modales para Admin */
.modal-header, .modal-footer { border-color: var(--border-color); }

/* 13. ESTILOS DE MÉTODOS DE PAGO (ADMIN) */

/* Etiquetas de campos requeridos (pequeñas) */
.badge-req { 
    font-size: 0.7rem; 
    background: var(--input-bg); 
    border: 1px solid var(--border-color); 
    color: var(--text-muted); 
    padding: 4px 8px; 
    border-radius: 6px; 
    margin-right: 5px; 
    display: inline-block; 
    margin-top: 2px; 
}

/* Fix para Sticky solo en Desktop (evita que tape en móvil) */
@media (min-width: 992px) {
    .sticky-lg-top-custom { 
        position: sticky; 
        top: 100px; 
        z-index: 1020; 
    }
}

/* 14. ESTILOS DE HISTORIAL Y MAPAS PEQUEÑOS */

/* Imagen de portada en tarjetas de historial */
.img-historial { 
    height: 180px; 
    object-fit: cover; 
    border-radius: 15px 15px 0 0; 
    border-bottom: 1px solid var(--border-color); 
}

/* Tickets en el Modal de Vista Rápida (Mapa) */
.ticket-mini { 
    width: 35px; 
    height: 35px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.7rem; 
    font-weight: bold; 
    border-radius: 5px; 
    cursor: pointer; 
    border: 1px solid rgba(255,255,255,0.1); 
    transition: 0.2s; 
}

.ticket-mini.vendido { 
    background: var(--primary); 
    color: white; 
    border-color: transparent; 
}

.ticket-mini.libre { 
    background: rgba(128, 128, 128, 0.1); 
    color: var(--text-muted); 
}

.ticket-mini:hover { 
    transform: scale(1.2); 
    z-index: 10; 
    box-shadow: 0 0 10px var(--primary); 
}

.ticket-mini.activo { 
    outline: 3px solid #fff; 
    transform: scale(1.2); 
}

/* 15. ESTILOS DETALLE HISTORIAL (AUDITORÍA) */

.header-bg {
    background-size: cover; 
    background-position: center;
    border-bottom: 1px solid var(--border-color);
    padding: 2.5rem 0;
    /* La imagen de fondo se define en línea (HTML) porque es dinámica */
}

.ticket-grid { 
    display: grid; 
    /* Usamos 55px fijo como estaba en tu diseño original */
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); 
    gap: 8px; 
    justify-content: center; 
    padding: 10px;
}

.ticket {
    aspect-ratio: 1/1; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 10px; 
    font-weight: 700; 
    cursor: default;
    background: rgba(255,255,255,0.03); 
    border: 1px dashed var(--border-color); 
    color: var(--text-muted); 
    opacity: 0.5;
    font-size: 0.9rem; 
    transition: 0.2s;
}

.ticket.ocupado {
    background: rgba(230, 46, 46, 0.15); 
    border: 1px solid var(--primary); 
    color: var(--primary);
    opacity: 1; 
    cursor: pointer;
}

[data-bs-theme="light"] .ticket.ocupado { 
    background: rgba(0, 200, 83, 0.1); 
}

.ticket.ocupado:hover { 
    transform: scale(1.15); 
    background: var(--primary); 
    color: white; 
    z-index: 5; 
    box-shadow: 0 0 15px var(--accent-glow); 
}

/* 16. ESTILOS DASHBOARD (ADMIN INDEX) */

/* Botones de Historial y Staff */
.btn-historial-dinamico {
    background: transparent; color: var(--primary) !important; border: 2px solid var(--primary) !important;
    font-weight: 700; text-transform: uppercase; border-radius: 50px; padding: 5px 15px; font-size: 0.85rem;
    transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center;
}
.btn-historial-dinamico:hover { 
    background: var(--primary); color: white !important; box-shadow: 0 0 10px var(--accent-glow); transform: translateY(-1px); 
}

/* Tabla de Sorteos */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-main); border-color: var(--border-color); }
.table thead th { background-color: var(--bg-body); color: var(--primary); text-transform: uppercase; font-size: 0.8rem; border-bottom: 2px solid var(--primary); }
.table td { vertical-align: middle; border-color: var(--border-color); }

/* Botones circulares de acción */
.btn-action { 
    width: 35px; height: 35px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; 
}
.btn-action:hover { transform: scale(1.1); }

/* Contenedor de bienvenida para Trabajador */
.worker-welcome {
    min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}