/*
    Estilos globales para el Sistema de Acreditaciones.
    Define una apariencia profesional, tipografía base y el manejo del fondo dinámico.
*/

body {
    margin: 0;
    padding: 0;
    
    /* Fuente sans-serif estándar y profesional */
    font-family: Arial, Helvetica, sans-serif; 
    
    /* Color de texto principal oscuro */
    color: #333; 
    
    /* IMPORTANTE: El fondo real lo maneja el #background-overlay.
       Ponemos transparente aquí para que se vea el overlay detrás.
    */
    background-color: transparent; 

    /* Diseño base (Centrado para Login/Error 404/etc).
       NOTA: El Dashboard (inicio.css) sobrescribirá 'display' a 'block'.
    */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    /* Asegura que el scroll funcione bien si el contenido es alto */
    box-sizing: border-box;
}

/* NUEVO: Overlay para el fondo dinámico.
   El JavaScript buscará este ID para inyectar la URL de la imagen.
*/
#background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Fondo base (gris claro) por si la imagen tarda en cargar o no existe */
    background-color: #f4f7f6; 
    
    /* Propiedades de la imagen de fondo */
    background-image: none; /* JS lo llenará: url('...') */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Transición suave para cuando cambies de fondo dinámicamente */
    transition: background-image 0.5s ease-in-out, background-color 0.5s ease-in-out;

    /* CRÍTICO: Coloca el fondo detrás de todo el contenido HTML normal.
       El contenido normal suele tener z-index: auto (0).
    */
    z-index: -1; 
    
    /* CRÍTICO: Evita que este div intercepte clics. 
       Permite seleccionar texto o clicar botones que estén "encima" visualmente.
    */
    pointer-events: none;
}

/* Clase de utilidad opcional por si necesitas ocultar 
   el scroll en el login pero tenerlo en el dashboard 
*/
.no-scroll {
    overflow: hidden;
}