/* ==========================================================================
   COOKIE BANNER MINIMALISTA - ALINEACIÓN PERFECTA (MÓVIL Y PC)
   ========================================================================== */

#cookieBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    font-family: 'Dosis', sans-serif;
    
    /* Fondo translúcido (85% de opacidad) y efecto cristal */
    background-color: rgba(253, 253, 253, 0.85); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Soporte para Safari/Mac */
    
    color: #333333;
    box-sizing: border-box;
    border-top: 1px solid rgba(234, 234, 234, 0.5); /* Borde sutil semi-transparente */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    padding: 12px 20px;
}

#cookieBanner #closeIcon,
#cookieBanner .title-wrap {
    display: none !important; 
}

/* El contenedor principal controla todos los elementos a la vez */
#cookieBanner .content-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 10px 15px;
}

/* Magia CSS: "Borramos" la caja del texto para poder alinear Configurar libremente */
#cookieBanner .msg-wrap {
    display: contents !important;
}

/* El texto ocupa el espacio sobrante en PC */
#cookieBanner .msg-wrap p {
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
    color: #555555; 
    font-weight: 500;
    flex: 1 1 auto; /* Absorbe el espacio disponible */
    min-width: 0;
}

#cookieBanner .msg-wrap a {
    text-decoration: underline;
    font-weight: 600;
    color: #111111;
    white-space: nowrap;
}

/* Configurar */
#cookieSettings {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    cursor: pointer;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    order: 2; /* Lo colocamos en la posición 2 */
}

#cookieSettings:hover { color: #111111; }
#cookieSettings svg { width: 12px; height: 12px; margin-right: 4px; fill: currentColor; }

/* Botones */
#cookieBanner .btn-wrap {
    display: flex !important;
    flex-direction: row !important; 
    align-items: center !important;
    gap: 6px;
    flex: 0 0 auto;
    order: 3; /* Lo colocamos en la posición 3, a la derecha */
}

#cookieBanner button {
    padding: 7px 16px; 
    border-radius: 2px;
    font-weight: 600;
    font-size: 11px; 
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Dosis', sans-serif;
    white-space: nowrap !important;
}

#cookieBanner button:hover { opacity: 0.85; }
#cookieAccept { background-color: #111111 !important; color: #ffffff !important; border: 1px solid #111111 !important; }
#cookieReject { background: transparent !important; color: #111111 !important; border: 1px solid #cccccc !important; }
#cookieReject:hover { background: #eaeaea !important; }

/* Menú desplegable de Preferencias */
#cookieTypes { 
    width: 100%; 
    flex: 0 0 100%; 
    order: 4; /* Si se abre, siempre se va al final del todo */
    background: #ffffff; 
    padding: 12px; 
    border: 1px solid #eeeeee; 
    border-radius: 2px; 
    margin-top: 5px; 
    box-sizing: border-box;
}
#cookieTypes h5 { margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; color: #111;}
#cookieTypes ul { list-style: none; padding: 0; margin: 0; }
#cookieTypes ul li { margin-bottom: 6px; font-size: 12px; display: flex; color: #666; }
#cookieTypes ul li input { margin-right: 8px; margin-top: 2px; }

/* === RESPONSIVE: EL AJUSTE PARA TABLETS Y MÓVILES === */
@media (max-width: 800px) {
    #cookieBanner .msg-wrap p {
        flex: 0 0 100%; /* Forzamos a que el texto ocupe toda la fila superior */
        margin-bottom: 5px; /* Separación con los botones */
    }
    #cookieSettings {
        margin-right: auto; /* Empuja los botones mágicamente a la derecha */
    }
}