/* Estilo global */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9; /* Fondo claro */
    text-align: center; /* Centra todo el contenido horizontalmente */
    color: #333; /* Color de texto oscuro */
}

.container {
    width: 95%;
    margin: auto; /* Centra el contenedor horizontalmente */
    overflow: hidden; /* Evita desbordamientos */
    background-color: #fff; /* Fondo blanco para el contenido principal */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
.container_2 {
    width: 95%;
    margin: 10px auto; /* Centra el contenedor horizontalmente */
    overflow: hidden; /* Evita desbordamientos */
    background-color: #fff; /* Fondo blanco para el contenido principal */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

h1 {
    margin-top: 5px;
    color: #07035c; /* Título azul oscuro */
}
h3 {
    margin-top: 5px;
    color: #07035c; /* Título azul oscuro */
}
/* Estilo de las tablas de sorteos activos */
.raffle-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #f9f9f9; /* Fondo claro para las tablas */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.raffle-table th,
.raffle-table td {
    padding: 12px;
    text-align: left;
    border: none;
}

.raffle-table th {
    background-color: #07035c; /* Encabezados con color azul oscuro */
    color: #fff; /* Texto blanco */
    font-weight: bold;
}

.raffle-table td {
    background-color: #ddd; /* Fondo blanco para los datos */
}

/* Estilo del botón "Jugar" */
.action-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #07035c; /* Azul oscuro */
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Animación suave */
}

.action-button:hover {
    background-color: #00a2ff; /* Cambia el color al pasar el mouse */
}

/* Estilo del botón "Jugar" */
.action-button_2 {
    padding: 15px;
    font-size: 20px;
    cursor: pointer;
    background-color: #F09; /* Azul oscuro */
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Animación suave */
}

.action-button_2:hover {
    background-color: #00a2ff; /* Cambia el color al pasar el mouse */
}

.action-button_3 {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    background-color: #F09; /* Azul oscuro */
    color: #fff; /* Texto blanco */
    border: none;
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Animación suave */
}

.action-button_3:hover {
    background-color: #00a2ff; /* Cambia el color al pasar el mouse */
}

/* Mensajes de error o información */
label {
            display: block; /* Coloca el label sobre el campo */
            font-size: 16px;
            margin-bottom: 5px; /* Espacio entre el label y el campo */
            color: #07035c; /* Color azul oscuro */
            text-align: left; /* Alinea el texto a la izquierda */
        }
        input[type="text"], input[type="number"] {
            width: calc(100% - 20px); /* Resta el padding para evitar desbordamiento */
            padding: 10px;
            font-size: 16px;
            border: 2px solid #07035c; /* Borde azul oscuro */
            border-radius: 5px; /* Bordes redondeados */
            transition: border-color 0.3s ease; /* Animación suave para el cambio de color */
            margin-bottom: 15px; /* Espaciado entre elementos */
            box-sizing: border-box; /* Incluye padding y borde en el ancho total */
        }
        input[type="text"]:focus, input[type="number"]:focus {
            border-color: #00a2ff; /* Cambia el color del borde al enfocar */
            outline: none; /* Elimina el resaltado predeterminado */
        }
        button {
            padding: 12px 25px; /* Aumenta el tamaño del botón */
            font-size: 18px; /* Texto más grande */
            cursor: pointer;
            background-color: #07035c; /* Fondo azul oscuro */
            color: #fff; /* Texto blanco */
            border: none;
            border-radius: 5px; /* Bordes redondeados */
            transition: background-color 0.3s ease; /* Animación suave para el cambio de color */
        }
        button:hover {
            background-color: #00a2ff; /* Cambia el color al pasar el mouse */
        }
        .message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            font-size: 16px;
        }
        .success {
            background-color: #d4edda; /* Verde claro */
            color: #155724; /* Verde oscuro */
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da; /* Rojo claro */
            color: #721c24; /* Rojo oscuro */
            border: 1px solid #f5c6cb;
        }