/* ==========================================
   MODAL 6 DAILY / SUPER 7
   ========================================== */

.juegos-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999; pointer-events: none; 
}

.juegos-content {
    background: linear-gradient(145deg, #181818, #0a0a0a);
    border: 2px solid #ffcc00; border-radius: 20px; width: 95%; max-width: 500px; 
    padding: 20px; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 15px 50px rgba(0,0,0,0.9), inset 0 0 15px rgba(255,204,0,0.1);
    font-family: 'Orbitron', sans-serif; color: #fff; text-align: center;
    pointer-events: auto; 
    cursor: move;
}

.juegos-header { position: relative; }
.juegos-cerrar {
    position: absolute; top: -5px; right: 0px; font-size: 32px;
    color: #ffcc00; cursor: pointer; transition: 0.3s;
}
.juegos-cerrar:hover { color: #fff; transform: scale(1.1); }

/* Hover Info Menú (Reglas y Horarios) */
.juegos-info-container { display: inline-block; position: relative; }
.juegos-info-container::after {
    content: '';
    position: absolute;
    top: 10px; 
    left: 0;
    width: 100%;
    height: 30px; 
    z-index: 998;
}
.juegos-info-icon {
    font-size: 16px; background: #333; border-radius: 50%; padding: 2px 8px;
    cursor: help; vertical-align: middle; margin-left: 10px; color: #ffcc00;
}
.popup-horarios {
    display: none; 
    position: absolute; 
    top: 30px; 
    left: 50%; 
    transform: translateX(-50%);
    background: rgba(20,20,20,0.95); 
    border: 1px solid #ffcc00; 
    border-radius: 10px;
    padding: 15px; 
    z-index: 999; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    width: max-content; 
    min-width: 180px;
}
.juegos-info-container:hover .popup-horarios { display: block; }
.popup-horarios h4 { margin: 0 0 10px 0; color: #ffcc00; font-size: 14px; }
.popup-horarios ul { list-style: none; padding: 0; margin: 0; font-size: 12px; text-align: left; }
.popup-horarios li { margin-bottom: 5px; border-bottom: 1px dashed #333; padding-bottom: 3px; }

/* Interruptor y Panel */
.juegos-toggle { display: flex; background: #000; border-radius: 30px; padding: 4px; margin: 15px 0; border: 1px solid #333; }
.toggle-opcion { flex: 1; padding: 10px 0; border: none; background: transparent; color: #666; font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer; border-radius: 25px; transition: 0.3s; }
.toggle-opcion.activo { background: linear-gradient(90deg, #ffcc00, #ffaa00); color: #000; }
.juegos-info-panel { display: flex; justify-content: space-between; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 10px; border: 1px inset #333; margin-bottom: 20px; }

/* --- ORDENACIÓN ESTRICTA DE LOS TABLEROS --- */
.juegos-contenedor-tableros { 
    display: flex; 
    flex-direction: row; /* Coloca los tableros uno al lado del otro */
    justify-content: center;
    align-items: center; /* Los centra verticalmente */
    gap: 15px; 
    width: 100%;
    transition: opacity 0.3s, filter 0.3s; 
}
.tablero-bloqueado { 
    pointer-events: none; 
    opacity: 0.5; 
    filter: grayscale(50%) sepia(20%); 
}

.grid-super7 { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr) !important; 
    gap: 5px; 
    width: 100%;
    max-width: 250px; /* Ligeramente ajustado para que quepa bien al lado */
}

.grid-dupla { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 8px; 
    width: 100%;
    max-width: 220px;
}

.juegos-cuadricula-extras { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas, 5 filas */
    gap: 6px; 
    width: 100%;
    max-width: 80px;
    border-top: none; /* Quitamos la línea de arriba */
    border-left: 1px dashed #666; /* Línea separadora a la izquierda */
    padding-top: 0; 
    padding-left: 15px; /* Espacio entre la línea y las estrellas */
}

/* Bolas y Estrellas unificadas con Proporción Perfecta */
.btn-numero, .btn-extra {
    background: radial-gradient(circle at 30% 30%, #333, #111);
    border: 1px solid #555; color: #fff; border-radius: 50%; 
    aspect-ratio: 1 / 1; 
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; cursor: pointer; transition: 0.2s; font-family: inherit;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    padding: 0; margin: 0;
}
.btn-numero:hover { border-color: #ffcc00; background: radial-gradient(circle at 30% 30%, #555, #222); }
.btn-numero.seleccionado { background: radial-gradient(circle at 30% 30%, #ffd940, #ff9900); color: #000; border-color: #fff; transform: scale(1.1); box-shadow: 0 0 10px #ffcc00; }

.grid-dupla .btn-numero { font-size: 16px; }
.grid-super7 .btn-numero { font-size: 13px; }

/* Estrellas específicas */
.btn-extra { font-size: 12px; background: #2a2a2a; color: #ffcc00; border: 1px solid #ffcc00; }
.btn-extra:hover { background: #3a3a3a; }
.btn-extra.seleccionado { background: radial-gradient(circle at 30% 30%, #40e0d0, #008080); color: #fff; border-color: #fff; transform: scale(1.1); box-shadow: 0 0 10px #40e0d0; }

.juegos-msg { font-size: 12px; color: #00ffcc; margin: 15px 0; font-weight: bold; min-height: 15px; transition: color 0.3s; }
.juegos-btn-validar { background: linear-gradient(90deg, #ffcc00, #ff9900); color: #000; border: none; padding: 12px; width: 100%; font-weight: bold; border-radius: 8px; cursor: pointer; font-family: inherit; }
.juegos-details { background: #000; padding: 10px; border-radius: 8px; text-align: left; margin-top:10px; border: 1px solid #333;}
.juegos-details summary { color: #ffcc00; cursor: pointer; font-size: 13px; font-weight: bold; outline: none; }
.juegos-legal-note { font-size: 10px; color: #888; margin-top: 15px; border-top: 1px dashed #333; padding-top: 10px; text-align: center; font-family: sans-serif; }

/* =========================================
   BOTÓN FLOTANTE (Bola 6/7)
   ========================================= */
.btn-flotante-izq0 {
    position: fixed;
    top: 66%; 
    left: 0;
    transform: translateY(-50%);
    background-color: rgba(17, 17, 17, 0.9);
    border: 2px solid #ffcc00;
    border-left: none;
    border-radius: 0 15px 15px 0;
    padding: 8px 12px 8px 8px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 999999;
    transition: all 0.3s ease;
}

.btn-flotante-izq0:hover {
    padding-left: 15px; 
    box-shadow: 2px 2px 20px rgba(255, 204, 0, 0.5);
}

.bola-flotante-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;  
    height: 34px; 
    background: radial-gradient(circle at 30% 30%, #ffd940, #ff9900);
    color: #000;
    border: 2px solid #fff;
    border-radius: 50%;
    font-weight: bold;
    font-size: 9px; 
    letter-spacing: -0.5px;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
    font-family: 'Orbitron', sans-serif;
    transition: transform 0.3s ease;
}

/* =========================================
   TICKET FÍSICO Y SISTEMA DE PESTAÑAS
   ========================================= */

/* Diseño del Ticket Físico de Lotería */
.ticket-real {
    background: #fdfbfb;
    background-image: repeating-linear-gradient(45deg, #f3f3f3 25%, transparent 25%, transparent 75%, #f3f3f3 75%, #f3f3f3), repeating-linear-gradient(45deg, #f3f3f3 25%, #fdfbfb 25%, #fdfbfb 75%, #f3f3f3 75%, #f3f3f3);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    border: 2px dashed #999;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    color: #111;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
}
.ticket-real h4 { margin: 0 0 5px 0; font-weight: bold; font-size: 16px; text-transform: uppercase; border-bottom: 1px dashed #999; padding-bottom: 5px; }
.ticket-real .numeros { font-size: 22px; font-weight: bold; color: #d90000; margin: 8px 0; letter-spacing: 2px; }
.ticket-real .info { font-size: 11px; color: #444; text-align: left; margin-top: 8px; line-height: 1.4; }
.ticket-real .advertencia { font-size: 10px; color: #d90000; font-weight: bold; margin-top: 10px; border-top: 1px solid #ccc; padding-top: 6px; }

/* Agujeros laterales simulando el corte de la máquina */
.ticket-real::before, .ticket-real::after {
    content: ''; position: absolute; top: 50%; width: 16px; height: 16px;
    background: #1a1a1a; border-radius: 50%; transform: translateY(-50%);
}
.ticket-real::before { left: -10px; }
.ticket-real::after { right: -10px; }

.btn-limpiar-tickets { background: #444; color: white; border: none; padding: 5px 10px; border-radius: 3px; font-size: 10px; cursor: pointer; float: right; margin-bottom: 5px; }

/* Botones del ticket y código de barras */
.ticket-acciones { display: flex; justify-content: space-between; margin-top: 10px; border-top: 1px dashed #ccc; padding-top: 10px; }
.btn-ticket-accion { background: #333; color: white; border: none; padding: 5px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.btn-ticket-accion:hover { background: #555; }
.btn-eliminar-ticket { background: #660000; }
.btn-eliminar-ticket:hover { background: #990000; }
.ticket-id { font-size: 10px; color: #666; letter-spacing: 1px; margin-bottom: 5px; font-family: monospace; }

/* --- SISTEMA DE PESTAÑAS INFERIORES Y SCROLL MÁSTER --- */
.tabs-resultados { display: flex; border-bottom: 1px solid #444; margin-bottom: 10px; }
.tab-btn { flex: 1; background: transparent; color: #888; border: none; padding: 8px 0; cursor: pointer; font-weight: bold; font-size: 13px; transition: all 0.2s; }
.tab-btn:hover { color: #fff; }
.tab-btn.activo { color: #ffcc00; border-bottom: 2px solid #ffcc00; }
.tab-content { display: none; }
.tab-content.activo { display: block; }

.juegos-historial {
    overflow-y: auto;
    overflow-x: hidden; 
    padding-right: 6px;
    padding-bottom: 5px;
}
.juegos-historial::-webkit-scrollbar { width: 6px; }
.juegos-historial::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.juegos-historial::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }

/* --- SELLO DE GANADOR EN EL TICKET --- */
.sello-premio {
    background: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
    margin-left: 10px;
    border: 1px dashed white;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.8);
    vertical-align: middle;
    text-transform: uppercase;
}