Banner de Cookies Modal de Pantalla Completa
Intermedio
Un banner de consentimiento de cookies modal inmersivo de pantalla completa con efectos de fondo sofisticados, animaciones elegantes y controles de privacidad integrales para mejorar la participación del usuario y el cumplimiento del RGPD
Vista Previa en Vivo
Implementación del Código
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner de Cookies Modal de Pantalla Completa</title>
<style>
:root {
--color-primario: #3b82f6;
--color-primario-hover: #2563eb;
--color-secundario: #6366f1;
--color-exito: #10b981;
--color-exito-hover: #059669;
--color-advertencia: #f59e0b;
--color-peligro: #ef4444;
--fondo: #ffffff;
--superficie: #f8fafc;
--superficie-elevada: #ffffff;
--texto-primario: #1f2937;
--texto-secundario: #6b7280;
--texto-silenciado: #9ca3af;
--color-borde: #e5e7eb;
--sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--radio-borde: 8px;
--radio-borde-lg: 12px;
--radio-borde-xl: 16px;
--transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transicion-rapida: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--desenfoque-fondo: 20px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: var(--texto-primario);
line-height: 1.6;
padding: 2rem;
overflow-x: hidden;
position: relative;
}
.contenedor-demo {
max-width: 1200px;
margin: 0 auto;
text-align: center;
color: white;
position: relative;
z-index: 1;
}
.contenedor-demo h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.contenedor-demo p {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.btn-demo {
padding: 1rem 2rem;
border: none;
border-radius: var(--radio-borde-lg);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: white;
font-family: inherit;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transicion);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btn-demo:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: var(--sombra-lg);
}
/* Fondo Modal de Pantalla Completa */
.fondo-modal-pantalla-completa {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(var(--desenfoque-fondo));
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.fondo-modal-pantalla-completa.activo {
opacity: 1;
visibility: visible;
}
/* Modal de Cookies de Pantalla Completa */
.modal-cookies-pantalla-completa {
width: 100%;
max-width: 900px;
max-height: 90vh;
background: var(--superficie-elevada);
border-radius: var(--radio-borde-xl);
box-shadow: var(--sombra-xl);
transform: scale(0.9) translateY(50px);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.fondo-modal-pantalla-completa.activo .modal-cookies-pantalla-completa {
transform: scale(1) translateY(0);
}
/* Encabezado del Modal */
.encabezado-modal {
padding: 2.5rem 2.5rem 2rem;
background: linear-gradient(135deg, var(--superficie-elevada) 0%, var(--superficie) 100%);
border-bottom: 1px solid var(--color-borde);
position: relative;
}
.boton-cerrar {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 44px;
height: 44px;
border: none;
background: var(--superficie);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--texto-secundario);
transition: var(--transicion-rapida);
font-size: 1.5rem;
border: 1px solid var(--color-borde);
}
.boton-cerrar:hover {
background: var(--color-borde);
color: var(--texto-primario);
transform: scale(1.1);
}
.titulo-modal {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.icono-modal {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
border-radius: var(--radio-borde-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
animation: pulso 2s ease-in-out infinite;
box-shadow: var(--sombra-md);
}
@keyframes pulso {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.contenido-titulo {
flex: 1;
text-align: left;
}
.texto-titulo {
font-size: 2rem;
font-weight: 800;
color: var(--texto-primario);
margin-bottom: 0.5rem;
}
.subtitulo-titulo {
font-size: 1.1rem;
color: var(--texto-secundario);
font-weight: 500;
}
.descripcion-modal {
color: var(--texto-secundario);
font-size: 1.1rem;
line-height: 1.7;
max-width: 600px;
}
/* Contenido del Modal */
.contenido-modal {
flex: 1;
overflow-y: auto;
padding: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-primario) transparent;
}
.contenido-modal::-webkit-scrollbar {
width: 8px;
}
.contenido-modal::-webkit-scrollbar-track {
background: var(--superficie);
}
.contenido-modal::-webkit-scrollbar-thumb {
background: var(--color-primario);
border-radius: 4px;
}
.contenido-modal::-webkit-scrollbar-thumb:hover {
background: var(--color-primario-hover);
}
/* Resumen de Privacidad */
.resumen-privacidad {
padding: 2rem 2.5rem;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
border-bottom: 1px solid var(--color-borde);
}
.cuadricula-resumen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.elemento-resumen {
text-align: center;
padding: 1.5rem;
background: var(--superficie-elevada);
border-radius: var(--radio-borde-lg);
border: 1px solid var(--color-borde);
transition: var(--transicion-rapida);
}
.elemento-resumen:hover {
transform: translateY(-2px);
box-shadow: var(--sombra-md);
}
.icono-resumen {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
border-radius: var(--radio-borde);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
color: white;
font-size: 1.5rem;
}
.titulo-resumen {
font-weight: 600;
font-size: 1.1rem;
color: var(--texto-primario);
margin-bottom: 0.5rem;
}
.descripcion-resumen {
font-size: 0.9rem;
color: var(--texto-secundario);
line-height: 1.5;
}
/* Categorías de Cookies */
.categorias-cookies {
padding: 2rem 2.5rem;
}
.titulo-categorias {
font-size: 1.5rem;
font-weight: 700;
color: var(--texto-primario);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.icono-categorias {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
border-radius: var(--radio-borde);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.categoria-cookie {
margin-bottom: 1.5rem;
padding: 1.5rem;
background: var(--superficie);
border-radius: var(--radio-borde-lg);
border: 1px solid var(--color-borde);
transition: var(--transicion-rapida);
}
.categoria-cookie:hover {
box-shadow: var(--sombra-md);
border-color: var(--color-primario);
}
.encabezado-categoria {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.info-categoria {
flex: 1;
margin-right: 1rem;
}
.titulo-categoria {
font-weight: 600;
font-size: 1.2rem;
color: var(--texto-primario);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.insignia-categoria {
font-size: 0.75rem;
color: var(--texto-silenciado);
background: var(--superficie-elevada);
padding: 0.25rem 0.75rem;
border-radius: 12px;
border: 1px solid var(--color-borde);
font-weight: 500;
}
.descripcion-categoria {
font-size: 1rem;
color: var(--texto-secundario);
line-height: 1.6;
margin-bottom: 1rem;
}
/* Interruptor de Alternancia */
.interruptor-alternancia {
position: relative;
width: 64px;
height: 36px;
background: var(--color-borde);
border-radius: 18px;
cursor: pointer;
transition: var(--transicion);
flex-shrink: 0;
border: 2px solid transparent;
}
.interruptor-alternancia.activo {
background: linear-gradient(135deg, var(--color-exito) 0%, #06d6a0 100%);
}
.interruptor-alternancia.deshabilitado {
opacity: 0.5;
cursor: not-allowed;
}
.interruptor-alternancia::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 28px;
height: 28px;
background: white;
border-radius: 50%;
transition: var(--transicion);
box-shadow: var(--sombra-sm);
}
.interruptor-alternancia.activo::before {
transform: translateX(28px);
}
.interruptor-alternancia:hover:not(.deshabilitado) {
border-color: var(--color-primario);
transform: scale(1.05);
}
/* Sección Expandible */
.seccion-expandible {
margin-top: 1rem;
}
.alternancia-expandir {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
color: var(--color-primario);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: var(--transicion-rapida);
padding: 0.75rem;
border-radius: var(--radio-borde);
width: 100%;
justify-content: flex-start;
}
.alternancia-expandir:hover {
background: rgba(59, 130, 246, 0.1);
}
.icono-expandir {
transition: transform 0.3s ease;
font-size: 0.8rem;
}
.alternancia-expandir.expandido .icono-expandir {
transform: rotate(180deg);
}
.contenido-expandible {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.contenido-expandible.expandido {
max-height: 400px;
}
.detalles-cookie {
padding: 1rem 0;
}
.elemento-cookie {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--superficie-elevada);
border-radius: var(--radio-borde);
margin-bottom: 0.75rem;
border: 1px solid var(--color-borde);
transition: var(--transicion-rapida);
}
.elemento-cookie:hover {
box-shadow: var(--sombra-sm);
border-color: var(--color-primario);
}
.info-cookie {
flex: 1;
}
.nombre-cookie {
font-weight: 600;
font-size: 1rem;
color: var(--texto-primario);
margin-bottom: 0.25rem;
}
.proposito-cookie {
font-size: 0.9rem;
color: var(--texto-secundario);
line-height: 1.4;
}
.alternancia-cookie {
width: 48px;
height: 28px;
background: var(--color-borde);
border-radius: 14px;
position: relative;
cursor: pointer;
transition: var(--transicion);
border: 1px solid var(--color-borde);
}
.alternancia-cookie.activo {
background: var(--color-primario);
}
.alternancia-cookie::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 22px;
height: 22px;
background: white;
border-radius: 50%;
transition: var(--transicion);
}
.alternancia-cookie.activo::before {
transform: translateX(20px);
}
/* Acciones del Modal */
.acciones-modal {
padding: 2rem 2.5rem;
background: var(--superficie);
border-top: 1px solid var(--color-borde);
display: flex;
flex-direction: column;
gap: 1rem;
}
.fila-acciones {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.boton-accion {
flex: 1;
min-width: 200px;
padding: 1rem 1.5rem;
border: none;
border-radius: var(--radio-borde-lg);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transicion);
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.boton-accion::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.boton-accion:hover::before {
left: 100%;
}
.btn-aceptar {
background: linear-gradient(135deg, var(--color-exito) 0%, #06d6a0 100%);
color: white;
box-shadow: var(--sombra-md);
}
.btn-aceptar:hover {
transform: translateY(-2px);
box-shadow: var(--sombra-lg);
}
.btn-personalizar {
background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
color: white;
box-shadow: var(--sombra-md);
}
.btn-personalizar:hover {
transform: translateY(-2px);
box-shadow: var(--sombra-lg);
}
.btn-rechazar {
background: var(--superficie-elevada);
color: var(--color-peligro);
border: 2px solid var(--color-peligro);
}
.btn-rechazar:hover {
background: var(--color-peligro);
color: white;
transform: translateY(-2px);
}
.btn-secundario {
background: var(--superficie-elevada);
color: var(--texto-secundario);
border: 2px solid var(--color-borde);
}
.btn-secundario:hover {
background: var(--color-borde);
color: var(--texto-primario);
transform: translateY(-2px);
}
/* Estados de Carga */
.spinner-carga {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: currentColor;
animation: girar 1s ease-in-out infinite;
}
@keyframes girar {
to {
transform: rotate(360deg);
}
}
/* Animación de Éxito */
.marca-exito {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
stroke-width: 2;
stroke: currentColor;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px currentColor;
animation: llenar 0.4s ease-in-out 0.4s forwards, escalar 0.3s ease-in-out 0.9s both;
}
.circulo-marca {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: currentColor;
fill: none;
animation: trazo 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.check-marca {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: trazo 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes trazo {
100% {
stroke-dashoffset: 0;
}
}
@keyframes escalar {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes llenar {
100% {
box-shadow: inset 0px 0px 0px 30px currentColor;
}
}
/* Diseño Responsivo */
@media (max-width: 768px) {
.fondo-modal-pantalla-completa {
padding: 1rem;
}
.encabezado-modal {
padding: 2rem 1.5rem 1.5rem;
}
.texto-titulo {
font-size: 1.5rem;
}
.descripcion-modal {
font-size: 1rem;
}
.resumen-privacidad {
padding: 1.5rem;
}
.cuadricula-resumen {
grid-template-columns: 1fr;
gap: 1rem;
}
.categorias-cookies {
padding: 1.5rem;
}
.acciones-modal {
padding: 1.5rem;
}
.fila-acciones {
flex-direction: column;
}
.boton-accion {
min-width: auto;
}
}
@media (max-width: 480px) {
body {
padding: 0.5rem;
}
.contenedor-demo h1 {
font-size: 2rem;
}
.fondo-modal-pantalla-completa {
padding: 0.5rem;
}
.encabezado-modal {
padding: 1.5rem 1rem 1rem;
}
.resumen-privacidad {
padding: 1rem;
}
.categorias-cookies {
padding: 1rem;
}
.acciones-modal {
padding: 1rem;
}
}
/* Variantes de Animación */
.aparecer {
animation: aparecerEn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes aparecerEn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.deslizar-arriba {
animation: deslizarArriba 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes deslizarArriba {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Estilos de Enfoque */
.boton-accion:focus,
.interruptor-alternancia:focus,
.alternancia-expandir:focus,
.boton-cerrar:focus {
outline: 2px solid var(--color-primario);
outline-offset: 2px;
}
/* Modo de Alto Contraste */
@media (prefers-contrast: high) {
:root {
--color-borde: #000000;
--texto-secundario: #000000;
}
}
/* Movimiento Reducido */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="contenedor-demo">
<h1>Diseño Modal de Pantalla Completa</h1>
<p>Experimenta el modal inmersivo de pantalla completa con efectos de fondo sofisticados y controles de privacidad integrales</p>
<button class="btn-demo" onclick="mostrarBannerCookies()">Mostrar Banner de Cookies</button>
</div>
<!-- Fondo Modal de Pantalla Completa -->
<div id="fondoModalPantallaCompleta" class="fondo-modal-pantalla-completa">
<div class="modal-cookies-pantalla-completa">
<button class="boton-cerrar" onclick="cerrarBanner()" aria-label="Cerrar banner">×</button>
<div class="encabezado-modal">
<div class="titulo-modal">
<div class="icono-modal">🍪</div>
<div class="contenido-titulo">
<div class="texto-titulo">Preferencias de Cookies</div>
<div class="subtitulo-titulo">Gestiona tu configuración de privacidad</div>
</div>
</div>
<div class="descripcion-modal">
Utilizamos cookies para mejorar tu experiencia de navegación, servir contenido personalizado y analizar nuestro tráfico.
Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies. Puedes personalizar tus preferencias a continuación.
</div>
</div>
<div class="contenido-modal">
<div class="resumen-privacidad">
<h3 style="margin-bottom: 1rem; color: var(--texto-primario); font-size: 1.3rem;">Resumen de Privacidad</h3>
<div class="cuadricula-resumen">
<div class="elemento-resumen">
<div class="icono-resumen">🔒</div>
<div class="titulo-resumen">Protección de Datos</div>
<div class="descripcion-resumen">Tu privacidad es nuestra prioridad. Implementamos medidas de seguridad estándar de la industria.</div>
</div>
<div class="elemento-resumen">
<div class="icono-resumen">⚙️</div>
<div class="titulo-resumen">Control Granular</div>
<div class="descripcion-resumen">Elige exactamente qué cookies quieres permitir con controles detallados de categorías.</div>
</div>
<div class="elemento-resumen">
<div class="icono-resumen">📊</div>
<div class="titulo-resumen">Transparencia</div>
<div class="descripcion-resumen">Información clara sobre qué datos recopilamos y cómo los utilizamos.</div>
</div>
<div class="elemento-resumen">
<div class="icono-resumen">🌍</div>
<div class="titulo-resumen">Cumplimiento RGPD</div>
<div class="descripcion-resumen">Cumplimiento total con las regulaciones europeas de privacidad y estándares.</div>
</div>
</div>
</div>
<div class="categorias-cookies">
<div class="titulo-categorias">
<div class="icono-categorias">🍪</div>
Categorías de Cookies
</div>
<div class="categoria-cookie">
<div class="encabezado-categoria">
<div class="info-categoria">
<div class="titulo-categoria">
Estrictamente Necesarias
<span class="insignia-categoria">Siempre Activas</span>
</div>
<div class="descripcion-categoria">
Estas cookies son esenciales para que el sitio web funcione correctamente y no se pueden desactivar.
Generalmente se establecen en respuesta a acciones realizadas por ti que equivalen a una solicitud de servicios.
</div>
</div>
<div class="interruptor-alternancia activo deshabilitado"></div>
</div>
<div class="seccion-expandible">
<button class="alternancia-expandir" data-target="detalles-esenciales">
<span>Ver Detalles</span>
<span class="icono-expandir">▼</span>
</button>
<div id="detalles-esenciales" class="contenido-expandible">
<div class="detalles-cookie">
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Cookie de Sesión</div>
<div class="proposito-cookie">Mantiene tu sesión mientras navegas por el sitio web</div>
</div>
<div class="alternancia-cookie activo"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Token de Seguridad</div>
<div class="proposito-cookie">Protege contra ataques de falsificación de solicitudes entre sitios</div>
</div>
<div class="alternancia-cookie activo"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Balanceador de Carga</div>
<div class="proposito-cookie">Asegura el rendimiento óptimo del servidor y la disponibilidad</div>
</div>
<div class="alternancia-cookie activo"></div>
</div>
</div>
</div>
</div>
</div>
<div class="categoria-cookie">
<div class="encabezado-categoria">
<div class="info-categoria">
<div class="titulo-categoria">
Análisis de Rendimiento
<span class="insignia-categoria">4 cookies</span>
</div>
<div class="descripcion-categoria">
Estas cookies nos ayudan a entender cómo los visitantes interactúan con nuestro sitio web recopilando
e informando información de forma anónima. Esto nos ayuda a mejorar el rendimiento de nuestro sitio web.
</div>
</div>
<div class="interruptor-alternancia" data-categoria="analiticas"></div>
</div>
<div class="seccion-expandible">
<button class="alternancia-expandir" data-target="detalles-analiticas">
<span>Ver Detalles</span>
<span class="icono-expandir">▼</span>
</button>
<div id="detalles-analiticas" class="contenido-expandible">
<div class="detalles-cookie">
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Google Analytics</div>
<div class="proposito-cookie">Rastrea el uso del sitio web y métricas de rendimiento</div>
</div>
<div class="alternancia-cookie" data-cookie="ga"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Hotjar</div>
<div class="proposito-cookie">Registra interacciones del usuario para mejoras de UX</div>
</div>
<div class="alternancia-cookie" data-cookie="hotjar"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Monitor de Rendimiento</div>
<div class="proposito-cookie">Monitorea tiempos de carga de página y rendimiento técnico</div>
</div>
<div class="alternancia-cookie" data-cookie="rendimiento"></div>
</div>
</div>
</div>
</div>
</div>
<div class="categoria-cookie">
<div class="encabezado-categoria">
<div class="info-categoria">
<div class="titulo-categoria">
Marketing y Publicidad
<span class="insignia-categoria">6 cookies</span>
</div>
<div class="descripcion-categoria">
Estas cookies se utilizan para entregar anuncios más relevantes para ti y tus intereses.
También pueden usarse para limitar el número de veces que ves un anuncio.
</div>
</div>
<div class="interruptor-alternancia" data-categoria="marketing"></div>
</div>
<div class="seccion-expandible">
<button class="alternancia-expandir" data-target="detalles-marketing">
<span>Ver Detalles</span>
<span class="icono-expandir">▼</span>
</button>
<div id="detalles-marketing" class="contenido-expandible">
<div class="detalles-cookie">
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Facebook Pixel</div>
<div class="proposito-cookie">Rastrea conversiones y construye audiencias personalizadas</div>
</div>
<div class="alternancia-cookie" data-cookie="facebook"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Google Ads</div>
<div class="proposito-cookie">Habilita remarketing y personalización de anuncios</div>
</div>
<div class="alternancia-cookie" data-cookie="google-ads"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">LinkedIn Insight</div>
<div class="proposito-cookie">Proporciona insights para campañas publicitarias de LinkedIn</div>
</div>
<div class="alternancia-cookie" data-cookie="linkedin"></div>
</div>
</div>
</div>
</div>
</div>
<div class="categoria-cookie">
<div class="encabezado-categoria">
<div class="info-categoria">
<div class="titulo-categoria">
Mejora Funcional
<span class="insignia-categoria">3 cookies</span>
</div>
<div class="descripcion-categoria">
Estas cookies habilitan funcionalidad mejorada y personalización, como videos y chats en vivo.
Pueden ser establecidas por nosotros o por proveedores terceros.
</div>
</div>
<div class="interruptor-alternancia" data-categoria="funcional"></div>
</div>
<div class="seccion-expandible">
<button class="alternancia-expandir" data-target="detalles-funcional">
<span>Ver Detalles</span>
<span class="icono-expandir">▼</span>
</button>
<div id="detalles-funcional" class="contenido-expandible">
<div class="detalles-cookie">
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Preferencia de Idioma</div>
<div class="proposito-cookie">Recuerda tu preferencia de idioma seleccionado</div>
</div>
<div class="alternancia-cookie" data-cookie="idioma"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Preferencia de Tema</div>
<div class="proposito-cookie">Guarda tu preferencia de modo oscuro/claro</div>
</div>
<div class="alternancia-cookie" data-cookie="tema"></div>
</div>
<div class="elemento-cookie">
<div class="info-cookie">
<div class="nombre-cookie">Widget de Chat</div>
<div class="proposito-cookie">Habilita funcionalidad de chat en vivo y soporte</div>
</div>
<div class="alternancia-cookie" data-cookie="chat"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="acciones-modal">
<div class="fila-acciones">
<button class="boton-accion btn-aceptar" onclick="aceptarTodasLasCookies()">Aceptar Todas las Cookies</button>
<button class="boton-accion btn-personalizar" onclick="guardarConfiguracionPersonalizada()">Guardar Mis Preferencias</button>
</div>
<div class="fila-acciones">
<button class="boton-accion btn-rechazar" onclick="rechazarCookiesOpcionales()">Rechazar Opcionales</button>
<button class="boton-accion btn-secundario" onclick="mostrarPoliticaPrivacidad()">Política de Privacidad</button>
</div>
</div>
</div>
</div>
<script>
class BannerCookiesModalPantallaCompleta {
constructor(opciones = {}) {
this.opciones = {
mostrarAutomaticamente: true,
retrasoMostrar: 2000,
claveAlmacenamiento: 'consentimiento_cookies_modal_pantalla_completa',
diasExpiracion: 365,
habilitarAnimaciones: true,
desenfoqueF: 20,
onAccept: null,
onReject: null,
onSave: null,
onClose: null
};
Object.assign(this.opciones, opciones);
this.estado = {
visible: false,
configuracion: {
esenciales: true,
analiticas: false,
marketing: false,
funcional: false
},
cargando: false
};
this.init();
}
init() {
this.crearElementos();
this.configurarEventListeners();
this.cargarConfiguracionGuardada();
if (this.opciones.mostrarAutomaticamente && !this.tieneConsentimiento()) {
setTimeout(() => {
this.mostrar();
}, this.opciones.retrasoMostrar);
}
}
crearElementos() {
// Los elementos ya están en el HTML
this.fondo = document.getElementById('fondoModalPantallaCompleta');
this.modal = this.fondo.querySelector('.modal-cookies-pantalla-completa');
this.configurarInterruptores();
this.configurarSeccionesExpandibles();
}
configurarInterruptores() {
// Configurar interruptores de categoría
const interruptores = document.querySelectorAll('[data-categoria]');
interruptores.forEach(interruptor => {
interruptor.addEventListener('click', (e) => {
const categoria = e.target.dataset.categoria;
this.alternarCategoria(categoria);
});
});
// Configurar interruptores de cookies individuales
const interruptoresCookies = document.querySelectorAll('[data-cookie]');
interruptoresCookies.forEach(interruptor => {
interruptor.addEventListener('click', (e) => {
const cookie = e.target.dataset.cookie;
this.alternarCookie(cookie);
});
});
}
configurarSeccionesExpandibles() {
const alternanciasExpandir = document.querySelectorAll('.alternancia-expandir');
alternanciasExpandir.forEach(alternancia => {
alternancia.addEventListener('click', (e) => {
const target = e.currentTarget.dataset.target;
const contenido = document.getElementById(target);
if (contenido) {
const expandido = contenido.classList.contains('expandido');
if (expandido) {
contenido.classList.remove('expandido');
e.currentTarget.classList.remove('expandido');
} else {
contenido.classList.add('expandido');
e.currentTarget.classList.add('expandido');
}
}
});
});
}
configurarEventListeners() {
// Cerrar al hacer clic en el fondo
this.fondo.addEventListener('click', (e) => {
if (e.target === this.fondo) {
this.cerrar();
}
});
// Cerrar con tecla Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.estado.visible) {
this.cerrar();
}
});
}
mostrar() {
this.estado.visible = true;
this.fondo.classList.add('activo');
document.body.style.overflow = 'hidden';
if (this.opciones.habilitarAnimaciones) {
this.modal.classList.add('aparecer');
}
}
cerrar() {
this.estado.visible = false;
this.fondo.classList.remove('activo');
document.body.style.overflow = '';
if (this.opciones.onClose) {
this.opciones.onClose();
}
}
alternarCategoria(categoria) {
this.estado.configuracion[categoria] = !this.estado.configuracion[categoria];
this.actualizarInterfazCategoria(categoria);
}
alternarCookie(cookie) {
// Lógica para alternar cookies individuales
const interruptor = document.querySelector(`[data-cookie="${cookie}"]`);
if (interruptor) {
interruptor.classList.toggle('activo');
}
}
actualizarInterfazCategoria(categoria) {
const interruptor = document.querySelector(`[data-categoria="${categoria}"]`);
if (interruptor) {
if (this.estado.configuracion[categoria]) {
interruptor.classList.add('activo');
} else {
interruptor.classList.remove('activo');
}
}
}
aceptarTodas() {
this.estado.configuracion = {
esenciales: true,
analiticas: true,
marketing: true,
funcional: true
};
this.guardarConsentimiento();
this.cerrar();
if (this.opciones.onAccept) {
this.opciones.onAccept(this.estado.configuracion);
}
}
rechazarOpcionales() {
this.estado.configuracion = {
esenciales: true,
analiticas: false,
marketing: false,
funcional: false
};
this.guardarConsentimiento();
this.cerrar();
if (this.opciones.onReject) {
this.opciones.onReject(this.estado.configuracion);
}
}
guardarPersonalizada() {
this.guardarConsentimiento();
this.cerrar();
if (this.opciones.onSave) {
this.opciones.onSave(this.estado.configuracion);
}
}
guardarConsentimiento() {
const datos = {
configuracion: this.estado.configuracion,
timestamp: Date.now(),
version: '1.0.0'
};
localStorage.setItem(this.opciones.claveAlmacenamiento, JSON.stringify(datos));
}
cargarConfiguracionGuardada() {
try {
const datos = localStorage.getItem(this.opciones.claveAlmacenamiento);
if (datos) {
const configuracionGuardada = JSON.parse(datos);
this.estado.configuracion = configuracionGuardada.configuracion;
this.actualizarInterfaz();
}
} catch (error) {
console.warn('Error al cargar configuración de cookies:', error);
}
}
actualizarInterfaz() {
Object.keys(this.estado.configuracion).forEach(categoria => {
this.actualizarInterfazCategoria(categoria);
});
}
tieneConsentimiento() {
const datos = localStorage.getItem(this.opciones.claveAlmacenamiento);
if (!datos) return false;
try {
const configuracion = JSON.parse(datos);
const ahora = Date.now();
const expiracion = configuracion.timestamp + (this.opciones.diasExpiracion * 24 * 60 * 60 * 1000);
return ahora < expiracion;
} catch (error) {
return false;
}
}
// API pública
obtenerConfiguracion() {
return { ...this.estado.configuracion };
}
establecerConfiguracion(nuevaConfiguracion) {
this.estado.configuracion = { ...this.estado.configuracion, ...nuevaConfiguracion };
this.actualizarInterfaz();
}
reiniciar() {
localStorage.removeItem(this.opciones.claveAlmacenamiento);
this.estado.configuracion = {
esenciales: true,
analiticas: false,
marketing: false,
funcional: false
};
this.actualizarInterfaz();
}
}
// Funciones globales para compatibilidad
let bannerCookiesInstance;
function mostrarBannerCookies() {
if (!bannerCookiesInstance) {
bannerCookiesInstance = new BannerCookiesModalPantallaCompleta({
mostrarAutomaticamente: false,
onAccept: (configuracion) => {
console.log('Cookies aceptadas:', configuracion);
},
onReject: (configuracion) => {
console.log('Cookies rechazadas:', configuracion);
},
onSave: (configuracion) => {
console.log('Configuración guardada:', configuracion);
},
onClose: () => {
console.log('Banner cerrado');
}
});
}
bannerCookiesInstance.mostrar();
}
function cerrarBanner() {
if (bannerCookiesInstance) {
bannerCookiesInstance.cerrar();
}
}
function aceptarTodasLasCookies() {
if (bannerCookiesInstance) {
bannerCookiesInstance.aceptarTodas();
}
}
function rechazarCookiesOpcionales() {
if (bannerCookiesInstance) {
bannerCookiesInstance.rechazarOpcionales();
}
}
function guardarConfiguracionPersonalizada() {
if (bannerCookiesInstance) {
bannerCookiesInstance.guardarPersonalizada();
}
}
function mostrarPoliticaPrivacidad() {
window.open('/politica-privacidad', '_blank');
}
// Inicialización automática
document.addEventListener('DOMContentLoaded', () => {
bannerCookiesInstance = new BannerCookiesModalPantallaCompleta();
});
</script>
</body>
</html>