/* ===================================================
   Estilos Generales para el Plugin Bingo en Vivo
   =================================================== */

/* Limitar el alcance de los estilos al contenedor de bingo */
.bingo-container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================================================
   Contenedor de Cartones
   =================================================== */
.bingo-cartones-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 30px;
    justify-items: center;
    padding: 20px;
}

/* Cuando la pantalla es menor a 992px, mostrar hasta 2 columnas */
@media (max-width: 991px) {
    .bingo-cartones-container {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}

/* Cuando la pantalla es menor a 768px, mostrar una columna */
@media (max-width: 767px) {
    .bingo-cartones-container {
        grid-template-columns: 1fr;
    }
}

/* ===================================================
   Estilos de Cada Cartón de Bingo
   =================================================== */
.bingo-container {
    font-family: 'Montserrat', sans-serif;
    background-color: #6A2393; /* Fondo fucsia */
    color: white;
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    text-align: center;
}

.logo img {
    max-width: 162px;
    max-height: 54px;
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

.bingo-card {
    display: inline-block;
}

.header {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    color: #9655C9;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}

.numbers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

/* Estilos para los números del cartón */
.number {
    font-size: 24px;
    background-color: #ffffff;
    border: 2px solid #F2F2F2;
    border-radius: 10px;
    padding: 15px;
    color: #00A9F4;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Casilla central libre */
.number.star {
    color: #007BFF;
    font-size: 28px;
    font-weight: 700;
    background-color: gold;
    cursor: default;
}

/* ===================================================
   Estilos Mejorados para las Tablas de Bingo
   =================================================== */

/* 1. Fondo Transparente para las Tablas */
.bingo-todos-cartones table,
.bingo-cartones-ganadores table {
    width: 100%; /* Asegura que la tabla ocupe todo el ancho disponible */
    background-color: transparent; /* Establece fondo transparente */
    border-collapse: collapse; /* Elimina espacios entre bordes de celdas */
}

/* 2. Estilos para las Cabeceras de las Tablas */
.bingo-todos-cartones table th,
.bingo-cartones-ganadores table th {
    background-color: #6A2393; /* Fondo fucsia consistente con los cartones */
    color: #FFFFFF; /* Letras blancas */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Alineación centrada del texto */
    font-size: 18px; /* Tamaño de fuente legible */
    border-bottom: 2px solid #FFFFFF; /* Línea inferior para separar cabecera del contenido */
}

/* 3. Estilos para las Celdas de Datos */
.bingo-todos-cartones table td,
.bingo-cartones-ganadores table td {
    background-color: transparent; /* Fondo transparente para las celdas */
    color: #000000; /* Texto negro para buena legibilidad */
    padding: 8px; /* Espaciado interno */
    text-align: center; /* Alineación centrada del texto */
    border-bottom: 1px solid #CCCCCC; /* Línea inferior ligera para separar filas */
}

/* 4. Efecto Hover Mejorado */
.bingo-todos-cartones table tr:hover,
.bingo-cartones-ganadores table tr:hover {
    background-color: rgba(106, 35, 147, 0.1); /* Sutil fondo fucsia al pasar el mouse */
}

/* 5. Ajustes Responsivos para las Tablas */
@media (max-width: 768px) {
    .bingo-todos-cartones table th,
    .bingo-cartones-ganadores table th,
    .bingo-todos-cartones table td,
    .bingo-cartones-ganadores table td {
        font-size: 14px; /* Reduce el tamaño de fuente en pantallas pequeñas */
        padding: 6px; /* Reduce el espaciado interno */
    }
}

/* Ocultar las imágenes de los cartones debajo del código */
.bingo-cartones-container .carton-imagen img {
    display: none;
}

/* Ocultar las imágenes en las tablas de cartones */
.bingo-todos-cartones .carton-imagen img {
    display: none !important;
}

/* ===================================================
   Contenedores y Elementos Adicionales
   =================================================== */

/* Contenedor de números extraídos */
#numeros-extraidos-container {
    margin-top: 20px;
}

#numeros-extraidos {
    margin-top: 10px;
}

/* Estilos para los números extraídos (forma de bola de bingo) */
.numero-extraido, .numero-seleccionado {
    display: inline-block;
    margin: 5px;
    width: 50px; /* Ajustar el tamaño según prefieras */
    height: 50px;
    line-height: 50px;
    background-color: #f0f0f0;
    border-radius: 50%; /* Forma circular */
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border: 2px solid #ddd;
    color: #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Contenedor de ganadores */
#lista-ganadores {
    margin-top: 10px;
}

#lista-ganadores div {
    margin-bottom: 5px;
    padding: 5px 10px;
    background-color: #00bcd4;
    color: #ffffff;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
}

/* Botones de acción para el anfitrión */
#deshacer-seleccion,
#reiniciar-juego,
#reiniciar-pozo {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007BFF;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s;
}

#deshacer-seleccion:hover,
#reiniciar-juego:hover,
#reiniciar-pozo:hover {
    background-color: #0056b3;
}

/* ===================================================
   Formulario de Compra de Cartones
   =================================================== */

#bingo-compra-form {
    margin-bottom: 20px;
}

#bingo-compra-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

#bingo-compra-form input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid #00A9F4;
    border-radius: 5px;
    font-size: 16px;
}

#bingo-compra-form input[type="submit"] {
    padding: 10px 20px;
    background-color: #28a745;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s;
}

#bingo-compra-form input[type="submit"]:hover {
    background-color: #1e7e34;
}

/* Saldo del usuario */
#saldo_usuario {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    background-color: transparent;
    color: #fffff;
    padding: 0;
    border-radius: 0;
}

/* ===================================================
   Loader y Mensajes de Feedback
   =================================================== */

/* Loader para indicar acciones en progreso */
.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
    text-align: center;
    font-size: 18px;
}

/* Mensajes de éxito */
#bingo-compra-form p, #bingo-anfitrion p {
    color: green;
    font-weight: bold;
}

/* Mensajes de error */
#bingo-compra-form .error, #bingo-anfitrion .error {
    color: red;
    font-weight: bold;
}

/* ===================================================
   Responsive Design
   =================================================== */
@media (max-width: 768px) {
    .bingo-cartones-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .bingo-container {
        margin: 10px;
    }

    #tabla-numeros {
        width: 100%;
    }
}

/* ===================================================
   Estilos de Notificaciones en Tiempo Real
   =================================================== */

/* Contenedor de notificaciones */
#bingo-notificaciones-ganadores {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    z-index: 1001;
}

/* Estilos básicos para notificaciones */
.notificacion {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: #fff;
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(-20px);
    animation: slideIn 0.5s forwards;
}

/* Animación para que las notificaciones aparezcan suavemente */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación para que las notificaciones desaparezcan suavemente */
@keyframes slideOut {
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Notificación de éxito */
.notificacion.success {
    background-color: #28a745; /* Verde */
}

/* Notificación de error */
.notificacion.error {
    background-color: #dc3545; /* Rojo */
}

/* Notificación de información */
.notificacion.info {
    background-color: #17a2b8; /* Azul */
}

/* Transición para ocultar notificaciones */
.notificacion.hide {
    animation: slideOut 0.5s forwards;
}

/* ===================================================
   Estilos para Premios y Saldo
   =================================================== */

/* Estilo para el premio acumulado */
#premio_acumulado,
#premio_acumulado_anfitrion {
    font-size: 16px;
    font-weight: 700;
    background-color: #4CAF50; /* Verde */
    color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Añadir margen superior para que "Mi saldo" quede arriba */
#premio_acumulado {
    margin-top: 10px;
}

/* Estilos para números habilitados */
.bingo-container.user-bingo-card .number.habilitado {
    cursor: pointer;
    border: 2px solid #28a745; /* Verde */
    background-color: #e6ffe6; /* Verde claro */
    transition: background-color 0.3s, border-color 0.3s;
}

/* Efecto hover en números habilitados */
.bingo-container.user-bingo-card .number.habilitado:hover {
    background-color: #d4edda; /* Verde más claro */
    border-color: #218838; /* Verde más oscuro */
}

/* Estilos para números marcados */
.bingo-container.user-bingo-card .number.marcado {
    background-color: #28a745; /* Verde */
    color: #fff; /* Blanco */
    border: 2px solid #1e7e34; /* Verde oscuro */
}

/* Opcional: Efecto al hacer hover en números marcados (sin efecto) */
.bingo-container.user-bingo-card .number.marcado:hover {
    cursor: default;
}

/* Estilos personalizados para SweetAlert2 */
.swal2-popup {
    background: #10131E !important;
    color: #FFFFFF !important;
}

.swal2-title,
.swal2-content {
    color: #FFFFFF !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    background-color: #FFFFFF !important;
    color: #10131E !important;
}

.swal2-styled.swal2-confirm:hover,
.swal2-styled.swal2-cancel:hover {
    background-color: #e6e6e6 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border: 4px solid rgba(255, 255, 255, 0.45) !important;
}

/* Estilos para los cartones en las listas */
.bingo-lista-cartones {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.bingo-carton-lista {
    width: 220px;
    background-color: #FF00FF; /* Fondo fucsia */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bingo-carton-lista .bingo-carton-codigo {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: #FFFFFF;
}

.bingo-carton-lista .bingo-grid-numeros {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.bingo-carton-lista .bingo-numero {
    background-color: #FFFFFF; /* Fondo blanco para los números */
    border: 1px solid #000000;
    border-radius: 4px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
}

.bingo-carton-lista .bingo-carton-usuario {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #FFFFFF;
}