/* Estilos para el contenedor del pop-up (la barra inferior) */
.data-protection-popup {
    position: fixed; /* Mantiene el pop-up fijo en la pantalla */
    bottom: 0; /* Lo ancla a la parte inferior */
    left: 0;
    width: 100%; /* Ocupa todo el ancho */
    height: auto; /* La altura se ajusta al contenido */
    
    background-color: #1a2a4b; /* Color de fondo azul oscuro, como en tu imagen */
    color: #fff; /* Color del texto para que sea visible */
    
    z-index: 9999; /* Asegura que esté por encima de todo */
    
    /* Usamos flexbox para organizar el contenido interno */
    display: flex;
    justify-content: center; /* Centra horizontalmente el contenido principal */
    align-items: center; /* Centra verticalmente el contenido */
    
    padding: 15px 30px; /* Espacio interno para que el contenido no esté pegado a los bordes */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); /* Sombra en la parte superior */

    /* Inicialmente oculto (visibilidad y opacidad) */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

/* Estilos para el contenido dentro de la barra */
.data-protection-popup-content {
    display: flex; /* Usamos flexbox para alinear el texto y los botones */
    align-items: center; /* Alinea verticalmente el texto y los botones */
    justify-content: space-between; /* Espacio entre el texto y los botones */
    
    width: 100%;
    max-width: 1200px; /* Puedes ajustar el ancho máximo para el contenido si quieres que no se estire demasiado */
}

/* Estilos para el párrafo de texto */
.data-protection-popup-content p {
    margin: 0; /* Elimina márgenes por defecto del párrafo */
    padding-right: 20px; /* Espacio entre el texto y los botones */
    font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
    line-height: 1.5;
	text-align: justify;
	padding-bottom: 10px;
}

/* Estilos para los botones dentro de la barra */
.popup-buttons {
    display: flex; /* Alinea los botones uno al lado del otro */
    gap: 10px; /* Espacio entre los botones */
}
/* Asegura que ambos elementos tengan el mismo estilo base */
.popup-buttons label,
.popup-buttons a {
    /* Usamos flexbox para centrar el contenido de cada botón */
    display: inline-flex; 
    
    /* Centra el texto horizontalmente */
    justify-content: center; 
    
    /* Centra el texto verticalmente */
    align-items: center; 

    /* Misma altura gracias al padding, ahora combinado con flexbox */
    padding: 10px 20px; 
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    white-space: nowrap;
	
	height: 40px;
}

/* Estilos específicos para el botón "ACEPTAR" (label) */
.popup-buttons label {
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff; /* Mismo borde que el otro botón */
}

/* Estilos específicos para el botón "VER POLÍTICAS" (a) */
.popup-buttons a {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
	
}

/* Estilos hover para el botón "ACEPTAR" */
.popup-buttons label:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Estilos hover para el botón "VER POLÍTICAS" */
.popup-buttons a:hover {
    background-color: rgba(255, 255, 255, 0.1);
	 color: #fff;
	
}

/* Regla para mostrar el pop-up cuando el checkbox esté marcado */
#show-popup:checked ~ .data-protection-popup {
    visibility: visible;
    opacity: 1;
}

/* Estilos para el encabezado dentro del pop-up (si existe, ajusta según necesidad) */
.data-protection-popup-content h3 {
    display: none; /* Ocultamos el título si no lo quieres en la barra inferior */
}




/* Media Query para pantallas pequeñas, de 736px o menos */
@media (max-width: 736px) {
    /* Ajusta el contenedor de la barra inferior */
    .data-protection-popup {
        padding: 15px; /* Reduce el espacio interno para dispositivos móviles */
    }

    /* Ajusta el contenedor del texto y los botones */
    .data-protection-popup-content {
        flex-direction: column; /* Cambia la dirección del flexbox a columna para apilar los elementos */
        align-items: center; /* Centra los elementos (texto y botones) horizontalmente */
        text-align: center; /* Centra el texto */
    }

    /* Estilos para el párrafo de texto */
    .data-protection-popup-content p {
        padding-right: 0; /* Elimina el padding derecho que se usaba en desktop */
        margin-bottom: 20px; /* Añade espacio debajo del texto para separarlo de los botones */
    }

    /* Contenedor de los botones */
    .popup-buttons {
        flex-direction: row; /* Mantén los botones uno al lado del otro */
        justify-content: center; /* Centra los botones en la parte inferior */
        width: 100%; /* Opcional: hace que los botones ocupen el ancho completo */
        gap: 15px; /* Aumenta el espacio entre los botones */
    }
}