@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600&display=swap&display=swap');

/********* HEADER ********/

/********* HEADER - LOGOS SUPERIORES ********/

header .barra-superior-logos{
    margin-top: 40px;
    margin-bottom: 40px;
    height: 50px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

header .barra-superior-logos table{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

header .barra-superior-logos .img-logo-izquierdo img{
    height: 50px;
}

@media (min-width: 0px) and (max-width: 768px) {
    header .barra-superior-logos .img-logo-derecho {
        text-align: center;
    }

    header .barra-superior-logos .img-logo-derecho img{
        height: 60px;
    }
}

@media (min-width:768px) {
    header .barra-superior-logos .img-logo-derecho {
        text-align: right;
    }

    header .barra-superior-logos .img-logo-derecho img{
        height: 50px;
    }
}

/********* HEADER - DATOS USUARIOS ********/

header .barra-superior-usuario{
    min-height: 50px;
    background: #E6EFFD 0% 0% no-repeat padding-box;
    opacity: 1;
    font: normal normal 500 12pt/12pt 'Work Sans';
    color: #004884;    
    margin-bottom: 15px;
}

header .barra-superior-usuario table {
    width: 92%;
    margin-left: auto;
    margin-right: auto;   
    min-height: 50px;    
}

header .barra-superior-usuario i{
    font-size: 16pt;
}

header .barra-superior-usuario a{
    font: normal normal 500 12pt/12pt 'Work Sans';
    color: #004884;    
    text-decoration: none;
    vertical-align: middle;
}

header .barra-superior-usuario a:hover{
    font: normal normal 500 12pt/12pt 'Work Sans';
    color: #004884;
    text-decoration: none;
}

header .barra-superior-usuario .titulo-autoridad{
    width: 1%;
    text-align: right;
}

header .barra-superior-usuario .titulo-usuario{
    width: 1%;
    text-align: right;
}

header .barra-superior-usuario .fecha{
    width: 33%;
    text-align: left;
}

header .barra-superior-usuario .autoridad{
    width: 20%;
    text-align: left;
}

header .barra-superior-usuario .usuario{
    width: 20%;
    text-align: left;
}

header .barra-superior-usuario .salir{
    width: 15%;
    text-align: right;   
}


@media (min-width: 0px) and (max-width: 768px) {
    header .barra-superior-usuario .fecha{
        display: none;
    }

    header .barra-superior-usuario .titulo-autoridad{
       display: none;
    }

    header .barra-superior-usuario .autoridad{
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    header .barra-superior-usuario .titulo-autoridad{
       display: none;
    }

    header .barra-superior-usuario .autoridad{
        display: none;
    }
}

/********* HEADER - MIGA DE PAN ********/

header .miga {
    font: normal normal 500 14pt/14pt 'Work Sans';
    color: #004884;    
    margin-bottom: 20px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

header .miga a{
    font: normal normal 500 14pt/14pt 'Work Sans';
    color: #004884;    
    text-decoration: underline;
}

header .miga a:hover{
    font: normal normal 500 14pt/14pt 'Work Sans';
    color: #004884;    
    text-decoration: underline;
}

/********* HEADER - TITULO ********/

header .titulo-aplicativo {
    color: #004884;    
    margin-bottom: 20px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 0px) and (max-width: 768px) {
    header .titulo-aplicativo {
        font: normal normal 700 22pt/22pt Monserrat;
    }
}

@media (min-width: 768px) {
    header .titulo-aplicativo {
        font: normal normal 700 28pt/28pt Monserrat;
    }
}

/********* HEADER - MENU ********/

header .menu-principal {
    font: normal normal 400 14pt/14pt Monserrat;
    color: #004884;    
    margin-bottom: 20px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

header .menu-principal .principal{
    width: 100%;
    padding: 0px;
    margin-bottom: 20px;
}

header .menu-principal .principal td{
    padding: 0px;
}

header .menu-principal .principal .opciones td{
    height: 40px;
    text-align: center;
}

header .menu-principal .principal .opciones td a{
    font: normal normal 400 14pt/14pt Monserrat;
    color: #004884; 
    text-decoration: none;
}

header .menu-principal .principal .opciones td a:hover{
    font: normal normal 400 14pt/14pt Monserrat;
    color: #004884; 
    text-decoration: none;
}

header .menu-principal .principal .opciones .opcion{
    padding: 0px;
}

header .menu-principal .principal .opciones .opcion div{
    border-top: 2px solid #E7EBF2;
    border-right: 2px solid #E7EBF2;
    border-left: 2px solid #E7EBF2;
    border-collapse:separate;
    border-spacing: 10px;    
    border-top-left-radius: 15px;
    -moz-border-top-left-radius:15px;
    -webkit-border-top-left-radius: 8px;
    border-top-right-radius: 15px;
    -moz-border-top-right-radius:15px;
    -webkit-border-top-right-radius: 8px;
    height: 40px;
    padding-top: 8.5px;
}

header .menu-principal .principal .opciones .activo div{
    border-top: 2px solid #004884;
    border-right: 2px solid #004884;
    border-left: 2px solid #004884;
    border-collapse:separate;
    background-color: #004884;
    color: #FFFFFF;
}

header .menu-principal .principal .opciones .activo a:hover{
    color: #FFFFFF;
}

header .menu-principal .principal .opciones a:hover div{
    border-top: 2px solid #004884;
    border-right: 2px solid #004884;
    border-left: 2px solid #004884;
    border-collapse:separate;
    background-color: #004884;
    color: #FFFFFF;
}

header .menu-principal .principal .pie td{
    border-bottom: 1px solid #004884;
    height: 5px;
}

header .menu-principal .principal .pie .opcion{
    background: #004884;
    width: 180px;
}

header .menu-principal .principal .pie .espacio{
    width: 15px;
}

header .menu-principal .sub-menus{
    width: 100%;
    padding: 0px;
    margin-bottom: 20px;
}

header .menu-principal .sub-menus .sub-menus-opciones{
    width: 85%;
}

header .menu-principal .sub-menus .sub-menu{
    display: none;
}

header .menu-principal .sub-menus .activo{
    display: block !important;
}

header .menu-principal .sub-menus .sub-menu td{
    text-align: center;
    height: 34px;
}

header .menu-principal .sub-menus .sub-menu .opcion{
    width: 180px;
    padding-left: 5px;
    padding-right: 5px;
}

header .menu-principal .sub-menus .sub-menu .opcion div{
    padding-left: 5px;
    padding-right: 5px;
}

header .menu-principal .sub-menus .sub-menu td a{
    font: normal normal 400 12pt/12pt 'Work Sans';
    color: #3366CC; 
    text-decoration: none;
    background-color: #FFFFFF;   
}

header .menu-principal .sub-menus .sub-menu td a:hover{
    font: normal normal 400 12pt/12pt 'Work Sans';
    color: #3366CC; 
    text-decoration: none;
    background-color: #E6EFFD;       
}

header .menu-principal .sub-menus .sub-menu td a div{
    border: 1px solid #3366CC;
    border-collapse:separate;
    border-spacing: 30px;    
    border-radius: 30px;
    -moz-border-radius:30px;
    -webkit-border-radius: 15px;
    background-color: #FFFFFF; 
    height: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

header .menu-principal .sub-menus .sub-menu td a:hover div{
    background-color: #E6EFFD;       
    border: 1px solid #E6EFFD;
    height: 100%;
}

header .menu-principal .sub-menus .sub-menu .espacio{
    width: 15px;
}

header .menu-principal .sub-menus .accesos {
    text-align: right;
}

header .menu-principal .sub-menus .accesos table{
    width: 200px;
    margin-left: auto;
}

header .menu-principal .sub-menus .accesos td{
    width: 50px;
}


header .menu-principal .menus-desplegable .menu-desplegable{
    width: 85%;
}

header .menu-principal .menus-desplegable .menu-desplegable .button{
    border: 1px solid #004884;
}

.navbar-light .navbar-toggler {
    color: #004884;
    border-color: #004884;
}

header .menu-principal .menus-desplegable .menu-desplegable .principal{
    border: 1px solid #004884;
    margin-top: 10px;
    border-radius: 15px;
    -moz-border-radius:15px;
    -webkit-border-radius: 8px;
    width: 80%;
    min-width: 200px;    
}

header .menu-principal .menus-desplegable .menu-desplegable .principal a{
    font: normal normal 400 14pt/14pt Monserrat;
    font-weight: 400;
    text-decoration: none;
    color: #004884;
}

header .menu-principal .menus-desplegable .menu-desplegable .principal a:hover{
    font: normal normal 400 14pt/14pt Monserrat;
    font-weight: 400;
    text-decoration: none;
    color: #004884;
}

header .menu-principal .menus-desplegable .menu-desplegable .sub-menu{
    border: 1px solid #E2EBf9;
    border-radius: 15px;
    -moz-border-radius:15px;
    -webkit-border-radius: 8px;
    background-color: #E2EBf9;
}

header .menu-principal .menus-desplegable .menu-desplegable .sub-menu a{
    font: normal normal 400 12pt/12pt 'Work Sans';
    font-weight: 400;
    text-decoration: none;
    color: #3366CC;
}

header .menu-principal .menus-desplegable .menu-desplegable .sub-menu a:hover{
    font: normal normal 400 12pt/12pt 'Work Sans';
    font-weight: 400;
    text-decoration: none;
    color: #3366CC;
}


header .menu-principal .menus-desplegable .menu-desplegable li{
    padding: 12px;
}

header .menu-principal .menus-desplegable .accesos {
    text-align: right;
    vertical-align: top;
}

header .menu-principal .menus-desplegable .accesos table{
    width: 200px;
    margin-left: auto;    
}

header .menu-principal .menus-desplegable .accesos td{
    width: 50px;
}




.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: #E9E9E9;
  box-shadow: 0px 0px 4px #E9E9E9;
  opacity: 1 !important;  
  font: normal normal 500 12pt/12pt 'Work Sans';
  color: #4F4F4F;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #E9E9E9;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #E9E9E9;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #E9E9E9;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #E9E9E9;
}


/********* HEADER - CUERPO ********/

main .cuerpo {
    margin-bottom: 50px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}

.seccion-organigrama {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.seccion-organigrama .titulo {
    font: normal normal 600 16pt/16pt Monserrat;
    color: #004884;
    margin-bottom: 30px;
}