/*
#cookie-banner: Estilos para el banner de cookies
- Fijado en la parte inferior de la pantalla
- Qyeda centrado en medio de la pantalla
- Fondo blanco con una línea superior verde
- Sombra para destacar
- Padding y z-index para asegurar que esté en la parte superior
- Oculto por defecto con una animación de entrada suave
*/
#cookie-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%; /* Hacer que ocupe el 50% del ancho */
    background-color: #ffffff; /* Fondo blanco */
    border-top: 3px solid #4caf50; /* Línea en la parte superior para destacar */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
    padding: 15px 20px;
    z-index: 1000;
    text-align: center;
    display: none; /* Ocultar por defecto */
    animation: slideUp 0.5s ease-in-out; /* Animación suave */
}
/*
Animación de entrada desde la parte inferior
- Desliza el banner hacia arriba y aumenta la opacidad
*/
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/*
#cookie-banner h2: Estilos para el título del banner de cookies
- Tamaño de fuente, peso y color
*/
#cookie-banner h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/*
#cookie-banner p: Estilos para el párrafo del banner de cookies
- Tamaño de fuente, color y espaciado
*/
#cookie-banner p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
}

/*
#cookie-banner .button-group: Estilos para el grupo de botones en el banner de cookies
- Alineación y espaciado entre botones
*/
#cookie-banner .button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/*
#cookie-banner button: Estilos generales para los botones en el banner de cookies
- Padding, borde, radio de borde, cursor, tamaño de fuente y transición
*/
#cookie-banner button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

/*
#cookie-banner button#accept-cookies: Estilos específicos para el botón de aceptar cookies
- Color de fondo y texto
*/
#cookie-banner button#accept-cookies {
    background-color: #4caf50;
    color: white;
}

/*
#cookie-banner button#accept-cookies:hover: Estilos para el botón de aceptar cookies al pasar el ratón
- Cambio de color de fondo
*/
#cookie-banner button#accept-cookies:hover {
    background-color: #45a049;
}

/*
#cookie-banner button#reject-cookies: Estilos específicos para el botón de rechazar cookies
- Color de fondo y texto
*/
#cookie-banner button#reject-cookies {
    background-color: #f44336;
    color: white;
}

/*
#cookie-banner button#reject-cookies:hover: Estilos para el botón de rechazar cookies al pasar el ratón
- Cambio de color de fondo
*/
#cookie-banner button#reject-cookies:hover {
    background-color: #d32f2f;
}

/*
.cookie-preference: Estilos para las preferencias de cookies
- Alineación, espaciado, texto y borde
*/
.cookie-preference {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 15px 0;
    text-align: left;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

/*
.cookie-preference p: Estilos para los párrafos dentro de las preferencias de cookies
- Margen, flexibilidad, tamaño de fuente y color
*/
.cookie-preference p {
    margin-left: 10px;
    flex: 1;
    font-size: 14px;
    color: #555;
}

/*
.cookie-preference input[type="checkbox"]: Estilos para los interruptores de preferencias de cookies
- Apariencia, tamaño, color de fondo, borde, posición, cursor y transición
*/
.cookie-preference input[type="checkbox"] {
    appearance: none;
    width: 40px;
    height: 20px;
    background-color: #ddd;
    border-radius: 20px;
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/*
.cookie-preference input[type="checkbox"]:checked: Estilos para los interruptores de preferencias de cookies cuando están activados
- Cambio de color de fondo
*/
.cookie-preference input[type="checkbox"]:checked {
    background-color: #4caf50;
}

/*
.cookie-preference input[type="checkbox"]::after: Estilos para el círculo dentro del interruptor
- Tamaño, color de fondo, borde, posición y transición
*/
.cookie-preference input[type="checkbox"]::after {
    content: '';
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.3s ease;
}

/*
.cookie-preference input[type="checkbox"]:checked::after: Estilos para el círculo dentro del interruptor cuando está activado
- Transformación para mover el círculo
*/
.cookie-preference input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

/*
.preferences-buttons: Estilos para los botones de la ventana de preferencias
- Alineación y espaciado
*/
.preferences-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/*
.preferences-buttons button: Estilos generales para los botones en la ventana de preferencias
- Flexibilidad, padding, borde, cursor, tamaño de fuente y transición
*/
.preferences-buttons button {
    flex: 1;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

/*
.preferences-buttons #save-preferences: Estilos específicos para el botón de guardar preferencias
- Color de fondo y texto
*/
.preferences-buttons #save-preferences {
    background-color: #4caf50;
    color: white;
}

/*
.preferences-buttons #close-preferences: Estilos específicos para el botón de cerrar preferencias
- Color de fondo y texto
*/
.preferences-buttons #close-preferences {
    background-color: #f44336;
    color: white;
}

/*
.preferences-buttons button:hover: Estilos para los botones en la ventana de preferencias al pasar el ratón
- Cambio de opacidad
*/
.preferences-buttons button:hover {
    opacity: 0.9;
}

/*
#preferences-popup: Estilos para la ventana emergente de preferencias
- Posición, fondo, sombra, borde, tamaño, padding y z-index
*/
#preferences-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    padding: 20px;
    display: none;
    z-index: 1001;
}

/*
#preferences-popup h3: Estilos para el título de la ventana emergente de preferencias
- Margen superior
*/
#preferences-popup h3 {
    margin-top: 0;
}

/*
.cookie-preference label: Estilos para las etiquetas dentro de las preferencias de cookies
- Peso de la fuente
*/
.cookie-preference label {
    font-weight: bold;
}

/*
.preferences-buttons button: Estilos generales para los botones en la ventana de preferencias
- Padding, borde, cursor y tamaño de fuente
*/
.preferences-buttons button {
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

/*
#save-preferences: Estilos específicos para el botón de guardar preferencias
- Color de fondo y texto
*/
#save-preferences {
    background-color: #4caf50;
    color: white;
}

/*
#close-preferences: Estilos específicos para el botón de cerrar preferencias
- Color de fondo y texto
*/
#close-preferences {
    background-color: #f44336;
    color: white;
}