@charset "utf-8";
/* CSS Document */


/* Configuration for icon on home title */    
.title_icon
{
   margin-block: clamp(6px, 1vh, 10px) clamp(6px, 1vh, 10px); /* top / bottom */
   width: clamp(24px, 4vh, 64px);
   height: clamp(24px, 4vh, 64px); 
}

/* Configuration for text on home title */    
.title_text
{
  margin-top:  clamp(4px, 0.9vmin, 14px);
  margin-bottom: clamp(3px, 0.8vmin, 12px);
  font-size: clamp(16px, 2.4vmin, 28px);
  font-weight: bold;
  line-height: 1.15;
}


/* "loading" background style */
#loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    z-index: 9999;
}

/* Spinner animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Transparency for element (square) that contains authentication sub elements (texts, inputs, buttons) in index.php files */
.bg-transparent-85
{
  opacity: 0.85;
}

/* silver border for square that contains imput, buttons in authentication files (index.php) */
.border-silver {
    border: 3px solid silver !important;
}


/* gold border for square that contains imput, buttons in authentication files (index.php) */
.border-gold {
    border: 2px solid #bdb06d !important;
}
/* Instructions for all pages in main menu */



/* Define official color of UPR Rio Pierdas Campus */
.UPR_RP_official_red_color
{
  background-color: #e70033;  /* or rgba(231,0,51); */
}


/* Header and footer gradient colors of all modules in portal */
.header_gradient_colors { background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(83,0,17,1) 12%, rgba(231,0,51) 100%); }

.footer_gradient_colors { background: linear-gradient(90deg, rgba(231,0,51) 0%, rgba(83,0,17,1) 87%, rgba(0,0,0,1) 100%); }



/* Used to set authentication square window (right side of window) in index.php files */
.fullrightside {
              height: 100vh;
              width: 50%;

              display: flex; 
              justify-content: right;
              align-items: center;
           }


/* Used to set authentication square window (left side of window) in index.php files */
.fullleftside {
              height: 100vh;
              width: 50%;
              margin-left: 6%;
              display: flex; 
              justify-content: left;
              align-items: center;
           }


/* Configuration for main title DIV in all pages (Inicio, Información del Estudiante, Programa de Clases..)*/
.all_pages_title_div
{
   /* Background color */    
   background: rgba(231,0,51);    
}




/* Settings when resolution width is over 1600px */
/* NOTE: The resolution of my desktop is 1920 x 927   W Batista  */  
@media (min-width: 1601px)
{
    /* Settings for main icon in all pages */
    .all_pages_main_icon
    {
       width: 10px;
       height: 10px    
    }
    
    /* Settings for main title in all pages */
    .all_pages_main_title
    {
       font-size: 14px     
    }
    
    /* Size of image show on the "Procesando.." modal */
    #processing_image
    {
      width:130px;
      height: 130px;      
        
    }
    
    
    /* Font size on all items without any id */
    :root 
    {
      font-size: 16px;  
    }
    
    
   
}



/* Settings when resolution width is over 601px and below 1600px */
/* NOTE: The resolution of my laptop is 1536 x 711   W Batista  */ 
@media (min-width: 1301px) and (max-width: 1600px)
{
    /* Settings for main icon in all pages */
    .all_pages_main_icon
    {
       margin-top: 5%;
       margin-bottom: 7px;    
       width: 25px;
       height: 25px    
    }
    
    /* Settings for main title in all pages */
    .all_pages_main_title
    {
       font-size: 20px; 
       font-weight: bold;       
    }
    
    /* Size of image show on the "Procesando.." modal */
    #processing_image
    {
      width:100px;
      height: 100px;      
        
    }
    
    /* Font size on all items without any id */
    :root 
    {
      font-size: 13px;  
    }
    
}



/* Settings when resolution width is over 601px and below 1600px */
/* NOTE: The resolution of my ipad is 1080 x 695   W Batista  */  
@media (min-width: 601px) and (max-width: 1300px)
{
    /* Settings for main icon in all pages */
    .all_pages_main_icon
    {
       margin-top: 6px;
       margin-bottom: 5px;    
       width: 20px;
       height: 20px    
    }
    
    /* Settings for main title in all pages */
    .all_pages_main_title
    {
       font-size: 15px; 
       font-weight: bold;       
    }
    
    /* Size of image show on the "Procesando.." modal */
    #processing_image
    {
      width:20px;
      height: 20px;      
        
    }
    
        
    /* Font size on all items without any id */
    :root 
    {
      font-size: 11px;  
    }
    
}
   
/* Settings when resolution width is less than 601px */
@media (max-width: 600px)
{
    /* Settings for main icon in all pages */
    .all_pages_main_icon
    {
       margin-top: 5px;
       margin-bottom: 4px;    
       width: 15px;
       height: 15px    
    }
    
    /* Settings for main title in all pages */
    .all_pages_main_title
    {
       font-size: 10px; 
       font-weight: bold;       
    }
  
    /* Font size on all items without any id */
    :root 
    {
      font-size: 10px;  
    } 
    
    
    
}

/* Centrar el bloque custom en el overlay */
.loadingoverlay {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Contenedor gallo + texto */
.miupi-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Imagen del gallo */
.miupi-loader-img {
  max-width: 160px;
  height: auto;
  margin-bottom: 6px;   /* separación con el texto */
}

/* Texto "Cargando..." */
.miupi-loader-text {
  color: #ffffff;
  font-size: 22px;      /* ajusta a 16 o 14 si lo quieres más pequeño */
  line-height: 1.2;
}