/* Estilos para el tema claro */
body.light-theme {
    background: linear-gradient(to bottom, #030327, #250552);
    color: #fff;
    font-family: 'Gilroy', sans-serif; /* Familia de fuentes Gilroy */
}

button {
    background: #7B2BBD;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

button:hover {
    background: #fff;
    color: #08082C;
}

button:active {
    background: #000;
    color: #fff;
}

h1 {
    color: #FE18DD;
}

#menubar {
    background: #08082C;
    color: #fff;
}

marquee {
    color: #9E86EF;
}

input {
    color: #fff; /* Color del texto dentro del input */
    background: none;
    border: 1px solid #34E3D0;
    border-radius: 5px;
    padding: 8px;
     /* Cambia el color al pasar el mouse */
}

input:hover {
    background: none;
    border-color: #fff;
}

/* Estilo "flat" para los input */
input:focus {
    outline: #7B2BBD;
    box-shadow: none;
}

@media (max-width: 768px) {
    /* Estilos para dispositivos móviles */
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Estilos para tabletas */
}

@media (min-width: 1025px) {
    /* Estilos para escritorios */
}

/* Estilos para el menú superior */
#top-menu {
    background: #000; /* Fondo negro */
    color: #fff; /* Texto en blanco */
    padding: 10px 0; /* Espacio interno arriba y abajo */
}

#top-menu ul {
    list-style: none; /* Quitar viñetas de la lista */
    margin: 0;
    padding: 0;
}

#top-menu ul li {
    display: inline; /* Coloca los elementos en línea */
    margin-right: 20px; /* Espacio entre elementos */
}

#top-menu a {
    text-decoration: none; /* Elimina subrayado de enlaces */
    color: #fff; /* Texto en blanco */
    font-weight: bold; /* Texto en negrita */
}

/* Estilos para el menú superior */
#top-menu {
    background: linear-gradient(to left, #030327, #250552);
    color: #fff; /* Texto en blanco */
    padding: 20px 0; /* Espacio interno arriba y abajo */
}

#top-menu ul {
    list-style: none; /* Quitar viñetas de la lista */
    margin: 0;
    padding: 0;
}

#top-menu ul li {
    display: inline; /* Coloca los elementos en línea */
    margin-right: 20px; /* Espacio entre elementos */
}

#top-menu a {
    text-decoration: none; /* Elimina subrayado de enlaces */
    color: #fff; /* Texto en blanco */
    font-weight: bold; /* Texto en negrita */
    transition: color 0.3s; /* Transición de color suave */
}

#top-menu a:hover {
    color: #34E3D0; /* Cambia el color al pasar el mouse */
}

#region {
    display: none;
}

#genero {
    padding: 8px;
    outline: #7B2BBD;
    color: #fff;
    background:#0C0331;
    box-shadow: none;
    border: 2px solid #34E3D0;
    border-radius: 5px;
    transition: color 0.1s; /* Transición de color suave */
}