/* ==========================================================================
   Variables de Personalización y Diseño del Banner
   ================================================================---------- */
:root {
    --cookie-banner-background: #222222;
    --cookie-banner-text: #ffffff;
    --cookie-banner-button-background: #ffffff;
    --cookie-banner-button-text: #222222;
    --cookie-banner-button-hover: #e0e0e0;
    
    /* Centralización de valores personalizables adicionales */
    --cookie-banner-radius: 8px;
    --cookie-banner-padding: 16px 24px;
    --cookie-banner-max-width: 1200px;
    --cookie-banner-gap: 20px;
    --cookie-banner-font-size: 0.95rem;
    --cookie-banner-anim-duration: 0.4s;
}

/* ==========================================================================
   Estilos Aislados del Componente (Evita conflictos globales)
   ================================================================---------- */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    box-sizing: border-box;
    background-color: var(--cookie-banner-background);
    color: var(--cookie-banner-text);
    padding: var(--cookie-banner-padding);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: var(--cookie-banner-font-size);
    
    /* Animación de entrada inicial (estado oculto antes de mostrarse) */
    transform: translateY(100%);
    opacity: 0;
    transition: transform var(--cookie-banner-anim-duration) cubic-bezier(0.16, 1, 0.3, 1),
                opacity var(--cookie-banner-anim-duration) ease-in-out;
    will-change: transform, opacity;
}

/* Clase activada por JS para mostrar el banner suavemente */
.cookie-consent-banner.cookie-consent-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Clase para la transición suave de salida al aceptar */
.cookie-consent-banner.cookie-consent-hiding {
    transform: translateY(100%);
    opacity: 0;
}

/* Contenedor interno flexible para adaptación responsive */
.cookie-consent-content {
    max-width: var(--cookie-banner-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cookie-banner-gap);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .cookie-consent-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Estilo del texto dentro del banner */
.cookie-consent-banner .cookie-consent-text {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    flex: 1;
}

/* Estilo del botón de aceptación */
.cookie-consent-banner .cookie-consent-button {
    background-color: var(--cookie-banner-button-background);
    color: var(--cookie-banner-button-text);
    border: none;
    border-radius: var(--cookie-banner-radius);
    padding: 10px 22px;
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.cookie-consent-banner .cookie-consent-button:hover {
    background-color: var(--cookie-banner-button-hover);
}

.cookie-consent-banner .cookie-consent-button:active {
    transform: scale(0.98);
}

/* Accesibilidad: Estado de foco visible por teclado */
.cookie-consent-banner .cookie-consent-button:focus-visible {
    outline: 3px solid var(--cookie-banner-button-text);
    outline-offset: 2px;
}

/* Accesibilidad: Respeto estricto a usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .cookie-consent-banner,
    .cookie-consent-banner.cookie-consent-visible,
    .cookie-consent-banner.cookie-consent-hiding {
        transition: none !important;
        transform: translateY(0) !important;
    }
}