body {
    background-color: var(--fondo-principal);
    margin: 0;
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--texto-principal);
    
    /* Importante: position relative para que el pseudo-elemento absoluto funcione bien */
    position: relative;
    z-index: 0;
}

/* Pseudo-elemento para la imagen de fondo */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* La imagen solicitada */
    background-image: url('/frontend/assets/fondo-principal/fondoPrincipal.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Esta es la clave: una opacidad muy baja hace que el fondo se mezcle perfectamente con var(--fondo-principal) ya sea negro o blanco */
    opacity: 0.15; 
    
    /* Lo enviamos al fondo del todo para que no estorbe los clics */
    z-index: -1;
    pointer-events: none;
}